[Unity] 반응형 UI

서론

플레이어들이 사용하는 스마트폰의 디스플레이 비율과 크기가 제각각이기 때문에, 이를 모두 고려하여 디스플레이 비율과 크기에 맞춰지는 UI를 만들 필요가 있다.

반응형 UI는 Canvas Scaler 컴포넌트의 속성들을 조정함으로써 구현할 수 있다.

Canvas Scaler

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

UI Scale Mode

UI Scale Mode 속성은 캔버스에서 UI 요소가 스케일되는 방법을 결정한다.

속성	기능
Constant Pixel Size	UI 요소가 화면 크기에 관계없이 동일한 픽셀 크기로 유지된다.
Scale With Screen Size	화면 크기에 비례하여 UI 요소의 스케일이 변한다.
Constant Physical Size	화면 크기와 해상도에 관계없이 UI 요소가 동일한 물리적인 크기로 유지된다.

물리적인 크기란 UI 요소의 위치와 크기가 mm, pt, pica 등의 물리적인 단위로 지정된다.
즉, 기기의 화면 DPI를 정확하게 알아야만 한다.

Constant Pixel Size 속성

속성	기능
Scale Factor	캔버스의 모든 UI 요소를 Scale Factor의 값으로 스케일한다.
Reference Pixels Per Unit	스프라이트에 Pixels Per Unit이 적용되어 있는 경우, 스프라이트의 1픽셀이 UI의 유닛 하나에 대응된다.

Scale With Screen Size 속성

속성	기능
Reference Resolution	UI Layout에 적합한 해상도를 설정한다. 화면 해상도가 크면 UI가 더 크게 스케일되고 작으면 UI가 더 작게 스케일된다.
Screen Match Mode	현재 해상도의 종횡비가 Reference Resolution에 맞지 않는 경우 캔버스 영역을 스케일하는 데 사용되는 모드다. Match Width or Height: 캔버스 영역의 너비 또는 높이를 레퍼런스로 사용하여 스케일하거나 그 사이로 스케일한다. Expand: 캔버스 크기가 레퍼런스보다 더 작아지지 않도록 캔버스 영역을 수평 또는 수직으로 확장한다. Shrink: 캔버스 크기가 레퍼런스보다 커지지 않도록 캔버스를 수평 또는 수직으로 잘라낸다.
Match	스케일링 레퍼런스로 너비 또는 높이를 사용할지, 아니면 둘 사이의 배합을 사용할지 결정한다.
Reference Pixels Per Unit	스프라이트에 Pixels Per Unit이 적용되어 있는 경우 스프라이트의 1픽셀이 UI 유닛 하나에 대응된다.

더 많은 내용

나머지의 내용은 이 글의 취지와 맞지 않기 때문에 공식 문서를 확인하면 좋을 것 같다.

반응형 UI

UI 요소를 생성하면 자동으로 생성되는 Canvas의 인스펙터를 확인하면 Canvas Scaler 컴포넌트가 자동적으로 부착되어 있다. 기본적으로 Constant Pixel Size로 설정되어 있다.

Constant Pixel Size를 유지한 채로 UI를 구성하다 보면 반응형 UI를 만들 수 없다. 따라서 UI Scale Mode를 Scale With Screen Size로 변경해야 한다.

그리고 나머지 속성들은 건들일 필요가 없지만, Math Width or Height 속성의 Match를 자신이 만들고자 하는 게임에 맞게 조정해야 한다.

• 세로뷰 게임: Width에 맞추는 편이 더 좋은 것 같다.
• 가로뷰 게임: Height에 맞추는 편이 더 좋은 것 같다.

결과물