모바일 RPG를 오래 서비스하다 보면 전투 HUD에는 처음보다 훨씬 많은 기능이 들어가게 된다. 스킬과 체력처럼 전투에 필요한 정보뿐 아니라 퀘스트, 파티, 자동전투, 이벤트, 성장 콘텐츠까지 하나의 화면에 추가되기 때문이다. 문제는 기능이 늘어날 때마다 버튼을 하나씩 배치하는 방식으로 대응하면 HUD의 구조가 빠르게 무너진다는 점이다. 이번 글에서는 기능이 계속 추가되는 모바일 RPG에서 HUD의 복잡도를 어떻게 관리하고, 확장 가능한 UI 구조를 만들 수 있는지 정리해본다.
모바일 RPG의 HUD는 처음부터 복잡한 것이 아니다
모바일 RPG의 초기 HUD를 단순하게 생각하면 필요한 요소는 의외로 많지 않다.
플레이어의 HP와 상태를 보여주고, 이동할 수 있는 조작 영역과 공격·스킬 버튼을 배치한다. 여기에 현재 전투 대상과 필요한 최소한의 메뉴 정도가 추가될 수 있다.
문제는 게임이 성장하면서 시작된다.
운영 기간이 길어지고 콘텐츠가 추가되면 전투 화면에서도 접근해야 하는 기능이 계속 늘어난다.
예를 들어 다음과 같은 기능이 추가될 수 있다.
- 자동전투와 전투 설정
- 파티 및 매칭
- 퀘스트 추적
- 버프와 디버프
- 탈것과 특수 스킬
- 이벤트 콘텐츠
- 기간 한정 기능
- 성장 및 보상 알림
- 음성 채팅이나 커뮤니케이션 기능
각 기능만 놓고 보면 HUD에 버튼 하나를 추가하는 것이 큰 문제처럼 보이지 않는다.
하지만 이런 방식이 반복되면 어느 순간 화면에는 각자 필요해서 추가된 UI가 너무 많아진다.
모바일 RPG HUD가 복잡해지는 이유는 단순히 기능이 많아서가 아니라, 서로 다른 시기에 만들어진 기능들이 하나의 화면에 계속 누적되기 때문이다.
기능이 추가될 때마다 빈 공간을 찾으면 구조가 무너지기 쉽다
실제 작업에서는 새로운 기능이 추가되었을 때 기존 HUD 안에서 배치할 공간을 찾게 되는 경우가 있다.
처음에는 우측 상단에 여유가 있어 버튼을 하나 넣는다. 이후 새로운 기능이 생기면 그 옆에 하나를 더 배치한다. 공간이 부족해지면 버튼 크기를 조금 줄이거나 다른 영역으로 이동한다.
이 과정이 몇 번 정도는 큰 문제가 되지 않는다.
하지만 기능 추가가 반복되면 화면은 점점 이런 구조가 되기 쉽다.
기존 HUD → 빈 공간 탐색 → 신규 버튼 추가 → 공간 부족 → 기존 UI 축소 → 다시 신규 버튼 추가
나는 이런 상황에서 개별 버튼의 위치보다 HUD가 어떤 기준으로 영역을 나누고 있는지 먼저 확인하는 편이다.
새로운 기능을 어디에 넣을지만 고민하면 다음 기능이 추가될 때 같은 문제가 다시 발생하기 때문이다.
기능이 추가될수록 복잡해지는 HUD의 비교
모바일 ‘검은사막’ 출시 초반 HUD(출처: https://zdnet.co.kr/view/?no=20180329105231 )
모바일 ‘검은사막’ 최근 HUD(출처: https://forum.blackdesertm.com/Board/Detail?boardNo=12&contentNo=646869)
HUD를 기능이 아니라 역할에 따라 나누는 것이 중요하다
HUD의 확장성을 확보하려면 각각의 기능보다 먼저 화면 안에서 UI가 수행하는 역할을 구분할 필요가 있다.
예를 들어 모바일 RPG의 HUD를 다음처럼 나눠볼 수 있다.
전투 조작 영역
공격, 스킬, 회피처럼 플레이어가 전투 중 직접 사용하는 기능이다.
전투 빈도가 높고 빠른 입력이 필요하기 때문에 다른 기능이 추가되더라도 조작 영역이 쉽게 침범되지 않는 것이 중요하다.
전투 정보 영역
HP, 적 상태, 버프·디버프, 파티 상태처럼 현재 전투 판단에 필요한 정보를 보여준다.
이 영역에서는 기능의 개수보다 정보를 얼마나 빠르게 읽을 수 있는가가 중요하다.
진행 정보 영역
퀘스트, 목표, 콘텐츠 진행 상황처럼 플레이어가 현재 무엇을 해야 하는지 알려주는 영역이다.
항상 모든 내용을 보여줄 필요는 없기 때문에 상황에 따라 축약하거나 접을 수 있다.
시스템 접근 영역
가방, 설정, 성장, 이벤트처럼 전투 자체와 직접적인 관련은 적지만 플레이 중 접근해야 하는 기능이다.
기능이 늘어날 가능성이 가장 높은 영역이기도 하다.
이 구조가 필요한 이유는 새로운 기능이 추가될 때마다 위치를 새로 고민하는 것이 아니라, 어떤 역할에 속하는지 먼저 판단할 수 있도록 만드는 데 있다.
모든 기능을 같은 방식으로 노출할 필요는 없다
HUD가 복잡해질수록 가장 먼저 검토할 것은 버튼의 크기가 아니다.
이 기능을 항상 화면에 보여줘야 하는가를 먼저 판단해야 한다.
기능은 노출 방식에 따라 몇 가지 단계로 나눌 수 있다.
항상 노출
전투 중 반복적으로 확인하거나 즉시 입력해야 하는 기능이다. HP, 기본 공격, 주요 스킬 등이 여기에 해당한다.
상황에 따라 노출
특정 조건에서만 필요한 기능이다. 탈것, 상호작용, 특수 전투 기믹처럼 사용할 수 있는 상황에서만 나타나게 할 수 있다.
축약 노출
정보가 존재한다는 사실은 보여주되 세부 내용은 펼쳤을 때 확인하도록 구성할 수 있다. 퀘스트 목록이나 파티 정보 등이 대표적이다.
메뉴 내부로 이동
사용 빈도가 낮고 즉시 접근할 필요가 없는 기능은 HUD에서 제거하고 별도의 메뉴 안에서 접근하게 할 수 있다.
개인적으로는 기능이 늘어났을 때 버튼을 어떻게 작게 만들 것인지보다 해당 기능이 HUD에 계속 존재해야 하는지를 먼저 판단하는 것이 중요하다고 본다.
HUD 기능의 노출 단계
접기와 펼치기는 공간을 줄이는 기능만은 아니다
기능이 많아지면 흔히 사용하는 방법 중 하나가 접기와 펼치기이다.
퀘스트 목록을 접거나 상단 메뉴를 하나의 그룹으로 묶는 방식이다.
하지만 단순히 공간을 확보하기 위해 모든 기능을 접어버리면 다른 문제가 생길 수 있다. 플레이어가 기능의 존재를 알아차리지 못하거나 필요한 기능에 접근하기 위해 입력 단계가 늘어나기 때문이다.
그래서 접기 구조에서는 공간 절약과 접근성 사이의 균형을 봐야 한다.
나는 접기 구조를 사용할 때 다음 두 가지를 구분해서 보는 편이다.
지금 확인할 필요가 없는 정보는 접어도 된다.
반면 지금 사용할 가능성이 높은 기능은 단순히 화면이 부족하다는 이유만으로 숨기면 조작성이 떨어질 수 있다.
같은 접기 기능이라도 퀘스트 목록과 전투 스킬에 동일한 기준을 적용하기 어려운 이유가 여기에 있다.
기능의 중요도는 플레이 상황에 따라 달라질 수 있다
HUD를 정리할 때 또 하나 어려운 부분은 하나의 기능에 고정된 중요도를 부여하기 어렵다는 점이다.
평상시에는 중요하지 않았던 기능이 특정 콘텐츠에서는 핵심 기능이 될 수 있다.
예를 들어 일반 필드에서는 상호작용 버튼이 거의 사용되지 않지만 특정 오브젝트 근처에서는 즉시 필요한 버튼이 된다. 파티 정보 역시 혼자 플레이할 때와 레이드 전투를 진행할 때 중요도가 달라질 수 있다.
따라서 HUD를 고정된 화면으로만 설계하면 기능이 늘어날수록 모든 상황을 한 화면에 담아야 하는 문제가 생긴다.
이를 줄이기 위해서는 현재 상황에 따라 필요한 UI가 나타나거나 강조되는 구조를 함께 고려할 수 있다.
다만 이것을 모든 게임에 적용할 수는 없다. UI가 지나치게 자주 나타나고 사라지면 화면이 불안정하게 느껴질 수 있고, 익숙한 버튼의 위치가 계속 변하면 오히려 조작을 방해할 수 있다.
핵심은 HUD 전체를 계속 바꾸는 것이 아니라 상황에 따라 변해도 되는 영역과 위치가 유지되어야 하는 영역을 구분하는 것이다.
고정 영역과 상황형 영역
화면의 복잡도와 기능의 개수는 같은 의미가 아니다
기능이 많다고 반드시 복잡한 HUD가 되는 것은 아니다.
반대로 기능의 개수가 많지 않아도 관계가 정리되어 있지 않으면 복잡하게 느껴질 수 있다.
예를 들어 10개의 버튼이 화면 곳곳에 흩어져 있는 것과 10개의 버튼이 역할에 따라 세 개의 그룹으로 정리되어 있는 것은 플레이어가 받아들이는 정보량이 다르다.
여백, 정렬, 크기, 색상과 같은 시각적 요소도 중요하지만 그 이전에 어떤 기능끼리 하나의 그룹으로 인식되어야 하는지가 정리되어 있어야 한다.
그래서 HUD를 정리할 때 단순히 UI를 줄이는 것만이 답은 아니다.
기능을 삭제하지 않더라도 다음과 같은 방식으로 인지 부담을 줄일 수 있다.
- 비슷한 목적의 기능을 하나의 영역으로 묶는다.
- 자주 사용하는 기능과 낮은 빈도의 기능을 분리한다.
- 동시에 확인할 필요가 없는 정보는 한 번에 노출하지 않는다.
- 위치와 정렬 규칙을 일관되게 유지한다.
결국 중요한 것은 화면에 몇 개가 존재하는가보다 플레이어가 그것을 몇 개의 정보 덩어리로 받아들이는가에 가깝다.
HUD에서 어떤 정보를 먼저 보여줄 것인지에 대한 기준은 이전 글에서 다룬 게임 UI의 정보 위계 설계와도 연결된다.
신규 기능을 추가하기 전에 기존 HUD와의 관계를 먼저 본다
장기 서비스 RPG에서는 HUD를 한 번 완성하고 끝내기 어렵다.
새로운 콘텐츠와 시스템은 계속 추가되고, 출시 당시에는 예상하지 못했던 기능이 들어갈 수도 있다.
그래서 초기 HUD를 설계할 때 모든 미래 기능을 예측하는 것보다 새로운 기능을 받아들일 수 있는 규칙을 만들어두는 것이 현실적이다.
새로운 기능이 들어왔을 때 나는 먼저 다음과 같은 흐름으로 보는 편이다.
이 기능은 전투 중 필요한가?
필요하다면 항상 필요한가, 특정 상황에서만 필요한가?
항상 필요하다면 기존 HUD의 어느 역할 그룹에 속하는가?
특정 상황에서만 필요하다면 기존 영역을 침범하지 않고 나타났다 사라질 수 있는가?
이런 판단을 먼저 하고 나면 실제 위치와 크기를 결정하기가 훨씬 쉬워진다.
HUD가 복잡해졌다면 다시 그리기 전에 구조부터 확인한다
라이브 서비스 중인 HUD가 이미 복잡해졌다면 전체 화면을 새롭게 디자인하고 싶어질 수 있다.
하지만 시각적인 리뉴얼만으로는 기능 구조가 그대로 남아 있기 때문에 시간이 지나면 비슷한 문제가 다시 발생할 가능성이 있다.
이럴 때는 현재 HUD에 존재하는 요소를 한 번 분류해보는 방법이 유용하다.
각 요소가 전투 조작 / 전투 정보 / 진행 정보 / 시스템 접근 중 어디에 속하는지 나누고, 그 안에서 다시 항상 필요한 기능 / 상황에 따라 필요한 기능 / 낮은 빈도의 기능으로 구분한다.
그러면 화면에서 공간을 많이 차지하고 있지만 실제 사용 빈도는 낮은 기능이나, 서로 다른 위치에 흩어져 있지만 같은 역할을 하는 기능이 보이기 시작한다.
작업하면서 복잡한 화면을 정리해야 했던 경우에도 나는 그래픽을 바로 수정하기보다 현재 화면에 존재하는 기능을 먼저 분류하는 편이다.
UI의 복잡함이 그래픽에서 생긴 것인지, 기능 구조에서 생긴 것인지 먼저 구분하기 위해서다.
확장 가능한 HUD는 빈 공간이 많은 HUD가 아니다
기능 증가에 대비한다고 해서 처음부터 화면 곳곳을 비워둘 필요는 없다.
확장성이 있다는 것은 미래에 사용할 빈 공간을 많이 확보한다는 의미보다 새로운 기능이 들어왔을 때 어디에 속하고 어떻게 노출되어야 하는지 판단할 수 있는 구조가 있다는 의미에 가깝다.
모바일 RPG의 HUD는 게임이 서비스되는 동안 계속 변할 가능성이 높다.
그래서 완성된 한 장의 화면만 잘 만드는 것보다 전투 조작, 정보, 진행 상황, 시스템 기능의 관계를 정리하고 각 영역이 어떤 방식으로 확장될 수 있는지를 함께 설계하는 것이 중요하다.
결국 복잡한 HUD를 해결하는 방법은 모든 기능을 작게 만들거나 숨기는 것이 아니다.
플레이어가 지금 필요한 기능은 빠르게 찾을 수 있게 하고, 지금 필요하지 않은 기능은 화면의 우선순위를 차지하지 않게 만드는 것.
이 기준이 유지되어야 기능이 계속 추가되는 모바일 RPG에서도 HUD의 구조를 오래 관리할 수 있다.