🎮 Unity6 UI - Auto Layout

📌 본 포스팅은 Unity UI 공식 매뉴얼의 내용을 바탕으로 작성되었습니다.

유니티 UI는 게임과 애플리케이션의 사용자 인터페이스를 개발하기 위한 UI 툴킷입니다. 이는 게임 오브젝트(GameObject) 기반의 UI 시스템으로, 컴포넌트(Components)와 게임 뷰(Game View)를 사용하여 사용자 인터페이스를 배치하고, 위치를 조정하며, 스타일을 지정합니다.

---

🔮자동 레이아웃(Auto Layout)

Rect Transform 레이아웃 시스템은 유연하여 다양한 레이아웃을 처리하고 자유롭게 요소를 배치할 수 있습니다.

자동 레이아웃(Auto Layout) 시스템은 요소들을 수평 그룹, 수직 그룹, 그리드와 같은 중첩된 레이아웃 그룹에 배치하는 방법을 제공합니다. 또한, 포함된 콘텐츠에 따라 요소의 크기를 자동으로 조절할 수 있습니다. 예를 들어, 버튼의 크기를 텍스트 내용과 패딩에 정확히 맞게 동적으로 조절할 수 있습니다.

자동 레이아웃 시스템은 기본적인 Rect Transform 레이아웃 시스템 위에 구축된 시스템이며, 일부 또는 모든 요소에 선택적으로 사용할 수 있습니다.

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

자동 레이아웃 시스템은 레이아웃 요소(layout elements)와 레이아웃 컨트롤러(layout controllers)라는 개념을 기반으로 합니다.
레이아웃 요소는 Rect Transform과 선택적으로 다른 컴포넌트들을 가진 게임 오브젝트입니다. 자신이 가져야 할 크기에 대한 특정 정보를 가지고 있습니다.
직접 자신의 크기를 설정하지 않지만, 레이아웃 컨트롤러 역할을 하는 다른 컴포넌트들이 이 정보를 사용하여 요소의 크기를 계산합니다.

레이아웃 요소의 속성:

• 최소 너비(Minimum width)

• 최소 높이(Minimum height)

• 선호 너비(Preferred width)

• 선호 높이(Preferred height)

• 유연 너비(Flexible width)

• 유연 높이(Flexible height)

레이아웃 요소가 제공하는 정보를 사용하는 레이아웃 컨트롤러 컴포넌트의 예로는 Content Size Fitter와 다양한 Layout Group 컴포넌트들이 있습니다.

레이아웃 그룹 내에서 레이아웃 요소의 크기가 결정되는 기본적인 원칙은 다음과 같습니다:

• 먼저 최소 크기가 할당됩니다.

• 사용 가능한 공간이 충분하면, 선호 크기가 할당됩니다.

• 추가적인 사용 가능 공간이 있다면, 유연 크기가 할당됩니다.

Rect Transform이 있는 모든 게임 오브젝트는 레이아웃 요소로 기능할 수 있습니다. 기본적으로 최소, 선호, 유연 크기 값이 0입니다. 특정 컴포넌트를 게임 오브젝트에 추가하면 이러한 레이아웃 속성들이 변경됩니다.

Image와 Text 컴포넌트는 레이아웃 요소 속성을 제공하는 두 가지 예시입니다. 이들은 선호 너비와 높이를 스프라이트 또는 텍스트 내용에 맞게 변경합니다.

레이아웃 요소 컴포넌트 (Layout Element Component)

Minimum, Preferred, 또는 Flexible 크기 값을 재정의하고 싶다면, 게임 오브젝트에 Layout Element 컴포넌트를 추가하여 할 수 있습니다.

Layout Element 컴포넌트를 사용하면 하나 이상의 레이아웃 속성 값을 재정의할 수 있습니다. 재정의하고 싶은 속성의 체크박스를 활성화하고 원하는 값을 지정하면 됩니다.

더 자세한 정보는 Layout Element 페이지를 참고하세요.

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

레이아웃 컨트롤러는 하나 이상의 레이아웃 요소(즉, Rect Transform이 있는 게임 오브젝트)의 크기와 위치를 제어하는 컴포넌트입니다. 레이아웃 컨트롤러는 자신의 레이아웃 요소를 제어할 수도 있고(자신이 부착된 게임 오브젝트), 자식 레이아웃 요소를 제어할 수도 있습니다.

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

콘텐츠 크기 조절 (Content Size Fitter)

Content Size Fitter는 자신의 레이아웃 요소의 크기를 제어하는 레이아웃 컨트롤러로 기능합니다. 자동 레이아웃 시스템을 가장 간단하게 확인하는 방법은 Text 컴포넌트가 있는 게임 오브젝트에 Content Size Fitter 컴포넌트를 추가하는 것입니다.

Horizontal Fit 또는 Vertical Fit을 Preferred로 설정하면, Rect Transform은 텍스트 내용에 맞춰 너비 및/또는 높이를 조절합니다.

더 자세한 정보는 Content Size Fitter 페이지를 참고하세요.

종횡비 조절 (Aspect Ratio Fitter)

Aspect Ratio Fitter는 자신의 레이아웃 요소의 크기를 제어하는 레이아웃 컨트롤러로 기능합니다.

이 컴포넌트는 너비에 맞춰 높이를 조절하거나 그 반대로 조절할 수 있으며, 요소가 부모 안에 맞게 들어가거나 부모를 감싸도록 만들 수도 있습니다. Aspect Ratio Fitter는 최소 크기나 선호 크기와 같은 레이아웃 정보를 고려하지 않습니다.

더 자세한 정보는 Aspect Ratio Fitter 페이지를 참고하세요.

레이아웃 그룹 (Layout Groups)

레이아웃 그룹은 자식 레이아웃 요소들의 크기와 위치를 제어하는 레이아웃 컨트롤러로 기능합니다. 예를 들어, Horizontal Layout Group은 자식들을 나란히 배치하고, Grid Layout Group은 자식들을 그리드 형태로 배치합니다.

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

레이아웃 그룹에 할당된 크기가 얼마든 간에, 대부분의 경우 자식 레이아웃 요소들이 보고한 최소, 선호, 유연 크기 정보를 기반으로 각 자식에게 적절한 공간을 할당하려고 합니다. 이러한 방식으로 레이아웃 그룹은 원하는 만큼 중첩될 수 있습니다.

더 자세한 정보는 Horizontal Layout Group, Vertical Layout Group, Grid Layout Group 페이지를 참고하세요.

제어되는 Rect Transform 속성 (Driven Rect Transform properties)

자동 레이아웃 시스템의 레이아웃 컨트롤러가 특정 UI 요소의 크기와 배치를 자동으로 제어할 수 있습니다.수동으로 변경된 값은 다음 레이아웃 계산 시 레이아웃 컨트롤러에 의해 다시 원래대로 초기화되기 때문에 이러한 크기 및 위치 값은 인스펙터나 씬 뷰에서 동시에 수동으로 편집해서는 안 됩니다.

Rect Transform에는 이를 해결하기 위한 '제어되는 속성(driven properties)'이라는 개념이 있습니다. 예를 들어, Horizontal Fit 속성이 Minimum 또는 Preferred로 설정된 Content Size Fitter는 동일한 게임 오브젝트의 Rect Transform 너비를 제어합니다. 이때 너비는 읽기 전용으로 표시되며, Rect Transform 상단의 작은 정보 상자는 하나 이상의 속성이 Content Size Fitter에 의해 제어되고 있음을 알려줍니다.

제어되는 Rect Transform 속성은 수동 편집을 막는 것 외에 다른 이유도 있습니다.
게임 뷰의 해상도나 크기를 변경하는 것만으로도 레이아웃이 변경될 수 있습니다.
이는 레이아웃 요소의 크기나 배치를 변경시키고, 결과적으로 제어되는 속성의 값을 바꾸게 됩니다. 하지만 게임 뷰 크기가 조절되었다는 이유만으로 씬이 저장되지 않은 변경 사항이 있다고 표시되는 것은 바람직하지 않습니다. 이를 방지하기 위해, 제어되는 속성의 값은 씬의 일부로 저장되지 않으며, 이 값의 변경은 씬이 변경된 것으로 표시되지 않습니다.

기술적 세부 사항 (Technical Details)

자동 레이아웃 시스템에는 내장된 컴포넌트들이 있지만, 새로운 컴포넌트를 만들어 사용자 정의 방식으로 레이아웃을 제어하는 것도 가능합니다. 이는 자동 레이아웃 시스템이 인식하는 특정 인터페이스를 컴포넌트가 구현하도록 함으로써 이루어집니다.

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

ILayoutElement 인터페이스를 구현하는 컴포넌트 특징:

• 자동 레이아웃 시스템에 의해 레이아웃 요소로 취급됩니다.

• 자식들의 Rect Transform을 제어하도록 기대됩니다.

• 자신의 RectTransform을 제어하도록 기대됩니다.

레이아웃 계산 (Layout Calculations)

자동 레이아웃 시스템은 다음 순서로 레이아웃을 평가하고 실행합니다:

1. ILayoutElement 컴포넌트의 CalculateLayoutInputHorizontal을 호출하여 레이아웃 요소의 최소, 선호, 유연 너비가 계산됩니다. 이는 하위-상위(bottom-up) 순서로 수행되는데, 부모가 자식의 정보를 계산에 고려할 수 있도록 자식이 먼저 계산됩니다.

2. ILayoutController 컴포넌트의 SetLayoutHorizontal을 호출하여 레이아웃 요소의 유효 너비가 계산되고 설정됩니다. 이는 상위-하위(top-down) 순서로 수행되는데, 자식 너비 할당은 부모의 사용 가능한 전체 너비를 기반으로 해야 하므로 부모가 먼저 계산됩니다. 이 단계가 끝나면 레이아웃 요소의 Rect Transform은 새로운 너비를 갖게 됩니다.

3. ILayoutElement 컴포넌트의 CalculateLayoutInputVertical을 호출하여 레이아웃 요소의 최소, 선호, 유연 높이가 계산됩니다. 이는 다시 하위-상위 순서로 수행됩니다.

4. ILayoutController 컴포넌트의 SetLayoutVertical을 호출하여 레이아웃 요소의 유효 높이가 계산되고 설정됩니다. 이는 다시 상위-하위 순서로 수행됩니다.

위 과정을 통해 알 수 있듯이, 자동 레이아웃 시스템은 너비를 먼저 평가한 다음 높이를 평가합니다. 따라서 계산된 높이는 너비에 의존할 수 있지만, 계산된 너비는 절대 높이에 의존할 수 없습니다.

레이아웃 재구축(Layout Rebuild) 트리거하기

컴포넌트의 속성이 변경되어 현재 레이아웃이 더 이상 유효하지 않게 되면, 레이아웃을 다시 계산해야 합니다. 이는 다음 호출을 사용하여 트리거할 수 있습니다:

LayoutRebuilder.MarkLayoutForRebuild(transform as RectTransform);

재구축은 즉시 발생하지 않고, 현재 프레임이 끝나는 시점, 즉 렌더링 직전에 발생합니다. 즉시 발생하지 않는 이유는 같은 프레임 내에서 레이아웃이 여러 번 재구축될 수 있어 성능에 좋지 않기 때문입니다.

재구축을 트리거해야 하는 시점에 대한 가이드라인은 다음과 같습니다:

레이아웃을 변경할 수 있는 속성의 setter에서.

다음 콜백 함수들에서:

• OnEnable

• OnDisable

• OnRectTransformDimensionsChange

• OnValidate (에디터에서만 필요, 런타임에는 불필요)

• OnDidApplyAnimationProperties