게임 UX/UI 모드 전환에서 정보 밀도와 시각적 피로도를 줄이는 설계 원칙

핵심 요약

게임 UX/UI 모드 전환의 핵심은 화면마다 정보를 새로 쌓는 것이 아니라 플레이어의 현재 목표에 필요한 정보만 우선순위에 따라 재배치하는 데 있다. 전환 전후에 시선 위치, 조작 맥락, 핵심 수치를 유지하고 보조 정보는 점진적으로 공개하면 정보 밀도와 시각적 피로도를 함께 낮출 수 있다.

게임 UI 모드 전환에서 시각적 피로도는 왜 발생하는가?

모드 전환은 HUD, 인벤토리, 지도, 제작, 상점처럼 플레이어의 과업이 바뀌는 순간에 일어난다. 피로는 정보량 자체보다 변화량과 재탐색 비용이 클 때 발생한다.

대표적인 원인은 다음과 같다.

원인	플레이어가 겪는 문제	설계 대응
레이아웃의 급격한 재배치	이전에 보던 수치와 버튼을 다시 찾아야 한다	핵심 영역의 위치를 유지한다
동일 중요도의 요소 과다 노출	무엇부터 읽어야 할지 판단하기 어렵다	시각적 위계를 3단계로 제한한다
전환 애니메이션 과다	조작 가능한 시점이 불분명해진다	짧고 기능적인 전환만 사용한다
색상·광원·알림의 동시 변화	시선이 여러 곳으로 분산된다	한 번에 하나의 강조 규칙만 적용한다
모드별 조작 규칙 불일치	실수와 학습 비용이 늘어난다	확인·뒤로가기·탭 이동 규칙을 통일한다

화면 피로를 간단한 설계 지표로 보면 다음처럼 생각할 수 있다.

$$F = \frac{N \times C \times M}{H}$$

• $F$: 전환 시 체감 피로도
• $N$: 동시에 노출되는 정보 단위 수
• $C$: 시각적 경쟁도. 색상, 크기, 움직임, 대비가 서로 경쟁하는 정도
• $M$: 모드 전환으로 바뀐 요소의 비율
• $H$: 정보 계층의 명확성

정밀한 사용자 연구 수식은 아니지만 설계 검토에는 유용하다. 요소 수를 줄이고 변화량을 낮추며 계층을 분명하게 만들수록 피로도는 내려간다.

정보 밀도는 어떻게 측정하고 줄일까?

정보 밀도는 단순히 아이콘 개수가 아니다. 플레이어가 한 번의 시선 이동 안에서 처리해야 하는 의미 있는 판단 수에 가깝다. 예를 들어 인벤토리의 아이템 40개는 목록으로 허용될 수 있지만 40개 모두에 희귀도 효과, 신규 배지, 경고색, 수치 비교, 툴팁 유도가 붙으면 밀도가 급격히 올라간다.

1. 모드별 핵심 과업을 하나로 정의한다

각 모드에 진입한 직후 플레이어가 해야 할 최우선 행동을 한 문장으로 적는다.

모드	최우선 과업	첫 화면에 남길 정보
전투 HUD	생존하고 즉시 행동하기	체력, 탄약 또는 스킬, 목표 방향
인벤토리	장비를 비교하거나 장착하기	선택 아이템, 비교 대상, 장착 행동
지도	다음 목적지 결정하기	현재 위치, 목표, 경로
상점	구매 가치 판단하기	가격, 보유 재화, 성능 변화

최우선 과업을 둘 이상으로 잡으면 화면은 대개 설명서처럼 변한다. 첫 화면은 결정을 돕고 상세 정보는 다음 단계에서 열어야 한다.

2. 정보 계층을 필수·상황·상세의 3단계로 나눈다

• 필수 정보: 지금 행동하지 못하면 실패하는 정보다. 체력, 선택 항목, 비용, 확정 버튼이 여기에 속한다.
• 상황 정보: 판단 품질을 높이는 정보다. 장비 비교 수치, 남은 무게, 퀘스트 진행도 등이 여기에 속한다.
• 상세 정보: 궁금할 때만 필요한 정보다. 정확한 공식, 획득처, 긴 설명, 전체 로그가 여기에 속한다.

필수 정보는 항상 보이고 상황 정보는 선택이나 포커스에 반응하며 상세 정보는 툴팁·상세 패널·길게 누르기로 연다. 이 구조가 점진적 공개(Progressive Disclosure)의 기본이다.

3. 전환 후 첫 1초에 읽히는 요소를 제한한다

모드 전환 직후에는 제목, 선택 상태, 주 행동 버튼만 즉시 인식되면 충분하다. 보조 패널을 150~250ms 늦게 나타나게 하거나 처음에는 접힌 상태로 두면 화면의 첫인상이 안정된다.

단, 지연은 정보 은닉이 아니다. 전투 중 경고나 구매 확정에 필요한 재화처럼 즉시 판단해야 하는 정보는 늦추지 않는다.

UI 모드 전환에서 유지해야 할 정보는 무엇인가?

모드가 바뀌어도 플레이어의 정신적 모델이 끊기지 않게 해야 한다. 가장 작은 원칙은 같은 대상은 같은 위치와 같은 이름으로 유지한다는 것이다.

유지 대상	적용 예시	기대 효과
선택 대상	전투에서 본 아이템을 인벤토리에서도 선택 상태로 연다	대상 재탐색 감소
핵심 자원	골드, 체력, 무게를 일관된 위치와 아이콘으로 표시한다	수치 해석 속도 향상
조작 규칙	취소는 항상 동일한 버튼, 확정은 동일한 강조색을 사용한다	오입력 감소
시점과 초점	지도에서 선택한 퀘스트를 퀘스트 목록에서도 상단에 둔다	맥락 유지
상태 변화	장착·구매 후 변경 수치를 즉시 반영한다	결과 확인 비용 감소

전환 상태는 어떻게 보존할까?

모드를 닫고 다시 열었을 때 탭, 스크롤 위치, 선택 항목까지 무조건 복원할 필요는 없다. 이전 상태가 다음 행동에 유효할 때만 보존한다.

• 인벤토리에서 장비 비교 중이었다면 선택 아이템과 필터를 보존한다.
• 전리품을 수령한 뒤에는 새로 획득한 아이템을 우선 노출한다.
• 전투 중 빠르게 연 퀵 메뉴는 닫을 때 원래 HUD로 즉시 돌아간다.
• 상점에서 구매가 끝났다면 구매 결과와 남은 재화를 보여 준 뒤 목록 초점을 유지한다.

게임 UI 모드 전환은 어떻게 구현할까?

구현의 목표는 모든 패널을 독립적으로 애니메이션하는 것이 아니라 전환 규칙을 한곳에서 통제하는 것이다. Unity 2022 LTS 기준이라면 CanvasGroup으로 입력 가능 여부와 투명도를 함께 제어하고 선택 상태는 EventSystem.current.SetSelectedGameObject()로 명시적으로 복원할 수 있다.

Step 1. 모드 전환 상태를 단일 값으로 관리한다

public enum UiMode
{
    Hud,
    Inventory,
    Map,
    Shop
}

public UiMode CurrentMode { get; private set; } = UiMode.Hud;

여러 Boolean 값으로 isInventoryOpen, isMapOpen을 따로 관리하면 두 모드가 동시에 열린 예외 상태가 생기기 쉽다. 상호 배타적인 화면이라면 열거형 하나가 더 작고 안전하다.

Step 2. 패널 표시와 입력 차단을 함께 전환한다

using UnityEngine;

public static class UiPanelState
{
    public static void SetVisible(CanvasGroup group, bool visible)
    {
        group.alpha = visible ? 1f : 0f;
        group.interactable = visible;
        group.blocksRaycasts = visible;
    }
}

알파만 0으로 만들면 보이지 않는 UI가 클릭을 가로막을 수 있다. interactable과 blocksRaycasts를 같이 변경해야 전환 중 입력 충돌을 막을 수 있다.

Step 3. 모드별 첫 초점을 지정한다

using UnityEngine;
using UnityEngine.EventSystems;

public class UiFocusController : MonoBehaviour
{
    [SerializeField] private GameObject inventoryFirstItem;
    [SerializeField] private GameObject mapFirstQuest;

    public void RestoreFocus(UiMode mode)
    {
        var target = mode == UiMode.Inventory ? inventoryFirstItem : mapFirstQuest;
        if (target != null)
            EventSystem.current.SetSelectedGameObject(target);
    }
}

키보드·패드 조작에서는 첫 포커스가 특히 중요하다. 화면은 열렸는데 선택된 항목이 없으면 플레이어는 현재 조작 대상부터 다시 찾아야 한다.

전환 애니메이션은 어느 정도가 적절한가?

애니메이션은 모드가 바뀌었다는 사실을 알려 주는 데만 써야 한다. 화면 전체가 커지고 흐려지고 이동하는 연출은 멋져 보여도 반복 사용 시 피로를 만든다.

권장 기준은 다음과 같다.

상황	권장 방식	피해야 할 방식
HUD → 인벤토리	배경 약화와 패널 페이드	전체 화면 회전, 긴 줌 연출
탭 전환	선택 표시 이동 또는 짧은 콘텐츠 교체	탭마다 다른 방향의 슬라이드
구매·장착 완료	수치 변화와 짧은 확인 피드백	큰 팝업을 연속으로 중첩
긴급 경고	단일 색상 또는 단일 아이콘 강조	점멸, 진동, 사운드, 팝업 동시 사용

전환 시간이 짧아도 입력이 가능한 시점은 명확해야 한다. 특히 네트워크 응답이나 에셋 로딩으로 화면 전환이 늦어질 수 있다면 버튼을 무반응 상태로 두지 말고 로딩 상태와 취소 가능 여부를 보여 준다.

자주 묻는 질문 (FAQ)

모든 정보를 접으면 플레이어가 불편하지 않은가?

그렇다. 그래서 필수 정보까지 숨기면 안 된다. 현재 행동에 필요한 정보는 항상 노출하고 비교·설명·기록처럼 판단을 보조하는 정보만 단계적으로 연다.

HUD와 메뉴의 색상 체계는 같아야 하는가?

핵심 의미는 같아야 한다. 예를 들어 위험은 일관되게 경고색으로 표현하되 메뉴에서는 채도와 움직임을 줄여 장시간 읽기 피로를 낮출 수 있다.

모바일과 패드 UI는 전환 원칙이 다른가?

원칙은 같다. 다만 모바일은 터치 목표 크기와 엄지 도달 범위를 패드는 초기 포커스와 방향키 이동 순서를 더 엄격하게 검증해야 한다.

정리

좋은 모드 전환은 정보를 더 보여 주는 기능이 아니라 플레이어가 다음 행동을 더 빨리 결정하도록 돕는 편집 과정이다. 모드마다 핵심 과업을 하나로 정하고 필수·상황·상세 정보의 계층을 유지하며 선택 대상과 조작 규칙을 보존하자. 그 결과 UI는 덜 피곤해지고 게임의 흐름은 더 끊기지 않는다.