요소를 사용한 작업

기본 워크플로

UI 빌더의 기본 워크플로는 Library 창의 요소를 Hierarchy로 드래그하여 요소를 만드는 것으로 시작됩니다. UI 툴킷은 요소의 계층 구조로 빌드되고 놓입니다. 계층 구조는 다른 요소 위에 위치하는 요소 및 요소가 UI에서 시각적으로 표시되는 순서를 지정합니다. 이는 너비와 높이가 부모 요소나 자식 요소에도 영향을 받는다는 점을 제외하고는 Unity 씬의 트랜스폼 계층 구조와 비슷합니다. 또 다른 차이점은 스타일 프로퍼티에 따라 일부 자식이 부모의 크기를 변경하며, 일부 부모는 자식의 크기에 영향을 미친다는 것입니다.

UI 툴킷의 모든 요소를 위한 기본 구성 블록이자 베이스 클래스는 VisualElement 클래스입니다. 이 클래스는 복잡한 레이아웃을 만들기 위한 컨테이너 요소로 기능합니다. 예를 들어 화면 오른쪽 하단에 Button을 고정하려면 다음 VisualElements 계층 구조가 필요합니다.

VisualElement #screen { flex-grow: 1; justify-content: flex-end; }
    VisualElement #bottom-container { flex-direction: row; justify-content: flex-end; }
        Button

요소 선택

Hierarchy와 Canvas 모두에서 요소를 클릭하여 선택할 수 있습니다. Hierarchy에서 요소를 추가로 선택하려면 Ctrl/Cmd 키를 길게 누르십시오. Canvas에서 요소 상단을 더블 클릭하면 요소의 부모 요소가 선택됩니다. 이 작업을 반복하면 요소 계층 구조 상단으로 이동하여 원본 요소까지 되돌릴 수 있습니다.

요소 생성

Library 창에서 요소를 생성하면 UI 빌더가 기본값을 보존하려고 시도합니다(일부 예외 있음). 기본적으로 요소는 이름이 지정되지 않으므로, Hierarchy에 타입 이름으로 표시됩니다. 요소에 이름을 지정하려면 Hierarchy에서 해당 항목을 더블 클릭하거나 요소를 선택하고 인스펙터에서 Name 속성을 찾으십시오. UI 툴킷에서는 고유한 이름 지정이 강제로 실행되지 않으므로, 이름은 UI 내 식별용으로만 사용됩니다. UI 빌더는 내부 식별 또는 기능 용도로 요소 이름을 사용하지 않습니다.

계층 구조를 빌드하려면 Hierarchy에서 하나 이상의 요소를 드래그하여 순서를 변경하거나 부모 간 이동하십시오.

Viewport Canvas에서 요소를 끌어서 내보내거나 끌어다 놓을 수도 있습니다. 여기에는 요소의 위치를 나타내는 노란색 선이 표시됩니다.

요소 조작

선택한 요소 하나 이상을 자르거나, 복사하거나, 붙여넣거나, 복제하거나 삭제하려면 요소를 마우스 오른쪽 버튼으로 클릭하고 메뉴에서 해당 옵션을 선택하십시오. 운영 체제의 표준 단축키를 사용해도 됩니다.

계층 구조(Hierarchy) 창에서 요소를 복사하면 해당 요소와 요소의 자식을 텍스트로 나타낸 UXML이 복사됩니다. 즉, 복사한 내용을 텍스트 에디터에 바로 붙여넣을 수 있습니다. UXML 텍스트를 복사하여 UI 빌더에 붙여넣을 수도 있습니다.

요소에 수행하는 모든 작업은 해당 요소의 자식에도 적용됩니다. 예를 들어, 요소를 삭제하면 해당 요소의 모든 자식도 삭제되며, 요소를 복제하면 해당 요소 아래에 있는 모든 요소의 트리도 함께 복제됩니다.

읽기 전용 요소

Library 폴더에서 드래그된 요소로 Hierarchy에 생성된 추가적인 자식 요소가 표시될 수 있습니다. 이러한 자식 요소는 Hierarchy에서는 회색으로 표시됩니다. 이는 Library의 Standard 탭에 있는 대다수의 요소 등 일부 커스텀 요소가 생성 즉시 내부 계층 구조를 만들기 때문입니다. UI 빌더는 UI 빌더가 편집하는 UI 문서(UXML)에서 나타낼 수 있는 사항만 편집할 수 있으므로, UI 빌더에서 내부 계층 구조를 편집할 수는 없습니다. UXML에는 이러한 내부 계층 구조가 존재하지 않습니다. UXML은 라이브 UI 계층 구조의 1:1 사본이 아니라 명령 세트에 가깝습니다.