게임 UI를 작업하다 보면 여백을 두고 상반된 요구를 받는 경우가 있다.
정보가 답답해 보이니 간격을 넓혀달라는 의견이 있는 반면, 한 화면에 더 많은 정보를 보여줘야 하니 공간을 줄여야 하는 경우도 있다.
특히 모바일 디바이스에서는 사용할 수 있는 화면 자체가 작기 때문에 충분한 여백을 확보하는 것과 필요한 정보를 모두 보여주는 것 사이에서 균형을 잡기가 쉽지 않다.
그래서 게임 UI에서 여백을 단순히 ‘비어 있는 공간’으로 생각하면 기준을 잡기 어렵다.
여백은 화면을 단순히 비워두는 요소보다 정보와 정보의 관계를 구분하고 플레이어가 화면을 빠르게 읽도록 만드는 공간으로 생각하면 좋다.
결국 중요한 것은 여백이 넓은가 좁은가가 아니다.
어디에는 공간을 확보하고, 어디에는 정보를 밀도 있게 배치해야 하는가를 구분하는 것이 먼저다.
게임 UI에서 여백이 필요한 이유
여백이 충분하면 화면이 깔끔해 보인다.
하지만 게임 UI에서 여백을 사용하는 이유가 단순히 화면을 깔끔하게 만들기 위해서만은 아니다.
버튼과 버튼 사이, 아이콘과 텍스트 사이, 서로 다른 정보 그룹 사이에 적절한 공간이 있으면 플레이어는 각 요소의 관계를 더 빠르게 파악할 수 있다.
예를 들어 캐릭터 정보 화면에 다음과 같은 정보가 있다고 생각해보자.
레벨, 캐릭터 이름, HP, 공격력, 방어력, 치명타 확률, 장착 장비, 스킬 정보가 하나의 화면에 들어간다.
모든 요소 사이에 동일한 간격을 적용하면 정돈되어 보일 수는 있다. 하지만 어떤 정보가 서로 연결되어 있는지는 명확하지 않을 수 있다.
반대로 캐릭터 이름과 레벨은 가깝게 배치하고, 주요 스탯은 하나의 그룹으로 묶고, 장비와 스킬 영역 사이에는 상대적으로 큰 여백을 준다면 플레이어는 별도의 구분선을 사용하지 않아도 화면을 몇 개의 정보 단위로 인식할 수 있다.
이 구조가 필요한 이유는 여백 자체도 정보의 관계를 설명하기 때문이다.
가까이 있는 요소는 서로 관련된 것으로 보이고, 멀리 떨어진 요소는 다른 그룹으로 인식된다.
따라서 여백은 단순히 남는 공간이 아니라 UI의 구조를 전달하는 방법 중 하나다.
같은 정보, 다른 여백 구조
첨부 이미지는 동일한 캐릭터 스탯을 가진 UI 정보 팝업이다. 왼쪽(A)은 모든 요소에 비슷한 간격이 적용되었고, 오른쪽(B)은 이름·레벨, 주요 스탯, 장비 정보처럼 관련된 요소를 가깝게 묶고 그룹 사이에는 더 넓은 여백이 적용되었다.
모든 여백을 동일하게 만들 필요는 없다
UI를 정리하다 보면 일정한 간격을 유지하는 것이 중요하다는 이야기를 자주 접한다.
물론 일관된 간격 규칙은 필요하다.
하지만 이것을 모든 요소 사이에 같은 수치의 여백을 사용해야 한다는 의미로 받아들이면 오히려 정보 구조가 약해질 수 있다.
예를 들어 스탯 목록에서 아이콘과 수치 사이의 간격이 8px이고 각 스탯 항목 사이도 8px이며, 스탯 영역과 장비 영역 사이도 8px이라면 화면 전체의 간격은 규칙적이다.
하지만 플레이어 입장에서는 어디까지가 하나의 정보 그룹인지 구분하기 어려울 수 있다.
나는 이런 경우 같은 그룹 안의 간격과 서로 다른 그룹 사이의 간격을 구분하는 편이다.
같은 기능에 속하는 요소는 상대적으로 가깝게 배치한다.
서로 다른 기능이나 정보 영역 사이에는 더 큰 간격을 둔다.
이렇게 하면 별도의 박스나 선을 계속 추가하지 않아도 화면의 구조를 만들 수 있다.
프레임과 구분선을 많이 사용할 수도 있지만 여백만으로 정보 그룹을 구분할 수 있다면 때에 따라 그쪽이 더 효율적인 경우가 많다고 본다.
여백으로 만드는 정보 그룹
첨부 이미지는 아이콘, 제목, 설명, 수치가 반복되는 UI 리스트다. 왼쪽(A)은 내부 요소간 좁은 간격으로 묶여 있고, 오른쪽(B)은 스탯 성격 사이에 간격을 적용해 여백만으로 정보 그룹이 나뉘어 있다.
여백이 많다고 항상 가독성이 좋아지는 것은 아니다
여백이 가독성을 높인다고 해서 무조건 넓게 사용하는 것이 좋은 것은 아니다.
게임 UI에서는 일반적인 웹이나 문서 UI와 다른 조건이 있다.
플레이어가 게임 화면과 UI를 동시에 봐야 하고, 제한된 공간 안에서 많은 상태와 기능을 확인해야 하는 경우가 많다.
특히 인벤토리, 상점, 제작, 캐릭터 성장처럼 한 화면에서 많은 데이터를 비교해야 하는 UI는 지나치게 넓은 여백이 오히려 불편할 수 있다.
예를 들어 인벤토리에서 한 화면에 30개의 아이템을 볼 수 있는 구조를 여백을 넓히면서 15개만 볼 수 있도록 변경했다고 생각해보자.
화면은 훨씬 여유롭게 보일 수 있다.
하지만 플레이어는 같은 수의 아이템을 확인하기 위해 더 많이 스크롤해야 한다.
이 경우 시각적인 여유는 증가했지만 정보 탐색의 효율은 떨어질 수 있다.
그래서 나는 여백을 판단할 때 화면이 깔끔해 보이는지만 확인하지 않는 편이다.
플레이어가 이 화면에서 무엇을 해야 하는가를 함께 본다.
아이템을 빠르게 비교해야 하는 화면이라면 어느 정도 높은 정보 밀도가 필요하다.
반대로 캐릭터 획득 결과나 주요 보상처럼 하나의 정보를 집중해서 보여주는 화면이라면 넓은 여백을 활용해 시선을 집중시킬 수 있다.
같은 게임 안에서도 화면의 목적에 따라 적절한 정보 밀도는 달라진다.
정보 밀도가 높은 화면은 나쁜 UI일까?
게임 UI를 분석할 때 정보가 많다는 이유만으로 복잡한 UI라고 판단하기 쉽다.
하지만 정보 밀도가 높은 것과 정보를 알아보기 어려운 것은 다른 문제다.
MMORPG의 레이드 HUD처럼 플레이어가 동시에 많은 정보를 확인해야 하는 화면이 있다.
파티원의 HP, 버프와 디버프, 보스 상태, 스킬 쿨타임, 전투 알림 등 필요한 정보 자체가 많기 때문에 화면의 정보 밀도를 무조건 낮출 수는 없다.
반대로 캐주얼 게임의 결과 화면처럼 핵심 결과와 다음 행동만 보여주면 되는 화면에서 지나치게 많은 정보를 노출한다면 불필요한 복잡성이 될 수 있다.
결국 정보 밀도는 높고 낮음 자체보다 화면의 목적에 맞는가가 중요하다.
나는 이 차이를 다음과 같이 생각하는 편이다.
필요한 정보가 많아서 밀도가 높은 화면과
정보를 정리하지 못해서 복잡한 화면은 다르다.
전자의 경우 그룹과 위계를 명확하게 만들면 높은 정보 밀도를 유지하면서도 충분한 가독성을 확보할 수 있다.
후자의 경우에는 여백을 조금 늘리는 것만으로 문제가 해결되지 않는다. 먼저 어떤 정보를 줄이거나 묶을 것인지부터 판단해야 한다.
여백을 확보하기 전에 정보를 먼저 정리해야 한다
화면이 복잡해 보일 때 가장 간단한 해결 방법은 요소 사이의 간격을 넓히는 것이다.
하지만 실제 프로젝트에서는 화면 크기가 정해져 있기 때문에 여백을 늘리면 다른 곳의 공간이 부족해진다.
이럴 때는 먼저 ‘정말 이 정보가 모두 필요한가?’를 확인하는 것이 좋다.
예를 들어 아이템 상세 UI에 아이템 이름, 등급, 장착 부위, 능력치, 세트 효과, 강화 정보, 획득처, 판매 가격, 설명이 모두 들어간다고 생각해보자.
이 정보를 전부 같은 수준으로 보여주면서 여백까지 충분히 확보하려고 하면 패널이 지나치게 커질 수 있다.
그렇다면 여백을 줄이기 전에 정보의 구조를 다시 볼 필요가 있다.
자주 확인하는 능력치는 상단에 배치하고, 부가 설명은 하단으로 보낼 수 있다.
상황에 따라 필요하지 않은 정보는 조건부로 노출할 수도 있다.
관련된 능력치는 하나의 그룹으로 묶을 수 있다.
긴 설명은 별도의 상세 영역이나 툴팁으로 분리하는 방법도 있다.
이처럼 화면의 정보량 자체를 정리하면 억지로 공간을 만들어내지 않아도 자연스럽게 여백이 생긴다.
결국 여백 부족은 공간의 문제처럼 보이지만 실제로는 정보 구조의 문제인 경우도 많다.
모바일 게임에서는 여백을 어떻게 봐야 할까?
모바일에서는 PC보다 화면이 작기 때문에 여백을 줄여야 한다고 생각하기 쉽다.
하지만 화면이 작을수록 오히려 기능 사이의 구분이 중요해지는 경우도 있다.
특히 터치해야 하는 버튼이 지나치게 가까우면 시각적인 문제뿐 아니라 조작 실수로 이어질 수 있다.
따라서 모바일에서 여백을 판단할 때는 단순한 시각적 간격뿐 아니라 터치 영역까지 함께 봐야 한다.
화면에 보이는 버튼 그래픽은 작더라도 실제 터치 영역은 더 넓게 설정할 수 있다.
반대로 시각적으로 충분한 간격이 있어 보여도 실제 터치 영역이 서로 겹치거나 지나치게 가까우면 조작성이 떨어질 수 있다.
또 하나 중요한 것은 게임 화면을 얼마나 가리고 있는가이다.
PC에서는 넓은 화면의 가장자리를 활용할 수 있지만 모바일에서는 UI 패널 하나가 플레이 화면의 상당 부분을 차지할 수 있다.
그래서 모바일에서는 단순히 UI 내부의 여백만 보는 것이 아니라 UI와 실제 게임 화면 사이의 공간까지 함께 판단해야 한다.
다만 이것을 모든 모바일 게임에 동일하게 적용할 수는 없다.
세로형 방치형 RPG와 가로형 액션 RPG는 사용할 수 있는 화면 구조가 다르고, 한 손 조작과 양손 조작에서도 버튼 배치와 필요한 공간이 달라진다.
결국 디바이스의 크기만으로 여백을 결정하기보다 실제 플레이 방식까지 함께 고려해야 한다.
여백에도 우선순위가 있다
화면 공간이 충분하지 않을 때 모든 영역의 여백을 동일하게 줄일 필요는 없다.
오히려 어떤 공간을 유지해야 하는지 결정하는 것이 중요하다.
나는 이때 정보 그룹 사이의 여백을 먼저 지키는 편이다.
예를 들어 하나의 버튼 안에서 아이콘과 텍스트 사이의 간격은 조금 줄여도 기능을 이해하는 데 큰 문제가 없을 수 있다.
하지만 서로 다른 기능 그룹 사이의 여백까지 지나치게 줄이면 화면 전체의 구조가 무너지기 시작한다.
즉 여백도 정보 위계와 비슷하다.
모든 공간이 같은 중요도를 가지는 것은 아니다.
요소 내부의 여백, 같은 그룹 안의 여백, 서로 다른 그룹 사이의 여백을 구분해서 볼 필요가 있다.
공간이 부족하다면 무엇을 먼저 줄여도 되는지 판단해야 한다.
여백의 세 단계
첨부 이미지처럼 여백은 크게 요소 내부의 여백, 같은 그룹 내부의 간격, 서로 다른 그룹 사이의 간격으로 나누어 볼 수 있다. 화면 공간이 부족할 때도 세 종류의 여백을 동일하게 줄이기보다 정보의 관계를 유지할 수 있도록 우선순위를 두고 조절하는 것이 중요하다.
실제 작업에서 여백을 볼 때 확인하는 7가지 기준
1. 가까이 있는 요소가 실제로 같은 정보인가?
단순히 공간이 남는다는 이유로 서로 다른 기능을 가까이 배치하지 않는다. 플레이어는 가까운 요소를 하나의 그룹으로 인식할 가능성이 높다.
2. 같은 그룹과 다른 그룹의 간격 차이가 보이는가?
모든 간격이 비슷하다면 화면은 규칙적으로 보일 수 있지만 정보 구조는 약해질 수 있다.
3. 여백 때문에 필요한 정보가 지나치게 줄어들지는 않았는가?
특히 인벤토리나 리스트에서는 한 화면에서 확인할 수 있는 정보량도 UX의 일부다.
4. 반대로 정보를 많이 보여주기 위해 구분이 사라지지는 않았는가?
화면에 많은 정보를 넣는 것과 사용자가 많은 정보를 빠르게 읽을 수 있는 것은 다르다.
5. 불필요한 프레임과 구분선을 여백으로 대체할 수 있는가?
모든 정보를 박스로 나누면 오히려 화면이 복잡해질 수 있다. 충분한 간격만으로 그룹이 구분되는지 확인한다.
6. 모바일에서는 실제 터치 영역까지 충분한가?
보이는 그래픽 사이의 간격뿐 아니라 플레이어가 실제로 조작하는 영역을 함께 확인한다.
7. 이 화면에서 플레이어가 해야 하는 행동과 정보 밀도가 맞는가?
빠른 비교가 필요한 화면과 하나의 정보에 집중해야 하는 화면은 필요한 여백이 다르다.
이 기준을 적용하더라도 모든 게임에서 동일한 수치의 여백을 사용할 수는 없다.
게임의 장르, 플랫폼, 아트 스타일, 폰트 크기, 해상도, 입력 방식에 따라 적절한 간격은 달라진다.
따라서 특정 수치를 정답으로 정하기보다 일관된 간격 체계를 만든 뒤 실제 플레이 화면에서 반복적으로 확인하는 과정이 필요하다.
좋은 여백은 눈에 띄지 않는다
게임 UI에서 여백은 많을수록 좋은 것도 아니고 적을수록 나쁜 것도 아니다.
중요한 것은 플레이어가 정보를 읽는 데 필요한 공간을 확보하면서도 화면의 목적에 맞는 정보량을 유지하는 것이다.
- 무엇과 무엇이 같은 그룹인지.
- 어떤 정보들을 한 번에 비교해야 하는지.
- 플레이어가 이 화면에서 무엇을 해야 하는지.
이 세 가지를 먼저 확인하면 필요한 여백도 자연스럽게 달라진다.
개인적으로 좋은 여백은 넓게 비워둔 공간보다 플레이어가 의식하지 않아도 정보의 구조를 이해할 수 있게 만드는 공간에 가깝다고 본다.
여백이 너무 부족하면 정보가 서로 경쟁하고, 지나치게 많으면 한 화면에서 확인할 수 있는 정보량이 줄어든다.
결국 게임 UI에서 여백을 설계한다는 것은 빈 공간을 만드는 일이 아니다.
제한된 화면 안에서 정보와 정보 사이의 관계를 설계하는 일이다.