모바일 게임 UI를 작업할 때 기준 해상도 하나만 놓고 보면 화면을 정리하는 것은 어렵지 않다.
문제는 실제 게임이 하나의 화면 비율에서만 실행되지 않는다는 점이다.
같은 가로형 모바일 게임이라도 디바이스에 따라 화면이 좌우로 더 길어질 수 있다. 기준 화면에서는 적절했던 UI가 다른 화면 비율에서는 지나치게 벌어지거나, 반대로 중앙 콘텐츠와의 관계가 어색해지는 경우도 있다.
이때 UI 전체를 화면 크기에 맞춰 단순히 확대하거나 좌우로 늘리는 방식으로는 대응하기 어렵다.
화면 비율 대응을 할 때 무엇을 그대로 유지하고, 무엇을 화면을 따라 이동시키며, 무엇을 남는 공간에 맞춰 확장할 것인지를 먼저 구분해야 한다.
전투 HUD의 스킬 버튼과 인벤토리의 아이템 리스트는 같은 UI라도 화면 비율 변화에 대응하는 방식이 다르기 때문이다.
이번 글에서는 16:9를 기준으로 더 넓은 모바일 화면으로 확장될 때 게임 UI 레이아웃을 어떤 기준으로 설계할 수 있는지 정리해본다.
화면이 넓어졌다고 UI까지 넓어져야 하는 것은 아니다
16:9 화면을 기준으로 제작한 게임을 더 넓은 화면에서 실행한다고 생각해보자.
가장 단순한 방법은 화면 전체를 가로 방향으로 늘리는 것이다.
하지만 이렇게 하면 캐릭터 초상화나 버튼이 가로로 늘어나고, 아이콘과 텍스트의 비율도 달라진다.
UI의 형태를 유지한 채 좌우 공간만 확장하더라도 또 다른 문제가 생길 수 있다.
화면 중앙을 기준으로 배치했던 UI는 그대로 남아 있는데 가장자리 UI만 멀어지면서 요소 사이의 관계가 달라질 수 있기 때문이다.
따라서 화면 비율 대응은 단순히 화면 크기에 UI를 맞추는 작업으로 보기 어렵다.
중요한 것은 화면 비율이 변했을 때도 각 UI가 원래의 역할과 위치 관계를 유지하는 것이다.
예를 들어 캐릭터 정보는 좌측 상단에 계속 있어야 하고, 스킬 버튼은 우측 하단에 있어야 한다.
반면 화면 중앙에 나타나는 타깃 정보나 시스템 알림은 화면의 가로 폭과 관계없이 중앙이라는 기준을 유지해야 한다.
이 구조가 필요한 이유는 화면 비율이 달라져도 플레이어가 익숙한 위치에서 같은 정보를 찾을 수 있도록 만드는 데 있다.
16:9와 20:9에서 달라지는 UI 위치
캐릭터 정보와 조이스틱은 왼쪽 가장자리를 따라 이동하고, 미니맵과 스킬 버튼은 오른쪽 가장자리를 따라 이동한다.
화면 비율 대응에서는 고정 영역과 가변 영역을 먼저 구분한다
화면 안의 모든 UI가 같은 방식으로 움직일 필요는 없다.
나는 화면 비율 대응을 정리할 때 요소를 크게 고정해서 유지할 영역과 화면에 따라 변할 수 있는 영역으로 나누어 보는 편이다.
예를 들어 스킬 아이콘의 크기는 화면이 넓어졌다고 해서 반드시 커질 필요가 없다.
캐릭터 초상화, HP 바, 메뉴 버튼도 마찬가지다.
이런 요소는 플레이어가 정보를 인식하거나 조작하는 크기와 직접적으로 연결되어 있기 때문에 화면 비율 변화만으로 형태를 크게 바꾸는 것은 적절하지 않을 수 있다.
반면 배경이나 게임 플레이 영역은 화면이 넓어지면서 더 많은 영역을 보여줄 수 있다.
일부 리스트나 콘텐츠 영역도 사용할 수 있는 공간이 늘어남에 따라 표시하는 정보량을 조절할 수 있다.
즉 같은 화면 안에서도 다음과 같은 차이가 생긴다.
크기를 유지해야 하는 요소
아이콘, 버튼, 텍스트, 캐릭터 초상화처럼 인식과 조작에 직접적으로 영향을 주는 요소가 여기에 해당할 수 있다.
위치가 변하는 요소
화면 좌우 가장자리를 기준으로 배치되는 HUD는 화면 폭이 변하면 기준점을 따라 이동할 수 있다.
크기나 정보량이 변할 수 있는 요소
배경, 리스트, 인벤토리 그리드처럼 남는 공간을 활용할 수 있는 영역은 화면 비에 따라 확장할 수 있다.
개인적으로는 모든 UI를 동일한 규칙으로 반응시키는 것보다 요소의 역할에 따라 어떤 속성을 유지할 것인지 먼저 정하는 것이 중요하다고 본다.
고정 영역과 가변 영역
Anchor만 설정하면 화면 비율 대응이 끝나는 것은 아니다
화면 비 대응에서 자주 사용하는 방법 중 하나가 Anchor를 이용해 UI의 기준점을 정하는 것이다.
좌측 상단의 캐릭터 정보는 좌측 상단을 기준으로 하고, 우측 하단의 스킬 버튼은 우측 하단을 기준으로 설정하는 식이다.
이렇게 하면 화면이 넓어져도 UI가 각 화면 가장자리와 일정한 관계를 유지할 수 있다.
하지만 Anchor를 설정했다고 해서 레이아웃 문제가 모두 해결되는 것은 아니다.
예를 들어 화면 오른쪽에 퀘스트 목록이 있고 왼쪽에 파티 정보가 있다고 생각해보자.
두 영역을 각각 좌우 가장자리에 고정하면 넓은 화면에서는 서로 멀어질 수 있다.
기능적으로는 문제가 없지만 플레이어가 두 정보를 함께 비교해야 하는 화면이라면 시선 이동 거리가 지나치게 길어질 수 있다.
반대로 중앙을 기준으로 모든 요소를 고정하면 화면이 넓어졌을 때 좌우 공간이 과도하게 비어 보일 수 있다.
결국 Anchor는 UI가 어디를 기준으로 움직일 것인지 정하는 방법이지 화면 전체의 정보 구조를 자동으로 해결해주는 것은 아니다.
작업하면서 화면 비율이 달라졌을 때 요소가 정상적으로 붙어 있는지만 확인하면 전체적인 균형이 어색해지는 경우가 있었다.
그래서 Anchor를 적용한 뒤에도 UI끼리의 거리, 게임 화면을 가리는 정도, 플레이어의 시선 이동 범위를 다시 확인할 필요가 있다.
전투 HUD는 화면이 넓어질 때 어떻게 변해야 할까?
전투 HUD는 화면 비 변화의 영향을 가장 직접적으로 받는 UI 중 하나다.
가로형 액션 RPG를 예로 들어보자.
왼쪽 아래에는 이동 조이스틱이 있고 오른쪽 아래에는 공격과 스킬 버튼이 있다. 캐릭터 정보는 좌측 상단, 미니맵은 우측 상단에 위치한다.
화면이 넓어지면 이 요소들은 각각의 화면 가장자리를 따라 이동하는 것이 자연스러운 경우가 많다.
이렇게 하면 조작 버튼과 화면 가장자리의 관계를 유지할 수 있고, 중앙의 플레이 영역도 넓게 확보할 수 있다.
하지만 모든 HUD를 화면 끝까지 이동시키는 것이 항상 좋은 것은 아니다.
파티 정보와 보스 정보처럼 서로 비교해서 봐야 하는 요소가 지나치게 멀어지면 플레이어의 시선 이동이 커질 수 있다.
또 화면 폭이 넓어질수록 좌우 끝에 위치한 정보와 중앙 전투 상황을 동시에 확인하기 어려워질 수도 있다.
따라서 전투 HUD에서는 단순히 좌측 UI는 왼쪽, 우측 UI는 오른쪽으로 보내는 것보다 각 정보가 무엇과 함께 읽혀야 하는지를 확인해야 한다.
다만 이것을 모든 게임에 동일하게 적용할 수는 없다.
액션 RPG처럼 조작 영역과 전투 화면이 중요한 게임과 자동 전투 비중이 높은 RPG는 HUD의 역할이 다르다.
화면 비율 대응에서도 장르와 실제 플레이 방식을 함께 고려해야 한다.
팝업은 화면이 넓어진다고 같이 늘리면 안 된다
전투 HUD와 달리 팝업은 화면 중앙에 집중해서 읽는 UI다.
예를 들어 아이템 획득 확인 팝업에 제목, 아이템 이미지, 설명, 확인 버튼이 있다고 생각해보자.
16:9에서는 적절했던 팝업을 20:9 화면 폭에 맞춰 그대로 늘리면 내부 요소 사이의 거리가 지나치게 멀어질 수 있다.
특히 한두 줄의 텍스트가 화면 가로 폭을 따라 길게 늘어나면 읽는 흐름도 불편해진다.
그래서 중앙 팝업은 화면 전체의 폭보다 콘텐츠를 읽고 이해하기 적절한 폭을 기준으로 유지하는 것이 더 자연스러운 경우가 많다.
화면이 넓어져도 팝업의 최대 폭은 유지하고, 늘어난 공간은 팝업 바깥의 배경 영역으로 남겨둘 수 있다.
이 구조가 필요한 이유는 사용할 수 있는 공간과 실제 콘텐츠에 필요한 공간이 항상 같지는 않은 데 있다.
이런 화면에서 공간이 남는다는 이유만으로 UI를 확장하기보다 콘텐츠가 가장 안정적으로 읽히는 크기를 먼저 유지하는 편이 좋다.
화면 비에 따른 팝업 배치 비교
인벤토리와 리스트는 남는 공간을 활용할 수 있다
팝업과 달리 인벤토리나 리스트 화면에서는 넓어진 공간을 활용하는 것이 도움이 될 수 있다.
예를 들어 16:9 인벤토리에서 한 줄에 6개의 아이템을 보여주고 있다고 생각해보자.
20:9 화면에서도 같은 패널 폭을 유지할 수 있지만, 게임의 구조에 따라서는 남는 공간을 이용해 아이템 열을 하나 더 추가할 수도 있다.
이 경우 플레이어는 같은 화면에서 더 많은 아이템을 확인할 수 있다.
다만 화면이 넓어졌다고 단순히 아이템 슬롯 자체를 크게 만드는 것은 다른 문제다.
슬롯 크기가 커지면서 한 화면에 표시되는 아이템 수가 그대로라면 화면은 커졌지만 정보 탐색 효율은 크게 달라지지 않을 수 있다.
그래서 리스트나 그리드형 UI에서는 남는 공간을 크기에 사용할 것인지, 정보량에 사용할 것인지를 먼저 판단하는 것을 추천한다.
캐릭터 선택처럼 각 항목의 비주얼을 크게 보여주는 것이 중요한 화면이라면 카드 크기를 키우는 방법이 적절할 수 있다.
반대로 인벤토리처럼 많은 아이템을 빠르게 탐색하는 것이 중요하다면 표시 개수를 늘리는 쪽이 더 효율적일 수 있다.
결국 화면 비율 넓어졌다는 사실만으로 정답이 결정되는 것은 아니다.
그 화면에서 플레이어가 무엇을 해야 하는가가 공간 활용 방법을 결정한다.
넓어진 공간을 활용하는 두 가지 방법
풀스크린 메뉴에서는 배경과 콘텐츠를 분리해서 본다
캐릭터 정보, 상점, 퀘스트처럼 화면 대부분을 사용하는 UI에서는 화면 비율 대응이 조금 더 복잡하다.
배경은 화면 전체를 채워야 하지만 실제 콘텐츠까지 화면 끝까지 확장할 필요는 없기 때문이다.
예를 들어 캐릭터 상세 화면에서 왼쪽에는 캐릭터 모델이 있고 오른쪽에는 스탯 정보가 있다고 생각해보자.
화면이 넓어지면 배경과 캐릭터 연출 영역은 자연스럽게 확장할 수 있다.
하지만 오른쪽의 텍스트와 버튼 영역까지 동일한 비율로 늘리면 정보 사이가 지나치게 벌어질 수 있다.
이런 화면에서는 배경 영역과 실제 UI 콘텐츠 영역을 분리해서 보는 것이 도움이 된다.
배경과 연출은 화면 비율에 맞춰 확장한다.
정보 패널은 일정한 최대 폭을 유지할 수 있다.
캐릭터와 정보 패널 사이의 공간은 화면 비에 따라 조절할 수 있다.
즉 풀스크린 UI는 하나의 큰 화면처럼 보이지만 실제로는 서로 다른 확장 규칙을 가진 여러 영역으로 구성될 수 있다.
개인적으로는 이런 구조가 화면 비율 대응뿐 아니라 이후 레이아웃을 수정할 때도 관리하기 편하다고 본다.
화면 비율이 달라졌을 때 배경은 어떻게 처리해야 할까?
UI뿐 아니라 배경 이미지도 화면 비율 변화의 영향을 받는다.
16:9에 맞춰 제작한 배경을 더 넓은 화면에서 그대로 늘리면 이미지가 가로로 왜곡될 수 있다.
반대로 비율을 유지하면서 화면을 채우면 위아래 일부가 잘리거나, 제작 방식에 따라 좌우 영역이 부족해질 수 있다.
특히 캐릭터나 중요한 오브젝트가 배경 특정 위치에 포함되어 있다면 화면 비율 변화에 따라 의도하지 않은 부분이 잘릴 가능성이 있다.
그래서 배경을 제작할 때도 반드시 보여야 하는 핵심 영역과 잘리거나 확장되어도 되는 주변 영역을 구분하는 것이 중요하다.
중앙의 주요 캐릭터나 핵심 오브젝트는 여러 화면 비에서도 유지될 수 있도록 배치하고, 좌우 주변부는 화면 비율에 따라 추가로 노출될 수 있는 영역으로 설계할 수 있다.
이 방식은 UI의 Anchor와는 다른 문제지만 최종 화면에서는 함께 작동한다.
UI만 정상적으로 배치되어 있어도 배경의 중요한 정보가 잘린다면 화면 비율 대응이 완료되었다고 보기 어렵다.
실제 작업에서 화면 비율 대응을 확인하는 7가지 기준
1. UI 요소의 크기가 불필요하게 변하고 있지 않은가?
화면이 넓어졌다는 이유만으로 버튼, 아이콘, 텍스트가 가로로 늘어나거나 지나치게 커지지 않는지 확인한다.
2. 각 UI가 올바른 기준점을 따라 움직이는가?
캐릭터 정보, 미니맵, 조작 버튼, 중앙 알림처럼 각 요소가 어떤 위치를 기준으로 유지되어야 하는지 확인한다.
3. 넓어진 화면에서 UI 사이의 거리가 지나치게 멀어지지 않았는가?
기능적으로 정상적인 위치에 있더라도 함께 확인해야 하는 정보가 너무 멀리 떨어지면 사용성이 달라질 수 있다.
4. 팝업과 텍스트 영역이 불필요하게 늘어나지 않았는가?
사용할 수 있는 화면 폭과 콘텐츠가 읽기 좋은 폭은 다를 수 있다.
5. 리스트와 그리드는 추가 공간을 효율적으로 사용하고 있는가?
화면이 넓어졌을 때 슬롯 크기를 키울 것인지, 표시할 정보량을 늘릴 것인지 화면의 목적에 맞춰 판단한다.
6. 배경과 UI 콘텐츠에 같은 확장 규칙을 사용하고 있지 않은가?
배경은 화면 전체를 채우더라도 실제 정보 패널은 최대 폭을 유지하는 것이 적절할 수 있다.
7. 여러 화면 비율을 실제 화면으로 비교했는가?
기준 해상도 하나에서 정상적으로 보이는 것만으로 화면 비율 대응을 판단하기 어렵다. 최소한 기준 화면과 더 넓은 화면을 나란히 놓고 정보의 위치와 전체 균형을 확인하는 과정이 필요하다.
이 기준 역시 모든 게임에 동일하게 적용할 수는 없다.
장르, 플랫폼, 카메라 방식, 조작 구조, UI 스타일에 따라 화면 비율 변화에 대응하는 방법은 달라질 수 있다.
중요한 것은 특정 화면 비율에 맞는 하나의 레이아웃을 만드는 것이 아니라 화면이 달라졌을 때 무엇을 유지하고 무엇을 변화시킬 것인지에 대한 규칙을 만드는 것이다.
좋은 화면 비율 대응은 UI가 늘어난 티가 나지 않는다
화면 비 대응이 잘된 UI는 플레이어가 다른 디바이스를 사용하더라도 크게 의식하지 않는다.
화면이 넓어지면 플레이 영역은 자연스럽게 확장되고, 중요한 HUD는 익숙한 위치를 유지하며, 중앙 콘텐츠는 필요 이상으로 늘어나지 않는다.
반대로 화면 비 대응이 제대로 되지 않으면 버튼이 지나치게 멀어지고, 팝업이 가로로 길어지며, 배경의 중요한 부분이 잘리는 문제가 눈에 들어오기 시작한다.
그래서 나는 화면 비율 대응을 단순히 여러 해상도에서 UI가 깨지지 않게 만드는 작업으로만 보지 않는 편이다.
- 무엇의 크기를 유지할 것인지.
- 무엇의 위치를 변화시킬 것인지.
- 어떤 영역을 확장할 것인지.
이 세 가지를 먼저 구분하는 것이 중요하다.
이전 글에서 다룬 Safe Area가 화면 가장자리에서 중요한 정보와 조작 기능을 보호하기 위한 기준이라면, 화면 비율 대응은 그보다 한 단계 더 나아가 변화하는 화면 안에서 전체 UI의 관계를 유지하는 작업이라고 볼 수 있다.
결국 모바일 게임의 화면 비율에 대응한다는 것은 16:9 UI를 20:9 화면에 맞춰 늘리는 일이 아니다.
서로 다른 화면에서도 같은 게임 UI처럼 느껴지도록 레이아웃의 변화 규칙을 설계하는 일이다.