[UI Toolkit] 2. UI Builder가 아닌 UXML로 만들기

참고 사이트

https://docs.unity3d.com/Manual/UIE-HowTo-CreateRuntimeUI.html

---

 

이번에는 UI Builder를 통하지 않고 UXML 파일에서 코딩을 통해서 이전에 만들었던 레이아웃 대로 만드는 법을 알아보자. 

이전에 1편에서 UI Toolkit의 구조는 웹 프로그래밍에서 영감을 받았다는 말을 전했었는데, 실제로 HTML과 CSS와 같은(UXML과 USS) 구조를 따른 다는 것을 알 수 있었다.

 

다만, UI Builder를 사용했기 때문에 UXML의 코드를 보진 못했을 텐데, IDE에서 UXML을 열어보자.

 

UI Builder를 통해서 레이아웃을 배치한 것들이 위와 비슷하게 보일 것이다. (이번에는 Visual Studio를 사용하고 있어서 모든 코드가 동일한 컬러로 보인다. ) ( UI Toolkit을 사용한다면 되도록 Rider를 추천한다. )

 

이번 참고 사이트에서는 1편에 나온 레이아웃을 사용하고는 있으나, UI Element마다 지정된 name이 1편에 나온 것과 다르기 때문에 참고 사이트에서 코드를 가져와 수정하는 것을 추천한다.

 

위 이미지는 참고 사이트에 있는 코드인데, HTML의 구조를 띄고 있다. 구조의 형태까지 설명하기에는 말재간이 부족해서 해당 구조가 궁금하다면 HTML를 조금이나마 공부하는 것을 추천한다.

 

다시 위 코드를 복사해서 UXML에 붙여넣기 하고 UI Builder를 통해서 파일을 열어보자.

이전에 UI Builder에서 배치한 것과 같이 수정되어있는 레이아웃을 확인할 수 있다. 다음 편에는 CSS에서 UXML 코드를 불러와 사용하는 방법을 같이 살펴보자.