#01 Unity - UI툴킷이란 무엇일까

candy·2024년 6월 24일

UI Unity toolkit 유니티

하고싶은 것 만 하는 나만의 유니티 공부. 지적 환영 (❁´◡`❁)

목록 보기

1/6

곧 이전에 쓰던 Canva UI가 사라지고 새로 UI툴킷이 생긴다고 한다. 그렇다면 UI툴킷이 뭘까?

UI 툴킷은 웹 테크놀로지 (HTML, CSS, JS)에서 영감을 받아 만든 것이다. 그래서 실제로 사용할 때에도 HTML, CSS, JS와 비슷한 느낌을 받을 수 있다.

그러면 UI툴킷은 어떻게 써야할까

솔직히 잘 모르겠어서 영상을 찾아봤다.

https://www.youtube.com/watch?v=eeDjeziVEbA&list=PLgCVPIIZ3xL-sxSNOkqgfjYQnt7oqGG1E&index=5

이 영상이 도움이 많이 되었다. 내용또한 이 영상을 기반으로 하였다.

영상을 보면 UI툴킷을 만들때에는 먼저 UI DOCUMENT를 만든다.

이 DOCUMENT(화면에 보이는 </>표기가 있는 스크립트 파일)가(NewUXMLTemplate)이다. 웹 테크놀로지로 치면HTML인 셈이다. 그리고 이 DOCUMENT를 사용하기 위해서는 새로운 게임오브젝트를 만들어야한다.(빈 오브젝트) 그리고 그 오브젝트에 UI DOCUMENT라는 스크립트를 넣어주면 된다!

방장은 UI라는 이름으로 오브젝트를 만들어 사용했다. 위 사진에 마우스 커서에 올라가있는 스크립트를 클릭해 넣어주면된다(UI DOCUMENT스크립트는 그냥 기본적으로 있음.)

컴포넌트를 적용하면 인스펙터창에 3가지를 설정할 수 있게 나오는데. Panel Setting과 Sort Order은 뒤에서 설명할 것이니 미뤄두도록하고 먼저 Source Asset에 아까 만든 UI DOCUMENT(UXML)을 넣어준다.

이렇게 되면 내가 DOCUMENT에서 만든 UI가 들어가게된다. 하지만 아직 Panel Setting을 해주지 않았기 때문에 적용은 됐지만 화면에 송출이 되진 않을 것이다.

방장은 지금 DOCUMENT안에 화면을 절반 채우는 검은색 박스를 만들었다. 하지만 Panel Settings에서 panel을 받아주지 않았으므로 화면에 보이지 않는다. 그렇다면 Panel Settings는 뭘까? Panel Settings는 말 그대로 Panel setting이다. 이 panel settings는 우리가 원래 유니티에서 쓰던 UI방식으로 따지자면 Canvas같은 느낌으로 우리가 Document로 세팅한 디자인을 실제 게임 화면에 송출해주는 것이다. panel setting을 만드는 것 또한 간단하다. 영상을 본 사람이라면 알 것이다. 아까 DOCUMENT를 만들때에 있었다는 것을.

방장은 설명해주기 전에 이미 만들어 놨다.(DOCUMENT파일 오른쪽에 있는 UI프로그램이 Panel Settings다.) 이제 만든 UI DOCUMENT를 아까 만든 UI오브젝트에 적용시켜주자. 적용방법은 위에 설명되어 있지만, 올리기 귀찮은 사람들을 위해 다시 사진으로 첨부하겠다.