레이아웃 엔진으로 요소 위치 지정

UI 툴킷에는 레이아웃 및 스타일링 프로퍼티에 따라 요소를 배치하는 레이아웃 엔진이 포함되어 있습니다. 레이아웃 엔진은 Yoga의 레이아웃 원리를 사용하며, 이는 HTML/CSS 레이아웃 시스템인 Flexbox의 하위 집합을 구현합니다. UI 툴킷 프로퍼티는 Yoga 레이아웃 동작과 매칭됩니다. UI 툴킷은 Flexbox의 프로퍼티 대부분을 지원합니다.

기본적으로 모든 요소는 레이아웃의 일부입니다. 레이아웃의 기본 동작은 다음과 같습니다.

컨테이너가 자식을 수직으로 배포합니다.
컨테이너 사각형의 위치에는 해당 자식 사각형이 포함됩니다. 이 동작은 다른 레이아웃 프로퍼티에 의해 제한될 수 있습니다.
텍스트가 있는 VisualElement는 크기 계산에 텍스트 크기를 사용합니다. 이 동작은 다른 레이아웃 프로퍼티에 의해 제한될 수 있습니다.

UI 툴킷에는 버튼, 토글 또는 텍스트 필드와 같이 표준__ UI__(사용자 인터페이스) 사용자가 애플리케이션과 상호 작용하도록 해 줍니다. Unity는 현재 3개의 UI 시스템을 지원합니다. 자세한 정보
See in Glossary 컴포넌트에 대한 빌트인 컨트롤이 포함되어 있습니다. 이러한 빌트인 컨트롤에는 레이아웃에 영향을 주는 스타일이 있습니다.

메인 스타일 프로퍼티

다음은 메인 스타일 프로퍼티입니다.

Flex > Direction(USS: flex-direction): main-axis의 레이아웃 방향을 정의합니다. 기본값은 column이며, 이는 main-axis를 위에서 아래로 실행합니다.
Flex > Grow(USS: flex-grow): 요소가 main-axis에서 어떻게 성장해야 하는지 정의합니다. 이는 동일한 부모의 다른 모든 형제와 공유되는 비율입니다 이 프로퍼티는 요소가 부모의 전체 크기를 차지하도록 스트레치하려고 할 때 유용합니다(형제 제외). 이렇게 하려면 Flex > Grow 값을 1로 설정합니다. flex-grow가 1로 설정된 형제가 둘 있는 경우, 각 형제는 main-axis를 따라 사용 가능한 부모 크기의 50%를 차지합니다.
Align > Align Items(USS: align-items): 요소의 정렬을 cross-axis 또는 main-axis의 수직 축으로 정의합니다. 예를 들어, flex-direction: column과 align-items: flex-end가 설정된 VisualElement에 두 개의 버튼이 있는 경우, 이러한 두 개의 버튼이 컨테이너의 오른쪽 가장자리에 부딪히게 됩니다. align-items 옵션은 flex-direction 값에 따라 달라지기 때문에 flex-start 및 flex-end 같은 이름을 가집니다.
Align > Justify Content(USS: justify-content): main-axis에서 요소의 정렬을 정의합니다. 예를 들어, flex-direction: column과 justify-content: flex-end가 설정된 VisualElement에 두 개의 버튼이 있는 경우, 이러한 두 개의 버튼이 컨테이너의 하단 가장자리에 부딪히게 됩니다. justify-content 옵션은 flex-direction 값에 따라 달라지기 때문에 flex-start 및 flex-end 같은 이름을 가집니다.

자세한 내용은 플렉스 레이아웃을 참조하십시오.

선택한 요소에 자식 요소가 있으면 UI 빌더에서 헤더의 토글을 사용하여 Viewport에서 플렉스와 관련된 스타일 프로퍼티를 토글할 수 있습니다. 아래 이미지는 #menu 요소에 사용할 수 있는 옵션을 보여 줍니다.

스타일 프로퍼티를 사용하여 복잡하고 동적인 레이아웃을 만들 수 있습니다. 다음은 화면 오른쪽 하단 가장자리에 Button을 고정하는 레이아웃의 예입니다.

아래는 각 컨테이너 VisualElement에 설정된 인라인 스타일을 나타내는 이 레이아웃의 UXML입니다.

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <ui:VisualElement name="screen-is-blue" style="flex-grow: 1; justify-content: flex-end; background-color: blue;">
        <ui:VisualElement name="toolbar-is-orange" style="align-items: flex-end; background-color: orange;">
            <ui:Button text="Button" display-tooltip-when-elided="true" />
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

컨테이너의 형태를 보여 주기 위해 컬러가 지정되어 있습니다. 중첩된 VisualElement 컨테이너를 사용하여 각 요소의 위치와 크기를 명시적으로 설정하지 않고도 모든 동적 레이아웃을 구현할 수 있습니다. 이렇게 하면 레이아웃이 동적으로 유지되고 화면 크기 변경과 같이 더 큰 컨테이너 크기에 맞게 자동으로 조정됩니다.

Absolute 포지션

UI 빌더는 Position 스타일 프로퍼티도 지원합니다. Position > Absolute 모드를 사용하면 요소가 기본 Flexbox 기반 레이아웃 엔진에 보이지 않습니다. 더 이상 공간을 차지하지 않는 것처럼 보입니다. Absolute 위치 요소는 Relative 위치인 형제 위에 나타납니다.

Absolute 위치를 사용하는 동안 Position > Left, Top, Right, Bottom 스타일 프로퍼티를 사용하여 해당 부모의 각 가장자리에서 요소를 오프셋하고 크기를 조절할 수 있습니다. 이는 화면에서 절대 좌표를 설정하지 않지만 부모 요소를 기준으로 오프셋을 설정합니다. Relative 모드를 사용하여 부모 요소의 위치를 지정할 수 있습니다. Left 오프셋과 Right 오프셋을 모두 설정하면 요소의 Width 스타일 프로퍼티가 무시되고 계산된 너비는 다음 수식에서 나옵니다.

element-computed-width = parent-width - left-offset - right-offset

Left, Top, Right, Bottom도 앵커로 해석할 수 있습니다. 예를 들어 화면 왼쪽 하단에 Button을 고정할 수 있습니다.

아래 UXML은 인라인 스타일을 나타냅니다.

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    <ui:VisualElement style="flex-grow: 1;">
        <ui:VisualElement style="position: absolute; left: 0; bottom: 0;" />
    </ui:VisualElement>
</ui:UXML>

위치 지정 시 Left를 0으로 설정하는 것과 Left를 설정하지 않는 것은 다릅니다.

Left set to 0의 경우 오프셋을 0으로 설정한다는 의미입니다.
Left unset의 경우 오프셋을 설정하지 않으며, 다른 스타일 프로퍼티가 요소의 너비나 높이를 정의하도록 합니다.

또한 요소의 파란색 선택 테두리에서 각 가장자리와 모서리에 있는 추가적인 크기 조절 핸들을 사용하여 Canvas에서 이러한 오프셋 스타일 프로퍼티를 직접 수정할 수도 있습니다. 설정된 요소와 설정되지 않은 요소를 구분하는 것이 중요하므로, Canvas에는 요소의 양쪽에 주황색 정사각형으로 ‘앵커’ 토글도 포함되어 있습니다. Canvas 핸들은 어떤 ‘앵커’가 설정되었는지에 따라 요소의 크기를 시각적으로 조절할 때 설정되는 스타일 프로퍼티를 조정합니다. 예를 들어 오른쪽 테두리 핸들을 통해 Canvas의 요소 크기를 변경한다고 가정해 보겠습니다.

Left 및 Right 프로퍼티를 모두 설정하면 핸들이 Right 프로퍼티를 업데이트합니다.
Left 프로퍼티를 설정하고 Right 프로퍼티는 설정하지 않으면 핸들이 Width 프로퍼티를 업데이트합니다.

Relative 포지션과 Absolute 포지션 모두 사용하기

Absolute 위치 모드는 UI 툴킷의 빌트인 레이아웃 엔진을 우회하므로 가급적 사용하지 마십시오. 또한 전체 레이아웃을 변경하는 경우 개별 요소를 수동으로 업데이트해야 하는 까다로운 UI가 초래될 수 있습니다. 그러나 Absolute 위치는 오버레이와 같은 특정 사용 사례에 적합합니다. 팝업이나 드롭다운처럼 다른 복잡한 UI 위에 복잡한 UI를 오버레이하는 경우에 유용합니다. 이러한 경우 오버레이 컨테이너에 대해 Absolute 위치을 사용하지만, 오버레이 내 요소에 대해 Relative 모드를 계속 사용하여 유연성을 유지합니다.

다음은 간단한 중앙 팝업의 예시입니다.

AbsolutePositionOverlayWithPopup 그리고 다음은 참조용 UXML입니다.

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <ui:VisualElement name="complex-ui-screen">
        <ui:Toggle label="Toggle" />
        <ui:MinMaxSlider picking-mode="Ignore" label="Min/Max Slider" min-value="10" max-value="12" low-limit="-10" high-limit="40" />
        <ui:Label text="Label" />
        <ui:Button text="Button" />
        <ui:Button text="Button" />
    </ui:VisualElement>
    <ui:VisualElement name="overlay" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.71); align-items: center; justify-content: center;">
        <ui:VisualElement name="popup" style="background-color: rgba(70, 70, 70, 255);">
            <ui:Label text="Exit?" name="message" />
            <ui:Button text="OK" name="ok-button" style="width: 108.3333px;" />
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

위의 예시는 Absolute 위치의 사용을 하이라이트합니다. 모든 Position > Left, Top, Right, Bottom을 0으로 설정하면 위치가 화면 가장자리에서 0픽셀 떨어지게 됩니다. 이렇게 하면 #overlay 요소가 #complex-ui-screen 컨테이너 요소에 오버랩됩니다. #overlay 요소에 반투명한 배경을 설정하여 다른 UI가 어두워 보이게 할 수도 있습니다. #overlay를 사용해서 Relative 위치를 설정하여 #popup 컨테이너 VisualElement를 중앙에 놓습니다.

베스트 프랙티스

다음 목록은 레이아웃 엔진의 성능을 향상하는 데 도움이 되는 팁을 제공합니다.

width 및 height를 설정하여 요소의 크기를 정의하십시오.
flexGrow 프로퍼티(USS: flex-grow: <value>;)를 사용하여 요소에 가변 크기를 할당합니다. flexGrow 프로퍼티의 값은 요소의 크기가 형제를 통해 결정될 경우 해당 요소 크기에 기본 가중치를 할당합니다.
flexDirection 프로퍼티를 row(USS: flex-direction: row;)로 설정하여 수평 레이아웃으로 전환합니다.
상대 위치 지정을 사용하여 원본 레이아웃 포지션을 기준으로 요소를 오프셋하십시오.
position 프로퍼티를 absolute로 설정하여 해당 부모 위치 사각형을 기준으로 요소를 배치합니다. 이는 형제 또는 부모의 레이아웃에 영향을 주지 않습니다.

추가 리소스

USS 공통 프로퍼티

상대 및 절대 위치 지정