Pink Transparent Star

Unity/엔진 에셋

[ Unity ] UI Toolkit 사용해보기

채유나 2023. 9. 4. 01:06
728x90
📢 최근 회사의 프로젝트를 진행하면서 UI Toolkit를 사용하게 되어 공부하게 되었습니다.

 

 

 

UI 툴킷 - Unity 매뉴얼

UI 툴킷은 사용자 인터페이스(UI) 개발을 위한 기능, 리소스 및 툴 컬렉션입니다. UI 툴킷을 사용하면 Unity 에디터용 커스텀 UI 및 확장 기능, 런타임 디버깅 툴, 그리고 게임 및 애플리케이션용 런

docs.unity3d.com

 

UI 시스템 비교

종류 설명
IMGUI ( Immediate Mode GUI) 코드 기반
사용자 인터페이스를 빠르고 쉽게 만들수 있는 라이브러리, 유니티 초기 UI 시스템
NGUI ( Next - Gen UI ) 상용 UI 시스템, IMGUI가 불편하여 사용한 플로그인
아틀라스를 사용하여 드로우콜을 줄임
UGUI ( Unity GUI ) 게임 오브젝트
직관적이기 때문에 확인이 쉽고 유니티에 최적화
현재 많이 사용하고 있는 UI 시스템
UI Toolkit ( UI Builder )  참고
새롭게 출시된 UI 시스템, 런타임 UI 개발, 에디터 UI에도 사용이 가능

 

Unity의 UI 시스템 비교

Web과 Unity의 유사점

Web Unity 기능 설명
Css Uss 스타일
HTML UXML 구조, 레이아웃
JS C# 기능, 상호작용

Web의 이름에서 Unity의 U만 가져다 붙혀 나타냈다.

직접 UI Toolkit을 사용해보니 웹을 공부한 적이 있다면 쉽게 접근할 수 있다. 특히,  AdobeDreamweaver과 유사하다.

 

UI Toolkit 시작하기

🔹 UI Document 생성

   :  Project 우클릭 ➾ Create ➾ UI Toolkit ➾ UI Document

해당 uxml 파일 생성이 된다. 

 

uxml 파일을 더블 클릭하면  UI Builder 윈도우가 열리게 된다.

 

🔹 UI Builder 창 열기 

 UiBuilder로 로드된 UXML 문서가 열리게 되며 1번 ~ 6번까지의 인터페이스로 되어있으며 이를 이용하여 UI를 배치하면 된다.

UI Builder 인터페이스

🔹 PanelSetting 생성하기

   :  Project 우클릭 ➾ Create ➾ UI Toolkit ➾ Panel Settings Asset 클릭

  UI 순서, 텍스트 설정 등 세팅을 위한 에셋이다.

Panel Settings 인터페이스

🔹 Game View 창에 띄우기

  :  배치한 UI를 보여주기 위해 빈 게임오브젝트를 만든 후 UI Document의 컴포넌트를 추가한다.

    생성한 Panel과 UXML를 연결해준다.

Ui Builder에서 작업한 Game View에 UI가 나타나게 된다. 

 

 

이후의 글은 UI 배치, Style, Library에서 사용해 본 Button, Label 등 정리 할 예정이다.

 

 

📃 참고 자료

Unity Korea : 유니티 Tips 

Hj 유튜버 : UI Toolkit의 기초

728x90