즉시 모드 GUI(IMGUI)에서 UI 툴킷으로 마이그레이션

이 가이드는 즉시 모드 GUI(IMGUI)를 사용하여 UI 툴킷으로 마이그레이션한 경험이 있는 개발자용입니다. 이 가이드는 에디터 UI에 중점을 두고 있지만 정보는 런타임 UI에도 적용될 수 있습니다.

주요 차이점

코드 기반과 UI 기반 비교

IMGUI는 C# 스크립트에서 OnGUI 함수에 대해 호출별 코드 기반으로 구현됩니다. UI 툴킷은 에디터 UI 생성을 위한 더 풍부한 옵션을 제공합니다. UI ㄹ툴킷을 사용하면 C# 스크립트에서 동작을 정의할 수 있습니다. 그러나 UI 요소와 스타일을 정의할 때 C# 외에도 UI 빌더에서 UI 컨트롤을 시각적으로 정의하거나 XML 같은 텍스트 파일(일명 UXML)에 직접 작성할 수 있습니다. 자세한 내용은 간단한 UI 툴킷 워크플로를 참조하십시오.

즉시 모드와 보류 모드 비교

IMGUI를 사용하면 OnGUI() 함수 내에서 UI를 리페인팅할 때 UI 트리를 형성합니다. 서로 다른 이벤트 간에 UI 트리와 관련된 영구적인 정보는 없습니다. 반면 시각적 트리라는 트리 구조에서 UI 툴킷을 사용하여 시각적 요소를 만듭니다. 시각적 트리의 정보는 영구적으로 유지됩니다.

불변과 상태 변화 비교

IMGUI는 매 프레임마다 적어도 한 번은 실행되는 OnGUI() 함수를 기반으로 합니다. 가능한 모든 프레임에 대해 UI의 모양과 동작을 정의합니다. OnGUI()의 바디에는 많은 조건과 다양한 상태가 포함될 수 있습니다.

UI 툴킷은 이벤트 기반 시스템에서 작동합니다. 기본 상태에서 UI의 모양을 정의하고 이벤트에 대한 UI의 동작을 정의합니다. UI 툴킷에서 변경하면 UI 상태가 지속적으로 변경됩니다.

예를 들어 IMGUI의 버튼 선언은 다음과 같습니다.

if (GUILayout.Button("Click me!"))
{
    //Code runs here in frames where the user clicks the button.

    //Code makes changes to the UI for frames where the user has just clicked the button.
}
else
{
    //Code specifies what happens in all other frames.
}

위의 예시는 UI 툴킷에서 다음과 같이 작성되어야 합니다

UIDocument document = GetComponent<UIDocument>();

//Create button.
Button button = new Button();
button.text = "Click me!";

//Set up event handler.
button.RegisterCallback<ClickEvent>((ClickEvent evt) =>
{
    //Code runs here after button receives ClickEvent.
});

//Add button to UI.
document.rootVisualElement.Add(button);

UI 툴킷을 사용하여 커스텀 에디터 창을 만드는 방법에 대한 완성된 예시는 간단한 UI 툴킷 워크플로를 참조하십시오.

IMGUI 지원

IMGUIContainer를 사용하여 IMGUI 코드를 VisualElement 내에 배치하십시오. OnGUI() 내에서 수행하는 대부분의 작업이 지원됩니다.

GUILayout 및 UI 툴킷 레이아웃을 혼합하여 여러 개의 IMGUIContainer를 배열하고 배치할 수 있습니다. 단, IMGUIContainer 내부에 VisualElement 인스턴스를 추가할 수는 없습니다.

IMGUI에서 UI 툴킷으로 전환

다음 표에는 IMGUI와 UI 툴킷 간에 대응하는 함수가 나열되어 있습니다.

다음 표에는 IMGUI와 UI 툴킷 간에 대응하는 메서드, 클래스, 속성이 나열되어 있습니다.

추가 리소스

• Get started with UI Toolkit
• Unity 스타일 시트 (USS)
• 예시
• IMGUI 이벤트