--- title: "Canvas Scaler 는 가로와 세로 중 한쪽만 지킨다" description: "시안과 비율이 다른 화면에서는 가로와 세로를 동시에 맞출 수 없습니다. Match 값이 무엇을 지키고 무엇을 남기는지, 노치를 피하는 Safe Area 까지 봅니다." author: "유니얼" pubDate: 2026-09-10 category: "game-dev/unity/ui" tags: ["Unity", "UI", "uGUI"] canonical: https://blog.unialgames.com/posts/unity-ui-canvas-scaler-safe-area/ --- 시안은 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 같은 숫자가 전부 이 캔버스 단위입니다.

Canvas Scaler 인스펙터를 옮겨 그렸습니다. 모바일 게임 UI 는 대부분 이 설정에서 출발합니다.

맨 위의 **UI Scale Mode** 는 셋 중에서 고릅니다. | UI Scale Mode | 하는 일 | 쓰는 곳 | | --- | --- | --- | | Constant Pixel Size | 화면이 커져도 픽셀 크기 그대로. 고해상도 화면에서는 UI 가 작아 보입니다 | UI 크기를 따로 조절하게 해 주는 PC 게임, 에디터 툴 | | **Scale With Screen Size** | 기준 해상도에 맞춰 키우고 줄입니다 | **대부분의 게임** | | Constant Physical Size | 실제 cm 크기를 지킵니다. 기기가 알려 주는 DPI 에 기댑니다 | 드뭅니다 | 이 글은 Scale With Screen Size 만 봅니다. ## 비율이 다르면 둘 다는 못 맞춘다 기준이 1920 × 1080 인데 화면이 2400 × 1080 이면 가로는 1.25 배, 세로는 1 배입니다. Canvas Scaler 는 UI 가 찌그러지지 않도록 가로와 세로에 **같은 배율 하나** 만 씁니다. 그러니 **둘 중 하나는 어긋납니다.** **Match** 슬라이더가 어느 쪽을 지킬지 고릅니다. 0 이면 너비, 1 이면 높이입니다.

점선이 시안의 1920 × 1080 입니다. 지키는 쪽은 딱 맞고 반대쪽이 남거나 모자랍니다.

- **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** 를 바꿉니다. | Screen Match Mode | 하는 일 | 20:9 폰 | 4:3 태블릿 | | --- | --- | --- | --- | | Match Width Or Height | 슬라이더로 지킬 쪽을 고릅니다 | Match 값에 따라 | Match 값에 따라 | | **Expand** | 캔버스가 **기준보다 작아지지 않게** 맞춥니다 | 2400 × 1080, 가로가 남음 | 1920 × 1440, 세로가 남음 | | Shrink | 캔버스가 **기준보다 커지지 않게** 맞춥니다 | 1920 × 864, 세로가 모자람 | 1440 × 1080, 가로가 모자람 | **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 의 실수가 하나도 드러나지 않습니다. ## 시안을 넘길 때 적어 주면 좋은 것 | 적어 줄 것 | 무엇이 정해지나 | | --- | --- | | **시안 프레임 크기와 방향** | Reference Resolution | | 비율이 다를 때 **시안 영역을 전부 보여 줄지, 화면을 꽉 채울지** | Screen Match Mode (Expand 또는 Shrink) | | 기준 프레임 **바깥 여유 영역에 무엇이 보이는지** | 배경 이미지 크기, Aspect Ratio Fitter | | **화면 끝까지 닿는 것과 구멍을 피하는 것** | Safe Area 패널의 안과 밖 | | **가장 긴 비율과 가장 짧은 비율** 에서의 모습 | 확인할 기기 | ## 정리 - Canvas Scaler 는 화면 픽셀을 캔버스 단위로 바꿉니다. 기준 해상도를 시안 프레임과 같게 두면 시안의 px 를 그대로 씁니다 - 비율이 다르면 **가로와 세로 중 한쪽만** 맞습니다. Match 0 은 너비, 1 은 높이를 지킵니다 - **남는 쪽은 괜찮고 모자라는 쪽이 문제** 입니다. 모자라면 요소가 겹치거나 화면을 넘습니다 - **Expand** 는 어떤 비율에서든 시안 영역을 전부 보여 주고, 남는 쪽을 알아서 고릅니다 - 남는 영역은 시안보다 크게 그린 배경이 채웁니다. 늘릴 때는 Envelope Parent 로 비율을 지킵니다 - Safe Area 는 화면 안의 더 작은 부모입니다. 버튼과 글자는 안에, 배경은 밖에 둡니다