[Unity] 반응형 UI를 제작할 때 필요한 배경지식

Artiper

|2022. 8. 19. 20:40

1. Canvas Scaler component

캔버스 스케일러 컴포넌트는 canvas 내 UI 요소의 전체적인 스케일과 픽셀 밀도를 제어하는데 사용됩니다. 스케일은 글꼴 크기와 이미지 경계 등 캔버스 아래의 모든 요소에 영향을 미칩니다.

1.1 고정 픽셀 크기(Constant Pixel Size)

Constant Pixel Size 모드를 사용할 경우 UI 요소의 포지션과 크기가 화면에서 픽셀로 지정됩니다. 연결된 캔버스 스케일러가 없는 경우에도 이 모드가 캔버스의 디폴트 기능입니다. 하지만 캔버스 스케일러의 Scale Factor 설정을 사용하여 캔버스의 모든 UI 요소에 일정한 스케일을 적용할 수 있습니다.

1.2 화면 크기에 따른 스케일(Scale With Screen Size)

화면 크기에 따라 Scale With Screen Size 모드를 사용하여 지정된 레퍼런스 해상도의 픽셀 수에 따라 포지션과 크기를 지정할 수 있습니다. 현재 화면 해상도가 Reference resolution보다 큰 경우 캔버스의 해상도가 Reference resolution로 유지되지만 화면에 맞추어 더 크게 확대됩니다. 현재 화면 해상도가 Reference resolution보다 작은 경우 유사한 방법으로 화면에 맞추어 더 작게 축소됩니다.

현재 화면 해상도의 종횡비가 레퍼런스 해상도와 다른 경우 각 축을 개별적으로 화면에 맞게 스케일하면 균일하지 않게 스케일되는데, 그러면 일반적으로 바람직하지 않습니다. ReferenceResolution 컴포넌트를 대신 사용하면 캔버스 해상도가 화면의 종횡비에 맞추기 위해 레퍼런스 해상도와 달라집니다. Screen Match Mode 설정을 사용하여 이 해상도 차이가 결정되는 방법을 제어할 수 있습니다.

Screen Match Mode	현재 해상도의 종횡비가 레퍼런스 해상도에 맞지 않는 경우 캔버스 영역을 스케일하는 데 사용되는 모드입니다.
Match Width or Height	캔버스 영역의 너비 또는 높이를 레퍼런스로 사용하여 스케일하거나 그 사이로 스케일합니다.
Expand	캔버스 크기가 레퍼런스보다 더 작아지지 않도록 캔버스 영역을 수평 또는 수직으로 확장합니다.
Shrink	캔버스 크기가 레퍼런스보다 커지지 않도록 캔버스를 수평 또는 수직으로 자릅니다.
Match	스케일링 레퍼런스로 너비 또는 높이를 사용할지, 아니면 둘 사이의 배합을 사용할지 결정합니다.

Match width or height
해상도가 변할 경우 캔버스 영역의 Width 혹은 Height을 기준으로 하여 확대, 축소한다.
확대, 축소의 기준이 되는 축은 0에서 1사이의 값을 가지는 Match 속성에 따라 좌우되며, Match의 값이 0이면 UI의 가로폭이 모두 보이는 방향으로 UI크기를 조절하기 때문에 세로방향에 빈 공간이 생길 수 있다.
Expand
참조 해상도를 기준으로 캔버스의 UI 오브젝트가 모두 포함되도록 캔버스의 영역을 확장한다.
(캔버스의 크기가 기준 해상도보다 작아지지 않도록 확장한다.)
Shrink
참조 해상도를 기준으로 캔버스의 영역이 해상도를 벗어나지 않도록 수축시킨다. 따라서 일부 UI 오브젝트가 보이지 않게 될 수 있다.
(캔버스의 크기가 기준 해상도보다 커지지 않도록 잘라낸다.)

Match width or height같은 경우에는 빈 공간이 생길 수 있기 때문에 Match값을 주로 0.5에 놓고 사용합니다.

저는 Match width or heigth를 사용하고 Match값을 0.5로 주거나 Expand로 사용합니다.

1.3 고정 물리적 크기(Constant Physical Size)

Constant Physical Size 모드를 사용하면 UI 요소의 포지션과 크기가 밀리미터, 포인트 또는 피카 등의 물리적인 단위로 지정됩니다. 이 모드를 사용하려면 기기의 화면 DPI가 정확하게 보고되어야 합니다. 기기에서 DPI를 보고하지 않는 경우에 사용할 폴백 DPI를 지정할 수 있습니다.

2. Rect Transform

앵커 : UI가 부모오브젝트 내에서 기준이 되는 위치를 설정한다. (부모오브젝트는 캔버스가 될 수도, 빈 오브젝트가 될 수도 있다.)

피봇 : UI 요소의 내부 중에서 기준점이 될 위치로 사용된다. 이를 통해 크기, 회전 등이 영향을 받는다. 자신 내부의 (0, 0)을 어디에 위치시킬 것인가를 결정한다.

포지션 : 앵커에 따라 상대적인 위치로 표현됨 UI 요소의 좌표를 뜻함.

- Rect transfrom은 Rect를 가지고 있다.

2.1 앵커프리셋

앵커 프리셋을 눌러보면 인스펙터창에서 Anchors의 Min, Max값이 변하는 것을 확인할 수 있다. 이에 대해 밑에서 설명하겠다.

앵커 프리셋을 사용하는 방법은 4가지로 나뉜다.

그냥 좌클릭
- 앵커 위치만 바꾼다.
Alt + 좌클릭
- 앵커 위치와 함계 실제 UI의 요소의 위치도 그쪽으로 바뀐다.
- 즉, UI 요소의 원점 위치가 바뀜과 동시에 UI 요소도 앵커 위치로 이동.
Shift + 좌클릭
- 앵커 위치와 함께 UI 요소의 피봇도 그쪽으로 바뀐다.
Alt + shift + 좌클릭
- 앵커 + 피봇 + 실제 UI 요소의 위치를 옮김.

2.2 앵커의 Min, Max

앵커의 Min, Max는 앵커의 범위를 지정할 때 사용한다.

앵커의 UI를 움직여서 min, max값을 변경할 수 있다.

앵커의 x의 최소값을 0.2, x의 최대 값을 1.0으로 설정하면 가로(x)에서 사용할 수 있는 범위가 0.2 ~ 1.0으로 제한되는 것을 볼 수 있다. 그래서 위의 예시 사진에서 Canvas밑의 image 오브젝트는 저것이 최대크기이다.

(x는 0.2 ~ 1.0, y는 0.0 ~ 0.8을 범위로 사용함.)

2.2.1 Min == Max의 경우

절대값 모드로 동작한다고 한다. Min과 Max가 같은 경우에는 앵커의 각 포인트 4개 모두 붙어있는 것을 볼 수 있다.

이미지에서는 Min: x = 0, y =1, Max: x = 0, y = 1의 값을 가지고 있다. 즉, Anchor의 최소값과 최대값이 같은 상황이라 Anchor의 4개의 포인트 모두 붙어 있는 것을 볼 수 있는 것이다.

특징

이렇게 Min과 Max가 같은 경우에는 PosX, PosY, Width, Height를 사용하는 것을 확인할 수 있다. 이는 절대값 모드의 특징인데, 이 때문에 모든 값을 고정적으로 가지게 된다. 그래서 절대값 모드의 의미는 캔버스의 크기가 변하더라도 UI요소의 PosX, PosY, Width, Height값은 고정적으로 유지된다는 소리이다. 즉, UI요소의 위치와 크기가 유지된다.

그래서 캔버스의 크기가 바뀌어도 이미지의 크기와 위치는 고정되어 있기에 위 이미지와 같은 현상이 발생한다.

2.2.2 Min != Max의 경우

위 처럼 Min != Max인 경우에는 상대값 모드로 동작한다.

특징
상대값 모드에서는 PosX, Y와 같은 값 대신 Left, Right, Top, Bottom을 사용한다. 이 값들은 패딩의 역할을 하고, 패딩의 값은 고정적으로 유지된다. 패딩에 따라 캔버스 크기에 따라 크기와 위치가 상대적이므로 절대값으로 사용되는 PosX, PosY, Width, Height값은 의미가 없다. 그래서 RectTransform에서 사라진다.

패딩

패딩은 상대값 모드를 사용하는 경우에만 사용할 수 있다. UI요소가 캔버스 내에서 안쪽으로 밀려들어가 여백을 만드는 정도를 결정하는 것이 패딩이다. 그래서 모든 패딩의 값이 0이라면 min ~ max에 달하는 범위 전체를 UI 요소가 전부 채우게 된다.

그래서 stretch를 사용해보면 모든 패딩값은 0이며 앵커의 Min, Max가 Min != Max인 것을 확인할 수 있다.