Unity 사용자 매뉴얼: 커스텀 UI 컨트롤 만들기

개요

이 문서에서는 Unity의 UI 툴킷을 사용하여 두 가지 속성을 가진 커스텀 UI 컨트롤을 만드는 방법을 설명합니다. 예제에서는 MyElement라는 이름의 커스텀 컨트롤을 만들며, 이를 UXML 파일 및 UI 빌더에 노출하는 방법도 제공합니다.

선행 조건

이 가이드는 Unity, UI 툴킷, C# 스크립팅에 익숙한 개발자를 위한 것입니다. 시작하기 전에 다음 사항을 숙지해 주세요:

• UXML
• UI 빌더

커스텀 컨트롤 클래스 생성

새 커스텀 컨트롤 클래스를 만들려면 VisualElement 클래스를 상속합니다. 이 과정을 통해 C#에서 이 요소를 생성하고 사용할 수 있지만, UXML 및 UI 빌더에 자동으로 노출되지는 않습니다. 이를 위해 UxmlTraits에서 파생된 특성 클래스를 정의하고 Init() 메서드를 재정의합니다.

C# 코드 예제

다음의 C# 코드는 MyElement 클래스를 정의하는 예입니다. 이 클래스는 두 가지 커스텀 속성을 가지며 UI 빌더에서 사용될 수 있습니다.

using UnityEngine;
using UnityEngine.UIElements;

class MyElement : VisualElement
{
    public new class UxmlFactory : UxmlFactory<MyElement, UxmlTraits> { }

    // 두 개의 커스텀 UXML 속성을 추가합니다.
    public new class UxmlTraits : VisualElement.UxmlTraits
    {
        UxmlStringAttributeDescription m_String =
            new UxmlStringAttributeDescription { name = "my-string", defaultValue = "default_value" };
        UxmlIntAttributeDescription m_Int =
            new UxmlIntAttributeDescription { name = "my-int", defaultValue = 2 };

        public override void Init(VisualElement ve, IUxmlAttributes bag, CreationContext cc)
        {
            base.Init(ve, bag, cc);
            var ate = ve as MyElement;

            ate.myString = m_String.GetValueFromBag(bag, cc);
            ate.myInt = m_Int.GetValueFromBag(bag, cc);
        }
    }

    // UXML 속성 설명서에서 설정한 이름과 같은 이름을 가져야 하는 { get; set; } 속성을 노출해야 합니다.
    public string myString { get; set; }
    public int myInt { get; set; }
}

UXML 파일 생성

1. 원하는 이름으로 UXML 파일을 만듭니다.
2. UXML 파일을 더블 클릭하여 UI 빌더에서 엽니다.
3. UI 빌더의 Library 섹션에서 Project > Custom Controls (C#) > MyElement를 선택합니다.
4. MyElement를 계층 창으로 드래그합니다.
5. MyElement의 커스텀 속성을 확인하려면 MyElement의 인스펙터 창으로 이동합니다.

활용 예제

• 조건부 UI 만들기: 토글을 사용하여 특정 조건에 따라 UI 요소를 보여주거나 숨길 수 있습니다.
• 슬라이드 토글 커스텀 컨트롤 만들기: 슬라이더를 활용하여 사용자 입력을 받을 수 있는 UI 요소를 만들 수 있습니다.

추가 리소스

• 커스텀 컨트롤 만들기
• UXML 및 UI 빌더에 커스텀 컨트롤을 노출하기
• Unity 공식 포럼 및 문서

결론

이 가이드를 통해 Unity의 UI 툴킷을 일러스트레이션하여 커스텀 UI 컨트롤을 생성하는 방법에 대해 알아보였습니다. 더 나아가 프로젝트에 맞게 이러한 커스텀 컨트롤을 활용하여 유용한 UI를 구축할 수 있습니다.