[UI Toolkit] 1. UI Builder를 사용한 UI 배치

참고 사이트

https://docs.unity3d.com/Manual/UIB-getting-started.html

---

UI Toolkit은 Unity에서 사용되었던 IMGUI -> UGUI의 계보를 잇는 새로운 UI 시스템이다. 이전부터 존재는 알고 있었지만, 당시에는 자잘한 이슈들이 많아서 새롭게 배울 필요에 대해서 많이 느끼지 못했었다.

 

최근에 CustomEditor를 만들어야 할 일이 있었는데 디자인을 보다 자유롭게 만들 수 있는 UI Toolkit을 고려했으나, 기능 구현이 우선이므로, EditorGUILayout을 통해서 개발을 하고, UI Toolkit으로 변환하는 작업을 진행하고자 학습을 시작한다.

---

이번 학습 내용은 UI Builder를 사용하여 UI 배치를 진행하고 빌드하여 실행했을 때, 상호 작용을 하는 방법에 대해서 진행한다. 최종적인 형태의 모습은 아래와 같다. * 해당 게시글은 정보 공유 목적이 아닌, 기록용이므로 같은 내용을 학습하고자 한다면, 참고 사이트로 이동 부탁드립니다.

UI Toolkit은 기존 UGUI 처럼 GameObject의 구조를 띄고 있는 것이 아니라 USS와 UXML, 2개로 이루어져있다. 마치 웹 프로그래밍에서 HTML, CSS의 구조로 이루어져 있듯, 대부분의 경우가 USS와 UXML을 동시에 사용하게 된다. 웹 프로그래밍과 대응하는 것들을 정리해보면 아래와 같을 것이다.

 

UXML = HTML

USS = CSS

 

구조가 흡사한 이유는 실제로 웹 프로그래밍에서 영감을 받았기 때문인데, 실제로 해당 내용을 학습하면서 웹을 공부했던 경험들이 크게 도움이 된 것 같다. 만약에 UI Toolkit을 공부하고자 한다면, HTML + CSS를 먼저 간략하게 공부를 해보는 것도 도움이 되지 않을까 싶다.

 

결과에 나타난 UI를 만들기 위해서 유니티 Project 창에서 Create -> UI Toolkit -> UI Document를 클릭해서 UXML을 만들어준다. 이름은 MainView로 설정했다. 참고로 UI Toolkit의 사용 방법은 UI Builder를 통해 시각화 하여 작업하는 것과 IDE를 통해서 코드로 작업하는 2가지 방법이 있다.

 

UI Builder를 통해서 작업하게 된다면, 시각화가 되어있으므로 작업에 대한 이해가 적어도 손쉽게 사용할 수 있다. 하지만 창에서 Drag&Drop을 통해서 진행되므로, 시간이 조금 걸릴 수 있고 이외의 단점들이 존재한다. IDE를 통한 코드 작업은 반대로 이해도가 높게 필요하므로, 편한 방법을 통해서 사용하면 될 것 같다.

 

MainView를 더블클릭하면 UI Builder가 나타나는데 각자의 창이 하는 역할을 정리해보자. 

 

1. StyleSheets

웹 프로그래밍에서 CSS와 같은 역할을 하는 USS 파일을 확인할 수 있는 곳이다.파일 옆에 있는 Toggle을 클릭하면 해당 USS 파일에서 사용된 클래스와 ID를 확인할 수 있다.

 

2. Hierachy

웹 프로그래밍에서 HTML과 같은 역할을 하는 HTML 파일을 확인할 수 있다. 파일의 구조를 확인할 수 있고 들어가 있는 UI Object들을 확인할 수 있다.

 

3. Library

사용되는 UI Object들을 확인할 수 있다.

 

4. Viewport

구현하고 있는 UXML의 이미지를 미리 볼 수 있다.

 

5. Inspector

선택된 Object의 정보를 확인할 수 있고, Display, Position, Flex, Align, Size, ...등을 설정할 수 있다.

 

Library에서 VisualElement를 Hierachy로 끌어서 올리고 Inspector에서 정보를 변경하자.

 

Flex -> Grow : 1

- 여백을 빈틈없이 채운다.

 

Align -> Align Items : Center 

- 수직에서 중앙에 위치하게 만든다.

 

Align -> Justify Content : Center

- 수평에서 중앙에 위치하게 만든다.

 

Background -> Color : #732526

- 오브젝트의 컬러를 #732526으로 변경한다.

 

해당 설정을 정리해보면 VisualElement의 위치를 정중앙으로 만들고, 배경 컬러는 #732526으로 채우며 여백을 빈틈없이 채우겠다로 보면 된다. 웹 프로그래밍에서 VisualElement는 Div와 대응된다고 생각한다.

 

 

다시 VisualElement 하나를 Library에서 끌어서 기존에 생성했던 VisualElement 아래에 자식으로 둔다. 이후, Inspector에서 정보를 변경한다.

 

Flex -> Direction : Row

- 방향을 Row로 설정한다.

 

Size -> Height : 350px

- 해당 오브젝트의 Height를 고정값 350px로 설정한다.

 

이번에는 Library에서 ListView를 Hierarchy로 옮기고 Inspector에서 정보를 변경한다.

 

ListView -> Name : character-list

- 해당 오브젝트의 명칭을 설정한다.

 

Size -> Width : 230px

- 해당 오브젝트의 Width를 고정값 230px로 설정한다.

 

Margin & Padding -> Margin -> Right : 6px

- 해당 오브젝트의 Right에 6px만큼의 여유 공간을 둔다. 

 

Background -> Color : #6E3925

- 해당 오브젝트의 배경색을 #6E3925로 변경한다.

 

Border -> Color : #311A11

- 해당 오브젝트의 테두리 컬러를 #311A11로 변경한다.

 

Border -> Width : 4px

- 해당 오브젝트의 테두리 굵기를 4px로 변경한다.

 

Border -> Radius : 15px

- 해당 오브젝트의 테두리의 각을 15px만큼 둥글게 설정한다.

 

위 이미지 전에 있는 설정을 끝마쳤다면, 이미지에 있는 사진과 같이 오브젝트를 만들 수 있을 것이다. 

 

다시 VisualElement를 Hierachy로 옮겨주고 #character-list와 같은 층에 설정한다. 또, Inspector에서 정보를 변경한다.

 

Align -> Align Item : flex-end

- 수직을 끝 부분으로 정렬한다.

 

Align -> Justify Content : Space-Between

- 수평의 가장 끝과 가장 아래에 정렬시킨다.

 

Size -> Width : 276px

- Width 값을 고정값 276px로 수정한다.

 

Align -> Align Items : Center

Align -> Justify Content : Center

- 수직과 수평을 중앙으로 정렬한다 = 부모 오브젝트의 중앙에 정렬한다.

 

Margin & Padding -> Padding : 8px

- 배경색에 영향을 받는 여백을 상,하,좌,우에 8px씩 추가한다.

 

Background -> Color : #AA5939

- 해당 오브젝트의 배경색을 #AA5939로 변경한다.

 

Border -> Color : #311A11

- 해당 오브젝트의 테두리 색상을 #311A11로 변경한다.

 

Border -> Width : 4px

- 해당 오브젝트의 테두리 굵기를 4px로 변경한다.

 

Border -> Radius : 15px

- 해당 오브젝트의 테두리의 각을 15px만큼 둥글게 설정한다.

 

이어서 방금 설정한 VisualElement에 새로운 VisualElement를 추가하고 Inspector에서 정보를 변경한다.

 

Size -> Width and Height : 120px

- Width와 Height를 고정값 12px로 변경한다. 

 

Margin & Padding -> Padding : 4px

- 배경 색의 영향을 받는 여백을 상,하,좌,우에 4px씩 추가한다.

 

그리고 Label을 2개를 Hierachy에 옮겨서  Inspector에서 정보를 수정하자.

 

Text -> Font Style : B

- Bold로 변경한다.

 

Text -> Sie : 18px 

- Text의 Size를 18px로 설정한다.

 

모든 설정을 끝마치면 위와 같은 UI를 만들 수 있다. 생각보다 글이 길어져서 이만 마치고 다음 편에서는 UXML을 코드에서 사용하는 방법에 대해서 살펴보자.