게임 UI 디자이너는 장르와 세계관에 맞는 스타일을 만들어야 합니다. 판타지 RPG와 캐주얼 퍼즐 게임은 버튼 모양부터 글꼴까지 전혀 다릅니다. 수업에서는 같…
해상도보다 화면 비율이 더 문제인 이유
휴대폰 해상도는 기종마다 다르지만, 같은 비율이라면 UI를 일정한 배율로 키우거나 줄이기만 하면 됩니다. 진짜 문제는 비율이 다를 때 생깁니다. 가로 화면 게임을 예로 들면, 길쭉한 최신 휴대폰은 양옆이 더 넓고, 태블릿은 위아래가 더 넓습니다. 같은 시안을 그대로 늘리면 어느 쪽에서는 버튼이 화면 밖으로 밀리고, 어느 쪽에서는 가운데에 몰려 빈 공간이 생깁니다.
그래서 해상도 대응은 '모든 비율에서 같은 모습'이 아니라 '모든 비율에서 같은 규칙'을 목표로 합니다. 재화 표시는 항상 오른쪽 위, 메뉴 버튼은 항상 오른쪽 아래, 캐릭터 정보는 항상 왼쪽 위처럼 가장자리 기준 규칙을 지키면, 화면이 넓어지거나 좁아져도 유저가 버튼을 찾는 위치는 그대로입니다.
세로 화면 게임도 원리는 같습니다. 다만 위아래 길이 차이가 크기 때문에, 상단 정보 영역과 하단 조작 영역 사이의 가운데 공간이 기기에 따라 늘었다 줄었다 하도록 설계하는 경우가 많습니다.
기준 해상도와 늘어나는 영역 정하기
먼저 시안을 그릴 기준 해상도를 하나 정합니다. 팀에서 가장 많이 쓰일 것으로 보는 비율을 고르고, 그 크기로 모든 화면을 디자인합니다. 디자이너와 개발자가 같은 기준을 쓰는 것이 무엇보다 중요합니다.
그다음 비율이 달라질 때 어느 쪽이 늘어나고 줄어드는지 정합니다. 유니티를 예로 들면, Canvas Scaler를 화면 크기에 맞춰 조절하는 방식으로 두고 기준 해상도를 입력한 뒤, 너비와 높이 중 어느 쪽을 기준으로 맞출지 비율 값을 정합니다. 가로 게임이라면 높이를 기준으로 맞춰 UI 크기를 일정하게 유지하고, 남는 가로 공간은 양옆 여백으로 흡수하는 방식이 흔합니다.
이 결정은 디자인에도 영향을 줍니다. 가로가 늘어나는 구조라면 화면 양옆 끝에 꼭 보여야 할 정보를 두지 말고, 넓어졌을 때 자연스럽게 보이는 배경과 장식으로 채워 두는 식으로 설계합니다.
앵커로 버튼을 가장자리에 붙이는 법
앵커는 UI 요소가 화면의 어느 지점을 기준으로 위치를 잡을지 정하는 설정입니다. 오른쪽 위에 앵커를 둔 재화 표시는 화면이 넓어져도 오른쪽 위 모서리와의 거리를 유지합니다. 가운데에 앵커를 둔 요소는 화면 가운데를 기준으로 움직입니다.
| UI 요소 | 앵커 기준 | 이유 |
|---|---|---|
| 재화·설정 버튼 | 오른쪽 위 | 늘 같은 모서리에서 찾을 수 있게 |
| 캐릭터 정보·체력 | 왼쪽 위 | 시선이 처음 닿는 위치 유지 |
| 조이스틱 | 왼쪽 아래 | 엄지 위치와 맞춤 |
| 스킬·공격 버튼 | 오른쪽 아래 | 오른손 엄지 영역 유지 |
| 팝업 | 가운데 | 비율과 상관없이 시선 중앙 |
| 상단 탭·하단 메뉴 바 | 양 끝 늘이기 | 화면 너비에 맞춰 길이 조절 |
시안 단계에서 디자이너가 이 앵커 기준을 함께 표시해 넘기면, 개발자가 추측으로 배치하는 일이 줄어듭니다. 화면 설계서에 요소마다 '오른쪽 위 기준, 여백 얼마'처럼 적어 두는 방식이 많이 쓰입니다.
노치와 둥근 모서리, 안전 영역 처리
최근 휴대폰은 카메라 구멍, 노치, 둥근 화면 모서리, 하단 제스처 표시줄 때문에 화면 가장자리 일부를 UI가 쓰기 어렵습니다. 운영체제는 이런 부분을 피한 안전 영역 정보를 제공하고, 유니티에서는 Screen.safeArea 값으로 이 영역을 알 수 있습니다.
보통은 버튼과 글자가 들어가는 UI만 담는 부모 영역을 만들고, 그 영역의 크기를 안전 영역에 맞추는 스크립트를 붙입니다. 반면 배경 이미지나 장식은 안전 영역 밖까지 채워 화면 끝까지 꽉 차 보이게 합니다. 눌러야 하는 것은 안쪽에, 보기만 하는 것은 바깥까지라는 원칙입니다.
가로 화면에서는 노치가 왼쪽 또는 오른쪽에 오므로 양옆 안전 영역이 달라질 수 있습니다. 기기를 반대로 돌렸을 때도 UI가 노치를 피하는지 확인해야 합니다.
안전 영역을 적용하면 UI가 안쪽으로 조금 밀려 들어오므로, 시안 단계에서 가장자리 여백을 너무 빠듯하게 잡지 않는 것이 좋습니다. 노치가 없는 기기에서도 버튼이 화면 끝에 바짝 붙어 있으면 손가락이 닿기 불편하고 케이스에 가려질 수도 있습니다. 가장자리와 버튼 사이에 일정한 숨 쉴 공간을 두는 규칙을 스타일 가이드에 함께 적어 두세요.
늘어나도 깨지지 않는 이미지와 마무리 점검
팝업 틀, 버튼 배경, 말풍선처럼 크기가 바뀌는 이미지는 9슬라이스 방식으로 만듭니다. 이미지를 아홉 칸으로 나눠 모서리는 그대로 두고 가운데와 변만 늘어나게 하는 방식이라, 크기가 달라져도 모서리 장식이 찌그러지지 않습니다. 디자이너는 늘어날 부분에 복잡한 무늬를 넣지 않도록 처음부터 고려해야 합니다.
- 길쭉한 휴대폰, 일반 휴대폰, 태블릿 비율에서 모두 버튼이 화면 안에 있는가
- 노치와 하단 표시줄에 버튼이나 글자가 가리지 않는가
- 태블릿에서 버튼이 지나치게 작거나 가운데로 몰리지 않는가
- 글자가 긴 언어로 바꿨을 때 버튼 밖으로 넘치지 않는가
- 팝업이 가장 작은 비율에서도 닫기 버튼까지 보이는가
에디터의 게임 화면 창에서 여러 비율을 등록해 두고 바꿔 가며 보는 것이 첫 점검이고, 실제 기기 두세 대로 확인하는 것이 마지막 점검입니다. 화면이 클수록 손가락이 닿는 거리도 달라지니 직접 잡아 보고 눌러 보는 과정을 빼지 마세요. 내 UI 시안을 여러 비율에서 무너지지 않게 정리하는 과정을 실습으로 익히고 싶다면, SBS아카데미게임학원 게임UIUX 과정이 이 부분을 어떤 실습으로 다루는지 상담으로 먼저 알아보는 것이 빠릅니다.
자주 묻는 질문
기준 해상도는 높게 잡을수록 좋은가요?
너무 높으면 이미지 용량이 커지고, 너무 낮으면 고해상도 기기에서 흐려 보일 수 있습니다. 주 대상 기기와 이미지 품질, 용량 사이에서 팀이 균형점을 정합니다.
태블릿용 UI를 따로 만들어야 하나요?
대부분은 같은 UI에 배치 규칙만 적용해 대응합니다. 다만 태블릿 비중이 큰 게임이라면 주요 화면만 별도 배치를 두는 경우도 있습니다.
가까운 캠퍼스에서 게임 UI·UX 알아보기
사는 곳과 가까운 캠퍼스를 고르면 수업 내용, 오시는 길, 상담 신청을 한 번에 볼 수 있습니다.