Unity UI 빌더 가이드
이 문서는 Unity의 UI 빌더를 사용하여 사용자 인터페이스(UI)를 제작하는 방법에 대한 설명입니다. UI 빌더는 유연하고 강력한 UI 디자인 도구로, 다양한 UI 요소를 간편하게 관리하고 편집할 수 있는 기능을 제공합니다.
UI 빌더 시작하기
UI 빌더 창 열기
UI 빌더를 열려면 Unity 에디터의 메뉴에서 Window > UI Toolkit > UI Builder를 선택합니다. 이미 열려 있는 UXML 문서가 있으면 자동으로 로드됩니다. 프로젝트 창에서 원하는 UXML 파일을 더블 클릭하여 열 수도 있습니다.
UI 문서 열기 및 저장
UI 문서를 열려면 UI 빌더의 Viewport 창 툴바 내의 File 메뉴에서 Open…을 선택합니다. 또는 Library 창의 Project 탭에서 문서 오른쪽 클릭 후 Open in UI Builder를 선택할 수 있습니다. UI 문서를 저장하려면 File > Save 메뉴를 사용하거나 Ctrl/CMD + S를 누릅니다.
StyleSheets 관리
StyleSheets는 UI 요소에 스타일을 적용하는 데 사용됩니다. UI 빌더에서 StyleSheets를 추가, 제거 및 순서를 관리할 수 있습니다. 각 StyleSheet에서 USS 선택자를 생성하고 수정할 수 있습니다.
계층 구조 창
계층 구조 창은 현재 문서의 요소 계층 구조를 트리 뷰 형식으로 표시합니다. 이 창을 통해 UI 요소를 선택하고 편집할 수 있습니다. 요소를 더블 클릭하여 빠르게 이름을 바꿀 수 있으며, 여러 표시 옵션을 선택할 수 있습니다.
라이브러리 창
Library 창은 사용 가능한 UI 요소를 보여줍니다. 기본적인 Unity UI 요소를 포함한 Standard 탭과, 커스텀 UXML 자산을 포함한 Project 탭이 있습니다. 요소를 선택하고 아래로 드래그하거나 더블 클릭하여 UI 문서에 추가할 수 있습니다.
Viewport 창
Viewport 창은 UI 문서의 미리보기를 제공합니다. 여기에서 UI 문서를 편집하고, 미리 보고, 상호작용할 수 있습니다. 확대/축소 및 탐색 기능이 포함되어 있습니다.
Canvas 설정
Canvas는 UI를 구현하는 주 공간으로, 캔버스 크기 및 배경을 조정할 수 있습니다. 배경색, 텍스처, 또는 카메라 라이브 뷰로 설정할 수 있습니다.
인스펙터 창
인스펙터는 선택한 UI 요소의 속성을 보여줍니다. 요소별 속성, 스타일 클래스, 인라인 스타일 등을 확인하고 수정할 수 있는 기능을 제공합니다.
에디터 확장 프로그램 저작
기본적으로 새 UI 문서(UXML)에는 '런타임 전용 UI' 설정이 저장됩니다. UI 빌더 외부에서 생성한 UI 문서는 열 때까지 이러한 속성이 없습니다. 수동으로 editor-extension-mode 속성을 추가할 수 있습니다.
활용 예제
버튼 생성 예제
UI 빌더를 사용하여 버튼을 생성하는 방법은 다음과 같습니다.
- Library 창에서 버튼 요소 선택.
- 선택한 버튼을 계층 구조 창으로 드래그하여 추가.
- 인스펙터 창에서 버튼의 텍스트 및 스타일 수정.
텍스트 필드 추가 예제
텍스트 필드를 추가하고 설정하는 방법:
- Library 창에서 TextField 요소 선택.
- 선택한 텍스트 필드를 Viewport의 Canvas에 추가.
- 인스펙터 창에서 PlaceHolder 및 Style을 설정.
결론
이 가이드는 Unity UI 빌더의 기본적인 사용 방법과 UI 문서를 효과적으로 관리하는 방법을 설명합니다. 추가적으로 다양한 UI 요소를 활용하여 더욱 풍부한 사용자 경험을 제공하는 UI를 제작할 수 있습니다.
- 참고 자료: Unity UI 빌더의 공식 문서를 통해 더 많은 기능과 예제를 찾아볼 수 있습니다.