Unity UIToolkit 연구 1 : 기본 사용법

 

#. 유니티의 UI 시스템 비교

유니티는 과거 IMGUI를 UI시스템을 사용했는데,

워낙 사용성이 좋지 않다 보니 대부분의 개발자들은 NGUI라는 상용에셋을 사용하곤 했다.

 

그러다 유니티가 UGUI라는 새로운 UI시스템을 출시하고

한창 과도기를 겪다가 현재는 대부분 UGUI를 사용하고 NGUI의 사용은 기존 프로젝트의 레거시로 사용하는 경우가 많다.

 

그런데, 유니티는 최근 UIToolkit이라는 새로운 UI 시스템을 출시했다. 

처음에는 UGUI를 잘 쓰고있는데 안정되지도 않은 신규기능을 굳이 알아볼 필요 없다고 생각했다.

 

하지만 설명중 다음 문구는 필요성을 확 느끼게 해 주었다.

 

UIToolkit는 게임 UI 뿐만 아니라 에디터 UI에도 사용할 수 있습니다.

 

기존의 에디터 코드를 조금씩 건드려보기는 했으나 워낙 사용법이 어려워 Odin 같은 상용에셋에 의존하는 편이었는데,

Odin은 심도 깊게 커스텀하기 힘든 경우가 있어서 아쉬운 부분이 있었다.

참고링크 : https://docs.unity3d.com/kr/current/Manual/UI-system-compare.html

 

 

 

#. 시작하기

초기 Preview 시절에는 패키지매니저에서 com.unity.ui git 주소를 연결해서 임포트 했었는데, 

특정 버전부터는 따로 임포트 하지 않아도 기본 패키지가 되어 바로 사용가능한 듯하다.

 

테스트 유니티 버전은 2022.1.24f1로 진행했다.

Window - UIToolkit - UI Builder

에디터 상단 메뉴를 통해 UI Builder로 편집 창열 열 수 있다.

만일 Window메뉴에 UI Toolkit가 보이지 않는다면 패키지가 없는 것이니 패키지를 임포트 할 것.

 

UI Builder의 기본 구성은 기본 유니티 에디터와 비슷한 구성을 가지고 있다.   

 

 

#. 기본 사용법

기본적으로는 유니티 에디터에서 오브젝트를 다루는 것과 동일하다. 

좌측 하단의 라이브러리에서 Vieport로 요소들을 끌어다 놓으면 유니티의 프리팹을 사용하는 것 같이 자동으로 배치되고,

하이어라키에서 선택된 오브젝트는 인스펙터에 속성정보가 표기되고 편집할 수 있다.

이렇게 에디터만 가지고도 모든 UI를 만들 수 있으며,

이는 웹 개발자에게 익숙한 형식의 UXML이라는 코드파일로 변환되어 저장된다.

+ 추가적으로 뷰포트를 움직이는건 MMB 드래그, 휠로 확대 축소 하면 된다.

 

 

#. UI Toolkit의 구성

UI Toolkit로 UI를 만든다면 uss / uxml / c#의 3가지 파일이 사용된다.

uss : 각 요소들이 어떻게 보이는지 스타일을 정의한다.

uxml : 배치를 정의한다.

c# : 데이터를 바인딩하고 로직을 제어한다.

 

 

#. 에디터 모드 켜기

기본적으로 UIToolkit은 에디터와 게임 UI 양쪽에 사용될 수 있게 설계되었지만,

일부 요소들은 Editor 전용으로 숨겨져 있어서 Editor용 UI를 만들고 싶다면 따로 옵션을 켜줘야 한다.  

 

하이어라키에서 최상단 uxml을 선택한 상태에서

인스펙터의 Editor Extension Authoring을 체크해 준다.

 

이제 좌측 하단에 Editor Only라고 표기된 요소들이 몇 가지 추가된 것을 확인할 수 있다.

 

 

 

 

 

https://blog.unity.com/kr/technology/ui-toolkit-at-runtime-get-the-breakdown

런타임 UI 제작을 위한 UI 툴킷 분석 | Unity Blog