보기 좋은 이미지와 플레이 가능한 이미지
실사에 가까운 분위기만으로는 충분하지 않습니다. 상호작용할 물체가 배경에 묻히지 않아야 하고, 모바일 세로 화면에서도 문과 이동 방향이 한눈에 구분되어야 합니다.
프런트 로비는 열쇠함, 인터폰, 피난안내도, 숫자 패널이 서로 겹치지 않도록 실제 이미지 구역에 맞춰 상호작용 범위를 다시 나눴습니다.
상태 변화
퍼즐 전후의 공간은 같은 구도를 유지해야 플레이어가 무엇이 달라졌는지 알 수 있습니다. 셔터가 올라가거나 보관함이 열리는 순간에는 새 이미지를 덧붙이는 대신, 가능한 한 원래 공간에 자연스럽게 포함된 상태 이미지를 사용합니다.
짧은 애니메이션도 검토했지만 정지 이미지보다 품질과 연결성이 낮으면 몰입을 해친다고 판단해 제거했습니다. 움직임은 필요한 순간에만 효과음과 상태 전환으로 표현합니다.
모바일 우선 검수
PC에서 넓게 보이는 배선반도 모바일에서는 좌우 스크롤 없이 이해되어야 합니다. 그래서 긴 가로형 회로를 세 단계의 세로 흐름으로 재구성하고, 케이블을 직접 끌어 소켓에 꽂는 조작을 유지했습니다.
이미지와 상호작용 범위를 함께 설계한다
배경 이미지와 조사 영역은 함께 설계해야 합니다. 손잡이, 서랍과 숫자 패널의 위치가 배경 속에서 구분되어야 하며, 터치 영역은 그 물체를 선택한다는 의도와 맞아야 합니다. 작은 열쇠나 스위치는 보이는 윤곽보다 넓은 영역이 필요할 수 있지만, 이때도 옆 물체를 함께 선택하지 않도록 간격을 확보해야 합니다. 기준은 모든 영역을 이미지 안쪽으로 제한하는 것이 아니라, 누르기 쉬우면서도 어느 물체가 반응할지 예측할 수 있게 만드는 것입니다.
PC에서는 마우스를 올렸을 때 조사 가능 여부를 짐작할 수 있지만 모바일에는 호버가 없습니다. 첫 터치가 즉시 행동으로 이어지는 물체와 설명을 먼저 보여줘야 하는 물체를 구분하고, 빈 공간 터치음과 실제 상호작용음을 달리해 결과를 전달합니다. 화면을 확대하거나 주소창 높이가 달라져도 핵심 이동 버튼과 보관함이 가려지지 않는지 세로형 기기 여러 비율에서 확인합니다.