Canvas Scaler 는 가로와 세로 중 한쪽만 지킨다

시안은 1920 × 1080 한 장입니다. 게임이 도는 화면은 2400 × 1080 폰이기도 하고, 2048 × 1536 태블릿이기도 합니다.

차이가 두 가지입니다. 픽셀 수가 다르고, 비율이 다릅니다. 픽셀 수는 Unity 가 알아서 키우고 줄여 줍니다. 비율은 그렇게 되지 않습니다. 가로와 세로 중 어느 쪽을 지킬지 누군가 정해야 하고, 그 자리가 Canvas Scaler 입니다.

시안의 1 과 화면의 1 은 다르다

Canvas 에는 Canvas Scaler 가 같이 붙어 있습니다. 이 컴포넌트가 실제 화면 픽셀을 캔버스 단위 로 바꿔 줍니다.

기준 해상도를 1920 × 1080 으로 두고 3840 × 2160 화면에서 켜면 Canvas Scaler 가 배율 2 를 곱합니다. 캔버스 안에서는 여전히 1920 × 1080 이고, 너비 200 인 버튼은 실제로 400 픽셀로 그려집니다. 그래서 시안의 px 수치를 그대로 옮겨 적을 수 있습니다. RectTransform 의 Pos, Width, Left 같은 숫자가 전부 이 캔버스 단위입니다.

맨 위의 UI Scale Mode 는 셋 중에서 고릅니다.

이 글은 Scale With Screen Size 만 봅니다.

비율이 다르면 둘 다는 못 맞춘다

기준이 1920 × 1080 인데 화면이 2400 × 1080 이면 가로는 1.25 배, 세로는 1 배입니다. Canvas Scaler 는 UI 가 찌그러지지 않도록 가로와 세로에 같은 배율 하나 만 씁니다. 그러니 둘 중 하나는 어긋납니다.

Match 슬라이더가 어느 쪽을 지킬지 고릅니다. 0 이면 너비, 1 이면 높이입니다.

• 20:9 폰에서 Match 0 은 너비를 지킵니다. 배율 1.25 로 줄이니 캔버스가 1920 × 864 가 되어 세로가 216 모자랍니다. 위아래에 앵커를 둔 요소는 잘리지 않고 안쪽으로 몰려 겹치고, 가운데에 둔 큰 창은 위아래가 화면을 넘습니다
• 20:9 폰에서 Match 1 은 높이를 지킵니다. 캔버스가 2400 × 1080 이 되어 가로가 480 남습니다. 좌우에 앵커를 둔 버튼이 바깥으로 벌어집니다
• 4:3 태블릿은 반대입니다. Match 0 이면 세로가 360 남고, Match 1 이면 가로가 480 모자랍니다

남는 것은 괜찮고, 모자라는 것이 문제 입니다. 남는 공간은 앵커가 받아 주고 배경으로 채우면 되지만, 모자라면 요소끼리 겹칩니다. 가로로 긴 폰은 높이를 지키고, 가로가 짧은 태블릿은 너비를 지켜야 시안 영역이 전부 들어옵니다.

화면과 맞추는 방식을 바꿔 가며 보면, 남는 쪽과 모자라는 쪽이 UI 에 어떻게 드러나는지 보입니다.

Match 0.5 는 둘을 반씩 섞습니다. 정확히는 가로 배율과 세로 배율을 로그로 평균 내므로, 0.5 일 때는 두 배율을 곱한 값의 제곱근 이 됩니다. 20:9 폰에서는 가로가 227 남고 세로가 114 모자랍니다. 양쪽이 조금씩 틀어지는 대신 어느 한쪽도 크게 틀어지지 않습니다. 모자라는 쪽이 여전히 생긴다는 점은 같습니다.

Expand 는 시안 영역을 전부 보여 준다

폰과 태블릿에서 지켜야 할 쪽이 반대라면 Match 하나로는 둘 다 못 맞춥니다. 이때 Screen Match Mode 를 바꿉니다.

Expand 는 어떤 비율에서든 시안의 1920 × 1080 이 전부 화면 안에 들어오게 합니다. 두 배율 중 작은 쪽을 쓰기 때문에, 남는 쪽이 저절로 골라집니다. 위 그림에서 Expand 를 누르면 어느 화면에서도 점선이 캔버스 밖으로 나가지 않습니다. 기기마다 비율이 제각각인 모바일에서 Expand 가 편한 이유입니다. 대신 남는 영역이 늘 생기므로, 그 자리에 무엇이 보일지 를 정해 둬야 합니다.

Shrink 는 반대로 화면을 늘 꽉 채우고 시안 영역의 가장자리를 잘라 냅니다. 가장자리가 조금 잘려도 괜찮은 화면에서만 씁니다.

남는 영역은 배경이 채운다

Expand 로 남은 영역에는 아무것도 없습니다. 로비처럼 UI 만 있는 화면이면 카메라 배경색이 그대로 비칩니다.

• 배경 이미지는 시안 프레임보다 크게 그립니다. 1920 × 1080 기준에서 20:9 폰과 4:3 태블릿을 둘 다 덮으려면 2400 × 1440 이 필요합니다
• 배경을 stretch 앵커로 늘리기만 하면 비율이 찌그러집니다. Aspect Ratio Fitter 를 붙이고 Aspect Mode 를 Envelope Parent 로 두면, 이미지 비율을 지킨 채 부모를 빈틈없이 덮고 넘치는 쪽은 화면 밖으로 나갑니다
• 시안에는 기준 프레임 바깥의 여유 영역을 표시 해 두면 좋습니다. 버튼과 글자는 안쪽에만 두고, 바깥에는 배경만 이어지게 그립니다

기준 해상도는 시안 프레임과 같게

Reference Resolution 에는 시안 프레임 크기를 그대로 적는 것이 제일 편합니다. 그래야 시안의 px 와 캔버스 단위가 1 대 1 입니다.

시안을 360 × 640 으로 그렸는데 기준을 1080 × 1920 으로 두면, 시안의 모든 숫자에 3 을 곱해서 옮겨야 합니다. 틀리기 쉬운 곱셈이 매번 끼어듭니다. 시안과 기준 해상도 중 하나를 다른 하나에 맞춰 두세요.

세로 게임이면 1080 × 1920 처럼 적습니다. 가로와 세로가 바뀔 뿐 규칙은 같습니다.

Safe Area 는 화면 안의 더 작은 부모다

비율을 맞춰도 남는 문제가 있습니다. 화면이 네모가 아닙니다. 카메라 구멍, 둥근 모서리, 아래쪽 제스처 바가 화면 일부를 가립니다. 운영체제는 “여기까지는 가려지지 않는다” 는 사각형을 알려 주는데, 이것이 Safe Area 입니다.

Unity UI 는 Safe Area 를 저절로 피하지 않습니다. 보통 이렇게 만듭니다.

• Canvas 바로 아래에 Safe Area 크기로 줄어드는 패널 을 하나 둡니다
• 버튼, 글자, 체력바처럼 가려지면 안 되는 것 은 전부 그 패널 안에 넣습니다
• 배경과 딤처럼 화면 끝까지 닿아야 하는 것 은 패널 밖, Canvas 바로 아래에 둡니다

그 패널이 하는 일은 결국 앵커 입니다. Safe Area 사각형을 화면 크기로 나눠 0 에서 1 사이 비율로 만들고, 그 값을 앵커 Min 과 Max 에 넣습니다.

Unity 6.6 부터는 uGUI 에 Safe Area 컴포넌트가 들어 있어서 패널에 붙이기만 하면 됩니다. 어느 변을 줄일지 고를 수 있고, 한쪽에만 구멍이 있을 때 반대쪽도 같은 만큼 비워 가운데를 맞추는 옵션(Center Horizontally, Center Vertically)이 있습니다. 그보다 앞선 버전에서는 같은 일을 하는 짧은 스크립트를 프로그래머가 만들어 붙입니다.

Android 는 Player Settings 의 Render Outside Safe Area 를 끄면 게임 화면 자체가 Safe Area 크기로 줄어듭니다. 구멍 옆까지 배경을 채우고 싶다면 이 옵션을 켜 두고, 위처럼 패널로 UI 만 피합니다.

여러 비율에서 확인하기

Game 뷰 왼쪽 위의 드롭다운에서 Game 을 Simulator 로 바꾸면 Device Simulator 가 열립니다. Window > General > Device Simulator 로도 엽니다.

• 기기를 고르면 그 기기의 해상도, 비율, 카메라 구멍이 그대로 보입니다
• 툴바의 Safe Area 를 켜면 Safe Area 테두리가 그려집니다
• Rotate 로 기기를 돌려 보면 가로 화면에서 구멍이 반대편으로 가는 경우도 볼 수 있습니다

적어도 기준 비율, 가장 긴 비율, 가장 짧은 비율 셋에서 봅니다. 기준 비율에서만 보면 앵커와 Match 의 실수가 하나도 드러나지 않습니다.

시안을 넘길 때 적어 주면 좋은 것

정리

• Canvas Scaler 는 화면 픽셀을 캔버스 단위로 바꿉니다. 기준 해상도를 시안 프레임과 같게 두면 시안의 px 를 그대로 씁니다
• 비율이 다르면 가로와 세로 중 한쪽만 맞습니다. Match 0 은 너비, 1 은 높이를 지킵니다
• 남는 쪽은 괜찮고 모자라는 쪽이 문제 입니다. 모자라면 요소가 겹치거나 화면을 넘습니다
• Expand 는 어떤 비율에서든 시안 영역을 전부 보여 주고, 남는 쪽을 알아서 고릅니다
• 남는 영역은 시안보다 크게 그린 배경이 채웁니다. 늘릴 때는 Envelope Parent 로 비율을 지킵니다
• Safe Area 는 화면 안의 더 작은 부모입니다. 버튼과 글자는 안에, 배경은 밖에 둡니다