Unity: 게임 UI 정리 (0)

양승준·2025년 7월 11일

Unity

목록 보기

3/4

시작하며

UI Manager 만드려고 하니까, 전에 프로젝트에서 같이 했던 친구가 만들었던 UI Manager, 최근 같이 프로젝트를 진행 했던 프로젝트 2주 정도 짧은 기간 개발하면서 만드신 UI Manager 들이 있다. 그런데 난 가끔 UI를 다루면서 UI를 너무 모르고 사용했다는 생각이 들었다. 먼저 UI를 어떻게 분류하는지, 또는 유니티의 Rect Transform, 유니티에서 제공하는 여러 UI 툴들을 정리하고자한다. 2~3개 정도의 글이 될거 같다.

글의 흐름

UI 기본 정의
게임 UI 정리
유니티 기준 UI 정리

UI 란

UI(User Interface, 사용자 인터페이스) 는 사용자(User)와 시스템(System) 사이의 상호작용 수단이라고 한다. 풀어서 정리하면, 사용자가 컴퓨터, 프로그램, 기기 등과 의사 소통하고 조작할 수 있도록 도와주는 모든 매개체 를 말하는 거 같다. (예시로, 키호스크?와 게임할 때 나오는 게임 세상이 아닌 창 같은 것들로 생각하면 편하다)

UI 설계 원칙

UI는 설계 원칙이 있다고 한다. '야코브 닐슨' 이라는 사용성 분야의 세계적인 권위자자 이며, 덴마크 출신 컴퓨터 과학자가,

1990년대 초, UI/UX 디자인 분야에서 "사용성"이라는 개념을 체계화했고 대표 저서로 "Designing Web Usability", "Usability Engineering" 책도 냈고 그 사람이 말하는 10가지의 원칙을 아래에 작성하겠다.

...가끔 생각날 때 마다 봐야겠다...

	원칙 이름	요약 설명
1	시스템 상태 표시	사용자가 지금 무슨 일이 일어나는지 알 수 있어야 함
2	사용자-시스템 일치	현실 세계와 비슷한 용어/흐름 사용
3	사용자 제어와 자유	취소, 되돌리기 기능 제공
4	일관성과 표준성	동일한 단어, 아이콘, 기능은 일관되게 동작해야 함
5	오류 예방	발생하기 전에 실수를 방지해야 함
6	인식보다 회상 최소화	사용자가 기억하지 않아도 되도록 정보 제공
7	유연성과 효율성	초보자/숙련자 모두를 위한 빠른 조작 지원
8	미적이고 최소한의 디자인	불필요한 정보는 제거하고 핵심만 보여줌
9	오류 인식, 진단, 복구	명확한 오류 메시지와 해결 방법 제공
10	도움말과 문서	스스로 해결이 안 될 때 참고할 수 있는 자료 제공

UI 종류

구분	설명	예시
GUI (Graphical UI)	화면에 보이는 시각적 UI	버튼, 체크박스, 드래그
CLI (Command Line UI)	명령어 기반 텍스트 UI	터미널, 콘솔
VUI (Voice UI)	음성 기반 인터페이스	Siri, Alexa
Touch UI	터치 기반 조작	스마트폰, 태블릿 UI
Natural UI	제스처, 움직임 기반 UI	VR, Kinect, AR

게임에서의 UI란

게임에서 UI는 플레이어가 게임의 정보를 인지하고, 행동을 선택하고, 게임 상태를 이해하는 데 필요한 모든 시각적/입력 요소를 포함한다.

게임 UI 예시

체력/마나 바 (HUD)

인벤토리/장비창 (패널)

팝업 경고창 (팝업 UI)

메인 메뉴, 설정창, 로딩 화면 등

UI의 역할

정보 전달: 게임 상태, 자원 수치, 적 위치, 목표 등을 표시
행동 유도: 버튼, 메뉴, 선택지 등을 통해 행동 유도
상호작용 중개: 입력 장치(마우스, 터치 등)와 게임 기능을 연결
시각적 피드백: 클릭/호버/터치 시 반응 제공
사용자 경험 향상: 직관적이고 쾌적한 플레이 유도

UI와 UX의 차이

구분	UI	UX
의미	사용자 인터페이스	사용자 경험
초점	보이는 것	느끼는 것
예시	버튼 디자인, 위치, 메뉴 구성	버튼이 눌렸을 때 만족감, 직관성

Unity UI 기능 정리

Canvas 시스템

핵심 설명

Unity의 모든 UI 요소는 Canvas 아래에 있어야만 렌더링됨
UI 요소는 2D이지만 Canvas는 3D 공간에서 렌더링을 제어함
Canvas의 설정에 따라 UI의 렌더링 방식, 퍼포먼스, 상호작용 처리가 결정됨

주요 설정

속성	설명	상세 설명 URL
Render Mode	Overlay / Camera / World Space	Unity 설명 사이트 - Canvas Render Mode
Pixel Perfect	픽셀 단위 정확성 보장	Unity 설명 사이트 - Pixel Perfect
Sorting Order	UI의 렌더 순서 제어 (숫자 높을수록 앞)	Unity 설명 사이트 - Sorting Order

Canvas 작업할 때 팁
- Overlay는 단순하지만 가장 빠름
- World Space는 3D UI에 적합
- Canvas를 너무 많이 나누면 성능 저하 (Draw Call 증가)

Render Mode 별 특징

각 모드에 대해서 설명하겠습니다.

Screen Space - Overlay 모드

카메라의 렌더링 결과 이후에, 별도로 UI를 렌더링한다. (게임 오브젝트 등 카메라에 보는 것들을 모두 그린 후, 그 위에 UI를 그린다.)
즉, UI는 항상 가장 마지막에 그려지는 요소라서, 3D 오브젝트나 배경 등에 절대 가려지지 않는다
렌더링 순서도 Depth가 아닌 Canvas의 Sort Order 값에 따라 결정된다.
Pixel Perfect (픽셀 정밀도)
- 이 옵션을 체크하면, UI 요소가 화면의 물리적 픽셀과 정확히 정렬되도록 보정해.
- 저해상도나 저사양 디바이스에서 깜빡이거나 깨지는 현상을 줄여줌.
- 단점: 해상도 스케일이 유동적인 UI 환경에선 제한적일 수 있음.
Sort Order
- 여러 개의 Canvas가 있을 때, UI의 앞뒤 순서를 결정함.
- 숫자가 높을수록 위에 쌓임 (Z축 개념이 아닌 정렬 우선순위임).
- 예: Sort Order 10 → Sort Order 5보다 나중에 그려짐.
Target Display
- 멀티 디스플레이 환경에서, 이 Canvas를 어떤 Display(화면)에 출력할지 선택할 수 있음.
- 일반적으로 Display 1을 사용하지만, 멀티모니터 게임에서는 유용함
  (레이싱 게임을 만들때 모니터 여러개 해서 넓게 볼 수 있는 게임에 유용함. 어떤 디스플레이에 UI를 띄어줄지 정할 수 있음.)
Additional Shader Channels
- Overlay 모드에서는 일반적으로 조명, 쉐이더 정보가 필요 없음.
- Normal, Tangent, TexCoord1 같은 데이터는 대부분 필요 없음.
- UI에서 Lighting 효과를 줄 게 아니라면 이 채널들을 제거해서 성능 최적화 가능함.
  - 기본적인 세팅이라면 인스펙터에 ⚠️ 경고 메시지가 나올 것이다. 그 이유는 Normal과 Tangent 채널은 보통 조명 계산용인데, Overlay 모드는 Lighting을 안 쓰니까 필요 없다는 경고임.

Overlay의 Camera, UI 렌더링

카메라의 렌더링 결과 이후에, 별도로 UI를 렌더링

UI는 항상 가장 마지막에 그려지는 요소 3D 오브젝트나 배경 등에 절대 가려지지 않는다

렌더링 순서도 Depth가 아닌 Canvas의 Sort Order 값에 따라 결정된다.

Screen Space - Camera 모드

UI가 지정된 카메라의 시야에 맞춰 화면에 그려지는 방식
UI가 여전히 2D처럼 보이지만, 실제로는 카메라의 렌더링 공간 안에서 UI가 위치
이 방식은 Overlay 모드처럼 UI가 무조건 화면 맨 위에 표시되는 게 아니라, 카메라의 Far/Near Plane 사이에서 Depth를 가진 렌더링 객체로 취급
- 카메라 효과(Post Processing), 깊이 기반 정렬, 3D와 UI 간 연출 자연화 등에 강점을 갖는다.
  - Bloom, Blur, Depth of Field 같은 카메라 후처리(Post Processing) 효과가 UI에도 적용 가능. Overlay 모드는 UI가 가장 마지막에 렌더링되므로, 이런 효과가 안 먹힘.
  - UI가 3D 월드 안에 있는 느낌을 줄 수 있음 (예: UI 뒤로 파티클, 조명 들어오는 연출)
  - 3D 모델이 UI 위를 지나가는 듯한 씬 기반 연출도 가능
  (로딩 씬 같은거에 Near 조정해서, UI 앞으로 오브젝트 돌아다니거나 간단한 애니메이션 연출 같은거 넣어 놓는 느낌?으로 가능)
기본 원리
- Canvas는 지정된 Camera를 기준으로 UI를 "투사"함.
- UI 요소는 화면 상에 배치되지만, 실제 위치는 지정된 카메라의 공간 내 Z축 상에 있음.
- UI는 Render Camera의 Near/Far Plane 사이에 위치해야 보임.
- Depth는 Canvas의 Sort Order뿐 아니라, Z 좌표나 Layer Mask에 영향을 받음.
필수 설정 요소
- Render Camera 지정: 반드시 UI를 보여줄 카메라를 Canvas에 연결해야 함.
- Plane Distance: 카메라로부터 얼마나 떨어진 거리에서 UI가 렌더링될지 지정 (기본 100)
- UI Layer 설정: UI가 카메라의 Culling Mask에 포함돼야 함.

카메라와 UI의 렌더링 관계

위와 같이 카메라는 구성됩니다.

이것이 중요한 이유는 아래의 자세한 설명으로 대신 하겠습니다.

UI가 지정된 카메라의 시야에 맞춰 화면에 그려지는 방식

UI가 여전히 2D처럼 보이지만, 실제로는 카메라의 렌더링 공간 안에서 UI가 위치합니다.

이 방식은 Overlay 모드처럼 UI가 무조건 화면 맨 위에 표시되는 게 아니라, 카메라의 Far/Near Plane 사이에서 Depth를 가진 렌더링 객체로 취급됩니다.

게임 상의 위치 안에 있기 때문에, Canvas > Plane Distance 값을 조절해 UI가 카메라로부터 얼마나 떨어져 있을지를 설정할 수 있습니다.

그렇기 때문에 Plane Distance 안에 게임 오브젝트가 끼어들면, UI가 가려지는 상황도 생깁니다.

예: Plane Distance 100이면, 카메라 Far Plane이 50이면 UI는 보이지 않음

카메라 효과(Post Processing), 깊이 기반 정렬, 3D와 UI 간 연출 자연화 등에 강점을 가집니다.

예: 클릭 시 게임 오브젝트가 등장하는 등 상호작용 기반 UI 연출에 유리함

Screen Space - World Space 모드

UI(Canvas)가 2D가 아닌 3D 오브젝트처럼 공간 안에 배치되는 방식.
즉, UI가 화면 픽셀 단위가 아니라 월드 좌표계 (X, Y, Z) 에서 직접 배치되고, 일반적인 3D 오브젝트처럼 Transform(위치, 회전, 스케일) 값을 가짐.
3D 오브젝트처럼 UI 렌더링
- Canvas가 3D 오브젝트로 렌더링되며, MeshRenderer가 아닌 UI 시스템으로 그려짐.
- UI 요소는 UI 카메라에 의존하지 않고, 월드 좌표 내에 실제로 존재.(머리 위 체력바 같은 느낌으로 많이 사용됨. 또는 VR)
카메라 위치/각도에 따라 보이거나 가려짐
- 일반적인 3D 오브젝트처럼, 카메라 시야에 따라 UI가 보이고 사라짐.
- 시점에 따라 UI가 회전하거나 크기가 달라 보이기도 함.
기본 설정
- Canvas를 생성한 뒤, Render Mode를 World Space로 설정
- Canvas의 RectTransform에서 Position, Rotation, Scale을 조정
- Canvas Scaler는 Dynamic Pixels Per Unit를 활용해 해상도 대응
- 카메라 시야 안에 있어야 실제로 보임
⚠️ 주의할 점
- Canvas의 크기와 스케일이 화면에 결정적인 영향을 미침
- 너무 작게 설정하면 UI가 안 보이고, 너무 크게 설정하면 레이캐스트도 안 먹을 수 있음
- Text 크기도 월드 유닛 기준이라 감 잡기가 어렵다 → Canvas Scaler로 보정

양승준

지모창말, 미모창.

이전 포스트

Unity: 게임 오브젝트 & 컴포넌트

다음 포스트