UI 빌더 인터페이스 개요

UI 빌더 창을 열려면:

• Window > UI Toolkit > UI Builder를 선택합니다. 그러면 이전에 UIBuilder로 로드한 UXML 문서가 열립니다.
• 프로젝트 창에서 UXML 파일을 더블 클릭합니다.

다음 이미지는__ UI__(사용자 인터페이스) 사용자가 애플리케이션과 상호 작용하도록 해 줍니다. Unity는 현재 3개의 UI 시스템을 지원합니다. 자세한 정보
See in Glossary 빌더 창 예시를 보여줍니다.

UI 문서 열기 및 저장(UXML)

UI 빌더에서 UI 문서를 열려면:

• UI 빌더의 Viewport 창 툴바 내 File 메뉴를 열고 Open…을 선택합니다.
• Library 창의 Project 탭에서 문서를 마우스 오른쪽 버튼으로 클릭하고 Open in UI Builder를 선택합니다.

기본 텍스트 에디터 또는 IDE에서 UI 문서(UXML)를 열려면:

• inlineStyle 파일 아이콘을 사용합니다.
  1. 프로젝트 창 > Assets로 이동합니다.
  2. UXML 파일 아이콘 가운데에 있는 화살표를 클릭합니다.
  3. inlineStyle 파일 아이콘을 더블 클릭합니다.
• Open with IDE 버튼을 누릅니다.
  1. UI 빌더에서 Library > Project 탭으로 이동합니다.
  2. Assets 폴더를 엽니다.
  3. UI 문서(UXML)를 오른쪽 클릭하고 Open with IDE를 선택합니다.
• UXML Preview 창을 사용합니다.
  1. UI 빌더에서 UI 문서(UXML)가 현재 로드되어 있는지 확인합니다.
  2. UXML Preview 창으로 이동합니다.
  3. UXML Preview 창의 오른쪽 상단 모서리에 있는 아이콘을 선택합니다.

  

현재 열려 있는 활성 UI 문서(UXML) 에셋 이름이 계층 창의 루트 트리 항목으로 표시되며, Viewport 내 Canvas 헤더와 Viewport 아래의 UXML Preview 창에도 표시됩니다. 이름 옆의 별표(*)는 저장되지 않은 변경 사항을 나타냅니다.

UI 문서(UXML)를 저장하려면:

• UI 빌더의 Viewport 창 툴바에 있는 File > Save 메뉴를 사용합니다.
• Ctrl/CMD + S를 누릅니다. 그러면 에디터에 씬을 저장하라는 메시지 또한 표시됩니다.

참고: Unity 프로젝트 전체 저장은 UI 빌더에서 열린 활성 UI 문서(UXML)를 저장하지 않습니다.

StyleSheets

StyleSheets 및 UI 툴킷 내 USS 선택자는 여러 요소와 UI 문서(UXML)에 걸쳐 스타일을 공유하고 적용하는 데 사용됩니다.

StyleSheets 창 에서는 다음을 수행할 수 있습니다.

• 현재 UI 문서(UXML)에서 StyleSheets(USS)를 추가하거나, 순서를 재지정하거나 제거할 수 있습니다.
• StyleSheets 내에서 USS 선택자를 만들거나, 순서를 재지정하거나, 복사하거나 제거하여 여러 요소에 걸쳐 스타일을 공유할 수 있습니다.

계층 구조

계층 창 에는 현재 문서의 요소 계층 구조를 나타내는 트리 뷰가 있습니다. 이 창은 UI 문서(UXML)를 텍스트로 나타낸 UXML에서 볼 수 있는 계층 구조의 상위 세트입니다. 계층 창에는 UXML에서 직접 생성된 요소 외에도 UI 런타임에만 존재하는 동적으로 생성된 요소도 포함되어 있습니다. 예를 들어 계층 창에는 템플릿 인스턴스의 일부인 요소(현재 문서 내에서 인스턴스화된 다른 문서)가 포함되는 반면, UXML에는 하나의 <Instance> 태그만 포함됩니다.

계층 창에서는 다음을 수행할 수 있습니다.

• 점검하거나 편집할 요소를 선택합니다.
• 요소를 자르거나, 복사하거나, 삭제하거나 순서를 재지정합니다.
• 인스턴스화된 템플릿 문서를 인플레이스(컨텍스트 내) 편집용 하위 문서로 엽니다.
• 여러 요소의 스타일 클래스 목록, 이름 속성 및 로컬에서 첨부된 StyleSheet를 한 번에 봅니다.

요소는 name 속성에 따라 트리에 표시됩니다. 요소의 name 속성이 설정되지 않았다면 C# 유형에 따라 표시됩니다. 각 요소를 더블 클릭하면 빠르게 이름을 바꿀 수 있습니다.

계층 창 헤더의 오른쪽 상단에서 ⋮ 아이콘을 클릭하여 디스플레이 옵션 메뉴에 액세스합니다.

• Hierarchy가 이름 유무와 관계없이 각 요소의 C# 유형을 표시하도록 강제하려면 Type을 선택합니다.
• 각 요소의 스타일 클래스 리스트를 Hierarchy 입력 항목 옆에 표시하려면 Class List를 선택합니다.
• 로컬에서 첨부된 StyleSheet를 해당 요소 옆에 표시하려면 Attached StyleSheets를 선택합니다.

라이브러리

Library 창 은 Unity 에디터의 프로젝트 창과 유사하며 사용 가능한 UI 요소들을 나열합니다.

• Standard 탭에는 Unity가 제공하는 표준 빌트인 요소가 나열됩니다. 해당 요소들에는 지원되는 모든 Unity 에디터와 런타임 테마에 대해 작동하는 표준 스타일링이 포함됩니다.

Library 창의 오른쪽 상단에 있는 ⋮ 아이콘을 사용하고 Tree View를 선택하여 이 뷰 모드를 타일 뷰와 트리 뷰 간에 변경할 수 있습니다.

• Project 탭에는 프로젝트의 커스텀 .uxml 에셋이 나열됩니다. 또한 VisualElement에서 상속하는 모든 커스텀 C# 요소가 표시됩니다. Library의 Project 탭에서 요소를 미리 확인하려는 경우, 해당 요소 위로 마우스 커서를 가져가면 Library 창 오른쪽에 미리 보기가 나타납니다.

요소를 인스턴스화하려면 다음 중 하나를 수행합니다.

• 계층 창으로 요소를 드래그합니다.
• 요소를 Viewport의 Canvas로 드래그합니다.
• 요소를 더블 클릭합니다. 그러면 요소가 현재 선택한 요소의 형제로 추가됩니다. 선택한 항목이 없으면 요소가 UI 문서(UXML)의 루트에 추가됩니다.

요소는 계층 창 또는 Canvas에서 선택할 수 있습니다. Hierarchy에서 Ctrl(macOS:Cmd) 키를 길게 누르면 추가 요소를 선택할 수 있습니다.

뷰포트

뷰포트 창 은 크기 조절이 가능한 플로팅 편집 모드 Canvas의 UI 문서(UXML)의 결과를 표시합니다. 툴바에는 UI 빌더별 커맨드, Viewport 설정, Theme 선택자 및 Preview 버튼 메뉴가 포함되어 있습니다. 뷰포트 오른쪽 상단 ⋮ 메뉴 아래에는 Unity 프로젝트 설정의 UI 빌더 설정 단축키를 포함하여 더 많은 UI 빌더 설정이 있습니다.

뷰포트 내비게이션

이동 및 확대/축소 동작을 통해 뷰포트를 탐색할 수 있습니다. UI 빌더는 각 UI 문서(UXML)의 현재 이동 및 확대/축소 상태를 저장하며, UI 빌더 창이 다시 로드되거나, 도메인이 다시 로드되거나 같은 UI 문서(UXML)을 닫고 다시 열면 이 이동 및 확대/축소 상태를 복원합니다.

새 문서를 만들고 열면 UI 빌더가 이동 및 확대/축소 상태를 재설정합니다.

이동하려면 다음 중 하나를 수행하십시오.

• 마우스 휠을 클릭하여 뷰포트에서 드래그합니다.
• Ctrl/Cmd + Alt/Option을 길게 눌러 뷰포트에서 드래그합니다.

확대/축소하려면 뷰포트에서 마우스 포인터의 위치를 지정하고 다음 중 하나를 수행하십시오.

• 뷰포트에서 마우스 포인터의 위치를 지정하고 마우스 휠을 회전합니다.
• Alt/Option을 누른 상태에서 마우스 오른쪽 버튼으로 드래그합니다. 오른쪽으로 드래그하면 확대, 왼쪽으로 드래그하면 축소됩니다.

캔버스 설정

캔버스는 작성 중인 UI 문서(UXML)를 편집하고, 미리 보고, 상호작용할 수 있는 공간입니다. 캔버스가 보이지 않는다면 뷰포트 툴바에서 Fit Viewport 버튼을 선택하면 됩니다. 캔버스의 헤더에는 현재 로드된 UI 문서(UXML)의 이름이 표시됩니다. 이름 옆의 별표(*)는 저장되지 않은 변경 사항이 있음을 나타냅니다.

캔버스 크기를 조절하는 방법은 다음과 같습니다.

• 뷰포트 안에서 모서리나 코너를 드래그합니다.
• 캔버스 헤더를 선택하면 캔버스의 너비와 높이를 입력할 수 있는 캔버스의 인스펙터 창이 표시됩니다.

캔버스 크기를 Unity 게임 창의 크기에 맞추려면 Match Game View 체크박스를 선택합니다.

UI를 더욱 편리하게 편집할 수 있도록 캔버스 배경을 변경할 수 있습니다. 배경을 변경하려면 인스펙터 창에서 Canvas를 선택합니다. 단색, 특정 텍스처(UI 디자이너의 목업) 또는 열린 Unity 씬에서 카메라의 라이브 뷰로 설정할 수 있습니다:

크기 등과 같이 Canvas와 관련된 모든 설정은 UI 문서(UXML)의 일부로 저장되지 않고 다음에 동일한 UI 문서(UXML)를 열 때를 대비하여 별도의 설정 파일에 저장됩니다.

밝은 테마 또는 어두운 테마를 적용한 미리 보기

기본적으로 UI 빌더는 Unity Default Runtime 테마를 사용합니다. 밝은 에디터 테마 또는 어두운 에디터 테마에서 UI를 미리볼 수 있습니다. 이를 위해서는 Editor Extension Authoring이 활성화되어 있는지 확인한 다음, 뷰포트 툴바의 테마 드롭다운 목록에서 Dark Editor Theme 또는 Light Editor Theme를 선택합니다.

Active Editor Theme를 선택하면 Unity 에디터에 설정된 밝은 테마 또는 어두운 테마가 적용됩니다.

커스텀 테마를 만든 경우, 목록에서 해당 테마를 선택하여 뷰포트에서 미리 볼 수 있습니다.

코드 미리 보기

UI를 빌드하면 UI 빌더가 기반 UXML 및 USS 텍스트를 자동으로 생성하여 UXML Preview 및 USS Preview 창 에 표시합니다.

인스펙터

UI 빌더 인스펙터 창 은 Unity 인스펙터 창과 유사합니다. 인스펙터에 표시되는 내용은 UI 빌더 내에서 선택한 오브젝트에 따라 조금씩 달라집니다.

• 요소는 요소별(UXML) 속성을 위한 속성 섹션, 스타일 클래스를 할당하고 StyleSheets에서 적용된 스타일을 볼 수 있는 StyleSheets 섹션, 인라인 요소별 스타일 프로퍼티 편집이 가능한 Inlined Styles 섹션을 표시합니다.
• USS 선택자는 섹터 쿼리 문자열을 변경할 수 있는 Style Selector 섹션과 스타일 프로퍼티 수정이 가능한 Styles 섹션을 표시합니다.
• 캔버스는 캔버스 크기를 변경할 수 있는 Canvas Size 섹션, 편집 모드의 캔버스 배경을 변경할 수 있는 Canvas Background 섹션 및 문서별 편집 모드 설정을 위한 Document Settings 섹션을 표시합니다.

UI 문서(UXML)에 대해 에디터 확장 프로그램 저작 활성화

기본적으로 UI 빌더에서 생성된 새 UI 문서(UXML)에는 런타임 전용 UI로 표시하는 설정이 UXML 내에 저장되어 있습니다.

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">

즉, 기본적으로 Library 창의 Standard 탭에는 런타임에 가장 잘 작동하는 요소만 포함되어 있습니다.

커스텀 에디터 창이나 커스텀 인스펙터와 같은 Unity 에디터용 UI를 만들려면 Library 창의 Standard 탭에서 Editor Extension Authoring을 활성화하여 추가 Editor-Only 컨트롤을 표시할 수 있습니다.

에디터 확장 프로그램 저작을 활성화하려면:

• Canvas 헤더를 선택하면 캔버스의 인스펙터 창이 표시되며, 여기서 Document Settings > Editor Extension Authoring 옵션을 선택합니다.

• Library 창의 메뉴에서 Editor Extension Authoring을 선택합니다.

참고: 다른 캔버스 설정과 달리 이 설정은 UI 문서(UXML)의 루트 요소의 editor-extension-mode 속성에 저장됩니다.

다음 과정을 따라 새 UI 문서(UXML)에서 Editor Extension Authoring을 기본적으로 사용하도록 설정합니다.

1. Edit > Project Settings > UI Builder로 이동합니다.
2. Enable Editor Extension Authoring by Default를 선택합니다.

UI 빌더 외부(예: 텍스트 에디터 또는 IDE)에서 생성한 UI 문서(UXML)는 UI 빌더에서 열 때까지 에디터 확장 프로그램 저작 속성을 갖지 않습니다. 그러나 언제든지 텍스트 에디터나 IDE에서 UI 문서(UXML)에 editor-extension-mode 속성을 수동으로 추가할 수 있습니다. 외부에서 생성한 UI 문서(UXML)를 UI 빌더에서 처음 열면 UI 빌더 프로젝트 설정에 지정된 기본값에 따라 에디터 확장 프로그램 저작 속성이 설정됩니다.

추가 리소스

• UI 빌더로 시작하기