게임 UI를 설계할 때 화면 안에서 요소를 어디에 배치할 것인지 만큼 중요한 것이 있다. 바로 어떤 UI가 다른 UI보다 앞에 보여야 하는가를 결정하는 일이다.
전투 HUD 위에 아이템 획득 알림이 나타나고, 그 위로 확인 팝업이 열릴 수 있다. 특정 상황에서는 튜토리얼이나 보스 등장 연출이 화면을 다시 덮기도 한다. 각각의 UI를 따로 보면 문제가 없어도 여러 기능이 동시에 실행되는 순간 정보가 겹치거나 중요한 버튼이 가려지는 문제가 발생한다.
나는 이런 문제를 확인할 때 화면의 X축과 Y축뿐 아니라 Z축의 구조를 함께 보는 편이다.
여기서 Z축은 단순히 그래픽 프로그램에서 레이어를 위아래로 정렬하는 것을 의미하지 않는다. HUD, 팝업, 알림, 튜토리얼, 연출처럼 목적이 다른 UI가 동시에 등장했을 때 무엇을 앞에 보여주고, 무엇을 뒤로 보내며, 어떤 UI가 조작의 우선권을 가질 것인지 정하는 화면 구조에 가깝다.
이번 글에서는 게임 UI의 Z축을 어떤 기준으로 나눌 수 있는지, HUD·알림·팝업·연출이 서로 겹칠 때 무엇을 확인해야 하는지 정리해본다.
게임 UI의 Z축은 단순한 레이어 순서가 아니다
게임 화면을 평면으로 보면 UI는 X축과 Y축 위에 배치된다.
캐릭터 정보는 왼쪽 상단, 미니맵은 오른쪽 상단, 스킬 버튼은 오른쪽 하단처럼 각 요소의 위치를 정할 수 있다.
하지만 실제 플레이에서는 여러 종류의 UI가 같은 화면에 동시에 나타난다.
전투 중 퀘스트 완료 알림이 나타날 수 있고, 새로운 콘텐츠가 해금되면서 팝업이 열릴 수도 있다. 그 순간 레벨업이나 보스 등장 연출이 실행되는 경우도 있다.
이때 필요한 것이 Z축이다.
화면의 레이어를 단순하게 나누면 다음과 같이 볼 수 있다.
GAME → HUD → NOTICE → POPUP → SYSTEM
뒤로 갈수록 화면의 앞쪽에 표시되는 구조이다.
다만 중요한 것은 단순히 레이어 번호를 높이는 것이 아니다. 어떤 상황에서 어떤 UI가 다른 UI보다 우선해야 하는지 규칙을 만드는 것이 핵심이다.
이 구조가 필요한 이유는 여러 UI가 동시에 호출되더라도 플레이어가 현재 확인해야 하는 정보와 행동해야 하는 영역을 놓치지 않도록 만드는 데 있다.
이미지 참고. 게임 UI의 기본 Z축 구조
HUD는 화면의 기본 레이어에 가깝다
HUD는 플레이 중 지속적으로 확인하는 정보이다.
체력, 스킬, 미니맵, 퀘스트 정보처럼 게임을 진행하는 동안 반복해서 확인해야 하는 요소가 여기에 포함된다.
HUD의 특징은 항상 중요하지만 항상 가장 앞에 있을 필요는 없다는 것이다.
예를 들어 보상 팝업이 열렸는데 스킬 버튼이 팝업 위로 올라온다면 화면의 앞뒤 관계가 어색해진다. 반대로 팝업이 열릴 때마다 HUD 전체를 제거하면 플레이 중이던 화면과 팝업 사이의 연결이 갑자기 끊길 수 있다.
그래서 HUD는 기본적으로 낮은 UI 레이어에 유지하고, 상위 UI가 나타났을 때 그 아래에 남겨둘 수 있다.
상황에 따라 HUD 전체의 명도를 낮추거나 일부 요소만 숨기는 방법도 사용할 수 있다.
개인적으로는 HUD를 단순히 항상 표시되는 UI라기보다 다른 UI가 등장하기 전부터 존재하는 기본 레이어로 보는 것이 중요하다고 본다.
알림은 HUD보다 앞에 있어도 플레이를 막을 필요는 없다
아이템 획득, 퀘스트 완료, 업적 달성, 콘텐츠 해금 같은 알림은 플레이 중 자주 등장한다.
이런 정보는 HUD보다 앞에 표시되어야 발견하기 쉽다.
하지만 화면에서 앞에 보인다는 이유만으로 플레이어의 조작까지 막아야 하는 것은 아니다.
전투 중 아이템 획득 알림이 나타났다고 가정해보자. 메시지는 플레이어에게 보여야 하지만 그 순간 이동이나 스킬 사용까지 막힌다면 작은 정보 하나를 전달하기 위해 플레이 흐름을 중단하게 된다.
그래서 알림은 HUD보다 높은 Z축에 있으면서도 아래쪽 HUD의 입력은 그대로 유지하는 구조를 사용할 수 있다.
나는 이런 UI를 확인할 때 무엇이 앞에 보이는가와 무엇이 입력을 받을 수 있는가를 따로 보는 편이다.
두 기준은 항상 같지 않다.
즉, Z축이 높다고 해서 반드시 입력의 우선순위까지 높아야 하는 것은 아니다.
팝업은 시선과 입력을 함께 가져가는 경우가 많다
팝업은 알림과 성격이 다르다.
구매 확인, 보상 수령, 옵션 선택처럼 플레이어가 무언가를 확인하거나 선택해야 하는 경우가 많기 때문이다.
팝업이 열려 있는데 뒤쪽 HUD 버튼까지 동시에 눌린다면 사용자는 현재 어떤 화면을 조작하고 있는지 판단하기 어려워질 수 있다.
그래서 일반적인 팝업은 HUD와 알림보다 높은 Z축에 위치하면서 하위 레이어의 입력을 제한하는 구조를 사용할 수 있다.
이때 함께 사용하는 것이 딤드 영역이다.
딤드는 단순히 배경을 어둡게 만드는 장식이 아니다. 현재 조작해야 하는 영역과 일시적으로 사용할 수 없는 영역을 시각적으로 분리한다.
구조를 단순하게 보면 다음과 같다.
HUD → DIMMED → POPUP
이 구조가 필요한 이유는 플레이어의 시선뿐 아니라 현재 가능한 행동의 범위까지 구분하는 데 있다.
이미지 참고. NOTICE와 POPUP의 차이
모든 팝업을 계속 위로 쌓는 것은 좋은 해결 방법이 아니다
팝업이라고 해서 모두 같은 우선순위를 가지는 것은 아니다.
상점에서 아이템을 선택한 뒤 구매 확인창이 열릴 수 있고, 그 위에 다시 네트워크 오류 같은 시스템 메시지가 나타날 수도 있다.
이를 단순화하면 다음과 같은 구조가 된다.
기본 화면 → 팝업 → 확인 팝업 → 시스템 팝업
각각의 기능만 보면 자연스러워 보인다. 하지만 이런 방식이 반복되면 화면 위에 팝업이 계속 쌓인다.
작업하면서 기능을 추가하다 보니 팝업이 반복해서 중첩되는 경우가 있었다. 각각의 기능만 보면 문제가 없어 보였지만 전체 플로우로 확인하면 원래 화면으로 돌아가기 위해 여러 번 닫아야 하는 구조가 만들어지기도 했다.
특히 모바일에서는 작은 화면 안에 여러 팝업이 중첩되면 사용자가 현재 어느 단계에 있는지 파악하기도 어려워진다.
그래서 새로운 문제가 생길 때마다 Z축을 하나 더 추가하기보다 기존 레이어 안에서 해결할 수 없는지 먼저 확인하는게 좋다.
팝업 내부의 상태 변화로 처리할 수 있는지, 기존 팝업을 새로운 팝업으로 교체하는 편이 자연스러운지, 두 화면이 반드시 동시에 남아 있어야 하는지를 먼저 판단한다.
Z축은 화면 문제를 해결하는 수단이지만, 레이어가 많아진다고 화면 구조가 좋아지는 것은 아니다.
연출은 얼마나 앞에 보여줄지가 아니라 얼마나 플레이를 멈출지가 중요하다
레벨업, 캐릭터 획득, 보스 등장, 새로운 지역 진입처럼 플레이 흐름을 의도적으로 끊고 강조해야 하는 순간도 있다.
이런 연출은 일반적인 HUD나 알림보다 높은 Z축을 사용할 수 있다. 때로는 HUD 전체를 숨기고 화면 대부분을 연출에 사용하는 것이 더 적절할 수도 있다.
하지만 연출이라는 이유만으로 모든 UI보다 높은 위치를 사용해야 하는 것은 아니다.
예를 들어 보스 전투 중 작은 단계 변화가 발생할 때마다 화면 전체 연출이 등장하고 조작까지 멈춘다면 플레이 흐름에 부담이 될 수 있다.
반대로 중요한 캐릭터를 처음 획득했는데 일반 아이템 알림과 비슷한 크기로 처리하면 보상의 가치가 충분히 전달되지 않을 수 있다.
결국 연출의 Z축을 결정할 때는 그래픽의 크기보다 플레이어의 행동을 어디까지 중단할 필요가 있는가를 함께 판단해야 한다.
개인적으로는 연출을 얼마나 화려하게 보여줄 것인지보다 이 순간에 플레이를 계속하게 할 것인지, 잠시 멈추게 할 것인지 먼저 결정하는 것이 중요하다고 본다.
튜토리얼은 특정 UI만 위로 끌어올릴 수 있다
튜토리얼은 일반적인 팝업과 조금 다른 방식으로 Z축을 사용할 수 있다.
화면 전체를 막는 것이 아니라 특정 UI만 사용할 수 있도록 제한해야 하는 경우가 있기 때문이다.
예를 들어 첫 전투에서 스킬 버튼의 사용법을 알려준다고 가정해보자.
전체 화면에는 딤드를 적용하지만 설명하려는 스킬 버튼 하나만 밝게 노출하고, 그 위에 화살표나 손가락 가이드를 표시할 수 있다.
구조를 단순화하면 다음과 같다.
HUD → TUTORIAL DIMMED → TARGET → GUIDE
원래 HUD에 있던 특정 요소를 튜토리얼이 진행되는 동안 다른 요소보다 강조하는 것이다.
이때 시각적으로 버튼이 밝게 보이는 것만 확인해서는 부족하다. 실제로 버튼을 눌러 진행해야 하는 튜토리얼이라면 강조 영역과 실제 입력 영역도 일치해야 한다.
작업하면서 튜토리얼 가이드는 정상적으로 보이지만 가이드 레이어가 입력을 가로막아 아래 버튼을 누를 수 없는 경우가 생길 수 있다. 결국 여기에서도 화면의 표시 순서와 입력 순서를 함께 확인해야 한다.
다만 이것을 모든 튜토리얼에 적용할 수는 없다. 설명만 읽으면 되는 튜토리얼과 실제 버튼을 눌러야 다음 단계로 넘어가는 튜토리얼은 필요한 입력 구조가 다르다.
이미지 참고. 튜토리얼의 Z축과 입력 영역
Z축 문제는 UI를 따로 볼 때보다 동시에 볼 때 발견된다
각각의 UI를 개별 화면으로 확인하면 문제가 없어 보일 수 있다.
실제 문제는 두 개 이상의 기능이 같은 순간 실행될 때 발생하는 경우가 많다.
예를 들어 퀘스트 완료 알림이 등장하는 순간 레벨업 연출이 시작되고, 동시에 네트워크 오류 팝업이 발생할 수 있다.
각 기능만 따로 확인하면 모두 정상이다. 하지만 실제 게임에서는 같은 화면 위에 여러 시스템이 함께 존재한다.
그래서 Z축을 설계할 때는 개별 UI보다 충돌 상황을 함께 확인하는 것이 중요하다.
HUD와 알림, HUD와 팝업, 알림과 팝업, 팝업과 시스템 메시지, HUD와 튜토리얼처럼 실제 플레이에서 동시에 발생할 가능성이 있는 조합을 확인한다.
여기서 중요한 것은 어떤 UI가 무조건 위에 있어야 한다는 답을 정하는 것이 아니다.
동시에 호출되었을 때 무엇을 그대로 보여주고, 무엇을 숨기고, 무엇을 나중에 보여줄 것인지 결정해야 한다.
경우에 따라서는 Z축 순서를 바꾸는 것보다 두 이벤트가 동시에 발생하지 않도록 노출 시점을 조절하는 것이 더 좋은 해결 방법이 될 수도 있다.
Z축이 높다고 정보의 중요도까지 높은 것은 아니다
Z축을 정보 위계와 같은 개념으로 생각하면 문제가 생길 수 있다.
전투 중 화면 중앙에 작은 아이템 획득 알림이 나타났다고 가정해보자.
알림은 HUD보다 높은 Z축에 있을 수 있다. 하지만 그 순간 플레이어에게 더 중요한 것은 자신의 체력이나 보스의 공격 신호일 수 있다.
즉,
Z축이 높다 = 정보 중요도가 높다
라고 볼 수는 없다.
Z축은 UI가 겹쳤을 때 무엇이 앞에 표시될 것인가에 대한 구조이고, 정보 위계는 사용자가 무엇을 먼저 인식해야 하는가에 대한 구조이다.
게임 UI에서 정보의 우선순위를 나누는 기준은 이전 글에서 다룬 정보 위계 설계와도 연결된다.
두 개념은 서로 영향을 주지만 동일하지 않다.
이 차이를 구분해두면 중요한 정보를 모두 최상위 레이어로 올리는 문제를 줄일 수 있다.
개별 UI보다 레이어 그룹을 먼저 정하면 관리하기 쉽다
실제 프로젝트에서는 개발이 진행되면서 UI가 계속 추가된다.
새로운 기능이 생길 때마다 기존 UI보다 조금 더 높은 레이어를 사용하는 방식으로 대응하면 시간이 지날수록 전체 구조를 파악하기 어려워질 수 있다.
그래서 나는 개별 요소마다 앞뒤 순서를 판단하기보다 용도에 따라 큰 레이어 그룹을 먼저 나누는 편이다.
예를 들어 다음과 같이 구성할 수 있다.
01 GAME — 플레이 화면
게임 월드와 캐릭터가 표시되는 기본 영역이다.
02 HUD — 지속 정보
체력, 스킬, 미니맵처럼 플레이 중 지속적으로 사용하는 UI가 위치한다.
03 NOTICE — 정보 전달
아이템 획득, 퀘스트 완료, 업적처럼 플레이를 중단하지 않는 정보가 위치한다.
04 POPUP — 입력 제한
확인과 선택이 필요하고 하위 입력을 제한하는 UI가 위치한다.
05 GUIDE / DIRECTING — 행동 유도
튜토리얼이나 특정 연출처럼 일시적으로 플레이어의 시선과 행동을 강하게 유도하는 UI가 위치한다.
06 SYSTEM — 최우선 처리
연결 오류나 중요한 시스템 확인처럼 다른 화면보다 우선적으로 처리해야 하는 UI가 위치한다.
프로젝트의 장르와 시스템에 따라 그룹의 개수나 세부 순서는 달라질 수 있다.
중요한 것은 절대적인 레이어 순서를 만드는 것이 아니라 새로운 기능이 추가되었을 때 이 UI가 어떤 성격의 그룹에 속하는지 판단할 수 있는 기준을 만드는 것이다.
좋은 Z축 설계는 플레이어가 레이어를 의식하지 않게 한다
Z축이 자연스럽게 설계된 화면에서 플레이어는 지금 몇 번째 레이어를 보고 있는지 생각하지 않는다.
알림은 필요한 순간 눈에 들어오고, 팝업이 열리면 자연스럽게 그곳에 집중하며, 중요한 연출이 시작되면 다른 UI가 시선을 방해하지 않는다.
반대로 구조가 정리되지 않으면 작은 충돌이 반복된다.
알림이 팝업 뒤에 숨어버리거나, 팝업 위로 HUD 버튼이 올라오거나, 튜토리얼 딤드 아래에 강조해야 할 버튼까지 묻힐 수 있다.
이런 문제는 각각의 UI 그래픽을 수정하는 것만으로 해결하기 어렵다.
- HUD는 어느 레이어에 존재할 것인가.
- 알림은 플레이를 방해하지 않으면서 어디까지 앞에 보여줄 것인가.
- 팝업은 어떤 화면과 입력을 차단할 것인가.
- 연출과 튜토리얼은 언제 기존 레이어보다 우선할 것인가.
이 관계를 먼저 정리해야 한다.
결국 게임 UI에서 Z축을 설계한다는 것은 단순히 레이어의 앞뒤 순서를 정하는 일이 아니다.
여러 UI가 동시에 등장했을 때 플레이어가 무엇을 보고, 무엇을 조작하고, 무엇에 집중해야 하는지를 화면의 깊이로 정리하는 작업이다.