Unity UI 툴킷 가이드 (2022.3 LTS)
1. 개요
Unity UI 툴킷은 사용자 인터페이스(UI) 요소를 생성하고 관리하기 위한 강력한 도구입니다. 이 가이드는 UI 툴킷의 기본 개념과 시각적 요소의 구조를 설명합니다.
2. 시각적 트리
- 시각적 요소 (VisualElement): UI 툴킷의 기본 빌딩 블록입니다. 모든 시각적 요소는 계층 구조를 가지며, 이를 시각적 트리라고 합니다.
- 계층 구조: 각 시각적 요소는 부모-자식 관계를 가져 서로 연결됩니다.
시각적 트리의 예
| 노드 타입 | 설명 |
|---|---|
| Root | EditorWindow.rootVisualElement |
| Runtime | UIDocument.rootVisualElement |
| VisualElement | 시각적 트리의 기본 클래스 |
| Child Elements | 여러 자식 시각적 요소를 가질 수 있음 |
3. VisualElement 클래스
- 기본 속성: 스타일, 레이아웃 데이터, 이벤트 핸들러 등.
- 커스터마이징: 인라인 스타일과 스타일시트를 통해 요소의 모양을 변경할 수 있습니다.
- 이벤트 처리: 이벤트 콜백을 사용하여 동작을 수정할 수 있습니다.
4. UI 컨트롤
UI 툴킷에는 다양한 빌트인 컨트롤이 제공됩니다. 주요 컨트롤은 다음과 같습니다:
| 컨트롤 이름 | 설명 |
|---|---|
| 버튼 | 사용자가 클릭할 수 있는 요소 |
| 토글 | 두 상태(true/false)를 가질 수 있음 |
| 텍스트 입력 필드 | 사용자 입력을 받는 텍스트 필드 |
5. 커스텀 컨트롤 만들기
기본 제공 컨트롤을 기반으로 하여 커스텀 컨트롤을 만들 수 있습니다. 다음 단계를 따라하세요:
- 기존 컨트롤의 시각적 요소를 수정합니다.
- 동작을 수정하여 새로운 기능을 추가합니다.
- 시각적 트리에 새로운 컨트롤을 추가합니다.
6. 활용 및 응용 예제
예제 1: 사용자 정의 버튼 만들기
public class CustomButton : Button
{
public CustomButton()
{
this.text = "클릭하십시오";
this.RegisterCallback<ClickEvent>(ev =>
{
Debug.Log("버튼이 클릭되었습니다.");
});
}
}
예제 2: 토글 컨트롤의 상태 관리
public class ToggleController : VisualElement
{
private Toggle toggle;
public ToggleController()
{
toggle = new Toggle("옵션 활성화");
toggle.RegisterValueChangedCallback(evt =>
{
Debug.Log(evt.newValue ? "활성화됨" : "비활성화됨");
});
this.Add(toggle);
}
}
7. 추가 리소스
결론
Unity UI 툴킷은 개발자가 사용자 인터페이스를 쉽게 디자인하고 구현할 수 있도록 돕는 강력한 도구입니다. 시각적 요소와 트리를 이해함으로써 더욱 효율적으로 UI를 구성할 수 있습니다.