Unity UI Toolkit 포커스 이벤트 가이드

개요

Unity의 UI Toolkit에서 포커스 이벤트는 UI 요소가 사용자의 상호작용에 따라 포커스를 얻거나 잃을 때 발생합니다. 이 문서에서는 포커스 이벤트의 종류와 사용 방법을 설명하고, 이를 활용한 예제를 제공합니다.

포커스 이벤트 종류

포커스 이벤트는 다음과 같은 두 가지 기본 타입으로 나뉘어집니다:

1. FocusOutEvent: 요소가 포커스를 잃기 전에 발생합니다.
2. FocusInEvent: 요소가 포커스를 얻기 전에 발생합니다.
3. BlurEvent: 요소가 포커스를 잃은 후 발생합니다.
4. FocusEvent: 요소가 포커스를 얻은 후 발생합니다.

이벤트 종류와 특성에 대한 표는 다음과 같습니다.

관련 프로퍼티

포커스 이벤트와 관련된 고유 프로퍼티는 다음과 같습니다.

예제: 플레이스홀더 텍스트 설정

다음 예제는 TextField에서 플레이스홀더 텍스트를 설정하는 방법을 보여줍니다. 포커스를 얻을 때 플레이스홀더 텍스트를 제거하고, 포커스를 잃을 때 입력값이 비어있으면 다시 플레이스홀더 텍스트를 설정합니다.

C# 스크립트 예제

아래 코드를 사용해 새로운 C# 스크립트를 작성합니다. 파일 이름은 PlaceHolderExample.cs로 저장합니다.

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

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

    private bool placeHolderMode = true;
    private const string placeHolderText = "Write here";

    public void CreateGUI()
    {
        TextField textField = new TextField();
        textField.value = placeHolderText;
        rootVisualElement.Add(textField);

        textField.RegisterCallback<FocusInEvent>(OnFocusInTextField);
        textField.RegisterCallback<FocusOutEvent>(OnFocusOutTextField);
    }

    private void OnFocusInTextField(FocusInEvent evt)
    {
        if (placeHolderMode)
        {
            var textField = evt.target as TextField;
            textField.value = "";
        }
    }

    private void OnFocusOutTextField(FocusOutEvent evt)
    {
        var textField = evt.target as TextField;
        placeHolderMode = string.IsNullOrEmpty(textField.value);
        if (placeHolderMode)
            textField.value = placeHolderText;
    }
}

실행 방법

1. Unity에서 Window > UI Toolkit > PlaceHolderExample을 선택하여 새로 만든 에디터 창을 엽니다.
2. 텍스트 필드에 포커스를 주었다가 뺄 때 플레이스홀더 텍스트의 동작을 확인합니다.

결론

이제 Unity UI Toolkit의 포커스 이벤트를 이해하고, 이를 활용하여 동적인 사용자 인터페이스를 생성하는 방법을 배웠습니다. 포커스 이벤트를 적절히 활용하면 사용자 경험을 향상시킬 수 있습니다.