자동 레이아웃(Auto Layout)

사각 트랜스폼 레이아웃 시스템은 다양한 타입의 레이아웃을 처리할 수 있을 정도로 유연하며, 요소를 완전히 자유롭게 배치할 수 있도록 합니다. 하지만 조금 더 체계성을 갖추어야 하는 경우도 있습니다.

자동 레이아웃 시스템을 사용하면 수평 그룹, 수직 그룹, 격자 무늬 등의 중첩 레이아웃 그룹을 통해 요소를 배치할 수 있습니다. 또한 요소가 포함된 콘텐츠에 맞도록 요소 크기를 자동으로 조정할 수 있습니다. 예를 들어, 텍스트 콘텐츠와 약간의 여백이 버튼 안에 꼭 들어맞을 수 있도록 동적으로 크기를 조정하도록 할 수도 있습니다.

자동 레이아웃 시스템은 기본 사각 트랜스폼 레이아웃 시스템을 기반으로 만들어진 시스템입니다. 자동 레이아웃 시스템은 일부 또는 모든 요소에 선택적으로 사용할 수 있습니다.

레이아웃 요소(Layout Elements) 이해

자동 레이아웃 시스템은 레이아웃 요소와 레이아웃 컨트롤러라는 개념을 기반으로 합니다. 레이아웃 요소는 사각 트랜스폼이 있는 게임 오브젝트이며 옵션으로 다른 컴포넌트가 있을 수도 있습니다. 레이아웃 요소는 크기가 어떻게 되어야 하는지 등의 특정 정보를 가지고 있습니다. 레이아웃 요소는 자신의 크기를 직접 설정하지 않지만, 레이아웃 컨트롤러의 기능을 하는 기타 컴포넌트는 레이아웃 요소가 제공하는 정보를 사용하여 사용할 크기를 계산할 수 있습니다.

레이아웃 요소에는 자기 자신을 정의하는 프로퍼티를 포함합니다.

• 최소 너비
• 최소 높이
• 선호 너비
• 선호 높이
• 가변 너비
• 가변 높이

레이아웃 요소가 제공하는 정보를 사용하는 Layout Controller 컴포넌트의 예로는 Content Size Fitter 및 다양한 Layout Group 컴포넌트가 있습니다. 레이아웃 그룹의 레이아웃 요소 크기가 정해지는 기본 원리는 다음과 같습니다.

• 우선 최소 크기가 할당됩니다.
• 충분히 사용 가능한 공간이 있으면 선호 크기가 할당됩니다.
• 추가 사용 가능한 공간이 있으면 가변 크기가 할당됩니다.

사각 트랜스폼이 있는 모든 게임 오브젝트는 레이아웃 요소의 기능을 할 수 있습니다. 이러한 오브젝트는 최소, 선호, 가변 크기가 디폴트로 0으로 설정됩니다. 특정 컴포넌트는 게임 오브젝트에 추가될 때 이러한 레이아웃 프로퍼티를 변경합니다.

레이아웃 요소 프로퍼티를 제공하는 컴포넌트의 두 가지 예로 Image 및 Text 컴포넌트가 있습니다. 컴포넌트는 선호 너비 및 높이를 텍스트 콘텐츠의 스프라이트에 맞추어 변경합니다.

Layout Element 컴포넌트

최소, 선호, 가변 크기를 오버라이드하고 싶다면 게임 오브젝트에 Layout Element 컴포넌트를 추가하면 됩니다.

Layout Element 컴포넌트는 하나 이상의 레이아웃 프로퍼티의 값을 오버라이드합니다. 오버라이드할 프로퍼티의 체크박스를 사용하여 오버라이드 값을 지정합니다.

자세한 정보는 레이아웃 요소 레퍼런스 페이지를 참조하십시오.

레이아웃 컨트롤러(Layout Controllers) 이해

레이아웃 컨트롤러는 크기, 경우에 따라 하나 이상의 레이아웃 요소(즉 사각 트랜스폼이 있는 게임 오브젝트)의 포지션을 제어하는 컴포넌트입니다. 레이아웃 컨트롤러는 자신의 레이아웃 요소(자신 위에 있는 동일 게임 오브젝트)를 제어할 수도 있고, 자식 레이아웃 요소를 제어할 수도 있습니다.

레이아웃 컨트롤러로 기능하는 컴포넌트는 동시에 레이아웃 요소로서 기능할 수도 있습니다.

콘텐츠 크기 피터(Content Size Fitter)

콘텐츠 크기 피터는 자신의 레이아웃 요소의 크기를 조절하는 레이아웃 컨트롤러로서 기능합니다. 자동 레이아웃 시스템이 동작하는 것을 볼 수 있는 가장 간단한 방법은 Content Size Fitter 컴포넌트를 Text 컴포넌트와 함께 게임 오브젝트에 추가하는 것입니다.

수평 피트 또는 수직 피트 중 하나를 선호로 설정하면, 사각 트랜스폼이 너비 또는 높이를 텍스트 콘텐츠에 맞도록 조정합니다.

자세한 정보는 콘텐츠 크기 피터 레퍼런스 페이지를 참조하십시오.

종횡비 피터(Aspect Ratio Fitter)

종횡비 크기 피터는 자신의 레이아웃 요소의 크기를 조절하는 레이아웃 컨트롤러로서 기능합니다.

종횡비 피터를 통해 높이를 조정하여 폭에 맞출 수도 있고, 반대로 폭을 조정하여 높이에 맞출 수도 있으며, 부모 안에 맞추어 들어가게 하거나 부모를 완전히 감싸도록 할 수도 있습니다. 종횡비 피터는 최소 크기 및 선호 크기와 같은 레이아웃 정보를 고려하지 않습니다.

자세한 정보는 종횡비 피터 레퍼런스 페이지를 참조하십시오.

레이아웃 그룹(Layout Groups)

레이아웃 그룹은 자식 레이아웃 요소의 크기와 포지션을 제어하는 레이아웃 컨트롤러로서 기능합니다. 예를 들어, 수평 레이아웃 그룹은 자식을 옆으로 나란히 배치하고, 그리드 레이아웃 그룹은 자식을 격자 무늬 형태로 배치합니다.

레이아웃 그룹은 자신의 크기는 제어하지 않습니다. 대신 그 자체로 레이아웃 요소로서 기능하며 다른 레이아웃 컨트롤러를 통해 제어하거나 수동으로 설정할 수 있습니다.

레이아웃 그룹에 할당된 크기가 어떻든지 간에 대부분의 경우에는 자식 레이아웃 요소가 알려 주는 최소, 선호, 가변 크기에 기반하여 각 자식 레이아웃 요소에 적합한 양의 공간을 할당하려 합니다. 레이아웃 그룹 역시 이러한 방식으로 임의로 중첩할 수 있습니다.

자세한 정보는수평 레이아웃 그룹, 수직 레이아웃 그룹, 그리드 레이아웃 그룹 레퍼런스 페이지를 참조하십시오.

강제 사각 트랜스폼(Driven Rect Transform) 프로퍼티

자동 레이아웃 시스템에서 레이아웃 컨트롤러는 특정 UI 요소의 크기와 배치를 자동으로 조절하기 때문에 이 크기와 포지션은 인스펙터 또는 씬 뷰를 통해 동시에 수동으로 편집해서는 안 됩니다. 이러한 값을 변경하더라도 레이아웃 컨트롤러가 다음 레이아웃 계산 시 값을 초기화합니다.

사각 트랜스폼에는 이를 처리하기 위한 강제 프로퍼티라는 개념이 있습니다. 예를 들어, 수평 피트 프로퍼티가 최소 또는 선호로 설정된 콘텐츠 크기 피터는 동일 게임 오브젝트에서 사각 트랜스폼의 폭을 강제로 설정합니다. 이 폭은 읽기 전용으로 표시되며 사각 트랜스폼의 맨 위에 작은 정보 상자가 표시되어 하나 이상의 프로퍼티가 콘텐츠 크기 피터에 의해 강제 설정되었음을 알려줍니다.

강제 사각 트랜스폼 프로퍼티는 수동 편집을 예방하는 것 이외에도 다른 의의를 가지고 있습니다. 어떤 레이아웃은 게임 뷰의 해상도나 크기를 변경하는 것만으로 변할 수 있습니다. 따라서 레이아웃 요소의 크기 또는 배치 역시 바뀔 수 있으며, 이로 인해 강제 프로퍼티의 값도 변경됩니다. 그러나 게임 뷰의 크기가 조절되었다는 이유만으로 씬에 저장되지 않은 변경사항이 생겼다고 표시되는 것은 바람직하지 않습니다. 이 현상을 막기 위해 강제 프로퍼티의 값은 씬의 일부로서 저장되지 않으며, 강제 프로퍼티에 변경이 있더라도 씬이 변경되었다고 표시되지 않습니다.

기술적 세부 사항

자동 레이아웃 시스템에는 특정 컴포넌트가 이미 내장되어 있으나 커스텀 방식으로 레이아웃을 제어하는 새 컴포넌트를 만들 수도 있습니다. 자동 레이아웃 시스템이 인식하는 특정 인터페이스를 구현한 컴포넌트가 있으면 됩니다.

레이아웃 인터페이스(Layout Interfaces)

ILayoutElement 인터페이스를 구현하면, 컴포넌트는 자동 레이아웃 시스템에 의해 레이아웃 요소로 간주됩니다.

ILayoutGroup 인터페이스를 구현하면, 컴포넌트는 자식의 사각 트랜스폼을 강제하게 됩니다.

ILayoutSelfController 인터페이스를 구현하면, 컴포넌트는 자신의 사각 트랜스폼을 강제하게 됩니다.

레이아웃 산출(Layout Calculations)

자동 레이아웃 시스템은 아래 순서로 레이아웃을 계산하고 실행합니다.

1. 레이아웃 요소의 최소, 선호, 가변 너비는 ILayoutElement 컴포넌트에서 CalculateLayoutInputHorizontal을 호출하여 계산합니다. 이는 상향식 순서로 수행되는데 부모를 계산할 때 그 자식의 정보를 고려할 수 있도록 부모보다 자식이 먼저 계산된다는 의미입니다.
2. 레이아웃 요소의 유효 폭은 ILayoutController 컴포넌트에서 SetLayoutHorizontal을 호출하여 산출 및 설정합니다. 이는 하향식 순서로 수행되는데 부모가 사용할 수 있는 전체 폭에 기반하여 자식의 폭을 할당해야 하기 때문에 자식이 부모보다 나중에 계산됩니다. 이 단계를 수행한 후에는 레이아웃 요소의 사각 트랜스폼은 새 폭을 갖게 됩니다.
3. 레이아웃 요소의 최소, 선호, 가변 높이는 ILayoutElement 컴포넌트에서 CalculateLayoutInputVertical을 호출하여 산출합니다. 이는 상향식 순서로 수행되는데 부모를 산출할 때 그 자식의 정보를 고려할 수 있도록 부모보다 자식이 먼저 산출된다는 의미입니다.
4. 레이아웃 요소의 유효 높이는 ILayoutController 컴포넌트에서 SetLayoutVertical을 호출하여 산출 및 설정합니다. 이는 하향식 순서로 수행되는데 부모가 사용할 수 있는 전체 높이에 기반하여 자식의 높이를 할당해야 하기 때문에 자식이 부모보다 나중에 산출됩니다. 이 단계를 수행한 후에는 레이아웃 요소의 사각 트랜스폼은 새 높이를 갖게 됩니다.

위에서 알 수 있듯이, 자동 레이아웃 시스템은 폭을 먼저 산출한 후 높이를 산출합니다. 따라서, 계산된 높이는 폭에 의해 결정될 수도 있으나 계산된 폭은 절대로 높이에 의해 결정되지 않습니다.

레이아웃 재빌드(Layout Rebuild) 트리거

컴포넌트의 어떤 프로퍼티가 변경되어 현재 레이아웃이 더 이상 유효하지 않은 상황이 발생하면 레이아웃 재계산이 필요할 수 있습니다. 이는 다음과 같은 호출을 통해 트리거할 수 있습니다.

LayoutRebuilder.MarkLayoutForRebuild (RectTransform으로 변환);

재빌드는 즉시 일어나는 것이 아니고 현재 프레임의 마지막, 렌더링이 일어나기 바로 직전에 일어납니다. 즉시 재빌드가 일어나지 않는 이유는 동일 프레임 동안 레이아웃 재빌드가 여러 차례 일어날 수 있기 때문이며, 이럴 경우 퍼포먼스에 악영향을 주기 때문입니다.

재빌드가 언제 트리거되어야 하는지에 대한 가이드라인은 다음과 같습니다.

• 레이아웃을 변경할 수 있는 프로퍼티의 세터(setter) 내부
• 다음과 같은 콜백:
• OnEnable
• OnDisable
• OnRectTransformDimensionsChange
• OnValidate(에디터에서만 필요하며, 런타임 시점에는 해당되지 않음)
• OnDidApplyAnimationProperties