전투 UI를 작업하다 보면 화면은 생각보다 빠르게 복잡해진다.(특히 모바일 디바이스는 더 그렇다)
처음에는 HP와 스킬, 타깃 정보 정도만 있던 화면에 퀘스트가 들어오고, 파티 정보가 추가되고, 버프와 디버프가 붙는다. 여기에 미니맵, 자동전투, 채팅, 이벤트 알림까지 하나씩 추가되기 시작하면 어느 순간 게임 화면보다 UI가 먼저 보이기도 한다.
문제는 각각의 기능만 놓고 보면 대부분 필요한 정보라는 점이다.
그래서 전투 UI를 설계할 때 ‘무엇을 넣어야 하는가’보다 ‘무엇을 먼저 보여줘야 하는가’를 먼저 생각해야 한다.
플레이어는 전투 중 화면에 표시된 모든 정보를 같은 비중으로 읽지 않는다. 당장 피해야 할 공격과 남은 HP를 확인하는 순간이 있는 반면, 퀘스트 진행 상황은 몇 초 뒤에 확인해도 문제가 없다.
이 차이를 화면에서 구분하는 것이 게임 UI의 정보 위계(Information Hierarchy)다. 전투 화면에서는 단순히 중요한 요소를 크게 만드는 것보다 플레이어가 어떤 정보를 얼마나 빨리 확인해야 하는지를 판단하는 것이 먼저다.
게임 UI에서 정보 위계가 중요한 이유
정보 위계라고 하면 중요한 글자를 크게 만들거나 강한 색상을 사용하는 것을 먼저 떠올리기 쉽다. 물론 크기와 색상도 중요한 수단이다. 하지만 게임 UI에서는 그보다 먼저 플레이어가 필요한 순간에 필요한 정보를 얼마나 빠르게 발견할 수 있는가를 생각해야 한다.
예를 들어 전투 중 캐릭터의 HP가 얼마 남지 않은 상황을 생각해보자.
이 순간 플레이어에게 중요한 것은 이벤트 알림이나 퀘스트 진행도가 아니다. 현재 HP와 회복 가능 여부, 적의 상태처럼 생존과 직접 연결되는 정보다.
그런데 HP, 이벤트, 퀘스트, 미니맵, 메뉴 버튼이 모두 비슷한 크기와 명도, 색상으로 표현되어 있다면 플레이어는 필요한 정보를 찾기 위해 화면을 한 번 더 탐색해야 한다.
몇 초 정도의 차이는 별것 아닌 것처럼 보일 수 있지만 실시간 전투에서는 다르다. 정보를 찾는 시간 자체가 플레이 경험의 일부가 된다.
이 구조가 필요한 이유는 플레이어의 시선을 UI에 오래 머물게 하기 위해서가 아니다. 오히려 반대다. 필요한 정보를 빠르게 확인하고 다시 전투에 집중할 수 있도록 만들기 위해서다.
프로젝트마다 전투 방식과 필요한 정보가 다르기 때문에 모든 게임에 동일한 기준을 적용할 수는 없다.
다만 화면의 초기 구조를 잡을 때 나는 정보를 크게 세 단계(우선순위 1,2,3)로 나눠보는 편이다. 처음부터 그래픽적인 강조를 결정하는 것보다 어떤 정보가 플레이에 직접 영향을 주는지를 먼저 구분하기 위해서다.
- 초록색 : Priority 01: HP/자원, 하단 전투 스킬, 소모품처럼 즉각적인 전투 행동에 직접 연결되는 정보
- 분홍색 : Priority 02: 버프/상태효과,전투 목표처럼 현재 상황과 다음 판단을 보조하는 정보
- 하늘색 : Priority 03: 상단 재화·메뉴, 좌측 메뉴, 우측 조작 관련 영역 등 상대적으로 부가적인 정보
전투 UI 정보를 세 단계로 나눠보는 방법
1. 지금 당장 행동에 영향을 주는 정보
가장 높은 우선순위다.
캐릭터 HP와 주요 자원, 적의 상태, 핵심 스킬과 쿨타임, 회피나 방어처럼 전투에 직접 사용하는 기능 등이 여기에 해당한다.
이 정보들의 공통점은 확인한 직후 플레이어의 행동으로 연결된다는 것이다.
HP가 부족하면 회복하거나 위험 지역을 벗어나야 한다. 스킬 쿨타임이 끝났다면 스킬을 사용할 수 있고, 적이 강력한 공격을 준비한다면 회피해야 한다.
그래서 1순위 정보는 무조건 크게 보여주는 것보다 짧은 시간 안에 상태를 판단할 수 있게 만드는 것이 중요하다.
예를 들어 스킬 버튼은 플레이를 반복할수록 사용자가 위치를 학습한다. 이 경우 버튼 자체를 크게 만드는 것보다 사용 가능, 쿨타임, 비활성 상태를 명확하게 구분하는 편이 실제 플레이에는 더 도움이 될 수 있다.
2. 전투 판단을 보조하는 정보
두 번째는 즉각적인 조작을 요구하지는 않지만 다음 행동을 판단하는 데 필요한 정보다.
파티원의 상태, 버프와 디버프, 전투 목표 등이 대표적이다.
이 정보는 1순위 요소처럼 계속 강하게 강조할 필요는 없지만 필요할 때 어렵지 않게 찾을 수 있어야 한다.
실제 GUI 작업에서는 이 단계의 정보가 핵심 정보와 시각적으로 경쟁하는 경우가 생긴다.
각 기능을 하나씩 작업할 때는 문제가 잘 보이지 않는다. 아이콘에 프레임을 추가하고, 강조색을 넣고, 필요한 경우 이펙트까지 적용하면 각각의 UI는 완성도가 높아 보인다.
하지만 여러 기능이 하나의 전투 화면에 모이면 이야기가 달라진다.
개별 UI의 완성도보다 화면 전체에서 각 요소가 어떤 관계를 가지는지가 중요해진다.
개인적으로는 이럴 때 중요한 UI를 계속 강하게 만드는 것보다 우선순위가 낮은 요소의 대비를 한 단계 낮춰보는 것이 더 효과적이라고 본다.
3. 전투 중 참고하는 부가 정보
퀘스트 상세 내용, 메뉴 진입 버튼, 일부 재화, 이벤트 알림처럼 전투 결과에 즉각적인 영향을 주지 않는 정보가 여기에 해당한다.
특히 라이브 서비스를 오래 진행한 게임에서는 이 영역이 계속 늘어나기 쉽다.
새로운 콘텐츠와 이벤트가 추가되고 각각의 기능에 버튼과 알림이 생긴다. 처음에는 여유가 있었던 화면 가장자리에 기능이 하나씩 쌓이면서 HUD가 점점 복잡해지는 경우가 있다.
이럴 때 단순히 모든 버튼을 작게 만드는 것만으로는 문제가 해결되지 않는다.
이 단계에서 ‘이 정보가 전투 중에도 항상 보여야 하는가?’를 먼저 생각해 봐야 한다.
전투가 끝난 뒤 확인해도 되는 정보라면 전투 상태에서는 축약하거나 숨길 수 있다. 정보를 없애는 것이 아니라 필요한 시점에 보여주는 것이다.
정보 위계는 크기만으로 만들지 않는다
중요한 정보를 강조한다고 하면 가장 먼저 크기를 키우기 쉽다.
크기는 분명 가장 직관적인 방법 중 하나다. 메인 버튼과 보조 버튼의 면적을 다르게 만드는 것만으로도 어느 쪽이 중요한지 빠르게 전달할 수 있다.
하지만 모든 중요한 요소를 크게 만들 수는 없다. 특히 모바일 게임에서는 사용할 수 있는 화면 공간이 제한되어 있기 때문에 크기 외의 방법을 함께 사용해야 한다.
1.크기와 면적
중요한 정보에 더 많은 면적을 사용하는 가장 기본적인 방법이다.
다만 화면을 구성하는 모든 요소가 자신의 중요성을 이유로 커지기 시작하면 결국 위계가 사라진다. 상대적인 차이가 있어야 크기도 의미를 가진다.
2.명도와 대비
개인적으로 게임 GUI에서 활용도가 높은 방법이라고 본다.
같은 크기의 아이콘이라도 주변보다 밝고 배경과 대비가 크면 먼저 인식된다. 반대로 우선순위가 낮은 요소의 명도와 대비를 낮추면 자연스럽게 한 단계 뒤로 보낼 수 있다.
정보 위계를 만든다는 것은 중요한 것을 계속 강조하는 작업만을 의미하지 않는다. 덜 중요한 것을 덜 보이게 만드는 것도 정보 위계 설계의 일부다.
3.색상
색상은 위험, 성공, 활성, 비활성과 같은 상태를 빠르게 전달하기 좋다.
다만 색상 하나에만 의미를 의존하는 것은 피하는 편이 좋다. 아이콘 형태, 명도, 텍스트, 이펙트와 함께 사용하면 플레이어가 한 가지 시각 신호만 보고 상태를 판단하지 않아도 된다.
4.위치
반복해서 플레이하는 게임에서는 위치 자체가 정보가 된다.
플레이어는 시간이 지나면서 HP가 어디에 있는지, 스킬이 어디에 있는지를 자연스럽게 학습한다.
그래서 라이브 게임 UI를 수정할 때는 단순히 더 보기 좋은 위치가 생겼다는 이유만으로 주요 기능의 위치를 쉽게 변경하기 어렵다. 기존 사용자가 이미 학습한 위치도 UX의 일부이기 때문이다.
5.움직임과 이펙트
움직이는 UI는 정적인 UI보다 훨씬 빠르게 시선을 끈다.
문제는 이 방법이 효과적이기 때문에 과하게 사용하기 쉽다는 점이다.
버튼마다 빛이 움직이고, 레드닷(Red Dot)이 깜빡이고, 이벤트 배너와 보상 알림까지 동시에 움직이면 플레이어의 시선을 요구하는 요소가 너무 많아진다.
개인적으로 움직임은 정말 시선을 이동시켜야 하는 순간을 위해 남겨두는 편이 좋다고 본다.
중요한 정보는 항상 중요한 것이 아니다
전투 UI의 정보 위계를 생각할 때 놓치기 쉬운 부분이 있다.
같은 정보도 게임의 상태에 따라 중요도가 달라진다는 점이다.
HP가 100%일 때 HP Bar를 계속 강하게 강조할 필요는 없다. 하지만 HP가 10%까지 내려간 순간에는 이야기가 달라진다. 같은 HP UI라도 순간적으로 정보의 우선순위가 높아져야 한다.
이를 단순하게 나누면 다음과 같은 구조를 생각할 수 있다.
Normal → Warning → Critical
- Normal 상태에서는 기본적인 HP Bar를 유지한다.
- Warning 단계에서는 색상이나 명도에 변화를 줄 수 있다.
- Critical 상태에서는 추가적인 경고 효과나 사운드, 화면 연출을 사용해 위험 상태를 전달할 수 있다.
(원본 이미지에 일부 효과를 넣음)
스킬도 비슷하다.
쿨타임이 남아 있는 스킬과 지금 사용할 수 있는 스킬이 거의 동일하게 보인다면 플레이어는 매번 쿨타임 숫자를 읽어야 한다.
반대로 쿨타임이 끝나는 순간 명도나 아이콘 상태가 명확하게 변한다면 숫자를 자세히 읽지 않아도 사용할 수 있다는 것을 판단할 수 있다.
결국 게임 UI의 정보 위계는 고정된 레이아웃만의 문제가 아니다. 게임의 상태에 따라 정보의 우선순위가 움직이는 구조까지 함께 설계해야 한다.
실제 작업에서는 그래픽보다 먼저 정리할 것이 있다
UI 작업을 시작하면 컬러와 프레임, 아이콘부터 디자인하고 싶어지는 경우가 있다.
하지만 복잡한 화면일수록 그래픽 작업 전에 기능과 정보를 먼저 적어보는 편이 좋다.
그리고 각각의 요소에 다음과 같은 질문을 해본다.
- 플레이어가 얼마나 자주 확인하는가?
- 확인한 뒤 즉시 행동해야 하는가?
- 이 정보를 놓치면 플레이 결과에 영향을 주는가?
- 항상 화면에 보여야 하는가?
- 특정 상황에서만 중요해지는 정보인가?
예를 들어 퀘스트 정보가 전투 화면에 필요하더라도 퀘스트 제목, 설명, 목표, 보상을 모두 보여줄 필요는 없다.
전투 중에는 현재 목표만 축약해서 보여주고 상세 내용은 퀘스트 화면에서 확인하도록 만들 수 있다.
반대로 중요한 상태 이상이 작은 아이콘 하나로만 표현되어 플레이어가 계속 놓친다면 단순히 아이콘을 크게 만드는 것 외에도 캐릭터 주변이나 화면 중앙에 추가적인 피드백을 주는 방법을 생각할 수 있다.
결국 핵심은 정보를 무조건 줄이는 것이 아니다.
지금 필요한 정보와 나중에 확인해도 되는 정보를 구분하는 것이다.
전투 HUD를 볼 때 확인하는 7가지 기준
1. 화면에서 가장 먼저 보이는 것은 무엇인가?
처음 시선이 향하는 요소가 실제 플레이에서도 가장 중요한 정보인지 확인한다. 가장 화려한 UI와 가장 중요한 UI가 반드시 같은 것은 아니다.
2. 핵심 정보와 부가 정보의 차이가 보이는가?
크기만 비교하지 않는다. 명도, 위치, 색상, 움직임까지 포함해 시각적 강도를 확인한다.
3. 서로 연관된 정보가 가까이 있는가?
함께 확인해야 하는 정보가 화면의 서로 반대편에 있다면 플레이어의 시선 이동이 늘어난다. 정보의 중요도뿐 아니라 정보 사이의 관계도 함께 볼 필요가 있다.
4. 상태가 바뀌었을 때 충분한 차이가 생기는가?
Normal과 Warning, 활성과 비활성, 사용 가능과 사용 불가 상태가 짧은 시간 안에 구분되는지 확인한다.
5. 동시에 시선을 요구하는 요소가 너무 많지 않은가?
애니메이션, 알림, 레드닷(Red Dot), 강조색이 한꺼번에 경쟁하고 있다면 실제로 가장 중요한 정보가 무엇인지 다시 확인할 필요가 있다.
6. 전투 중 필요하지 않은 정보까지 항상 노출되고 있지는 않은가?
항상 보여주는 것만이 정보 제공은 아니다. 특정 상황에서 축약하거나 숨기는 것도 하나의 설계 방법이다.
7. 플레이어가 위치를 학습할 수 있는 구조인가?
반복적으로 사용하는 기능은 위치의 일관성이 중요하다. 익숙해진 플레이어가 화면을 매번 탐색하지 않아도 되는 구조인지 확인한다.
다만 이것을 모든 게임에 동일하게 적용할 수는 없다.
턴제 RPG에서는 플레이어가 정보를 읽을 시간이 비교적 충분하지만 액션 RPG에서는 순간적인 판단이 더 중요하다. MMORPG에서는 파티원이나 레이드 정보의 우선순위가 올라갈 수 있고, 모바일 게임에서는 터치 조작 영역까지 함께 고려해야 한다.
결국 장르와 플레이 방식이 달라지면 정보의 우선순위도 달라진다.
게임 UI의 정보 위계는 결국 선택의 문제다
전투 HUD를 설계하면서 모든 정보를 잘 보이게 만드는 것은 생각보다 어렵지 않다.
더 어려운 것은 어떤 정보를 덜 보이게 만들 것인지 결정하는 일이다.
기획된 기능에는 각각 존재해야 할 이유가 있기 때문에 실제 프로젝트에서는 모든 요소가 어느 정도 중요해 보인다. 하지만 플레이어 입장에서 그 중요도가 항상 같은 것은 아니다.
그래서 정보 위계를 정할 때 세 가지를 가장 먼저 보는 걸 추천한다.
1. 얼마나 자주 확인하는가.
2. 얼마나 빠르게 확인해야 하는가.
3. 확인한 뒤 어떤 행동으로 이어지는가.
이 세 가지를 먼저 정리하면 그다음에 크기와 위치, 색상, 명도, 움직임을 이용해 시각적인 우선순위를 만들 수 있다.
개인적으로 좋은 전투 UI는 계속해서 자신의 존재감을 드러내는 UI보다 필요한 순간에는 확실하게 보이고, 필요하지 않을 때는 게임 화면 뒤로 물러날 수 있는 UI에 가깝다고 본다.
플레이어가 UI를 찾느라 게임을 놓치는 것이 아니라 UI가 필요한 정보를 적절한 순간에 전달하고, 플레이어는 다시 게임에 집중할 수 있어야 한다.
전투 화면에서 정보 위계를 설계하는 이유는 결국 여기에 있다.