Unity - UGUI : Unity Graphical User Interface

UGUI : Unity Graphical User Interface

Unity에서 제공하는 컴포넌트 기반 UI 시스템이다.

코드 중심이었던 이전 세대의 IMGUI(Immediate Mode GUI)를 대체하는 시각적 구성 중심의 UI 개발 도구다.

Hierarchy 기반 UI 트리 구조로 Scene 뷰에서 직접 조절하는 방식으로 사용한다.

Canvas를 통해 화면에 출력되고, 이벤트 감지를 위해선 EventSystem이 필수적으로 Hierarchy에 있어야 한다.

Script와 쉽게 연동 가능하다.

 

 

기본 구조

• Canvas
  • UI를 그리는 영역이자 루트 오브젝트
  • 모든 UI는 반드시 Canvas 하위에 있어야 표시된다. (바로 만들면 Canvas가 자동으로 추가 됨)
• RectTransform
  • UI 전용 Transform
  • 일반 Transform과 달리 Anchor / Pivot / SizeDelta 속성을 가진다
• EventSystem
  • 입력 이벤트 관리
  • 클릭, 드래그, 포커스, 터치 등 사용자 인터랙션 감지

 

 

Canvas

UI를 실제로 그리는(Rendering) 기준 영역이다.

모든 UGUI 요소는 반드시 Canvas 하위에 존재해야 화면에 표시된다.

 

RenderMode

Screen Space - Overlay	화면 최상단에 직접 그려짐	HUD, 메뉴, 체력바
Screen Space - Camera	특정 카메라 기준으로 렌더링	카메라 UI, 컷신 UI
World Space	3D 공간에 실제 배치	월드 내 상호작용 패널, VR UI

 

Canvas Scaler

해상도에 따라 UI 크기를 자동 조정

Constant Pixel Size	해상도 무시, 픽셀 단위 고정
Scale With Screen Size	해상도 비율에 따라 자동 스케일 조정
Constant Physical Size	실제 물리 크기(인치)에 맞춰 조정

 

 

주요 UI 컴포넌트

Text (TMP)	문자를 화면에 표시	Font Asset, Alignment, Color
Image	Sprite 표시용 UI	Source Image, Type, Color
Button	클릭 이벤트 발생	OnClick(), Transition
Toggle	체크박스 UI	isOn, OnValueChanged
Slider	슬라이드 조절 UI	Value, Min/Max
InputField (TMP)	텍스트 입력 창	Placeholder, OnEndEdit

 

일뷰 튜토리얼에서는 그냥 레거시 Text를 사용했었지만 TMP(TextMeshPro)는 이제 사실상 Unity의 표준 텍스트 시스템이다.

고해상도 렌더링, 리치 텍스트, 폰트 스타일링 모두 지원한다.

 

 

RectTransform

UI 전용 Transform으로, 기존 3D Transform과 달리 Anchor, Pivot, SizeDelta 속성을 가진다.

Anchors	부모 기준으로 UI의 기준점을 지정
Pivot	자체 회전 및 스케일의 중심점
SizeDelta	Anchors 기준으로 크기 조절값

 

Anchor Presets

Shift + Alt + 클릭으로 쉽게 정렬 프리셋 지정 가능

 

 

EventSystem

UGUI 입력 시스템.

클릭, 드래그, 포커스, 터치 등 모든 사용자 이벤트를 감지하고 분배한다.

• EventSystem : 씬에 하나만 존재
• Standalone Input Module : 마우스 / 키보드 입력 감지
• Touch Input Module : 모바일 터치 입력 감지

주의 : EventSystem이 두개 이상 존재하면 UI 입력이 먹통이 되거나 중복 처리된다

 

 

---

 

Canvas 성능 : Rebuild

Canvas는 UI를 화면에 그리는 기준 단위로 모든 UGUI는 반드시 Canvas 안에서 렌더링 된다.

Canvas는 하위에 있는 모든 UI 요소를 묶어서 하나의 배치(Render Batch) 로 처리한다.

 

여기서 Rebuild 란, Canvas가 다시 그려져야 하는 상황을 말한다.

UI의 위치, 크기, 색상, 텍스트 내용 등이 변경되면 Canvas는 내부적으로 재계산(Geometry & Layout Rebuild)을 수행한다.

이 과정은 CPU 연산 비용이 크며, 특히 자식 UI가 많을수록 비용이 기하급수적으로 증가한다.

 

여기서 각 Canvas는 독립적인 렌더링 단위로 작동하는데 Canvas가 많으면 Unity는 각 Canvas마다

• 배치 계산 (Batch Building)
• 메쉬 갱신 (UI Geometry Rebuild)
• Draw Call

을 수행하게 되어 많은 비용이 발생한다.

Canvas 하나를 하나의 UV Map(시트)로 보면 된다.

 

그렇기에 변경이 잦은 UI를 별도 Canvas로 분리하는 전략을 통해 최적화할 수 있다.

고정 UI	메뉴, 프레임, 배경	거의 안 변하므로 하나의 Canvas로 묶기
잦은 변경 UI	HPBar, Timer, 점수, 알림	별도 Canvas로 분리해 독립적으로 갱신
대규모 반복 UI	인벤토리, 채팅창	ScrollRect + Mask로 최적화

 

또한 Canvas에는 기본적으로 GraphicRaycast가 붙는어 UI 요소에 대한 마우스 이벤트 감지를 수행하는데 클릭 이벤트를 관리할 필요가 없는 단순 Canvas의 경우에는 Raycasy를 제고하는 것 또한 좋다.