[유니티] 캔버스 스케일러(Canvas Scaler)를 사용해서 UI 크기 조절하는 방법!

유니티에서 캔버스(Canvas)를 생성하면 다음과 같이 여러 컴포넌트가 기본적으로 생성된다.

-> Rect Transform, Canvas, Canvas Scaler, Graphic Raycaster

그 중에서,

Canvas Scaler 컴포넌트는 캔버스 내 UI 요소의 전체적인 스케일과 픽셀 밀도를 제어하는 데 사용된다. 

스케일은 글꼴 크기와 이미지 경계 등 캔버스 아래의 모든 요소에 영향을 미친다.

쉽게 말해 화면의 크기 변화에 따른 UI크기 변화를 조절할 수 있다.

프로퍼티:	기능:
UI Scale Mode	캔버스에서 UI 요소가 스케일되는 방법을 결정합니다.
Constant Pixel Size	UI 요소가 화면 크기에 관계없이 동일한 픽셀 크기로 유지됩니다.
Scale With Screen Size	화면이 커질수록 UI 요소도 커집니다.
Constant Physical Size	화면 크기와 해상도에 관계없이 UI 요소가 동일한 물리적인 크기로 유지됩니다.

Constant Pixel Size를 사용할 경우 

유니티상에 개발 화면과 실제 디바이스 폰 화면 해상도가 크게 차이가 난다면, 폰에서 깨알만하게 보이게 된다.

따라서, Scale With Screen Size 모드를 통해 화면이 커지면 UI 요소들도 커지도록 설정하는 것이 좋다.

여기서 Match로, 스케일링 레퍼런스로 너비 또는 높이를 사용할지, 아니면 둘 사이의 배합을 사용할지 결정한다.

이 차이는 분명하다.

이 사진은 Constant Pixel Size을 적용한 것을 스마트폰에서 실행한 결과이다.

왼쪽 상단 버튼의 경우 손가락 작은 사람이 새끼손가락으로 눌러야 터치 될 정도로 매우 작다.

이 글을 쓰게 된 이유이다.

Scale With Screen Size 모드를 사용하게 되면, 화면이 커지게 되면 UI도 커지게 할 수 있다.

이렇게 큼지막하게 나와 버튼 조작이 쉬워지고, 가운데 이미지도 시원시원하게 크게 나오게 된다.