게임 UI 해상도 대응 | 좌표 이해하기 | 유니티 UI
유니티 UI 좌표에 대해 살펴보겠습니다.
유연하고 오류 없는 게임 UI 해상도 대응을 계획하고 구현하기 위해 기본이 되는 매우 중요한 내용입니다. 뿐만 아니라, 수많은 UI를 효율적으로 제작하기 위해 UI 디자인 규칙을 확장하거나 기존의 UI를 재활용하는 데 있어서도 중요한 내용이므로 잘 이해하고 숙지해 두는 것이 좋습니다.
절대 좌표와 상대 좌표
0과 1
비율(%)로 이해하기
부모(parent)와 자식(child) 관계
기준 설정 - 앵커(Anchor)와 피벗(Pivot)
부모 - 자식 관계로 절대 위치와 크기 살펴보기
부모 - 자식 관계로 상대적인 위치와 크기 살펴보기
1. 절대 좌표와 상대 좌표
(x: 123, y: 456), (width: 300, height: 500) 처럼 정확한 값으로 위치나 크기를 표현하는 좌표를 '절대 좌표'라고 합니다.
절대 좌표는 값이 변하지 않는 '고정 값'입니다. 게임 UI에서 절대 좌표만을 사용한다면 다양한 해상도에 따라 UI 레이아웃을 자동으로 조정해 주는 해상도 대응을 설정할 수 없습니다.
'상대 좌표'는 절대 좌표의 반대 개념입니다. '특정한 기준'을 정해놓고, 그 기준에 따라 위치나 크기를 표현하는 좌표입니다. 수많은 모바일 디바이스의 해상도 크기처럼 '변할 수 있는 값' 즉, '가변 값'이 기준이 됩니다. 변할 수 있는 값을 기준으로 좌표를 설정하니 이 좌표 또한 유연하게 변할 수 있습니다.
2. 0과 1
유니티 UI 에서 상대 좌표는 다음와 같이 표현됩니다.
가로 좌표(x)는 왼쪽이 시작점이고 오른쪽이 끝점입니다. 왼쪽 시작점은 0, 오른쪽 끝점은 1 입니다.
세로 좌표(y)는 아래쪽이 시작점이고 위쪽이 끝점입니다. 아래쪽 시작점은 0, 위쪽 끝점은 1 입니다.
따라서 특정 영역의 중간 지점은 (x: 0.5, y: 0.5)가 됩니다.
시작점 0과 끝점 1은 '특정한 기준'의 시작점과 끝점을 의미합니다.
3. 비율(%)로 이해하기
0과 1은 숫자 자체로 이해하기보다는 비율(%)로 이해하는 것이 좋습니다.
따라서 시작 지점은 0은 0%이고, 끝 지점은 1은 100% 입니다.
가로 1280, 세로 720 (px) 크기의 영역이 있다고 가정해 보겠습니다.
그러면 x좌표 0.5 위치를 픽셀로 계산하면 1280(px)의 50%위치(절반 위치)인 (x: 640) 입니다.
y좌표 0.5 위치는 720(px)의 50%위치인 (y: 360) 입니다.
시작점 0%와 끝점 100%은 '특정한 기준'의 시작점과 끝점을 의미합니다.
4. 부모(parent)와 자식(child) 관계
앞서 언급한 '특정한 기준'은 보통 부모 오브젝트입니다.
UI를 이루는 개체들은 적절히 계층구조(hierachy)를 이루며 구성됩니다.
윈도우 탐색기의 폴더 구조를 떠올려 보면 이해가 쉽습니다.
포토샵에서 디자인 작업을 할 때 레이어를 정리하는 방식과도 같습니다.
부모-자식 관계는 쉽게 말해 소속 관계입니다. 자식 오브젝트는 부모 오브젝트에 소속되며 부모 오브젝트의 좌표를 기준으로 자신의 좌표 0과 1, 0%와 100%를 설정합니다.
자식 오브젝트는 부모 오브젝트로부터 영향을 받는 소속 관계입니다. 따라서 좌표를 독립적으로 설정할 수 없고 반드시 부모를 기준으로 설정됩니다. 또한 부모 오브젝트 또한 부모를 가질 수 있고, 부모의 부모 즉, 조부모 또한 부모(증조부모) 오브젝트를 가질 수 있습니다. 이처럼 부모 - 자식 관계는 끝없이 이어질 수 있는 구조입니다.
5. 기준 설정 - 앵커(Anchor)와 피벗(Pivot)
(1) 앵커(Anchor)
앵커 값으로 부모 오브젝트의 기준을 정합니다. Anchor는 항구에 배를 정박해 놓을 때 사용하는 '닻'을 의미합니다. 중력(끌어 당기는 힘)이 작용하는 지점을 설정하는 것으로 이해하면 됩니다. X좌표 앵커 값을 (Min: 0, Max: 0)으로 설정하면 가로 좌표의 시작점 위치(왼쪽)에서 끌어당기는 힘이 작용합니다. X좌표 앵커 값을 (Min:1, Max:1)으로 설정하면 가로 좌표의 끝점 위치(오른쪽)에서 끌어당기는 힘이 작용합니다.
(Min: 0, Max: 1)로 설정하면 시작점(왼쪽)과 끝점(오른쪽)에서 동시에 끌어당기는 힘이 작용하게 되어 물리적으로 부모 오브젝트의 크기가 어떻게 변화하든 자식 오브젝트(자기 자신)는 정확히 부모 오브젝트의 시작점(0%)와 끝점(100%)를 따라가게 됩니다.
(2) 피벗(Pivot)
피벗 값으로 자기 자신 오브젝트(현재 선택된 오브젝트)의 기준을 정합니다. 피벗 값 x를 0으로 설정하면 자기 자신 오브젝트의 시작점(왼쪽)을 기준으로 크기나 위치가 정해집니다. 1로 설정한다면 끝점(오른쪽)을 기준으로 작용합니다.
6. 부모 - 자식 관계로 절대 위치와 크기 살펴보기
다음과 같이 가로 길이 500 픽셀, 높이 500 픽셀 크기의 부모 오브젝트가 있다고 가정해 보겠습니다.
그리고 부모 오브젝트의 기준점인 앵커는 오른쪽 아래의 지점 (1, 0)으로 설정되어 있습니다.
여기에 가로 길이 250픽셀, 높이 250픽셀 크기의 오브젝트를 자식으로 배치합니다.
중심점은 왼쪽 하단 (0, 0)으로 설정되어 되어 있습니다.
자식의 위치와 크기를 좌표로 표현하면 다음과 같습니다.
자기 자신 오브젝트의 가로 위치(Position X)가 (Pos X : -250) 으로 표시된 것을 볼 수 있습니다. 부모의 기준점 (Anchor X : 1 맨 오른쪽)을 기준으로 -250 픽셀만큼 떨어진 곳에 자기 자신(자식)의 기준점 (Pivot X : 0 맨 왼쪽)이 위치한다고 표현된 것입니다.
자기 자신 오브젝트의 세로 위치 (Position Y)는 (Pos Y : 0) 입니다. 부모의 기준점(Anchor Y : 0)과 자식의 기준점(Pivot Y : 0)이 같고 동일한 위치에 있기 때문에 (Pos Y : 0) 으로 표시되었습니다. 부모의 기준점 (Anchor Y : 0 맨 아래쪽)을 기준으로 동일한 위치에 (0 픽셀만큼 떨어진 곳에) 자기 자신(자식)의 기준점 (Pivot Y : 0 맨 아래쪽)이 위치한다고 표현된 것입니다.
피벗(Pivot)과 앵커(Anchor) 값을 다양하게 바꾸어 보면서 테스트해 보시기 바랍니다.
7. 부모 - 자식 관계로 상대적인 위치와 크기 살펴보기
이어서 상대적인 위치와 크기를 설정하는 방법도 살펴보겠습니다.
앵커 (Anchor) 설정값을 다시 한번 확인하겠습니다.
현재 앵커 값은 X 좌표 맨 오른쪽 지점, Y 좌표 맨 아래쪽 지점을 기준으로 X, Y 좌표 모두 하나의 점을 기준으로 하고 있지만, 앵커 값은 최소, 최대값(Min, Max)을 설정하여 부모를 기준으로 하는 가변 값을 설정할 수 있습니다. 즉, Anchor X, Y의 최소값(Min)을 0으로, 최대값(Max)을 1로 설정하면 부모의 가로길이 맨 왼쪽부터 맨 오른쪽(가로 0% ~ 100%), 세로 길이 맨 아래쪽부터 맨 위쪽(세로 0% ~ 100%)까지를 기준으로 삼게 됩니다.
이는 부모 크기 자체를 기준으로 삼는다는 의미입니다.
앵커 값을 Min : 0, Max : 1로 설정하여 부모 크기 자체를 기준으로 삼으면, Rect Transform의 인터페이스가 다음과 같이 바뀝니다.
하나의 점을 기준으로 삼으면 절대 위치인 Pos X, Pos Y와 절대 크기 Width, Height를 설정할 수 있고, 부모 오브젝트의 크기 자체를 기준으로 삼으면 부모 오브젝트의 4개의 꼭짓점을 기준으로 하기 때문에 상대적인 위치와 크기 Left, Right, Top, Bottom 값을 설정할 수 있습니다. Left는 부모를 기준으로 맨 왼쪽 지점에서 얼마만큼 떨어져 있는지 설정합니다. Right는 맨 오른쪽 지점, Top은 맨 위, Bottom은 맨 아래 지점을 기준으로 합니다.
따라서 부모 오브젝트의 크기가 변화하면 자식 오브젝트의 크기도 자동적으로 조정됩니다. 이것이 해상도 대응의 기본 원리입니다. 앞서 언급했던 것처럼 0, 1 값을 비율(%)로 이해하면 자기 자신 오브젝트의 크기 또한 부모를 기준으로 특정한 비율로 설정해 변화시킬 수도 있습니다. 스크린 사이즈(부모 오브젝트)가 변화하더라도 설정한 비율을 유지하며 자동 조정할 수 있습니다.
부모 오브젝트 크기가 width: 1000, height: 1000 이고, Left: 10, Right: 10, Top: 10, Bottom: 10 으로 설정했다고 가정하면, 자기 자신(자식) 오브젝트의 크기는 왼쪽, 오른쪽, 위, 아래에서 10픽셀씩 영역 안쪽으로 줄어든 크기인 width: 980, height: 980 입니다. 그리고 부모의 크기를 임의로 width: 800, height: 800 으로 줄인다면, 자식의 크기는 width: 780, height: 780 으로 자동 조정됩니다.
각각의 수치를 변경해 보면서 테스트해 보시기 바랍니다.
