Unity UI Toolkit 예제 가이드

이 문서는 Unity의 UI Toolkit을 이용하여 사용자 인터페이스(UI)를 만드는 방법을 설명합니다. 아래의 예제를 통해 상대 및 절대 위치 지정을 사용하는 방법을 배울 수 있습니다.

개요

이 예제에서는 UI 컨트롤을 추가하고 스타일을 지정하는 방법을 설명합니다. 자동 레이아웃 시스템을 활용하여 에디터와 런타임 UI에 요소를 추가합니다.

• 상대 포지션: 특정 기준을 가지고 요소를 배치합니다.
• 절대 포지션: 화면의 절대 위치에 요소를 배치합니다.

선행 조건

이 가이드는 Unity 에디터와 C# 스크립팅에 익숙한 개발자를 위한 것입니다. 다음 사항을 먼저 숙지해야 합니다.

• 시각적 트리
• 좌표 및 포지션 시스템
• UXML 및 USS

에디터 UI 예제 만들기

1. Unity 프로젝트를 생성합니다.
2. Project 창을 오른쪽 클릭하고 Create > UI Toolkit > Editor Window를 선택합니다.
3. 새로운 창의 이름을 PositioningTestWindow로 설정하고 확인합니다.
4. 다음 코드를 PositioningTestWindow.cs 파일에 입력합니다.

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class PositioningTestWindow : EditorWindow
{
    [MenuItem("Window/UI Toolkit/Positioning Test Window")]
    public static void ShowExample()
    {
        var wnd = GetWindow<PositioningTestWindow>();
        wnd.titleContent = new GUIContent("Positioning Test Window");
    }

    public void CreateGUI()
    {
        for (int i = 0; i < 2; i++)
        {
            var temp = new VisualElement();
            temp.style.width = 70;
            temp.style.height = 70;
            temp.style.marginBottom = 2;
            temp.style.backgroundColor = Color.gray;
            this.rootVisualElement.Add(temp);
        }

        // Relative positioning
        var relative = new Label("Relative\nPos\n25, 0");
        relative.style.width = 70;
        relative.style.height = 70;
        relative.style.left = 25;
        relative.style.marginBottom = 2;
        relative.style.backgroundColor = new Color(0.2165094f, 0, 0.254717f);
        this.rootVisualElement.Add(relative);

        for (int i = 0; i < 2; i++)
        {
            var temp = new VisualElement();
            temp.style.width = 70;
            temp.style.height = 70;
            temp.style.marginBottom = 2;
            temp.style.backgroundColor = Color.gray;
            this.rootVisualElement.Add(temp);
        }

        // Absolute positioning
        var absolutePositionElement = new Label("Absolute\nPos\n25, 25");
        absolutePositionElement.style.position = Position.Absolute;
        absolutePositionElement.style.top = 25;
        absolutePositionElement.style.left = 25;
        absolutePositionElement.style.width = 70;
        absolutePositionElement.style.height = 70;
        absolutePositionElement.style.backgroundColor = Color.black;
        this.rootVisualElement.Add(absolutePositionElement);
    }
}

1. 메뉴에서 Window > UI Toolkit > Positioning Test Window를 선택하면 결과를 확인할 수 있습니다.

런타임 UI 예제 만들기

1. PositioningTest.uss라는 이름의 USS 파일을 생성합니다.

.box {
    height: 70px;
    width: 70px;
    margin-bottom: 2px;
    background-color: gray;
}
#relative {
    width: 70px; 
    height: 70px; 
    background-color: purple; 
    left: 25px; 
    margin-bottom: 2px;
    position: relative;
}
#absolutePositionElement {
    left: 25px; 
    top: 25px; 
    width: 70px; 
    height: 70px; 
    background-color: black;
    position: absolute;
}

1. PositioningTest.uxml라는 이름의 UXML 문서를 생성합니다.

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" 
xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" 
editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd" 
editor-extension-mode="False">
    <Style src="PositioningTest.uss"/>
    <ui:VisualElement class="box"/>
    <ui:VisualElement class="box"/>
    <ui:Label text="Relative\nPos\n25, 0" name="relative" />
    <ui:VisualElement class="box"/>
    <ui:VisualElement class="box"/>
    <ui:Label text="Absolute\nPos\n25, 25" name="absolutePositionElement" />  
</ui:UXML>

1. PositioningTestRuntime.cs라는 이름의 C# 스크립트를 생성합니다.

using UnityEngine;
using UnityEngine.UIElements;

public class PostionTestRuntime : MonoBehaviour
{
    void OnEnable()
    {
        GetComponent<UIDocument>();
    }
}

결과 확인

1. 계층(Hierarchy) 창을 오른쪽 클릭한 후 UI Toolkit > UI Document를 선택합니다.
2. UI Document의 인스펙터 창에서 UI Document > Source Asset > PositioningTest를 선택합니다.
3. UI Document의 인스펙터 창에서 Add Component > Positioning Test Runtime을 선택합니다.
4. 플레이 모드로 들어가 결과를 확인합니다.

추가 리소스

• Unity 공식 문서
• Unity 포럼

이 가이드를 통해 Unity의 UI Toolkit을 활용하여 다양한 UI 요소를 쉽게 배치하고 스타일링 할 수 있는 방법을 배우셨기를 바랍니다.