화면을 줄이는 것만으로는 부족했다
PC에서는 방 이미지 옆에 현재 목표를 표시할 수 있지만 모바일에서 같은 구성을 유지하면 실제 조사 영역이 너무 작아졌습니다. 목표 카드는 공간을 이해한 뒤에도 계속 화면을 차지했고, 세로로 긴 페이지에서 언어 변경 버튼이 스크롤을 따라와 중요한 단서를 가리는 문제도 있었습니다. 모바일은 단순 축소판이 아니라 플레이 순서를 다시 배치해야 했습니다.
현재 목표는 필요한 순간에 확인할 수 있는 상단 기능으로 옮기고 PC의 고정 보조 카드는 제거했습니다. 언어 전환은 첫 플레이어 설정 페이지의 카드 오른쪽 위에만 배치해 게임이 시작된 뒤에는 조사 화면을 침범하지 않습니다. 선택한 언어는 해당 언어의 게임과 공식 안내 URL로 일관되게 이어집니다.
보이는 물체보다 넓은 조사 영역
작은 열쇠나 스위치를 이미지 크기 그대로 누르게 하면 손가락으로 선택하기 어렵습니다. 오브젝트마다 투명한 최소 터치 영역을 두되 주변 물체와 겹치지 않게 실제 화면 비율을 기준으로 조정했습니다. 빈 공간은 클릭음, 조사 가능한 오브젝트는 터치음으로 구분해 선택이 성공했는지 즉시 알 수 있게 했습니다.
다만 모든 요소에 공통음을 붙이자 비밀번호와 배선처럼 자체 효과가 있는 퍼즐에서 소리가 두 번 났습니다. 공통 입력음은 실제 기능성 효과가 없는 조사와 팝업에만 적용하고, 숫자 키·열쇠·도구·배선은 각각의 소리가 한 번만 호출되도록 예외를 명시했습니다.
보관함과 팝업
보관함 물건을 누르면 상세 이미지와 설명, 사용할 수 있는 경우 사용 버튼이 표시됩니다. 열기, 닫기, 사용, 팝업 X는 모두 같은 짧은 터치음으로 통일해 인터페이스의 언어를 단순하게 만들었습니다. 이미 소비된 물건은 보관함에서 사라지고, 사용할 수 없는 장소에서는 물건을 잃지 않은 채 이유를 알려줍니다.
팝업은 모바일 화면보다 커지지 않으며 긴 설명은 내부에서 읽을 수 있도록 했습니다. 닫기 버튼은 오른쪽 위에 충분한 판정 크기를 주고, 배경을 눌러 닫을 수 있는 경우에도 퍼즐 입력으로 전달되지 않도록 이벤트 전파를 막았습니다. 사망과 스테이지 완료처럼 중요한 화면은 잘못된 배경 터치로 사라지지 않습니다.
세로 스크롤과 안전 영역
모바일 브라우저 주소창 높이는 스크롤 중 계속 바뀌므로 고정 픽셀 높이만 사용하면 하단 보관함과 나가기 버튼이 잘릴 수 있습니다. 동적 뷰포트 단위와 하단 안전 영역을 함께 사용하고, 콘텐츠가 길면 전체 페이지가 자연스럽게 스크롤되도록 했습니다. 가로 스크롤이 생기는 이미지는 최대 너비와 오버플로를 다시 확인했습니다.
테스트는 작은 스마트폰 너비, 일반 모바일, 태블릿과 PC를 기준으로 합니다. 플레이어 설정, 다섯 스테이지, 사망, 결과 공유까지 한 번씩 직접 통과하며 언어 전환, 오디오 버튼, 보관함, 팝업과 하단 버튼이 가려지지 않는지 확인합니다.
현재 기준
현재 모바일 UI의 기준은 정보를 모두 보여주는 것이 아니라 필요한 행동을 방해하지 않는 것입니다. 조사 대상은 충분히 누를 수 있어야 하고, 한 번의 터치는 한 번만 처리되어야 하며, 화면에 보이는 상태와 저장된 게임 상태가 달라서는 안 됩니다. 새 스테이지도 먼저 모바일 세로 화면에서 핵심 동선을 검수한 뒤 PC 보조 정보를 추가합니다.