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

이 가이드는__ UI__(사용자 인터페이스) 사용자가 애플리케이션과 상호 작용하도록 해 줍니다. Unity는 현재 3개의 UI 시스템을 지원합니다. 자세한 정보
See in Glossary 툴킷으로 마이그레이션하려는 IMGUI(즉시 모드 GUI)에 익숙한 개발자를 위한 것입니다. 이 가이드는 에디터 UI에 중점을 두지만 해당 정보는 런타임 UI에도 적용될 수 있습니다.

주요 차이점

코드 기반과 UI 기반 비교

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

즉시 모드와 보류 모드 비교

IMGUI를 사용하면 OnGUI() 함수 내에서 UI가 리페인팅될 때 UI 트리를 설명합니다. 이벤트가 UI에 대해 발생하거나 UI를 리페인팅할 때 이 함수를 호출해야 합니다. 서로 다른 이벤트 간에는 UI 트리에 대한 지속적인 정보가 없습니다. 반면, UI 툴킷을 사용하여 시각적 트리라는 트리 구조에서 시각적 요소를 만들 수 있습니다. 시각적 트리의 정보는 지속적으로 보관됩니다.

불변과 상태 변화 비교

IMGUI는 OnGUI()function that runs at least once every frame. You define the look and the behaviors of the UI for every possible frame. The body ofOnGUI()`를 기반으로 하며 여러 조건과 서로 다른 상태를 포함할 수 있습니다.

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() 내부에서 수행할 수 있는 모든 작업이 지원됩니다.

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

IMGUI에서 UI 툴킷으로 전환

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

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

추가 리소스

• UI 툴킷 시작하기
• Unity 스타일시트(USS)
• 예제
• IMGUI 이벤트