[유니티 활용] UI 편 - 자동 레이아웃

오늘은 유니티에서 제공하는 Layout 컴포넌트를 이용해 자동 레이아웃을 만드는 방법에 대해 알아보도록 하겠습니다. 

자동 레이아웃이란 화면의 비율에 상관없이 설정한 값에 따라 UI 의 영역이나 크기가 자동으로 조절되는 것을 의미합니다. 

 

▶ 문제점

다양한 화면에 대응하지 못하는 UI 디자인

1920x1080 의 크기에 맞춰 만든 UI 샘플입니다. 해상도를 2160x1080 이나 2560x1440 로 변경하면 UI 가 의도한 것과 다르게 출력되는 것을 볼 수 있습니다. 이렇게 나오는 이유는 3장의 Image 객체에 대한 RectTransform 값을 1920x1080 의 크기에 맞춰 고정 크기로 설정했기 때문입니다. 

 

▶ Vertical Layout Group 과 Layout Element

유니티는 위와 같은 문제를 해결하기 위해 Layout 관 관련된 여러 컴포넌트를 제공합니다. 그 중 Vertical Layout Group 과 Layout Element 를 사용하여 위의 문제를 해결해 보도록 하겠습니다.

 

* 아래의 작업은 빈 프로젝트에서 진행합니다. 플랫폼은 Android 이고 Resolution 은 1920x1080 portrait 입니다.

 

1. UI 작업을 위해 Hierarchy 창에서 [마우스 우클릭 → UI → Canvas] 로 새로운 Canvas 객체를 생성합니다.
2. Canvas 객체를 선택하고 [마우스 우클릭 → Create Empty] 로 빈 객체를 생성하고 이름을 AutoLayout 으로 변경합니다.
3. AutoLayout 을 선택하고 Inspector 창에서 [Add Component → Layout → Vertical Layout Group] 을 선택해 Vertical Layout Group 컴포넌트를 추가합니다.
4. AutoLayout 객체의 Inspector 창이 다음과 같아 지도록 설정해 줍니다.

AutoLayout 객체의 Inspector

 

위의 설정에서 Vertical Layout Group 컴포넌트에 있는 Control Child Size 속성은 자식 객체로 추가되는 객체의 Width / Height 크기를 이 컴포넌트가 직접 제어한다는 의미입니다.

 

이제 AutoLayout 객체의 자식 객체로 다음과 같이 Image 객체를 만들어 주세요.

1. AutoLayout 객체를 선택하고 [마우스 우클릭 → UI → Image] 를 선택합니다.
2. 생성된 Image 객체를 선택하고 Inspector 창에서 [Add Component → Layout → Layout Element] 를 선택합니다.
3. 다시 1 에서 생성한 Image 객체를 선택한 다음 CTRL+D 를 두 번 눌러 2개 더 복사해 줍니다.
4. 생성된 3개의 Image 객체를 위에서 부터 Top, Middle, Bottom 으로 이름을 변경합니다.

* Image 객체로 만드는 이유는 분할되는 영역을 눈으로 확인하기 좋기 때문입니다.

 

여기까지 진행하면 다음과 같은 결과가 보일 것입니다.

 

Game 창을 보면 자동으로 Top, Middle, Bottm 객체가 가로 (Vertical) 로 전체 화면을 3등분하여 분할되어 있습니다. 중간에 구분 영역이 보이는 이유는 AutoLayout 객체에 있는 Vertical Layout Group 컴포넌트의 Spacing 속성을 10 으로 주었기 때문입니다.

 

다음으로 각 Top, Middle, Bottom 객체가 차지할 영역을 설정합니다.

1. Top 객체를 선택하고 Inspector 창에서 Layout Element 컴포넌트의 Flexible Height 를 체크한 후 값을 1로 설정합니다.
2. Middle 객체를 선택하고 Fleixble Height를 체크한 후 값을 8로 설정합니다.
3. Bottom 은 Top 과 동일하게 설정합니다.

* Flexible Height 는 Vertical Layout Group 컴포넌트를 포함한 객체 (AutoLayout) 를 같은 부모로 갖는 객체들 (Top, Middle, Bottom) 의 세로 크기 비율을 설정해 주는 것입니다.

 

1:8:1 로 영역 배분된 Top, Middle, Height

 

위와 같이 설정하면 Top : Middle : Bottom = 1 : 8 : 1 로 영역이 배분됩니다. Resolution을 2160x1080, 2560x1440 등 다른 크기로 변경해도 항상 이와 같은 비율의 영역이 유지됩니다. 글의 도입부에 말씀드린 문제가 해결되었습니다. 

 

▶ Horizontal Layout Group

추가로 Middle 영역을 가로로 3분할해보도록 하겠습니다.

 

Middle 객체에 다음의 사항을 적용합니다.

1. Inspector 창에서 [Add Component → Layout → Horizontal Layout Group] 을 선택합니다. Spacing = 10, Control Child Size 의 Width, Height 를 체크합니다.
2. Image 컴포넌트를 비활성화 합니다.
3. 자식 객체로 Layout Element 컴포넌트를 포함하는 3개의 Image 객체를 생성합니다.
4. 각 객체의 이름을 Left, Center, Right 로 변경합니다.
5. Center 객체의 Layout Element 컴포넌트의 Flexible Width 의 값을 5로 설정하고 Left, Right 는 1로 설정합니다.

 

지금까지 Vertical Layout Group, Horizontal Layout Group 과 Layout Element 를 이용해 자동 레이아웃을 구성하는 방법에 대해 알아보았습니다. 이 외에도 더 다양한 Layout 관련 컴포넌트들이 있지만 이 3가지 만으로도 다양한 해상도를 어느정도 커버할 수 있는 자동 레이아웃을 만들 수 있습니다.

 

▶ 요약

1. Canvas 에 빈 객체 생성 후 Vertical Layout Group (혹은 Horizontal Layout Group) 추가

2. 1 번의 자식 객체 생성 후 Layout Element 추가

3. Layout Element 의 Flexible Height (혹은 Flexible Width) 로 영역 배분