게임 UX/UI 다크모드와 시각 정보 밀도: ‘어둡게’가 아니라 ‘읽히게’ 설계하기

다크모드는 테마가 아니라 플레이 조건이다

게임에서 다크모드는 배경을 검게 만들고 글자를 밝게 바꾸는 작업으로 끝나지 않는다. 플레이어는 어두운 방, 밝은 낮, 작은 휴대기기, 큰 모니터처럼 서로 다른 조건에서 화면을 본다. 전투 중에는 짧은 순간에 체력과 위협 방향을 읽어야 하고 인벤토리에서는 아이템의 차이를 비교해야 한다.

따라서 다크모드의 목표는 화면을 멋있게 어둡게 만드는 일이 아니라 필요한 정보를 빠르고 편안하게 읽히게 만드는 일이다. 특히 HUD와 메뉴를 같은 규칙으로 다루면 문제가 생기기 쉽다. HUD는 즉시 판단을 돕는 신호 체계이고 메뉴는 탐색과 비교를 돕는 작업 공간이기 때문이다.

먼저 정할 것: 화면마다 다른 정보 밀도

시각 정보 밀도는 일정 면적 안에 플레이어가 해석해야 하는 정보의 양과 복잡도다. 아이콘 수만으로 판단할 수는 없다. 작은 숫자, 상태 색상, 애니메이션, 테두리, 알림 배지까지 동시에 경쟁하면 화면은 적은 요소만으로도 복잡해진다.

밀도가 높다고 항상 나쁜 것은 아니다. 전략 게임의 부대 목록이나 생존 게임의 제작 메뉴는 비교할 정보가 많다. 다만 플레이어가 지금 수행하는 행동에 비해 정보량이 과한지 확인해야 한다.

flowchart TD
    A[플레이 상황 확인] --> B{즉시 반응이 필요한가?}
    B -->|예| C[핵심 신호만 상시 표시]
    B -->|아니오| D{비교와 탐색이 필요한가?}
    D -->|예| E[그룹화·정렬·상세 정보 확장]
    D -->|아니오| F[맥락 정보는 점진적으로 노출]
    C --> G[명도 대비와 크기 검증]
    E --> G
    F --> G

전투 HUD에서는 체력, 탄약, 재사용 대기시간처럼 행동을 바꾸는 정보가 우선이다. 퀘스트 문구나 수집품 진행도처럼 즉시 행동을 바꾸지 않는 정보는 축소하거나 조건부로 보여줄 수 있다. 반대로 장비 비교 화면에서는 정보 숨기기보다 계층 구조와 정렬 방식을 제공하는 편이 낫다.

어두운 전투 화면에서 체력·탄약·위협 알림만 선명하게 구분된 게임 HUD 예시

검정 대신 ‘용도별 어두운 표면’을 만든다

순수한 검정 배경과 순수한 흰색 텍스트는 대비가 크지만 긴 시간 보면 눈부심과 잔상이 느껴질 수 있다. 특히 넓은 검정 영역 위에 밝은 작은 글자를 올리면 글자가 번져 보이는 사용자도 있다.

그래서 배경은 한 가지 검정으로 통일하기보다 역할에 따라 나누는 편이 좋다.

가장 뒤 배경: 게임 월드나 앱의 바탕을 받치는 가장 어두운 표면
패널 표면: 인벤토리, 지도, 설정 창처럼 내용을 담는 영역
떠 있는 표면: 모달, 드롭다운, 툴팁처럼 현재 주의를 끌어야 하는 영역
선택·경고 표면: 포커스, 위험, 보상처럼 행동을 유도하는 영역

이 차이는 그림자만으로 만들기보다 명도와 채도를 조금씩 달리해 확보한다. 다만 패널마다 차이를 과도하게 주면 다크모드 특유의 차분함이 사라지고 오히려 정보 계층이 흐려진다. 한 화면에서 플레이어가 구별해야 할 표면 단계는 보통 세네 단계면 충분하다.

텍스트는 흰색이 아니라 역할로 구분한다

본문, 보조 설명, 비활성 항목에 모두 같은 밝기의 텍스트를 쓰면 정보의 우선순위가 사라진다. 반대로 보조 텍스트를 지나치게 어둡게 만들면 읽을 수 없는 정보가 된다.

색상 토큰을 역할 중심으로 두면 일관성을 유지하기 쉽다. 아래 예시는 CSS 변수 형태지만 엔진의 테마 테이블이나 디자인 토큰에도 같은 방식으로 적용할 수 있다.

:root {
  --surface-base: #121416;
  --surface-panel: #1b1f23;
  --surface-raised: #262c31;

  --text-primary: #f1f4f5;
  --text-secondary: #b8c0c5;
  --text-disabled: #7a858c;

  --accent-action: #65b7ff;
  --state-danger: #ff7474;
  --state-success: #6ed09a;
  --focus-ring: #f5c65d;
}

중요한 점은 --text-secondary가 항상 같은 색이어야 한다는 뜻이 아니다. 배경 표면이 달라지면 실제 대비도 달라진다. 토큰을 적용한 뒤에는 대표 화면에서 본문과 보조 정보, 비활성 상태가 모두 읽히는지 확인해야 한다.

색상 하나에 의미를 몰아주지 않는다

다크모드에서는 밝은 색이 특히 강하게 튄다. 빨강은 위험, 초록은 안전, 파랑은 선택 상태처럼 익숙한 관습을 활용할 수 있지만 색상만으로 상태를 전달하면 색각 특성이 다른 플레이어와 저명도 환경의 플레이어가 정보를 놓칠 수 있다.

위험한 적은 빨간 외곽선만 주기보다 위협 아이콘, 독특한 실루엣, 짧은 사운드, 패턴 차이를 함께 제공하는 방식이 안전하다. 버튼의 선택 상태도 파란 배경색만 바꾸기보다 테두리, 체크 표시, 위치 변화 중 하나를 더한다.

다크모드 장비 선택 화면에서 색상·아이콘·테두리를 함께 사용해 상태를 구분한 예시

색상은 의미를 보강하는 신호로 다루고 정보 자체를 전달하는 유일한 통로가 되지 않게 설계하는 것이 좋다.

시선 경쟁을 줄이는 다섯 가지 방법

1. 상시 표시 항목에 비용을 부여한다

HUD에 무언가를 추가할 때는 “유용한가?”보다 “항상 보여야 하는가?”를 먼저 묻는다. 상시 표시 항목은 다른 모든 신호의 가독성을 조금씩 깎는다. 플레이어가 다음 행동을 결정하는 데 쓰지 않는 정보라면 메뉴, 길게 누르기, 일시정지 화면처럼 더 느린 경로로 옮길 수 있다.

2. 같은 종류의 정보를 가까이 묶는다

체력과 보호막, 무기와 탄약, 목표와 거리처럼 함께 해석되는 요소는 가까이 둔다. 반대로 서로 다른 성격의 정보를 한 덩어리에 넣으면 플레이어는 매번 어디를 봐야 하는지 다시 배워야 한다.

3. 숫자 정밀도를 상황에 맞춘다

긴박한 장면에서 137 / 200 같은 숫자가 반드시 필요한지 검토한다. 체력 막대와 위험 임계점만으로 충분한 게임도 있다. 정밀 수치가 전략적 선택에 중요하다면 표시하되 전투 중에는 단순화하고 상세 화면에서 정확한 값을 제공하는 방식이 가능하다.

4. 움직임도 정보량으로 계산한다

다크모드의 정적인 화면은 차분해 보여도 알림 배지, 반짝임, 게이지 애니메이션이 많으면 시선이 계속 끌린다. 지속 애니메이션은 긴급하거나 변화량을 전달해야 하는 요소에 한정하고 장식용 움직임은 줄이는 편이 낫다.

5. 빈 공간을 기능으로 사용한다

여백은 남는 자리가 아니다. 항목의 경계를 설명하고 우선순위가 다른 정보를 분리하며 터치 조작의 실수를 줄이는 장치다. 작은 화면에서 정보를 더 넣어야 한다면 먼저 글자 크기와 여백을 줄이기보다 접기, 필터, 탭, 상세 보기 같은 구조적 해결책을 검토한다.

구현 단계에서 놓치기 쉬운 점

다크모드를 게임 시작 시 선택하는 옵션으로만 구현하면 장면 전환과 팝업, 로딩 화면에서 색상 규칙이 쉽게 깨진다. UI 요소에 색을 직접 입력하기보다 의미 기반 토큰을 참조하게 만들면 테마 추가와 조정이 쉬워진다.

export type UiTone =
  | 'surfaceBase'
  | 'surfacePanel'
  | 'textPrimary'
  | 'textSecondary'
  | 'action'
  | 'danger';

export const darkTheme: Record<UiTone, string> = {
  surfaceBase: '#121416',
  surfacePanel: '#1b1f23',
  textPrimary: '#f1f4f5',
  textSecondary: '#b8c0c5',
  action: '#65b7ff',
  danger: '#ff7474'
};

또한 해상도와 UI 배율을 함께 검증해야 한다. 개발용 고해상도 모니터에서 적당해 보이는 보조 텍스트는 휴대용 기기나 TV 시청 거리에서 사라질 수 있다. 최소한 다음 조건을 준비해 확인하는 편이 좋다.

밝은 장면과 어두운 장면 위에 겹치는 HUD
작은 화면과 큰 화면에서의 UI 배율
색상 없이도 구분 가능한 선택·경고·완료 상태
긴 플레이 후에도 피로하지 않은 본문과 메뉴 텍스트
마우스, 게임패드, 터치에서 모두 보이는 포커스 표시

마무리: 정보의 양보다 판단의 질을 본다

좋은 다크모드는 요소 수가 적어서가 아니라 플레이어가 필요한 순간에 필요한 정보를 놓치지 않아서 좋다. 화면을 구성할 때마다 이 정보가 행동을 바꾸는지 지금 보여야 하는지 색상을 빼도 구별되는지 점검해 보자.

다크모드와 시각 정보 밀도는 별개의 체크리스트가 아니다. 어두운 화면일수록 밝은 신호의 경쟁은 더 커진다. 표면의 계층을 단순하게 유지하고 정보 노출을 플레이 상황에 맞추며 여러 감각적 단서로 상태를 전달하는 것이 오래 플레이해도 읽히는 게임 UI의 출발점이다.