게임 상세 페이지에는 두 가지 할 일이 있습니다. 게임을 실행해야 하고, 시작하기 전에는 규칙과 조작법, 관련 공략을 읽을 수 있어야 합니다. 페이지가 열리자마자 외부 게임을 아이프레임(iframe)으로 불러오면 이 두 가지가 서로 방해할 수 있습니다. 그래서 이 사이트는 먼저 썸네일과 게임 시작하기 버튼만 보여 주고, 버튼을 누른 뒤에 게임 서버로 연결합니다.
페이지와 함께 불러오면 생기는 일
아이프레임은 안에서 또 하나의 웹 문서를 엽니다. 스크립트와 이미지, 소리 파일까지 한꺼번에 가져올 수 있습니다. 게임 소개만 읽으려는 사람에게도 전체 다운로드를 시작하면 첫 화면이 느려지고 데이터도 더 많이 씁니다. 한 페이지에 여러 게임이 있다면 각각의 실행 환경까지 동시에 만들어 메모리 사용량도 커집니다.
게임이 키보드 입력이나 소리를 사용하는 경우에는 글을 읽던 중에 예상치 못하게 입력 초점을 가져갈 수도 있습니다. 게임 쪽에 광고나 방문 분석 도구가 있다면, 아직 플레이를 고르지 않은 상태에서 외부 요청이 먼저 나갈 수도 있습니다.
버튼을 누른 뒤 연결되는 순서
이 사이트에서는 다음과 같이 동작합니다.
- 처음 받은 정적 페이지에는 썸네일과 설명, 버튼만 있습니다.
- 버튼에는 게임 주소와 제목을 보이지 않는 데이터로 넣어 둡니다.
- 버튼을 누르면 새 아이프레임을 만들고 주소와 제목, 필요한 권한을 설정합니다.
- 썸네일이 있던 자리를 아이프레임으로 한 번만 바꿉니다.
- 키보드로 바로 조작할 수 있도록 게임 화면으로 입력 초점을 옮깁니다.
실행 버튼은 실제 <button> 요소를 사용해 키보드와 보조기기에서도 용도가 분명합니다. 아이프레임의 title에는 어떤 게임 화면인지 적고, 전체화면과 게임패드처럼 꼭 필요한 권한만 allow 속성에 넣습니다.
새 창에서 여는 링크도 함께 둡니다
아이프레임은 외부 서버의 보안 설정과 브라우저의 저장공간 정책, 네트워크 차단에 영향을 받습니다. 오늘 잘 열리던 게임도 배포 설정이 바뀌면 페이지 안에서 실행되지 않을 수 있습니다. 그래서 실행 영역에 새 창에서 열기 링크도 함께 둡니다. 오류를 감추기 위한 임시방편이 아니라, 전체화면이나 독립된 탭을 선호하는 사람에게도 필요한 두 번째 실행 방법입니다.
광고와 게임 화면을 떨어뜨립니다
플레이 중에는 시선과 손이 화면 가운데에 몰립니다. 이 가까이에 광고처럼 눌리는 요소가 있으면 실수로 광고를 누를 위험이 커집니다. 나중에 광고를 넣더라도 게임 화면 안쪽, 조작 버튼 주변, 새 게임이나 다음 단계 버튼 사이에는 배치하지 않습니다. 설명을 읽는 영역과 게임을 조작하는 영역을 처음부터 나누면 이 원칙을 지키기도 쉬워집니다.