UI Toolkit

왜 UI Toolkit을 공부하게 되었는가?

저는 최근에 MVVM 패턴을 공부하면서 "데이터 바인딩"이라는 개념을 접하게 되었습니다. View와 ViewModel 간의 상태 동기화를 효과적으로 구현하기 위해서는 UI 요소가 데이터의 변화를 자동으로 감지하고 반영하는 구조가 필요합니다. 기존 UGUI에서는 이를 구현하기가 쉽지 않습니다. 그래서 UI Toolkit을 공부하게 되었습니다.

 

UI Toolkit이란?

UI Toolkit은 Unity에서 제공하는 차세대 UI 시스템으로, 기존의 UGUI나 IMGUI보다 더 모듈화되고 스타일링이 자유로운 UI 제작을 가능하게 해주는 툴입니다. Unity 2021부터 정식으로 도입되었으며, 최근에는 에디터 확장뿐 아니라 런타임 UI 개발에도 적극적으로 사용되고 있습니다.

 

특징

✅ 웹 기술과 유사한 구조
UI Toolkit은 UXML(HTML과 유사한 마크업 언어)과 USS(CSS와 유사한 스타일 시트 언어)를 사용합니다. 덕분에 웹 개발 경험이 있다면 비교적 쉽게 적응할 수 있습니다.

 

 

✅ MVVM 패턴에 적합한 구조
UI 요소와 데이터를 분리하여 관리할 수 있어, 데이터 바인딩이나 관찰자 패턴 기반의 구조를 쉽게 구현할 수 있습니다. 이 때문에 MVVM(Model-View-ViewModel) 같은 아키텍처 패턴을 적용하기 용이합니다.

 

✅ 성능 및 유지보수 향상
UI 계층이 명확히 분리되고 XML 기반으로 선언되기 때문에 UI의 유지보수가 쉬워지며, 런타임 시에도 효율적인 렌더링이 가능합니다.

 

✅  에디터 및 런타임 지원
에디터 확장은 물론 게임 런타임에서도 사용 가능하므로, 하나의 기술로 양쪽을 모두 커버할 수 있습니다.

 

생성 방법

1. 먼저 Asset 폴더에 우클릭하고 Create > UIToolkit > UIDocument를 햇서 UXML 파일을 만들어 줍니다.

 

 

2. 그 다음에 하라키창에 빈 게임오브젝트를 만들고 'UI Document' 컴포넌트를 추가 합니다. 그리고 방금 만든 UXML 파일을 드래그 앤 드롭 해줍니다.

 

3. 그리고 방금 만든 HXML 파일을 더블 클릭하면 UI Builder 창이 나옵니다. 여기서 이제 UGUI 처럼 UI를 만들면 됩니다.

 

정리

UI Toolkit에 대한 간단한 소개와 생성 방법 위주로 정리해보았습니다. 아직은 기본적인 사용법만 익힌 상태라 깊이 있는 내용은 정리하지 못했지만, 앞으로 더 익숙해지면 실습 예제로 정리해볼 예정입니다. 다음 글에서는 간단한 인벤토리 UI를 만드는 과정을 튜토리얼 형식으로 소개해보려 합니다. 감사합니다.