Unity 사용자 매뉴얼: UI 툴킷 및 레이아웃
Unity의 UI 툴킷을 사용하여 사용자 인터페이스(UI)를 구성하는 방법에 대해 설명합니다. UI 툴킷은 요소의 위치와 스타일링을 설정하는 데 있어 다양한 프로퍼티를 제공합니다.
레이아웃 엔진
UI 툴킷은 Flexbox 레이아웃 시스템의 하위 집합인 Yoga를 기반으로 한 레이아웃 엔진을 사용합니다. 이 엔진은 다음과 같은 주요 동작을 수행합니다:
- 부모 컨테이너가 자식들을 수직으로 배치합니다.
- 컨테이너의 크기는 특정 자식 요소를 포함합니다.
- 텍스트 크기가 포함된 VisualElement는 텍스트 크기에 따라 계산됩니다.
주요 스타일 프로퍼티
여기에는 UI 요소의 레이아웃을 조절하는 몇 가지 중요 속성이 포함됩니다:
| 속성 | 설명 |
|---|---|
| Flex > Direction | 메인 축에서의 레이아웃 방향을 정의. 기본값은 column |
| Flex > Grow | 요소가 메인 축에서 커지는 방식을 정의. 기본적으로 형제 요소들과 비율을 공유 |
| Align > Align Items | 요소들의 얼라인먼트를 정의. 예를 들어, flex-start 또는 flex-end로 설정 가능 |
| Align > Justify Content | 메인 축에서의 요소의 얼라인먼트를 정의. 같은 방식으로 다양한 값 선택 가능 |
레이아웃 예시
화면 오른쪽 하단에 버튼 고정하기
다음은 화면의 오른쪽 하단에 버튼을 고정하기 위한 UXML 레이아웃 예시입니다:
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
<ui:VisualElement name="screen-is-blue" style="flex-grow: 1; justify-content: flex-end; background-color: blue;">
<ui:VisualElement name="toolbar-is-orange" style="align-items: flex-end; background-color: orange;">
<ui:Button text="Button" display-tooltip-when-elided="true" />
</ui:VisualElement>
</ui:VisualElement>
</ui:UXML>
이 예제는 색상을 통해 레이아웃을 명확히 드러내며, 각 요소의 크기를 명시적으로 설정하지 않고도 동적 레이아웃을 구현합니다.
절대 위치 지정하기
절대 위치는 UI 툴킷의 빌트인 레이아웃 엔진에서 요소가 공간을 차지하지 않는 것처럼 보이게 만듭니다. 아래는 화면 왼쪽 하단에 버튼을 고정하는 예시입니다:
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
<ui:VisualElement style="flex-grow: 1;">
<ui:VisualElement style="position: absolute; left: 0; bottom: 0;" />
</ui:VisualElement>
</ui:UXML>
이 경우, 버튼은 화면의 왼쪽 아래에 고정됩니다.
베스트 프랙티스
레이아웃 성능을 향상시키기 위한 몇 가지 팁은 다음과 같습니다:
- 크기 설정:
width와height를 사용하여 요소의 크기를 정의합니다. - 유연한 크기 할당:
flexGrow속성을 활용하여 크기를 유연하게 처리합니다. - 가로 레이아웃 전환:
flexDirection을row로 설정하여 가로 레이아웃으로 전환합니다. - 상대 위치 지정 사용: 원본 레이아웃을 기준으로 요소를 오프셋합니다.
- 절대 위치 사용: 요소를 부모 컨테이너의 위치를 기준으로 배치합니다.
추가 리소스
위의 정보를 통해 Unity의 UI 툴킷을 활용하여 다양한 UI 요소를 효과적으로 배치하고 스타일링할 수 있습니다. 필요한 경우 각 요소의 속성 값을 조정하여 고유한 사용자 경험을 제공하세요.