[Unity] 모바일 해상도 대응을 위한 UI 레이아웃 (2)

지난 글에서는 유니티에서 모바일 해상도 대응을 할 때 UI 초기 세팅을 알아보았습니다. 그리고 UI 레이아웃의 핵심이 되는 Rect Transform에 대해서 알아보았습니다. 이번 글에서는 저번 글에서 해결하지 못한 문제, 고정된 크기의 UI가 실제 화면에서 적절한 곳에 있도록 하기 위한 Rect Transform에 대해 알아보겠습니다.

 

UI 레이아웃을 쉽게 : 앵커 프리셋

Rect Transform은 처음 보면 헷갈리는 방식으로 크기와 위치가 결정됩니다. 유니티에서는 자주 사용하는 anchor, pivot, position을 프리셋으로 지정해두어 그중 입맛에 맞게 골라 사용할 수 있습니다. 앵커 프리셋을 사용하면 해상도 대응이 가능한 UI 레이아웃을 매우 쉽게 구성할 수 있습니다.

Anchor Presets

Rect Transform에 그림 부분을 클릭하면 총 16가지 종류의 프리셋이 나타납니다. 이 프리셋을 클릭하면 앵커의 위치가 프리셋에 따라 변하게 됩니다. Shift 키를 누른 채로 클릭할 경우 pivot도 같이 변하며, Alt 키를 누른 채로 클릭할 경우 position도 변하게 됩니다. Shift와 Alt를 동시에 누른 채로 anchor, pivot, position 모두 변화시킬 수 있습니다.

아래와 같이 100x100 고정 크기의 버튼이 왼쪽 상단 모서리에서 32px만큼 떨어지게 만들어야 하는 UI 기획이 있다고 가정해보겠습니다.

의문의 UI 기획

그렇다면 우리는 아래와 같이 직관적으로 왼쪽 위 모서리에 있는 프리셋을 이용하면 됩니다. Anchor, pivot, position을 모두 left-top으로 설정하게 되면 크기를 고정(Width, Height)한 상태에서 좌표(PosX, PosY)만 설정하면 됩니다. 현재 게임 오브젝트(흰색 버튼)의 pivot을 왼쪽 위 모서리로 설정되어 있으므로 떨어져야 할 거리를 좌표 (100, -100)으로 두면 UI 기획대로 UI가 쉽게 완성됩니다.

다수의 UI를 균등한 간격으로 배치하는 방법

여러 UI를 같은 간격으로 배치해야 하는 상황이 많습니다. 유사한 기능을 가진 UI들 혹은 리스트 UI를 보기 좋게 배치할 때가 그렇습니다. 예를 들어 게임 인벤토리의 경우 동일한 간격으로 균등하게 배치되어야 합니다. 어떤 경우에는 균등하게 배치해야 하는 버튼 UI의 개수가 정해지지 않은 상태지만 개수에 따라서 자연스럽게 균등 간격을 가진 레이아웃을 만들어야 할 수도 있습니다. 이때 유니티에서 제공하는 레이아웃 그룹 컴포넌트를 사용할 수 있습니다.

일정한 간격으로  다수의 자식 UI를 배치시키는 컴포넌트 종류들

위 사진에서 아이콘뿐만 아니라 Grid, Horizontal, Vertical 이라는 영어 이름부터 직관적입니다. 이 컴포넌트를 부모에게 주면 가로, 세로 배치 혹은 격자 배치에 따라서 자식 오브젝트들이 배열됩니다. Buttons Panel에 4개의 흰 버튼이 있는 상황이라고 가정하겠습니다. Grid Layout Group을 예시로 들어보자면 내부에 각 UI의 크기(Cell Size), 자식 오브젝트들 사이 간격(Spacing), 자식 오브젝트들 정렬 방식(Child Alignment) 등을 변경하여 원하는 다수의 UI를 배치할 수 있습니다.

Hierarchy

하나의 화면에서만 UI를 작업한다면 큰 어려움이 없을 것입니다. 하지만 모바일 기기에는(모바일이 아니라고 하더라도) 다양한 해상도가 있으며 긍정적인 사용자 경험을 위해서는 좋은 UI 레이아웃은 매우 중요합니다. 팀의 규모가 조금만 커져도 팀에는 UI만 전문적으로 다루는 사람이 필요하게 됩니다. 그만큼 UI를 완벽하게 대응하는 것이 쉬운 것은 아니지만 어느 정도 UI를 잘 만들려면 알아야 할 기본적인 사항들을 알아보았습니다.