알아보기 쉬운 플레이 영역을 확보하세요
화면을 실제 플레이 영역, 상시 상태 표시, 일시적인 안내의 세 부분으로 나누어 그려보세요. 중앙은 핵심 플레이에 먼저 배정하고, 점수·목숨·일시 정지 정보는 위험 요소나 목표를 가리지 않으면서 한눈에 볼 수 있는 곳에 놓으세요. 세로로 진행하는 플랫폼 게임은 캐릭터 위쪽에 다음 착지 지점이 보이게 합니다. 단어 퍼즐은 힌트와 현재 조작하는 글자 줄에 충분한 폭을 확보하고, 겹쳐 뜨는 UI가 그 공간을 침범하지 않게 하세요.
추측된 핸드셋 해상도보다는 뷰포트 너비를 사용하십시오. MDN은 뷰포트 메타 요소가 모바일 브라우저에 페이지 레이아웃에 장치 너비를 사용하도록 지시하는 방법을 설명합니다. 플레이필드를 별도로 확인하세요. 올바르게 구성된 페이지에는 여전히 고정된 크기를 가정하는 캔버스나 패널이 포함될 수 있습니다.
게임 적응 방법 선택
화면에 맞춰 세계의 배치를 바꿀지, 카메라가 움직임을 따라갈지, 남는 공간을 여백으로 둘지 정하세요. 열 수가 달라져도 규칙이 성립한다면 재배치를 사용할 수 있고, 화면보다 넓은 세계에는 카메라가 적합합니다. 가로세로 비율을 고정해야 한다면 레터박스 여백으로 설계한 플레이 영역을 유지하세요. 모든 픽셀을 채우려고 캐릭터를 늘리거나 목표 위치를 바꾸지 마세요.
조작 요소를 가장자리에 고정하기 전에 시스템 UI와 노치를 확인하세요. Apple의 레이아웃 가이드는 안전 영역을 설명하며, 중요한 내용이 기기의 하드웨어 영역에 가리지 않도록 권장합니다. Android에서 휴대폰과 태블릿을 모두 지원한다면 각각의 화면 비율을 따로 테스트하세요. 세로 전용 게임이라도 기기를 돌렸을 때 어떻게 배치할지 정해, 화면이 반쯤 잘린 상태가 되지 않도록 해야 합니다.
하나의 전체 라운드를 검토합니다.
좁은 휴대폰 화면과 더 넓은 기기 화면에서 튜토리얼, 동작이 많은 순간, 종료 화면을 확인하세요. 각 상황에서 목표, 당장의 위험, 현재 상태를 한 번에 볼 수 있는지 점검합니다. 스테이지를 추가하기 전에 잘리는 요소와 정보의 시각적 우선순위를 수정하세요.
세로 모바일 게임 디자인 관련 질문
세로 게임이 가로 모드도 지원해야 하나요?
게임 디자인이 이점을 얻는 경우에만 가능합니다. 세로 전용 결정은 유효하지만 특정 방향 잠금에 의존하기보다는 기기가 회전할 때 사용 가능한 레이아웃을 제공합니다.
HUD는 항상 상단에 있어야 합니까?
아니요. 핵심 플레이를 방해하지 않으면서 계속 볼 수 있는 곳에 정보를 놓으세요. 적절한 위치는 플레이 영역에 따라 달라지므로 실제 플레이 중, UI가 겹쳐 뜰 때, 종료 화면에서 각각 테스트하세요.
추가 읽을거리
오래된 정보를 발견하셨나요? 수정 사항 제보