게임 상세 페이지의 목적은 두 가지입니다. 게임을 실행해야 하고, 실행 전에는 규칙·조작·관련 글을 읽을 수 있어야 합니다. 페이지가 열리자마자 외부 게임 iframe을 삽입하면 이 두 목적이 서로 경쟁합니다. 그래서 이 사이트는 썸네일과 게임 불러오기 버튼을 먼저 보여 주고, 이용자가 누른 뒤 iframe을 만듭니다.
즉시 로드의 비용
iframe은 별도의 문서, 스크립트, 이미지와 오디오를 가져옵니다. 목록이나 소개만 보려는 이용자에게도 게임 전체 다운로드가 시작되면 초기 화면이 느려지고 데이터 사용량이 늘어납니다. 여러 게임을 한 페이지에 넣을 경우 각 문서의 실행 환경까지 동시에 만들어 메모리 사용도 커질 수 있습니다.
게임이 키보드 입력이나 소리를 받는 경우에는 페이지를 읽는 도중 예기치 않게 포커스를 가져갈 가능성도 있습니다. 광고나 분석 스크립트가 게임 쪽에 있다면 이용자가 플레이를 선택하기 전에 제3자 요청이 발생할 수도 있습니다.
클릭 후 로드 흐름
이 사이트의 로더는 다음 순서로 동작합니다.
- 서버가 만든 정적 HTML에는 썸네일, 설명과 버튼만 둡니다.
- 버튼에 게임 주소와 제목을 데이터 속성으로 넣습니다.
- 클릭하면 새 iframe 요소를 만들고
src,title,allow,referrerPolicy를 설정합니다. - 썸네일 영역을 iframe으로 한 번만 교체합니다.
- 새 게임 프레임으로 키보드 포커스를 옮깁니다.
버튼이 실제 <button> 요소라 키보드와 보조기기에서도 의도가 분명합니다. iframe의 title은 “어떤 게임을 담은 프레임인지” 설명하며, 전체화면과 게임패드처럼 필요한 권한만 allow에 적습니다.
원본 페이지 링크가 필요한 이유
임베드는 외부 서버의 보안 헤더, 브라우저 저장공간 정책, 네트워크 차단에 영향을 받습니다. 오늘 정상인 게임도 배포 설정이 바뀌면 iframe 안에서 열리지 않을 수 있습니다. 따라서 같은 영역에 원본 페이지에서 열기 링크를 둡니다. 이 링크는 임베드 실패를 숨기는 가짜 대체물이 아니라, 전체화면이나 독립 탭을 선호하는 이용자에게도 유효한 두 번째 실행 경로입니다.
광고와 실행 영역을 분리하기
게임 플레이 중에는 시선과 손이 화면 중앙에 집중됩니다. 이 영역 가까이에 광고 버튼처럼 보이는 요소를 두면 오클릭 위험이 커집니다. 승인 뒤 광고를 추가하더라도 게임 로더 내부, 조작 버튼 주변, 새 게임·다음 단계 버튼 사이에는 배치하지 않는 것이 원칙입니다. 콘텐츠 설명 영역과 플레이 영역을 구조적으로 나누면 이 원칙을 구현 단계에서 지키기 쉬워집니다.