[Unity] UI #02 Layout
레이아웃(Layout)
레이아웃은 컴퓨터 그래픽 디자인이나 소프트웨어 디자인에서 각 구성요소를 제한된 공간 안에 효과적으로 배열하는 일을 의미한다.
기본 레이아웃
사각 영역 툴(Rect Tool)
모든 UI 요소는 레이아웃을 구성하기 위해 사각형으로 표현된다.
사각 영역 툴은 UI 요소를 이동, 크기 조절, 회전에 사용할 수 있다.
사각 트랜스폼(Rect Transform)
모든 UI 요소는 Transform 컴포넌트 대신 Rect Transform 컴포넌트를 가진다.
Rect Transform은 일반 Transform처럼 포지션, 회전, 스케일도 있고, 사각영역의 크기를 지정하는 너비와 높이도 있다.
프로퍼티
| 프로퍼티 | 기능 |
|---|---|
| Pos (X, Y, Z) | 앵커를 기준으로 한 사각형의 피벗 포인트 포지션 피벗 포인트 주변으로 사각형이 회전 |
| Width/Height | 사각 영역의 너비와 높이 |
| Left, Top, Right, Bottom | 앵커를 기준으로 한 사각형 모서리의 상대적인 포지션 |
| Anchors | 사각 영역 왼쪽 하단 모서리와 오른쪽 상단 모서리의 앵커 포인트 |
| Min | 사각형 왼쪽 하단 모서리의 앵커 포인트 0,0은 상위 사각 영역 왼쪽 하단, 1,1은 상위 사각 영역 오른쪽 상단 |
| Max | 사각형 오른쪽 상단 모서리의 앵커 포인트 0,0은 상위 사각 영역 왼쪽 하단, 1,1은 상위 사각 영역 오른쪽 상단 |
| Pivot | 피벗 포인트 주위로 사각 영역이 회전 |
| Rotation | X, Y, Z 축을 따라 피벗 포인트를 중심으로 회전하는 회전각 도 |
| Scale | X, Y, Z 차원에서 오브젝트에 적용되는 스케일 팩터 |
리사이징 vs 스케일링(Resizing vs Scaling)
오브젝트의 크기를 변경하기 위해서는 보통 Transform의 localScale을 변경하게 된다.
하지만 RectTransform의 오브젝트는 sizeDelta를 통해서 사각영역의 너비와 높이를 변경하여 크기를 변경한다.
public RectTransform rect;
rect.sizeDelta = new Vector2(500, 500);
rect.sizeDelta = rect.sizeDelta * 0.9f;
피벗(Pivot)
회전, 크기, 스케일 수정은 피벗을 중심으로 일어난다.
위 그림의 파란색 도넛 모양이 피벗의 위치이다.
앵커(Anchor)
RectTransform의 부모 또한 RectTransform인 경우, 자식 RectTransform은 여러 방식으로 부모 RectTransform에 통해 고정될 수 있다.
자식은 부모의 네 모서리에 앵커를 통해 고정될 수 있다.
자동 레이아웃
자동 레이아웃 시스템을 사용하면 수평 그룹, 수직 그룹, 격자 무늬 등의 중첩 레이아웃 그룹을 통해 요소를 배치할 수 있다.
요소가 포함된 콘텐츠에 맞도록 요소 크기를 자동으로 조정할 수 있다.
자동 레이아웃 시스템은 레이아웃 요소와 레이아웃 컨트롤러라는 개념을 기반으로 한다.
레이아웃 요소(Layout Elements)
-
자기 자신을 정의하는 프로퍼티
-
최소 너비 (Min Width)
-
최소 높이 (Min Hegiht)
-
선호 너비 (Preferred Width)
-
선호 높이 (Preferred Height)
-
가변 너비 (Flexible Width)
-
가변 높이 (Flexible Height)
-
-
레이아웃 그룹의 레이아웃 요소 크기가 정해지는 기본 원리
-
최소 크기 할당
-
충분히 사용 가능한 공간이 있으면 선호 크기 할당
-
추가 사용 가능한 공간이 있으면 가변 크기가 할당
-
Layout Element 컴포넌트
최소, 선호, 가변 크기를 오버라이드하고 싶다면 게임 오브젝트에 Layout Element 컴포넌트를 추가한다.
레이아웃 컨트롤러(Layout Controllers)
레이아웃 컨트롤러는 크기, 경우에 따라 하나 이상의 레이아웃 요소의 포지션을 제어하는 컴포넌트이다.
자신의 레이아웃 요소를 제어할 수도 있고, 하위 레이아웃 요소를 제어할 수도 있다.
레이아웃 컨트롤러로 기능하는 컴포넌트는 동시에 레이아웃 요소로서 기능할 수도 있다.
콘텐츠 크기 피터(Content Size Fitter)
| 프로퍼티 | 기능 |
|---|---|
| Horizontal / Vertical Fit | 너비 / 높이 제어 방법이다 |
| - Unconstrained | 레이아웃 요소에 기반하여 너비를 조정하지 않는다. |
| - MinSize | 레이아웃 요소의 최소 너비에 기반하여 너비를 조정한다. |
| - Preferred Size | 레이아웃 요소의 기본 너비에 기반하여 너비를 조정한다. |
콘텐츠 크기 피터는 자체 레이아웃 요소의 크기를 제어하는 레이아웃 컨트롤러의 기능을 수행한다.
RectTrasform의 크기를 콘텐츠 크기 피터 등으로 조정하는 경우 피벗 중심으로 크기가 조정된다.
예를 들어 피벗이 중앙에 있는 경우 모든 방향으로 균등하게 확장하고, 왼쪽 상단에 있는 경우 오른쪽 아래 방향으로 확장된다.
종횡비 피터(Aspect Ratio Fitter)
| 프로퍼티 | 기능 |
|---|---|
| Aspect Mode | 사각형의 크기를 조정하여 종횡비를 적용하는 방법 |
| - None | 사각형을 종횡비에 맞추지 않는다. |
| - Width Controls Height | 높이가 너비에 따라 자동으로 조정된다. |
| - Height Controls Width | 너비가 높이에 따라 자동으로 조정된다. |
| - Fit In Parent | 종횡비를 유지하면서 사각형이 부모 사각형 안에 들어가도록 너비, 높이, 포지션 및 앵커를 자동으로 조정합니다. 부모 사각형 안에 이 사각형이 덮지 않는 공간이 있을 수 있다. |
| - Envelope Parent | 종횡비를 유지하면서 사각형이 부모의 전체 영역를 덮도록 너비, 높이, 포지션 및 앵커를 자동으로 조정합니다. 이 사각형은 부모 사각형 밖으로 나올 수 있다. |
| Aspect Ratio | 적용할 종횡비입니다. 너비를 높이로 나눈 값이다. |
종횡비 피터는 자체 레이아웃 요소의 크기를 조절하는 레이아웃 컨트롤러 역할을 한다.
너비에 맞게 높이를 조정하거나, 반대로 높이에 맞게 너비를 조정할 수도 있으며, 또는 부모 안에 맞추어 들어가게 할 수도 있고 부모를 완전히 감싸도록 할 수도 있다.
종횡비 피터는 최소 크기 및 선호 크기와 같은 레이아웃 정보를 고려하지 않는다.
RectTrasform의 크기를 콘텐츠 크기 피터 등으로 조정하는 경우 피벗 중심으로 크기가 조정된다.
수평 레이아웃 그룹(Horizontal Layout Group)
| 프로퍼티 | 기능 |
|---|---|
| Padding | 레이아웃 그룹 에지의 패딩이다. |
| Spacing | 레이아웃 요소 간의 간격이다. |
| Child Alignment | 사용 가능한 공간을 모두 채우지 않을 경우 자식 레이아웃 요소에 사용할 얼라인먼트이다. |
| Control Child Size | 레이아웃 그룹이 자식 레이아웃 요소의 너비와 높이를 제어할지 여부를 결정한다. |
| Use Child Scale | 요소의 크기를 지정하거나 요소를 배치할 때 레이아웃 그룹이 해당 자식 레이아웃 요소의 스케일을 고려할지 여부를 결정합니다. Width 및 Height는 각 자식 레이아웃 요소의 RectTransform 컴포넌트에 있는 Scale > X 및 Scale > Y 값에 해당한다. |
| Child Force Expand | 추가로 사용할 수 있는 공간을 채우기 위해 자식 레이아웃 요소를 강제로 확장할지 여부를 결정한다. |
수평 레이아웃 그룹은 하위 레이아웃 요소를 바로 옆에 서로 붙여 놓는다. 선호, 유연, 최소 너비에 맞추어 하위 레이아웃의 너비가 결정된다.
- 모든 하위 레이아웃 요소의 최소 너비와 그 사이의 간격을 전부 더한 값이 수평 레이아웃 그룹의 최소 너비이다.
- 모든 하위 레이아웃 요소의 선호 너비와 그 사이의 간격을 전부 더한 값이 수평 레이아웃 그룹의 선호 너비이다.
- 수평 레이아웃 그룹이 최소 너비를 가지거나 그보다 작을 경우 모든 하위 레이아웃 요소 역시 최소너비를 가진다.
- 수평 레이아웃 그룹이 선호 너비에 가까울수록 각 하위 요소가 선호 너비를 가진다.
- 수평 레이아웃 그룹이 선호 너비보다 더 넓은 경우 추가 가변 너비에 따라 하위 레이아웃 요소에 비례하여 여분의 사용 공간을 분배한다.
수직 레이아웃 그룹(Vertical Layout Group)
| 프로퍼티 | 기능 |
|---|---|
| Padding | 레이아웃 그룹 에지의 패딩이다. |
| Spacing | 레이아웃 요소 간의 간격이다. |
| Child Alignment | 사용 가능한 공간을 모두 채우지 않을 경우 자식 레이아웃 요소에 사용할 얼라인먼트이다. |
| Control Child Size | 레이아웃 그룹이 자식 레이아웃 요소의 너비와 높이를 제어할지 여부를 결정한다. |
| Use Child Scale | 요소의 크기를 지정하거나 요소를 배치할 때 레이아웃 그룹이 해당 자식 레이아웃 요소의 스케일을 고려할지 여부를 결정합니다. Width 및 Height는 각 자식 레이아웃 요소의 RectTransform 컴포넌트에 있는 Scale > X 및 Scale > Y 값에 해당한다. |
| Child Force Expand | 추가로 사용할 수 있는 공간을 채우기 위해 자식 레이아웃 요소를 강제로 확장할지 여부를 결정한다. |
수직 레이아웃 그룹은 하위 레이아웃 요소를 쌓는다. 선호, 유연, 최소 너비에 맞추어 하위 레이아웃의 높이가 결정된다.
- 모든 하위 레이아웃 요소의 최소 높이와 그 사이의 간격을 전부 더한 값이 수직 레이아웃 그룹의 최소 높이이다.
- 모든 하위 레이아웃 요소의 선호 높이와 그 사이의 간격을 전부 더한 값이 수직 레이아웃 그룹의 선호 높이이다.
- 수직 레이아웃 그룹이 최소 높이를 가지거나 그보다 작을 경우 모든 하위 레이아웃 요소 역시 최소높이를 가진다.
- 수직 레이아웃 그룹이 선호 높이에 가까울수록 각 하위 요소가 선호 높이를 가진다.
- 수직 레이아웃 그룹이 선호 높이보다 더 큰 경우 추가 가변 높이에 따라 하위 레이아웃 요소에 비례하여 여분의 사용 공간을 분배한다.
그리드 레이아웃 그룹(Grid Laytout Group)
| 프로퍼티 | 기능 |
|---|---|
| Padding | 레이아웃 그룹 에지의 패딩이다. |
| Cell Size | 그룹의 각 레이아웃 요소가 사용할 크기이다. |
| Spacing | 레이아웃 요소 간의 간격이다. |
| Start Corner | 첫 요소가 위치하는 코너의 위치다. |
| Start Axis | 요소를 따라 배치할 주축을 지정한다. 수평축으로 하면 새 행을 시작하기 이전 행을 전부 채우고, 수직축으로 하면 새 열을 시작하기 이전 열을 전부 채운다. |
| Child Alignment | 레이아웃 요소가 사용 가능한 공간을 전부 사용하지 않는 경우, 사용할 얼라인먼 방식이다. |
| Constraint | 자동 레이아웃 시스템을 지원하기 위해 격자 무늬의 행렬 수를 제한한다. |
다른 레이아웃 그룹과 다르게, 그리드 레이아웃 그룹은 포함하고 있는 레이아웃 요소의 최소, 선호, 가변 크기 프로퍼티를 무시하고 Cell Size 프로퍼티에서 정의된 대로 고정된 크기를 할당한다.