# 세로 레이아웃이 게임의 주요 결정을 뒷받침하도록 하세요.

> 콘텐츠나 가로 지원을 추가하기 전에 하나의 명확한 플레이 필드, 읽을 수 있는 상태, 변경되는 휴대폰 뷰포트를 중심으로 세로 중심 게임을 형성하세요.

- URL: https://oneshotgems.ai/ko/topics/portrait-mobile-game-design
- 카테고리: 게임 개발자용
- 유형: 가이드
- 업데이트일: 2026년 10월 5일

세로형 게임은 가로 화면을 긴 직사각형 안에 억지로 줄여 넣는 것이 아닙니다. 플레이어가 다음 몇 초 동안 무엇을 보고 어떤 행동을 해야 하는지 정한 뒤, 필요한 요소가 동시에 보이도록 배치하세요. 긴 레벨을 만들기 전에 지원하는 가장 좁은 표시 영역에서 한 가지 플레이 상황을 먼저 시험하세요.

## 알아보기 쉬운 플레이 영역을 확보하세요

화면을 실제 플레이 영역, 상시 상태 표시, 일시적인 안내의 세 부분으로 나누어 그려보세요. 중앙은 핵심 플레이에 먼저 배정하고, 점수·목숨·일시 정지 정보는 위험 요소나 목표를 가리지 않으면서 한눈에 볼 수 있는 곳에 놓으세요. 세로로 진행하는 플랫폼 게임은 캐릭터 위쪽에 다음 착지 지점이 보이게 합니다. 단어 퍼즐은 힌트와 현재 조작하는 글자 줄에 충분한 폭을 확보하고, 겹쳐 뜨는 UI가 그 공간을 침범하지 않게 하세요.

추측된 핸드셋 해상도보다는 뷰포트 너비를 사용하십시오. MDN은 뷰포트 메타 요소가 모바일 브라우저에 페이지 레이아웃에 장치 너비를 사용하도록 지시하는 방법을 설명합니다. 플레이필드를 별도로 확인하세요. 올바르게 구성된 페이지에는 여전히 고정된 크기를 가정하는 캔버스나 패널이 포함될 수 있습니다.

## 게임 적응 방법 선택

화면에 맞춰 세계의 배치를 바꿀지, 카메라가 움직임을 따라갈지, 남는 공간을 여백으로 둘지 정하세요. 열 수가 달라져도 규칙이 성립한다면 재배치를 사용할 수 있고, 화면보다 넓은 세계에는 카메라가 적합합니다. 가로세로 비율을 고정해야 한다면 레터박스 여백으로 설계한 플레이 영역을 유지하세요. 모든 픽셀을 채우려고 캐릭터를 늘리거나 목표 위치를 바꾸지 마세요.

조작 요소를 가장자리에 고정하기 전에 시스템 UI와 노치를 확인하세요. Apple의 레이아웃 가이드는 안전 영역을 설명하며, 중요한 내용이 기기의 하드웨어 영역에 가리지 않도록 권장합니다. Android에서 휴대폰과 태블릿을 모두 지원한다면 각각의 화면 비율을 따로 테스트하세요. 세로 전용 게임이라도 기기를 돌렸을 때 어떻게 배치할지 정해, 화면이 반쯤 잘린 상태가 되지 않도록 해야 합니다.

## 하나의 전체 라운드를 검토합니다.

좁은 휴대폰 화면과 더 넓은 기기 화면에서 튜토리얼, 동작이 많은 순간, 종료 화면을 확인하세요. 각 상황에서 목표, 당장의 위험, 현재 상태를 한 번에 볼 수 있는지 점검합니다. 스테이지를 추가하기 전에 잘리는 요소와 정보의 시각적 우선순위를 수정하세요.

## 자주 묻는 질문

**세로 게임이 가로 모드도 지원해야 하나요?** 게임 디자인이 이점을 얻는 경우에만 가능합니다. 세로 전용 결정은 유효하지만 특정 방향 잠금에 의존하기보다는 기기가 회전할 때 사용 가능한 레이아웃을 제공합니다.

**HUD는 항상 상단에 있어야 합니까?** 아니요. 핵심 플레이를 방해하지 않으면서 계속 볼 수 있는 곳에 정보를 놓으세요. 적절한 위치는 플레이 영역에 따라 달라지므로 실제 플레이 중, UI가 겹쳐 뜰 때, 종료 화면에서 각각 테스트하세요.

## 궁금한 것을 더 찾아보세요

- [모바일 게임 개발: 먼저 대상을 선택하세요](https://oneshotgems.ai/ko/topics/mobile-game-development): 모바일 전용 기능을 추가하기 전에 휴대폰용 게임을 계획하고, 브라우저용과 네이티브 앱 빌드를 비교하며, 끝까지 진행할 수 있는 개발 방식을 선택하세요.
- [브라우저 게임의 반응형 레이아웃 만들기](https://oneshotgems.ai/ko/topics/responsive-game-layouts): 시뮬레이션 상태를 화면 크기에 연결하지 않고 게임 표면을 해당 컨테이너에 적용하고 변경되는 뷰포트에서 레이아웃을 테스트합니다.
- [브라우저 게임의 화면 방향 변경 처리](https://oneshotgems.ai/ko/topics/game-orientation-changes): 방향을 게임 다시 시작으로 처리하지 않고 레이아웃과 입력 매핑을 다시 계산하여 장치가 회전할 때 플레이를 읽을 수 있도록 유지합니다.
- [각 작업을 설명하는 게임 피드백 디자인](https://oneshotgems.ai/ko/topics/game-feedback-design): 플레이 영역을 가리지 않으면서 무엇이 달라졌고 왜 달라졌는지, 다음에 무엇을 할 수 있는지 게임의 반응으로 알려 주세요.

## 추가 읽을거리

- [MDN 뷰포트 메타 요소](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport)
- [Apple 휴먼 인터페이스 지침: 레이아웃](https://developer.apple.com/design/human-interface-guidelines/layout)
- [Android 게임 디자인 가이드라인](https://developer.android.com/games/design/overview?hl=en)

---
대표 페이지: https://oneshotgems.ai/ko/topics/portrait-mobile-game-design