모바일 게임 UI는 터치 기반 인터랙션과 다양한 화면 크기를 동시에 고려해야 하는 영역입니다. 현재 기준 대부분의 모바일 게임은 1920×1080 해상도를 기준으로 설계되며, 버튼 최소 크기는 44×44pt를 준수해야 정확한 터치 입력이 가능합니다. 이 글에서는 해상도 설정부터 터치 영역 최적화, 안전 영역 처리, UI 레이아웃 전략까지 실무에서 바로 적용 가능한 게임 인터페이스 설계 방법을 다룹니다.
모바일 게임 기준 해상도와 화면 비율
모바일 게임 UI 설계의 첫 단계는 기준 해상도를 결정하는 것입니다. 작성 시점 기준 안드로이드와 iOS 기기 대부분이 FHD(1920×1080) 이상의 해상도를 지원하며, 이를 기준으로 UI를 설계한 후 다양한 화면 크기에 대응하는 방식이 일반적입니다.
Unity에서는 Canvas Scaler 컴포넌트를 통해 기준 해상도를 설정할 수 있습니다. UI Scale Mode를 ‘Scale with Screen Size’로 설정하고 Reference Resolution을 1920×1080으로 지정하면, 실제 기기 해상도가 달라도 UI 요소들이 비율에 맞게 확대·축소됩니다. Match 값은 화면 비율에 따라 조정하는데, 세로 모드 게임은 0.5, 가로 모드 게임은 Width 쪽에 가중치를 두는 것이 효과적입니다.
화면 비율은 16:9를 기본으로 하되, 최근 스마트폰의 18:9, 19.5:9, 20:9 비율도 고려해야 합니다. 갤럭시 S24는 19.5:9, 아이폰 15 Pro는 19.5:9 비율을 사용하므로, UI 핵심 요소는 16:9 영역 안에 배치하고 양쪽 여백은 장식 요소나 확장 가능한 배경으로 채우는 전략이 유효합니다.
| 해상도 | 화면 비율 | 적용 기기 예시 | UI 설계 전략 |
|---|---|---|---|
| 1920×1080 | 16:9 | 구형 안드로이드 | 기준 해상도 |
| 2340×1080 | 19.5:9 | 갤럭시 S 시리즈 | 상하 여백 확장 |
| 2436×1125 | 19.5:9 | 아이폰 X 이상 | 노치 영역 회피 |
| 2960×1440 | 18.5:9 | 갤럭시 Note | QHD 스케일 적용 |
터치 타겟 크기와 간격 기준
게임 UI에서 가장 중요한 요소는 터치 타겟의 크기입니다. 구글의 Material Design 가이드라인은 터치 타겟 최소 크기를 48×48dp로 권장하며, 애플의 Human Interface Guidelines는 44×44pt를 제시합니다. 게임 환경에서는 사용자가 빠르게 움직이는 상황을 고려해 이보다 10-20% 큰 크기를 적용하는 것이 안전합니다.
실제 픽셀 크기로 환산하면 1920×1080 해상도에서 버튼 하나는 최소 120×120px 정도를 차지해야 합니다. 주요 액션 버튼(공격, 스킬, 점프 등)은 150×150px 이상으로 설계하고, 인벤토리 아이템이나 메뉴 버튼처럼 정확도가 중요한 요소는 최소 기준을 준수하되 시각적 피드백을 강화하는 방식으로 보완합니다.
버튼 간 간격은 최소 8dp(약 20px) 이상 유지해야 오터치를 방지할 수 있습니다. RPG 게임의 스킬 슬롯처럼 여러 버튼이 인접한 경우, 각 버튼 사이 여백을 16dp(약 40px)로 확보하면 사용자가 의도한 버튼을 정확히 누를 확률이 높아집니다. Unity UI에서는 Horizontal Layout Group 컴포넌트의 Spacing 값으로 이를 제어할 수 있습니다.
손가락 터치는 시각적 버튼 영역보다 넓게 인식되므로, 실제 터치 영역(Collider 또는 Raycast Target)을 시각 요소보다 10-15% 크게 설정하는 테크닉도 유용합니다. 이를 통해 버튼 경계 부근을 터치해도 정상적으로 입력이 인식되도록 만들 수 있습니다.
안전 영역과 노치 대응 전략
최근 스마트폰은 노치(Notch)나 펀치홀(Punch Hole), 하단 네비게이션 바 등으로 인해 화면 전체를 UI로 사용할 수 없습니다. 안전 영역(Safe Area)은 이러한 요소를 피해 UI를 배치할 수 있는 영역을 의미하며, Unity에서는 Screen.safeArea 속성으로 접근할 수 있습니다.
아이폰 X 이상 기종의 노치 영역은 상단 약 30-44px, 하단 홈 인디케이터는 약 34px를 차지합니다. 안드로이드는 기기마다 다르지만 일반적으로 상단 20-40px, 하단 네비게이션 바는 90px 정도입니다. UI 핵심 요소(체력바, 주요 버튼, 점수 등)는 이 영역을 피해 배치해야 하며, 배경이나 장식 요소만 전체 화면에 걸쳐 표시합니다.
Unity에서 안전 영역을 적용하려면 Canvas 하위에 Safe Area Panel을 만들고, RectTransform의 anchorMin과 anchorMax를 Screen.safeArea 값에 맞춰 조정하는 스크립트를 작성합니다. 이를 통해 기기별로 자동으로 UI가 안전 영역 안에 배치되도록 할 수 있습니다.
가로 모드 게임의 경우 좌우 측면 노치도 고려해야 합니다. 갤럭시 Z Fold 시리즈처럼 접이식 화면을 가진 기기는 펼쳤을 때와 접었을 때 안전 영역이 달라지므로, 해상도 변경 이벤트를 감지해 실시간으로 UI를 재배치하는 로직이 필요합니다.
UI 레이아웃 최적화와 계층 구조
게임 UI 레이아웃은 정보 우선순위에 따라 계층을 나눠 설계해야 합니다. 가장 중요한 정보(체력, 남은 시간, 점수)는 화면 상단 중앙에, 주요 조작 버튼은 엄지손가락이 닿기 쉬운 하단 30% 영역에 배치하는 것이 기본 원칙입니다.
모바일 게임은 대부분 한 손 또는 양손 엄지로 조작하므로, 버튼 위치는 엄지 도달 범위(Thumb Zone)를 고려해야 합니다. 화면을 세로로 3등분했을 때 하단 1/3 영역이 가장 접근하기 쉬우며, 좌우 하단 모서리는 빠른 반복 입력에 적합합니다. 공격이나 스킬 버튼은 여기에 배치하고, 메뉴나 설정 같은 보조 기능은 상단 모서리에 두는 방식이 일반적입니다.
UI 요소는 시각적 무게중심을 고려해 배치해야 합니다. Z자 동선(좌상단→우상단→좌하단→우하단)을 따라 중요도 순으로 배치하면 직관적인 인터페이스를 만들 수 있습니다. HUD 요소(체력바, 미니맵)는 화면 네 모서리에, 임시 알림이나 팝업은 중앙에 표시하되, 게임 플레이 시야를 가리지 않도록 투명도를 조절하거나 자동으로 숨기는 기능을 추가합니다.
Unity UI의 Canvas Group 컴포넌트를 활용하면 UI 그룹별로 Alpha 값을 제어해 상황에 따라 표시 여부를 동적으로 조정할 수 있습니다. 전투 중에는 조작 버튼만 보이고 정보 패널은 반투명 처리하다가, 일시정지 시 전체 UI를 다시 표시하는 식의 구현이 가능합니다.
텍스트 가독성과 폰트 크기 설정
모바일 화면에서 텍스트 가독성은 UI 경험에 직접적인 영향을 줍니다. 최소 폰트 크기는 12pt(약 32px)를 권장하며, 주요 정보는 16pt(약 42px) 이상으로 설정해야 빠르게 인식할 수 있습니다. 게임 타이틀이나 점수처럼 강조가 필요한 텍스트는 24pt(약 64px) 이상으로 키워 시각적 계층을 명확히 합니다.
한글 폰트는 영문보다 획이 복잡하므로 동일 크기에서도 가독성이 떨어질 수 있습니다. 본문 텍스트는 14pt 이상, 버튼 레이블은 16pt 이상을 기본으로 하고, 고딕 계열 폰트를 사용하면 작은 크기에서도 선명하게 보입니다. 명조 계열은 스토리 연출이나 고풍스러운 분위기에 적합하지만, HUD나 메뉴에는 부적합합니다.
텍스트와 배경 간 명도 대비는 최소 4.5:1을 유지해야 WCAG 2.0 가이드라인을 충족합니다. 어두운 배경에 흰색 텍스트(#FFFFFF)를 사용하거나, 밝은 배경에 진한 회색(#333333) 텍스트를 쓰는 방식이 안전합니다. 게임 내 배경이 다채로운 경우 텍스트에 외곽선(Outline)이나 그림자(Shadow)를 추가해 가독성을 확보합니다.
Unity TextMeshPro는 Distance Field 렌더링 방식으로 확대·축소 시에도 텍스트가 깨지지 않으며, Outline과 Glow 효과를 성능 저하 없이 적용할 수 있어 게임 UI에 적합합니다. Material 설정에서 Outline 두께를 0.1-0.2, 색상을 배경과 대비되는 색으로 지정하면 배경이 복잡해도 텍스트가 명확하게 보입니다.
색상 시스템과 시각적 피드백
게임 UI 색상은 브랜드 아이덴티티와 기능적 역할을 동시에 고려해야 합니다. 주 색상(Primary Color)은 브랜드를 대표하는 색으로 로고, 주요 버튼, 강조 요소에 사용하고, 보조 색상(Secondary Color)은 부가 정보나 비활성 상태를 나타냅니다. 경고나 에러는 빨강(#FF0000 계열), 성공이나 확인은 초록(#00FF00 계열)을 쓰는 것이 직관적입니다.
색각 이상 사용자를 고려한 설계도 중요합니다. 빨강과 초록만으로 상태를 구분하면 적록색맹 사용자가 구별하기 어려우므로, 색상과 함께 아이콘이나 패턴을 추가하는 방식을 권장합니다. 예를 들어 체력 감소는 빨간색 + 깨진 하트 아이콘, 회복은 초록색 + 십자가 아이콜을 함께 표시하는 식입니다.
시각적 피드백은 사용자 행동에 즉각 반응해야 합니다. 버튼을 터치하면 0.1초 이내에 색상 변화, 크기 확대, 또는 애니메이션이 재생되어야 입력이 인식되었음을 알 수 있습니다. Unity UI Button 컴포넌트의 Transition을 ‘Color Tint’로 설정하고 Pressed Color를 밝게 조정하면 간단히 구현할 수 있습니다.
게임 장르별로 색상 전략이 다릅니다. 캐주얼 게임은 밝고 채도 높은 색상(파스텔 톤)으로 친근함을 강조하고, 전략 게임은 어두운 배경에 금색·은색 강조로 고급스러움을 연출합니다. FPS나 배틀로얄 게임은 적 위치를 명확히 표시하기 위해 적 표시는 빨강, 아군은 파랑으로 통일하는 것이 관례입니다.
성능 최적화와 Draw Call 관리
모바일 게임 UI는 성능에 민감하므로 Draw Call을 최소화하는 설계가 필수입니다. Unity에서 UI 요소는 각각 별도의 Draw Call을 발생시키므로, 동일한 아틀라스(Atlas)에 포함된 스프라이트를 사용하고, 폰트도 하나로 통일하면 Batch 처리로 Draw Call을 줄일 수 있습니다.
Canvas를 여러 개로 나눠 정적 UI와 동적 UI를 분리하는 전략도 효과적입니다. 메뉴 버튼, 로고처럼 변하지 않는 요소는 Static Canvas에, 체력바, 점수처럼 매 프레임 갱신되는 요소는 Dynamic Canvas에 배치하면 Unity가 Static Canvas는 한 번만 렌더링하고 캐싱합니다.
이미지 해상도는 실제 표시 크기의 2배(2x) 정도로 준비하면 Retina 디스플레이에서도 선명하게 보이며, 메모리 낭비를 줄일 수 있습니다. 예를 들어 화면에 100×100px로 표시될 아이콘은 200×200px 원본을 준비하고, Unity에서 Max Size를 256으로 설정해 자동으로 최적화되도록 합니다.
UI 애니메이션은 DOTween 같은 트윈 라이브러리를 사용하면 코드로 제어할 수 있어 Animator보다 가볍습니다. 버튼 확대·축소, 페이드 인·아웃 같은 간단한 효과는 DOTween으로 구현하고, 복잡한 시퀀스만 Animator를 쓰는 방식으로 성능과 표현력을 균형 있게 유지합니다.
자주 묻는 질문 (FAQ)
❓ 모바일 게임 UI 기준 해상도는 어떻게 정하나요?
1920×1080(FHD)을 기준으로 설계하고, Unity Canvas Scaler의 Reference Resolution을 이 값으로 설정합니다. 실제 기기 해상도가 다르면 자동으로 스케일 조정되며, 16:9 외 비율은 안전 영역 안에 핵심 UI를 배치해 대응합니다.
❓ 터치 버튼 최소 크기는 몇 픽셀이어야 하나요?
Material Design 기준 48×48dp(약 120×120px), Apple HIG 기준 44×44pt입니다. 게임 환경에서는 빠른 조작을 고려해 주요 액션 버튼은 150×150px 이상, 보조 버튼은 120×120px 이상을 권장하며, 버튼 간 간격은 최소 20px 이상 확보해야 오터치를 방지할 수 있습니다.
❓ 노치가 있는 기기에서 UI가 가려지지 않게 하려면 어떻게 해야 하나요?
Unity의 Screen.safeArea 속성으로 안전 영역을 계산해 RectTransform의 anchor를 조정하는 스크립트를 작성합니다. 아이폰 X 이상은 상단 30-44px, 하단 34px, 안드로이드는 상단 20-40px, 하단 90px 정도를 여유로 두고 핵심 UI는 이 영역을 피해 배치합니다.
완료: 모바일 게임 UI·UX·디자인·사이즈 — 게임 인터페이스 설계 가이드