🎮 Unity6 UI - Canvas, Basic Layout

📌 본 포스팅은 Unity UI 공식 매뉴얼의 내용을 바탕으로 작성되었습니다.

유니티 UI는 게임과 애플리케이션의 사용자 인터페이스를 개발하기 위한 UI 툴킷입니다. 이는 게임 오브젝트(GameObject) 기반의 UI 시스템으로, 컴포넌트(Components)와 게임 뷰(Game View)를 사용하여 사용자 인터페이스를 배치하고, 위치를 조정하며, 스타일을 지정합니다.

유니티 에디터(Unity Editor) 자체 내에서 사용자 인터페이스를 만들거나 변경하는 데는 유니티 UI를 사용할 수 없습니다. (즉, 에디터 툴을 만드는 용도는 아니라는 뜻입니다.)

---

🔮캔버스(Canvas)

캔버스는 모든 UI 요소가 반드시 포함되어야 하는 영역입니다. 캔버스 자체는 Canvas 컴포넌트가 부착된 게임 오브젝트이며, 모든 UI 요소는 이 캔버스의 자식으로 존재해야 합니다.

새로운 UI 요소(예: GameObject > UI > Image 메뉴를 통해 이미지를 생성)를 만들면, 만약 장면에 캔버스가 없다면 자동으로 캔버스가 생성됩니다. 그리고 이 UI 요소는 생성된 캔버스의 자식으로 추가됩니다.

캔버스 영역은 씬 뷰(Scene View)에서 직사각형으로 표시됩니다. 덕분에 항상 게임 뷰(Game View)를 켜두지 않아도 UI 요소를 쉽게 배치할 수 있습니다.

캔버스는 EventSystem 오브젝트를 사용하여 유니티의 메시징 시스템(Messaging System)을 지원합니다.

요소의 드로잉 순서

캔버스 내부의 UI 요소들은 계층 구조(Hierarchy)에 나타나는 순서대로 그려집니다. 첫 번째 자식 요소가 가장 먼저 그려지고, 두 번째 자식 요소가 그 다음으로 그려지는 식이죠. 만약 두 UI 요소가 겹친다면, 계층 구조상 나중에 오는 요소가 먼저 오는 요소 위에 표시됩니다.

요소들의 표시 순서를 바꾸려면, 단순히 계층 구조에서 드래그하여 요소들의 순서를 변경하면 됩니다. 또한, 스크립트에서는 Transform 컴포넌트의 SetAsFirstSibling, SetAsLastSibling, SetSiblingIndex 메서드를 사용하여 순서를 제어할 수 있습니다.

렌더 모드 (Render Modes)

캔버스에는 UI를 스크린 공간(Screen Space) 또는 월드 공간(World Space)에 렌더링하도록 설정할 수 있는 렌더 모드(Render Mode) 설정이 있습니다.

스크린 공간 - 오버레이 (Screen Space - Overlay)

이 렌더 모드는 UI 요소를 장면 위에 렌더링하여 화면에 직접 배치합니다. 화면 크기가 조절되거나 해상도가 변경되면, 캔버스는 자동으로 크기를 조절하여 화면에 맞춰집니다.

스크린 공간 - 카메라 (Screen Space - Camera)

Screen Space - Overlay와 유사하지만, 이 렌더 모드에서는 캔버스가 지정된 카메라 앞에 특정 거리만큼 배치됩니다. UI 요소는 이 카메라에 의해 렌더링되므로, 카메라 설정이 UI의 외관에 영향을 미칩니다. 만약 카메라가 원근(Perspective)으로 설정되어 있다면, UI 요소도 원근감을 가지고 렌더링되며, 카메라의 시야각(Field of View)을 통해 원근 왜곡의 정도를 조절할 수 있습니다. 화면 크기나 해상도가 변경되거나 카메라 절두체(frustum)가 변해도 캔버스는 자동으로 크기를 조절하여 맞춰집니다.

월드 공간 (World Space)

이 렌더 모드에서는 캔버스가 장면 내의 다른 일반 오브젝트처럼 동작합니다. 캔버스의 크기는 Rect Transform을 사용하여 수동으로 설정할 수 있으며, UI 요소는 3D 배치에 따라 장면 내의 다른 오브젝트들 앞에 또는 뒤에 렌더링됩니다. 이는 게임 세계의 일부처럼 보이게 하려는 UI에 유용합니다. 이를 "디에게틱 인터페이스(diegetic interface)"라고도 부릅니다.

---

🔮Basic Layout

유니티(Unity)에서 UI 요소의 기본적인 레이아웃 입니다.GameObject -> UI -> Image 메뉴로 이미지를 생성하세요.

Rect 툴

모든 UI 요소는 레이아웃 목적으로 직사각형(rectangle)으로 표현됩니다. 이 직사각형은 툴바에 있는 Rect 툴을 사용하여 씬 뷰(Scene View)에서 조작할 수 있습니다. Rect 툴은 유니티의 2D 기능과 UI에 모두 사용되며, 심지어 3D 오브젝트에도 사용할 수 있습니다.

Rect 툴을 사용하면 UI 요소를 이동, 크기 조절, 회전시킬 수 있습니다. UI 요소를 선택한 후, 직사각형 내부 아무 곳이나 클릭하고 드래그하면 이동할 수 있습니다. 모서리나 가장자리를 클릭하고 드래그하면 크기를 조절할 수 있습니다. 마우스 커서를 모서리에서 살짝 멀리 떨어뜨리면 회전 기호 모양으로 바뀌는데, 이때 클릭하고 드래그하면 요소를 회전시킬 수 있습니다.

다른 툴과 마찬가지로 Rect 툴은 툴바에 설정된 현재 피벗 모드와 공간을 사용합니다. UI 작업을 할 때는 보통 Pivot과 Local로 설정해 두는 것이 좋습니다.

Rect Transform

Rect Transform은 일반적인 Transform 컴포넌트 대신 모든 UI 요소에 사용되는 새로운 트랜스폼 컴포넌트입니다.

Rect Transform은 일반 Transform처럼 위치, 회전, 스케일을 가지고 있지만, 직사각형의 크기를 지정하는 너비(width)와 높이(height) 속성도 추가로 가지고 있습니다.

크기 조절(Resizing) 대 스케일(Scaling)

Rect 툴을 사용하여 오브젝트의 크기를 변경할 때, 일반적으로 2D 시스템의 스프라이트나 3D 오브젝트의 경우 오브젝트의 로컬 스케일을 변경합니다. 하지만 Rect Transform이 적용된 오브젝트에 사용될 때는, 로컬 스케일을 그대로 유지한 채 너비(width)와 높이(height)를 변경합니다. 이렇게 크기를 조절하는 것은 폰트 크기, 슬라이스된 이미지의 테두리 등에는 영향을 주지 않습니다.

피벗 (Pivot)

회전, 크기, 스케일 수정은 피벗(pivot)을 중심으로 발생하므로, 피벗의 위치는 회전, 크기 조절, 스케일 변경의 결과에 영향을 미칩니다. 툴바의 Pivot 버튼이 Pivot 모드로 설정되어 있을 때, Rect Transform의 피벗은 씬 뷰에서 이동시킬 수 있습니다.

앵커 (Anchors)

Rect Transform에는 앵커(anchors)라는 레이아웃 개념이 포함되어 있습니다. 앵커는 씬 뷰에서 네 개의 작은 삼각형 핸들로 표시되며, 앵커 정보는 인스펙터에서도 확인할 수 있습니다.

만약 Rect Transform의 부모도 Rect Transform이라면, 자식 Rect Transform은 부모 Rect Transform에 여러 가지 방식으로 고정(anchored)될 수 있습니다. 예를 들어, 자식은 부모의 중앙에 고정되거나, 모서리 중 하나에 고정될 수 있습니다.

앵커링(anchoring)은 또한 자식이 부모의 너비나 높이에 따라 함께 늘어나도록 허용합니다. 직사각형의 각 모서리는 해당 앵커에 대해 고정된 오프셋을 가집니다. 즉, 직사각형의 왼쪽 상단 모서리는 왼쪽 상단 앵커에 대해 고정된 오프셋을 가지는 식이죠. 이러한 방식으로 직사각형의 각기 다른 모서리가 부모 직사각형의 다른 지점에 고정될 수 있습니다.

앵커의 위치는 부모 직사각형의 너비와 높이에 대한 분수(또는 백분율)로 정의됩니다. 0.0 (0%)은 왼쪽 또는 아래쪽을, 0.5 (50%)는 중앙을, 1.0 (100%)은 오른쪽 또는 위쪽을 나타냅니다. 하지만 앵커는 가장자리나 중앙에만 한정되지 않고, 부모 직사각형 내의 어느 지점에도 고정될 수 있습니다.

각 앵커를 개별적으로 드래그할 수 있으며, 만약 앵커들이 함께 있다면 중앙을 클릭하고 드래그하여 한 번에 이동시킬 수 있습니다. Shift 키를 누른 채 앵커를 드래그하면, 직사각형의 해당 모서리가 앵커와 함께 움직입니다.

앵커 핸들의 유용한 기능 중 하나는 정확한 위치 지정을 위해 형제(sibling) 직사각형의 앵커에 자동으로 스냅(snap)된다는 점입니다.

앵커 프리셋 (Anchor presets)

인스펙터의 Rect Transform 컴포넌트 왼쪽 상단에서 앵커 프리셋(Anchor Preset) 버튼을 찾을 수 있습니다. 이 버튼을 클릭하면 앵커 프리셋 드롭다운 메뉴가 나타납니다. 여기서 가장 일반적인 앵커링 옵션들을 빠르게 선택할 수 있습니다. UI 요소를 부모의 가장자리나 중앙에 고정하거나, 부모 크기에 따라 함께 늘어나도록 설정할 수 있습니다. 가로 및 세로 앵커링은 독립적으로 작동합니다.

앵커 프리셋 버튼은 현재 선택된 프리셋 옵션이 있다면 이를 표시합니다. 만약 앵커가 수평 또는 수직 축에서 어떤 프리셋과도 다른 위치로 설정되어 있다면, 'Custom'(사용자 지정) 옵션이 표시됩니다.

인스펙터의 앵커 및 위치 필드

앵커 번호 필드가 보이지 않는다면 앵커 확장 화살표를 클릭하여 표시할 수 있습니다. Anchor Min은 씬 뷰에서 왼쪽 하단 앵커 핸들에 해당하고, Anchor Max는 오른쪽 상단 핸들에 해당합니다.

직사각형의 위치 필드는 앵커가 함께 있는지(고정된 너비와 높이 생성) 또는 분리되어 있는지(부모 직사각형과 함께 늘어남)에 따라 다르게 표시됩니다.

• 모든 앵커 핸들이 함께 있을 때:
  Pos X, Pos Y, Width, Height 필드가 표시됩니다. Pos X와 Pos Y 값은 앵커에 대한 피벗의 상대적인 위치를 나타냅니다.

• 앵커가 분리되어 있을 때:
  필드가 부분적으로 또는 완전히 Left, Right, Top, Bottom으로 변경될 수 있습니다. 이 필드들은 앵커가 정의하는 직사각형 내부의 패딩(padding)을 정의합니다. 앵커가 수평으로 분리되어 있다면 Left와 Right 필드가 사용되고, 수직으로 분리되어 있다면 Top과 Bottom 필드가 사용됩니다.

💡 앵커 또는 피벗 필드의 값을 변경하면 일반적으로 직사각형이 제자리에 있도록 위치 값들이 자동으로 조절(counter-adjust)됩니다. 이러한 자동 조절을 원하지 않는 경우, 인스펙터에서 R 버튼을 클릭하여 'Raw edit mode'(원시 편집 모드)를 활성화하면 앵커 및 피벗 값을 다른 값의 변경 없이 자유롭게 변경할 수 있습니다. 이렇게 직사각형의 위치와 크기가 앵커 및 피벗 값에 따라 결정되므로 시각적으로 이동하거나 크기가 조절될 수 있습니다.