[Unity] UGUI (Unity Graphical User Interface)

⭐ UGUI

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

● 기존의 IMGUI(Immediate Mode GUI)를 대체

    ○ 코드 중심(IMGUI)에서 시각적 구성(UGUI) 중심으로 발전

 

 

 

UGUI의 특징

 

항목	특징
구조	Hierachy 기반 UI 트리 구조
편집	Scene 뷰에서 직접 배치/크기 조절 가능
렌더링	Canvas를 통해 화면에 출력
입력	EventSystem을 통해 클릭, 터치 등 이벤트 감지
확장성	Script와 쉽게 연동 가능

 

 

 

 

UGUI를 구성하는 핵심 구성

 

1. Canvas

    ○UI를 그리는 영역이자 루트 오브젝트

    ○ 모든 UI는 반드시 Canvas의 자식으로 속해있어야 함

 

2. RectTransform

    ○ UI 전용 Transform

    ○ 일반 Transform과 달리 Anchor(앵커) / Pivot(피봇) 속성을 가짐

 

3. EventSystem

    ○입력등의 이벤트를 관리

    ○ 클릭, 드래그, 포커스, 터치 등 사용자 Interaction(인터랙션) 감지

 

* Interaction(인터랙션) - 사용자와 시스템 간의 소통방식

 

 

 

⭐ Canvas란?

● UI 렌더링의 기준이 되는 영역이며, 렌더 모드(Render Mode)에 따라 UI가 표시되는 방식이 달라집니다.

 

 

 

Canvas의 주요 컴포넌트 속성

 

● RectTransform

    ○ Anchor

        ■ 부모 오브젝트의 어디를 기점으로 위치할지를 정하는 기준점

    ○ Pivot

        ■ UI 자체의 회전, 확대, 이동의 기준점

    ○ AnchoredPosition

        ■ Anchor(앵커)를 기준으로 한 UI의 위치

    ○ SizeDelta

        ■ UI 크기 조정 값

 

● Render Mode - 어디서 어떻게 렌더링될지를 정하는 모드

    ○ Screen Space - Overlay

        ■ UI 요소가 화면위에 직접 렌더링되는 모드

        ■ 스크린의 크기나 해상도가 변경될 경우 캔버스의 크기도 자동으로 맞춰 변경됩니다.

    ○ Screen Space - Camera

        ■ UI 요소가 특정 카메라의 시야에 맞춰 렌더링되는 모드

        ■ 캔버스가 카메라의 지정된 거리 앞에 위치합니다.

        ■ 스크린의 크기나 해상도에 따라 캔버스의 크기가 자동으로 조절됩니다.

        ■ 해당 카메라의 Projection(투영방식), 거리, Fov(시야각)에 영향을 받습니다.

    ○ World Space

        ■ UI 요소가 3D 오브젝트처럼 실제 월드 공간에 존재하는 모드

        ■ UI는 실제 Transform을 가지며, 3D 오브젝트처럼 Collider, Physics등 적용 가능합니다.

        ■ 카메라 각도나 거리 변화에 따라 크기와 시야가 달라집니다.

 

● Canvas Scaler - 해상도 변화에 대응하기 위한 스케일 조정 속성

    ○ Constant Pixel Size

        ■ UI 요소가 화면의 크기나 해상도에 상관없이 픽셀 단위로 고정됨

    ○ Scale With Screen Size

        ■ UI 요소가 해상도에 따라 비율이 조정됨

    ○ Constant Physical Size

        ■ UI 요소가 화면의 크기나 해상도에 상관없이 물리적인 크기로 유지됨

 

 

 

Canvas의 리빌드(Rebuild)

 

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

 

💡리빌드(Rebuild)의 의미와 주의할 점

● Canvas가 다시 그려져야 하는 상황을 뜻합니다.

    ○ UI의 위치, 크기, 색상, 텍스트 내용 등이 변경되면 Canvas 내부적으로 재계산을 수행

    ○ 리빌드 과정은 CPU 연산 비용이 크고, 자식 UI가 많을 수록 비용이 기하급수적으로 늘어남

 

● 각 Canvas는 독립적인 렌더링 단위로 작동합니다.

    ○ Unity는 각 Canvas 마다 배치 계산, 메쉬 갱신, 드로우콜(DrawCall) 발생

    ○ 즉 많은 양의 Canvas가 생산되는 행위도 주의해야함

 

* 드로우 콜: CPU가 GPU에게 렌더링 명령을 내리는 호출 단위

 

UI 관리 팁

 

항목	권장 사항
EventSystem	씬당 하나만 유지
Prefab 활용	공통 UI 프리팹화
LayoutGroup / ContentSizeFilter	자동 정렬 UI에 사용
Sorting Order	여러 Canvas 사용 시 렌더 우선순위 설정