UI 캔버스 크기, 왜 이렇게 큰 걸까?

UI 캔버스 크기, 왜 이렇게 큰 걸까?

처음 접하면 당황스러운 UI 캔버스 크기
유니티로 UI 작업을 시작하면 가장 먼저 부딪히는 벽이 바로 "캔버스가 왜 이렇게 커 보이지?" 하는 문제다. 게임 화면에 버튼 하나만 만들고 싶은데, 씬 뷰에서는 캔버스가 대문짝만 하게 잡혀 있다. 나도 예전에 이게 너무 거슬려서 항상 0.01로 줄여 쓰곤 했다. 그런데 알고 보니 이건 유니티의 구조상 정상적인 현상이다. 캔버스가 커 보이는 이유, 그리고 제대로 관리하는 방법을 차근차근 정리해 보겠다.

유니티의 기본 단위는 '미터'

먼저 알아둬야 할 게 있다. 유니티의 기본 좌표 단위는 '1 = 1m'다. 캐릭터를 이동시킬 때 X축으로 1을 움직이면 실제 월드 기준 1m를 이동하는 거다. 반면에 우리가 사용하는 스프라이트나 UI 이미지 같은 건 픽셀 기반이다. 기본적으로 픽셀 퍼 유닛(Pixels Per Unit, PPU) 값이 100으로 설정돼 있는데, 이 말은 "100픽셀이 월드 기준 1m"라는 의미다. 즉, 이미지 단위와 월드 단위가 서로 달라서 캔버스가 필요 이상으로 크게 보이는 거다.

Screen Space – Overlay의 특징

UI 캔버스의 Render Mode가 기본으로 설정돼 있는 게 바로 "Screen Space – Overlay"다. 이 모드는 카메라와 상관없이 게임 화면 전체를 덮는 방식이다. 예를 들어 프로젝트 해상도가 1920×1080이면, 캔버스도 그대로 그 크기를 차지한다. 그러다 보니 씬 뷰에서 보면 엄청나게 커 보이는 게 정상이다. 하지만 실행하면 딱 화면에 맞게 표시되니, "씬에서 커 보인다"는 건 단순히 착시 같은 느낌이라고 보면 된다.

캔버스 크기를 쉽게 다루는 방법

그렇다고 매번 scale을 0.01로 줄이는 건 비효율적이다. 실제로 더 정석적인 방법이 있다. 크게 세 가지로 나눌 수 있다.

첫째, Screen Space – Overlay + Canvas Scaler
가장 흔히 쓰는 방식이다. 캔버스는 Overlay로 두고, Canvas Scaler를 Scale With Screen Size 모드로 맞춘다. 기준 해상도(예: 1920×1080)를 잡아 두면, 어떤 해상도에서도 자동으로 크기를 맞춰 준다. 씬 뷰에서는 여전히 커 보일 수 있지만, Game 뷰에서는 의도한 크기 그대로 보인다.

둘째, Screen Space – Camera
씬에서 UI 크기를 실제 카메라 프레임 안에 보면서 작업하고 싶다면 Camera 모드를 쓰면 된다. Render Camera를 Main Camera로 설정하고, Plane Distance를 적당히 조절한다. 그러면 UI가 카메라 앞에 실제로 놓인 오브젝트처럼 보여서 배치가 직관적이다.

셋째, World Space UI
캐릭터 머리 위 체력바나 3D 공간 안에 떠 있는 패널을 만들 때 쓰는 방식이다. 이 경우 캔버스를 World Space로 두고, scale을 0.01 정도로 줄이는 게 일반적이다. 그래야 실제 사람 크기에 맞는 패널처럼 보인다.

자주 겪는 문제와 해결법

UI를 다루다 보면 몇 가지 흔한 문제가 나온다.

씬에서 캔버스가 너무 커 보인다 → Overlay 모드라서 정상. Game 뷰에서 확인해야 한다.

해상도마다 UI가 깨져 보인다 → Canvas Scaler를 반드시 Scale With Screen Size로 두고, 앵커와 Layout Group을 활용해야 한다.

텍스트가 흐리다 → TextMeshPro를 쓰는 게 정답. 스프라이트도 해상도를 넉넉히 가져가야 한다.

버튼이 클릭 안 된다 → EventSystem이 있는지, UI 오브젝트에 Graphic Raycaster가 붙어 있는지 확인해야 한다.

폰마다 UI 비율이 이상하다 → Safe Area 대응과 앵커 세팅으로 해결 가능하다.

왜 0.01 스케일 얘기가 나오는 걸까

앞서 말했듯이 기본 스프라이트 PPU가 100이다. 즉, 100픽셀이 1m라는 건데, 체감상 너무 크게 느껴진다. 그래서 많은 사람들이 World Space UI에서 scale을 0.01로 낮춰서 쓴다. 그렇게 하면 "100픽셀 ≒ 1cm" 정도의 감각으로 맞춰져서 다루기가 훨씬 편하다. 다만 일반 UI(메뉴, 대화창 등)는 굳이 줄일 필요 없이 Canvas Scaler로 관리하는 게 정석이다.

정리

결국 UI 캔버스가 커 보이는 건 버그나 문제점이 아니라 유니티의 기본 설계다. Overlay 모드에서는 해상도 단위를 그대로 가져오기 때문에 대문짝만 한 게 정상이고, World Space에서는 단위 차이 때문에 scale을 줄여 쓰는 게 맞다. 중요한 건 "씬 뷰에서 어떻게 보이느냐"가 아니라 "Game 뷰에서 실제로 어떻게 표시되느냐"다.

처음에는 매번 줄이고 맞추는 게 번거롭게 느껴질 수 있지만, Canvas Scaler와 Render Mode를 이해하고 나면 UI 배치가 훨씬 수월해진다. 그러니 이제부터는 괜히 0.01에 매달리지 말고, 상황에 맞는 세팅을 골라서 쓰면 된다. 이게 가장 깔끔하고 정석적인 방법이다.