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

유니티에서 모바일 게임을 개발할 때 기기별 해상도 대응은 반드시 고려해야 할 중요사항입니다. 그렇지 않을 경우 작업하던 화면 비율이 아닌 모바일 환경에서 UI가 찌그러지거나 어색하게 배치될 수 있습니다. 이는 사용자가 앱을 이용 시에 사용자가 불편함을 느끼거나 심한 경우 버튼을 누르지 못하게 될 수 있습니다.

모바일 UI 해상도 대응을 위한 Canvas 초기 세팅

유니티에서 UI는 반드시 Canvas의 자식이어야 합니다. 따라서 모든 UI는 Canvas 안에 있게 됩니다. 유니티에서 어떤 UI를 만들든지 Canvas 게임 오브젝트는 자동으로 부모로 생성됩니다. 따로 Canvas만 생성할 수도 있습니다. 이때 Canvas에 Canvas Scaler 컴포넌트가 자동으로 생성되는데 이 컴포넌트는 해당 Canvas 안에 있는 모든 UI 요소의 전체적인 크기와 픽셀 밀도를 제어합니다. 기본값으로 UI Scale Mode는 Constant Pixel Size가 되어 있습니다. 필요에 따라서 고정된 픽셀값으로 무언가를 보여 주어야 할 경우 해당 옵션을 사용할 수도 있을 것입니다. 하지만 모바일 환경에서는 화면 크기와 관계없이 UI의 위치를 특정 위치에 고정하고 싶은 상황이 많습니다.

 

기본 Canvas Scaler 컴포넌트

Constant Pixel Size의 경우 화면 크기에 따라 UI가 잘릴 수 있다.

예를 들어 음량을 조절하는 설정 버튼을 우측 상단에 위치시키고 싶은 상황이 있습니다. 이런 경우 Constant Pixel Size가 아닌 Scale With Screen Size 옵션을 사용하는 것이 좋습니다. 이 경우 UI는 Reference Resolution에서 정한 값을 기준으로 실제 화면 해상도에 따라서 확대 또는 축소됩니다. 화면 종횡비가 맞지 않을 경우에 어떻게 대응할지 Screen Match Mode에서 설정할 수 있습니다. 즉, 개발자는 고정된 레퍼런스 해상도를 기준으로 UI 작업을 진행하게 되며, 해상도 변화에 따라서 실제 화면이 어떻게 달라지는지 Game 화면에서 확인하면 됩니다.

 

Canvas Scaler를 Scale With Screen Size로 설정하자.

Scale With Screen Size의 경우 실제 화면 해상도에 따라 축소 혹은 확대된다.

아쉽지만 이것이 모든 UI 해상도 대응을 "마법"처럼 해주는 것은 아닙니다. 실제로 UI 작업을 5분만 해보면 "마법"이라는 것이 일어나지 않는다는 것을 알 수 있습니다. 아래와 같이 2960x1440 Portrait에서 1번 버튼은 "적당히" 오른쪽 위에, 2번 버튼은 정중앙에, 나머지는 "적당히" 아래쪽에 고르게 분포하는 UI 기획이 있다고 가정해봅시다. Scale With Screen Size 옵션만으로는 버튼이 화면 밖으로 나가는 현상이 발생할 것입니다. 이제 가로 모드를 지원하는 기획이 나왔다고 상상해보고 아래와 같이 화면을 가로로 바꾸어 보았습니다. 끔찍하네요.

 

유니티에서 2D UI 레이아웃의 핵심 Rect Transfrom

유니티에서 Rect Transform은 2D UI 레이아웃의 전부라고 말해도 과하지 않다고 생각합니다. Rect Transform을 이해해야만 위와 같은 문제를 해결하면서 해상도 대응이 되는 UI 레이아웃을 설계할 수 있습니다. Rect Transform의 이해를 위해 1번 버튼(Button1)의 Rect Transform을 아래와 같이 설정해봅시다. Rect Transform은 해당 게임 오브젝트의 부모가 기준이 되며 현재 예시에서 1번 버튼의 부모는 Canvas로 주황색 화면 전체에 해당합니다.

 

 

Anchors는 왼쪽 아래 모서리를 좌표(0, 0), 오른쪽 위 모서리를 좌표(1, 1)로 했을 때의 흰색 삼각형의 좌푯값입니다. 이 값은 화면 비율이 바뀌더라도 고정이 되어 화면 모서리로부터 고정된 비율로부터 앵커의 위치를 잡아줍니다. 현재 Min(0.6, 0.8), Max(0.9, 0.97)입니다. Left, Top, Right, Bottom은 이 앵커가 만드는 사각형으로부터 떨어진 길이의 고정값입니다. 현재 각각 Left 80, Top 90, Right 100, Bottom 110 값을 가지고 있습니다. 만약 Left, Top, Right, Right, Bottom이 아니라 PosX, PosY, Width, Height가 있다면 앵커를 씬에서 직접 드래그로 이동시키거나 인스팩터에서 Anchors 값을 직접 변경하면 됩니다.

 

앵커는 부모 사각형의 가로 길이와 세로 길이에 대한 비율로부터 정의되는 좌표입니다. 예를 들어 4개의 작은 흰 삼각형 중 (0.6, 0.8) 앵커는 좌측하단 모서리를 기준(0, 0)으로 하여 부모 가로 길이의 60%, 부모 세로 길이의 80%에 위치한다는 뜻입니다. 그리고 앵커들로 만들어진 사각형으로부터 떨어진 거리 정보 Left, Top, Right, Bottom로부터 실제 사각형의 크기가 결정되게 됩니다.

 

Rect Transform

이 Rect Transform을 가진 1번 버튼이 500x500 화면에서 어떻게 바뀌는지 아래 사진에서 확인해보겠습니다. Rect Transform을 적절하게 설정하지 못한 3, 4, 5버튼은 화면 안에서 보이지도 않습니다. 하지만 Rect Transform을 잘 설정한 1번 버튼의 경우 흰색 삼각형 4개 Anchors와 Left, Right, Top, Bottom의 값이 고정된 상태이기에 화면 비율이 바뀌어도 1번 버튼의 위치가 원하는 곳에 위치하고 있습니다.

 

500x500에서 버튼 1의 위치를 주목하자.

 

지금까지 모바일 환경에서 UI 레이아웃을 위한 초기 세팅과  Rect Transform에 대해서 알아보았습니다. 하지만 아직 해결되지 않은 문제들이 있습니다. 기획에 따라 UI의 크기를 고정시킨 상태에서 레이아웃을 구성하고 싶을 수 있습니다. 그 경우 위 1번 버튼 Rect Transform 예시와는 맞지 않습니다. 이를 해결하기 위해 Rect Transform에서 Left, Right, Bottom, Top 대신 PosX, PosY, Width, Height 값을 사용해서 크기를 고정해서 UI 레이아웃을 구성하는 방법이 있습니다. 이에 대해서는 다음 글에서 다루어보도록 하겠습니다.