UIToolkit 튜토리얼

오늘은 Unity 공식 문서의 UI Toolkit 튜토리얼을 따라 하며, 과정을 정리해보았습니다.
현재 저는 MVVM 패턴을 적용한 UI 개발을 목표로 하고 있는데, 단순히 유튜브 영상만 따라 하기에는 깊이가 부족하다고 느꼈습니다.

 

그래서 앞으로는 공식 문서를 참고하면서, UI 시스템을 하나하나 직접 정리하고 공부해보려 합니다.

이 과정을 통해 기초부터 차근차근 쌓아가고, 실전에도 활용할 수 있는 탄탄한 기반을 마련할 계획입니다.

 

---

커스텀 에디터창 생성

---

Unity 공식 문서에서는 UI Toolkit을 처음 배울 때, 커스텀 에디터 창을 만드는 방법부터 설명합니다.

Unity에서는 아래와 같은 방법으로 손쉽게 UI Toolkit을 연동한 C# 스크립트와 UXML 파일을 생성할 수 있습니다:

프로젝트 창에서 우클릭 → Create → UI Toolkit → Editor Window

이렇게 생성하면, UI Toolkit과 연결된 기본 스크립트가 자동으로 만들어져 바로 시작할 수 있습니다.

 

 

 

 

만들어진 커스텀 에디터는 탭에서 Window > UIToolkt에서 확인 할 수 있습니다.

 

---

창에 UI 컨트롤 추가

---

 

유니티에서 창에 UI 컨트롤을 추가하는 방법으로 3가지를 알려줍니다.

 

• UI 빌더를 사용하여 시각적으로 UI 컨트롤 추가
• UXML을 사용하여 UI 컨트롤 추가
• C# 스크립트를 사용하여UI 컨트롤 추가

 

UI 빌더를 사용하여 시각적으로 UI 컨트롤 추가

 

이 방식은, 앞에서 만든 UXML 파일을 더블 클릭해 UI Builder 창을 열고, 드래그 앤 드롭으로 UI 컨트롤을 추가하는 방식입니다.

코드를 작성하지 않고 가장 간단하게 UI를 만들 수 있는 방법이라 생각합니다.

처음에는 메뉴가 많아서 다소 복잡해 보이지만, 몇 번 사용하다 보면 기존의 UGUI와 비슷한 점이 많다는 걸 느낄 수 있습니다.

 

UI Builder를 활용한 UI 제작 과정은 이미 다른 블로그에도 잘 정리되어 있어서, 저는 공식 문서를 따라 만든 결과물 사진만 아래에 첨부했습니다.

 

 

 

UXML을 사용하여 UI 컨트롤 추가

UXML을 텍스트로 작성해서 직접 추가를 할 수 있습니다.

 

먼저 프로젝트창에 우클릭하고 Create > UI Toolkit > UI Document 순으로 클릭해서 새로운 UXML 파일을 만들어 줍니다.

 

 

 

그리고 만들어진 UXML 파일에 화살표를 눌러서 하위에 만들어진 inLineStyle을 클릭해서 UXML 코드 창을 열어줍니다.

 

아래와 같이 코드를 작성해줍니다.

 

그리고 처음에 만들어둔 커스텀 에디터 C# 스크립트에 필드와 필드에 들어간 UXML을 생성해주는 코드를 작성해줍니다.

생성해주는 코드는 CreateGUI 메서드 안에 작성해주어야 합니다.

 

 

 

마지막으로 인스팩터창에 방금 만든 UXML을 파일을 필드에 드래그 앤 드롭 해주면, 커스텀 에디터 창에 UI 컨트롤이 들어간 걸 확인 할 수 있습니다.

 

 

C# 스크립트를 사용하여 스크립트 추가

C# 스크립트에서 코드를 작성하여 UI 컨트롤을 추가 할 수 있습니다. 다음과 같이 코드를 작성해주면 됩니다.

 

아래와 같이 라벨과 버튼, 그리고 토글 버튼을 코드 상에서 객체로 만들고 이를 rootVisualElement에 Add를 시켜주면 UI 컨트롤을 추가 할 수 있습니다.

 

 

다음과 같이 간단한 버튼 이벤트 동작도 문서를 참고해서 구현해보았습니다.

 

SetupButtonHandler : UI 루트에서 모든 버튼 요소를 가져옵니다. 그리고 가져온 버튼 각각에 RegisterHandler 함수를 등록해줍니다.

 

 

버튼 클릭 이벤트를 등록하는 함수 RegisterHandler를 아래와 같이 작성해줍니다. 버튼이 클릭되면 PrintClickMessage 함수가 호출됩니다.

 

UGUI에서 Addlistener와 비슷한 RegisterCallback을 이용해서 버튼에 이벤트를 등록 할 수 있습니다.

 

 

마지막으로 실제로 버튼을 클릭하면 실행되는 함수를 작성해주면 됩니다.

 

---

정리

---

 

처음에는 UI Toolkit을 UI Builder에서만 작업하는 방법만 유튜브 영상으로 따라 하다 보니, 정작 코드와 어떻게 연결해야 하는지 잘 감이 오지 않았습니다.

 

하지만 이번에 공식 문서를 참고해, UI 컨트롤을 코드에 연결하는 세 가지 방법을 직접 따라 해보면서 흐름이 훨씬 잘 이해됐고, 머릿속에도 오래 남았습니다.

 

앞으로도 이렇게 공식 문서를 천천히 따라가며, UI Toolkit을 좀 더 깊이 있게 익혀보려 합니다.

간단한 따라 하기에서 끝내지 않고, 직접 정리하고 실습하면서 확실하게 내 것으로 만들 계획입니다.