Version: Unity 6.0 (6000.0)
언어 : 한국어
UXML을 통한 UI 구조
UXML에 스타일 추가

UXML 소개

UXML 포맷은 HTML, XAML, XML에서 착안해 만들어졌습니다. 이전에 이러한 포맷을 사용해 본 적이 있다면 UXML과의 유사점을 알 수 있을 것입니다. 그러나 UXML 포맷에는 Unity를 효율적으로 사용할 수 있게 해주는 약간의 차이점이 있습니다. 이 페이지에서는 구체적 예시를 통해 UXML 포맷을 소개합니다.

다음은 UXML 파일의 예시입니다. 여기에는 사용자가 선택하도록 메시지를 표시하는 빌트인__ UI__(사용자 인터페이스) 사용자가 애플리케이션과 상호 작용하도록 해 줍니다. Unity는 현재 3개의 UI 시스템을 지원합니다. 자세한 정보
See in Glossary
컨트롤이 포함되어 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<UXML ...>
    <Box>
        <Toggle name="boots" label="Boots" value="false" />
        <Toggle name="helmet" label="Helmet" value="false" />
        <Toggle name="cloak" label="Cloak of invisibility" value="false"/>
    </Box>
    <Box>
        <Button name="cancel" text="Cancel" />
        <Button name="ok" text="OK" />
    </Box>
</UXML>

UXML 선언

위의 UXML 예시에서 첫 번째 코드줄은 UXML 선언입니다. 선언은 선택 사항입니다. UXML 선언을 포함할 경우 첫 번째 줄에 넣어야 합니다. UXML 선언에는 version이 필요합니다. UXML 선언에서 encoding 속성은 선택 사항입니다. encoding 속성을 포함할 경우 파일의 문자 인코딩을 선언해야 합니다.

문서 루트

다음 줄은 문서 루트 <UXML>을 정의합니다. <UXML> 요소에는 네임스페이스 접두사 정의와 스키마 정의 파일의 위치에 대한 속성이 포함됩니다. 이러한 속성을 원하는 순서대로 지정할 수 있습니다.

네임스페이스

UI 툴킷에서 각 요소는 UnityEngine.UIElements 또는 UnityEditor.UIElements 네임스페이스 중 하나로 정의됩니다.

  • UnityEngine.UIElements 네임스페이스에는 Unity 런타임의 일부로 정의되는 요소가 포함됩니다.
  • UnityEditor.UIElements 네임스페이스에는 Unity 에디터에서 이용 가능한 요소가 포함됩니다. 요소를 완전히 지정하려면 네임스페이스를 접두사로 사용해야 합니다.

예를 들어 UXML 템플릿에서 Button 요소를 사용하려면 <UnityEngine.UIElements:Button />을 지정해야 합니다.

네임스페이스 접두사를 정의하면 네임스페이스를 더 쉽게 지정할 수 있습니다. 예를 들어 xmlns:engine="UnityEngine.UIElements"engine 접두사를 UnityEngine.UIElements로 정의합니다. 정의한 네임스페이스 접두사는 네임스페이스를 지정하는 데 사용할 수 있습니다. 예를 들어 <engine:Button /><UnityEngine.UIElements:Button />과 동등합니다.

또한 접두사를 제외하여 기본 네임스페이스를 정의할 수도 있습니다. 예를 들어 xmlns="UnityEngine.UIElements"UnityEngine.UIElements를 기본 네임스페이스로 정의합니다. 즉, 예를 들어 <Button />를 지정하는 것은 <UnityEngine.UIElements:Button />과 같습니다.

자동으로 정의된 네임스페이스가 있는 UXML 파일을 생성하려면 Asset > Create > UI Toolkit > UI Document를 선택합니다.

참고: 자체 요소를 정의하는 경우 UnityEngine.UIElements 또는 UnityEditor.UIElements 네임스페이스에 커스텀 컨트롤 클래스를 정의하지 마십시오. 그렇지 않으면 UI 빌더에서 커스텀 컨트롤이 숨겨집니다.

스키마 정의

스키마 정의는 UXML 파일을 확인합니다. 이는 각 UXML 요소에 포함할 수 있는 속성 및 자식 요소를 지정합니다.

UXML 파일에서 <UXML> 루트 요소의 xsi:noNamespaceSchemaLocation 또는 xsi:schemaLocation 속성은 스키마 정의 파일의 위치를 지정합니다.

최신 스키마 정의가 있는 UXML 파일을 생성하려면 Assets > Create > UI Toolkit > UI Document를 선택합니다. 이렇게 하면 루트 요소의 xsi:noNamespaceSchemaLocation 속성이 포함된 파일이 생성됩니다.

참고: 텍스트 에디터가 xsi:noNamespaceSchemaLocation 속성을 인식하지 않는 경우, xsi:schemaLocation 속성을 대신 사용합니다.

UXML 스키마 정의의 업데이트를 강제 적용하려면 Assets > Update UXML Schema를 선택합니다.

UXML 요소

UI의 정의는 <UXML> 루트 안에 있습니다. UI 정의는 일련의 중첩된 UXML 요소이며 각 요소는 시각적 요소를 나타냅니다.

요소 이름은 인스턴스화할 요소의 C# 클래스 이름과 동일합니다. 대부분의 요소에는 속성이 포함되어 있고 각 값은 C#으로 해당 클래스 프로퍼티에 매핑됩니다. 각 요소에는 부모 클래스에서 상속한 속성 외에도 고유한 속성 집합이 있습니다. VisualElement는 모든 요소의 기본 클래스이며, 모든 요소에 대해 다음의 속성을 제공합니다.

  • name: 요소의 식별자입니다. 고유한 이름을 사용해야 합니다.
  • picking-mode: Position으로 설정하여 마우스 이벤트에 응답하거나 Ignore로 설정하여 마우스 이벤트를 무시합니다.
  • focus-index: (사용되지 않음) tabIndexfocusable를 사용합니다.
  • tabindex: 현재 요소의 태빙 위치를 정의하는 정수입니다.
  • focusable: 요소에 포커스를 둘 수 있는지를 나타내는 부울입니다.
  • class: 요소를 특성화하는 식별자 목록으로, 공백으로 구분됩니다. 클래스를 사용하여 시각적 스타일을 요소에 할당하십시오. 클래스를 사용하여 UQuery에서 여러 요소를 선택할 수도 있습니다.
  • tooltip: 마우스 커서가 요소 위에 있을 때 툴팁으로 표시되는 문자열입니다.
  • view-data-key : 요소 직렬화에 사용되는 키를 정의하는 문자열입니다.

추가 리소스

UXML을 통한 UI 구조
UXML에 스타일 추가