게임 UI 해상도 대응을 위한 2가지 세팅 (feat.유니티 UI)

Game UX·UI

Jan 12

요즘은 게임 UI 작업을 하면서 해상도 대응을 안 하는 경우는 거의 없습니다. 모바일 게임 시대에 접어들면서 눈에 띄게 중요해진 이슈이기도 합니다. 그런데 세상에는 너무나도 많은 모바일 디바이스가 있고, 해상도와 스크린 비율이 제각각 다릅니다. 해상도 대응 설정을 기기에 따라 일일이 따로 한다는 것은 불가능한 일이기 때문에 UI 요소들이 적절한 비율과 크기를 유지하면서 자동으로 제 자리를 찾아 배치되게끔 작업합니다.

어떤 환경에서든 자동으로 동작하는 해상도 대응 설정을 하는 시점은 프로젝트 시작 시점부터입니다. 디자인을 하는 단계에서부터 해상도 대응을 염두에 두고 진행합니다. 시작 단계에서 무시하고 작업하다가 프로젝트 중간이나 후반부터 부랴부랴 해상도 대응 작업을 하게 되면 시간과 에너지를 크게 낭비하게 됩니다.

오늘은 유니티 엔진에서 UI 해상도 대응 작업을 하기 위해 미리 설정해 두어야 할 2가지 기능을 먼저 살펴보겠습니다. 본 작업에 들어가기 전에 반드시 체크하고 작업을 시작하시기 바랍니다.

1. Game 패널에 미리 보기 해상도 추가하기
2. Canvas Scaler 설정하기

1. Game 패널에 미리 보기 해상도 추가하기

게임 UI 작업은 16:9 비율(1280x720 or 1600x900 or 1920x1080)을 기준으로 리소스의 사이즈와 UI 크기를 설정해 만듭니다. 그리고 이렇게 만든 UI가 다른 해상도에서도 알맞게 잘 표시되도록 설정합니다. 최근 출시되고 있는 스마트폰 해상도 비율인 19.5:9 / 21.5:9, 태블릿류 비율인 4:3까지 커버할 수 있도록 디자인하는 것이 바람직합니다.

이렇게 다양한 비율에서 문제없이 동작하는 UI를 만들기 위해서는 엔진상에서 UI 작업을 할 때 여러 가지 해상도 비율을 수시로 확인하고 점검해야 합니다.

앞서 언급한 16:9, 19.5:9, 4:3 비율을 수시로 체크하고, 스크린 크기와 비율이 점점 더 다양해지고 있는 디바이스 환경에 대비하여 가로 세로 비율이 같은 정사각형 비율 1:1, 한쪽 방향으로 매우 긴 2:1 비율까지 문제없도록 설정하면 안전합니다.

Game 패널에서 다음과 같이 작업용 기준 해상도와 미리 보기 해상도를 필요한 만큼 추가합니다.

**Game 윈도우 열기 : 상단 메뉴 Window > Genaral > Game**

[작업용 기준 해상도] 1280 x 720
*최근에는 1920 x 1080 / 1600 x 900 해상도를 기준으로 작업하는 경우가 많습니다.
-Label : 1280 x 720
-Type : Fixed Resolution
-Width & Height : 1280 / 720

[미리보기 해상도] 19.5 : 9
-Label : 19.5 : 9
-Type : Aspect Ratio
-Width & Height : 195 / 90
[미리보기 해상도] 21.5 : 9
-Label : 21.5 : 9
-Type : Aspect Ratio
-Width & Height : 215 / 90
[미리보기 해상도] 4 : 3
-Label : 4 : 3
-Type : Aspect Ratio
-Width & Height : 4 / 3
[미리보기 해상도] 1 : 1
-Label : 1:1
-Type : Aspect Ratio
-Width & Height : 1 / 1
[미리보기 해상도] 2 : 1
-Label : 2:1
-Type : Aspect Ratio
-Width & Height : 2 / 1

이렇게 설정한 해상도 비율을 수시로 확인하며 작업합니다.

[Free Aspect]를 선택하면 화면 비율을 자유롭게 변경할 수 있으니 참고하시기 바랍니다.

2. Canvas Scaler 설정하기

캔버스(Canvas)는 UI를 화면에 보여주는 기능을 합니다. 게임 화면 안에 모든 UI 요소들은 캔버스 아래로 '자식'으로 위치합니다. 따라서 캔버스 기능을 활용하면 UI 요소들이 다양한 비율의 해상도에서 적절한 크기로 리사이징되도록 설정할 수 합니다. 설정이 잘못되어 있으면 해상도 비율과 크기에 따라 UI가 너무 크거나 너무 작게 보일 수 있습니다.

다음과 같이 설정합니다.

UI Scale Mode :
Scale With Screen Size
*스크린 사이즈에 따라 UI 사이즈를 조정
Reference Resolution X, Y :
X: 1280 / Y : 720
*작업용 기준 해상도
Screen Match Mode :
Expand
*스크린 사이즈에 따라 UI 전체 비율을 확장해 주어 어떤 해상도에서든 자연스러운 UI크기로 조정됩니다. Match Width or Height, Shink 등의 옵션이 있습니다.
Reference Pixel Per :
100
*기본값입니다.