Canvas
Canvas는 Unity 엔진에서 모든 UI 요소를 렌더링하기 위한 필수 오브젝트로
UI 요소(텍스트, 버튼, 이미지 등)는 반드시 Canvas의 하위에 존재해야 화면에 표시가 가능하다.
UI 요소가 어떤 공간(2D/3D)에서, 어떤 방식으로 보여야 하는지 결정하고
UI 전용 이벤트 처리 및 입력(클릭, 터치 등)도 Canvas 및 관련 컴포넌트가 처리함.
Render Mode
Canvas는 Render Mode에 따라 UI가 씬 내에서 어떤 방식으로 그려질지 결정하게 된다.
- Screen Space - Overlay
UI가 항상 화면 최상단에 표시됨.
카메라와 무관하게 모든 UI가 화면을 꽉 채우고
여러 Canvas가 있을 경우, 정렬 순서(Sorting Order)로 표시 우선순위 조정 가능하다.
주로 2D 게임, HUD, 메뉴, 인벤토리 같은 정적인 UI에 적합하다.
- Screen Space - Camera
지정한 카메라를 기준으로 UI를 렌더링한다.
카메라의 원근, 뎁스, 클리핑 등의 영향을 받으며
카메라 효과, 카메라 이동/줌에 따라 UI 크기와 위치가 변화할 수 있다.
- Screen Space - World Space
UI가 오브젝트처럼 실제 씬 공간에 배치된다.
UI 요소가 Transform, RectTransform을 사용해 자유롭게 이동/회전/크기 조정 가능하며 물리 시스템, 콜라이더, 3D 이벤트와도 자연스럽게 연동 가능하다.
UI가 씬의 오브젝트처럼 동작하므로, 카메라 각도와 거리의 영향을 직접적으로 받을 수 있다.
(예시: 캐릭터 머리 위 HP바, NPC 대화 풍선, 3D 미니맵 등)
Canvas Scaler
해상도, 화면 비율, DPI에 맞춰 UI를 자연스럽게 보여주기 위한 필수 컴포넌트.
- Constant Pixel Size
항상 같은 픽셀 크기로 UI가 표시된다.
해상도에 따라 UI가 너무 크거나 작아질 수 있어, 보통 권장하지 않는다.
- Scale With Screen Size
UI가 기준 해상도(Reference Resolution)에 맞게 자동 스케일 조정된다.
Match Width Or Height, Expand, Shrink 옵션으로 화면 크기에 유연하게 대응 가능하다.
모바일, 다양한 해상도 대응이 필요한 프로젝트에서 표준적으로 사용됨.
- Constant Physical Size
DPI(인치당 점) 정보를 바탕으로 실제 물리적 크기(inch, cm) 기준으로 UI를 렌더링한다.
특수 목적(예: 산업용, 교육용 앱)에 적하다.
세부 설정
-
Reference Resolution
기준 해상도 지정. 보통 1920x1080(16:9), 1080x1920(9:16) 등 사용.
기기의 해상도가 다르더라도, 이 기준 해상도를 기반으로 UI가 배율 조정됨. -
Match
0 = 가로 해상도 기준, 1 = 세로 해상도 기준, 0.5 = 가로/세로 균형.
UI가 세로 위주일 경우 1, 가로 위주일 경우 0에 가깝게 설정하면 됨. -
Screen Match Mode
Match Width Or Height: 가로/세로 비율을 맞추는 일반적인 방식.
Expand: 작은 화면에 맞게 전체 UI가 늘어남.
Shrink: 큰 화면에 맞게 UI가 줄어듦.
Canvas Group
Canvas Group 컴포넌트는 Canvas 하위의 여러 UI 오브젝트를 한 번에 조절 할 수 있게 해준다.
-
Alpha
0~1 사이 값으로 그룹 전체 투명도 제어 가능. -
Interactable
그룹 내 UI의 상호작용 활성화/비활성화 가능. -
Blocks Raycasts
입력(터치/클릭) 이벤트가 하위 UI에 전달될지 여부 설정 가능.
여러 UI 오브젝트를 동시에 fade-in, fade-out 처리할 때 유용하게 사용 가능하다.
RectTransform
UI 요소는 기본적으로 RectTransform 컴포넌트를 사용한다.
-
Anchor
부모 기준 위치, 크기 자동 보정. -
Pivot
회전, 스케일의 기준점. -
Position, Size Delta
위치 및 크기 세밀 조정 가능.
앵커와 피벗 설정에 따라, 화면 해상도가 바뀌어도 UI의 상대적 위치와 크기가 자연스럽게 변하며 상황에 따라 배치를 조금 더 간편하게 할 수 있다.
기본적으로 transform 의 기능도 사용 할 수 있다.
이벤트, 입력 시스템
-
Graphic Raycaster
Canvas에 연결되어 마우스, 터치 등 UI 입력을 감지한다. -
Event System 씬에 반드시 존재해야 UI 클릭, 터치 등 이벤트가 정상적으로 동작한다.
Standalone Input Module, Touch Input Module 등 입력 방식을 지정할 수 있고 이미지나 버튼등 Raycast 옵션을 통해 입력을 받을 수 있게 할지 설정 할 수 있다. 버튼이 아니더라도 EventTrigger 를 통해 입력을 받기도 하고 코드상에서 IPointHandler 등을 이용하는 방법도 있다.
주의사항
Canvas 구조를 설계할 때, 성능과 유지보수를 모두 고려하는 것이 중요하다.
하위의 UI 요소가 변화(텍스트 수정, 이미지 교체, 애니메이션 등)될 경우, 해당 Canvas 전체를 다시 빌드(Render)하게 되는데
이 과정이 자주 발생하면 Draw Call(그래픽 처리 횟수)이 늘어나고, 렌더링 퍼포먼스에 영향을 줄 수 있다.
애니메이션, 드래그&드롭 등 자주 변하는 UI는 별도 Canvas로 분리하는 것이 퍼포먼스에 유리함.
오브젝트 풀링 등으로 UI 오브젝트의 생성/파괴를 최소화하면 성능 저하를 막을 수 있다.
