[Unity] Canvas와 Canvas Scaler 옵션
[Unity] Canvas와 Canvas Scaler 옵션
Unity Canvas와 Canvas Scaler 옵션 정리
Unity에서 Canvas는 UI 요소를 그리기 위한 공간입니다.
Canvas 컴포넌트와 Canvas Scaler 컴포넌트는 UI를 다양한 해상도와 화면 비율에 맞게 표현하는 데 중요한 역할을 합니다.
Canvas 컴포넌트 옵션
1. Render Mode
Canvas가 화면에 그려지는 방식을 정의합니다.
| 옵션 | 설명 |
|---|---|
| Screen Space - Overlay | UI가 항상 화면 위에 고정되어 표시됩니다. (UI 카메라 설정 불필요) |
| Screen Space - Camera | 지정한 카메라를 통해 UI를 렌더링합니다. (UI의 거리감과 깊이 설정 가능) |
| World Space | Canvas를 월드 좌표계에 배치하여 일반 오브젝트처럼 3D 공간에서 사용 |
사용 예시
- Overlay: HUD, 고정 UI
- Camera: UI를 특정 카메라에 종속시킬 때
- World Space: NPC 대화창이나 게임 월드 내 UI
2. Pixel Perfect
- 화면 픽셀과 UI 요소의 픽셀이 1:1로 매핑되도록 설정합니다.
- 활성화 시: UI 텍스트와 이미지가 더 선명하게 보입니다.
- 비활성화 시: UI가 부드럽게 스케일링될 수 있지만 뭉개질 위험이 있습니다.
3. Sort Order
- Canvas의 그리기 순서를 결정합니다.
- 높은 값일수록 앞에 그려집니다.
- Screen Space - Overlay에서만 적용됩니다.
- Camera 모드에서는 Camera의 Depth와 결합하여 사용합니다.
4. Additional Shader Channels
- UI에서 추가적으로 전달할 속성을 정의합니다.
- 기본값: Position, Color, TexCoord0
- 옵션: Normal, Tangent, TexCoord1, TexCoord2 등
- 사용 예: 커스텀 셰이더에서 UI의 추가 정보를 활용할 때
5. Vertex Color Always in Gamma
주로 Unity URP(Universal Render Pipeline) 환경에서 사용하는 설정입니다. 이 옵션은 쉐이더에서 버텍스 컬러를 사용할 때 감마(Gamma) 공간으로 해석할지 또는 선형(Linear) 공간으로 해석할지를 결정합니다.
- Gamma Color Space:
- 전통적인 모니터와 디스플레이의 색 표현 방식
- 밝기 변화가 선형적이지 않고, 어두운 부분이 더 밝게 표현됨
- Linear Color Space:
- 물리적으로 정확한 색 표현
- 조명이 자연스럽고 현실적
어떤 경우에 활성화해야 하나?
버텍스 컬러가 있는 모델 사용 시 : 모델링 툴에서 감마 색상으로 저장된 경우
색상 왜곡이 발생하는 경우 : 특히 선형 공간에서 감마 공간 컬러가 사용될 때
모바일 디바이스에서 색이 달라 보일 때 : 감마와 선형 모드를 지원하는 디바이스 간 색상 일관성 문제
장단점
| 장점 | 단점 |
|---|---|
| 버텍스 컬러가 정확하게 표현됨 | 프로젝트에 따라 색상이 밝아 보일 수 있음 |
| 감마 모드로 저장된 모델을 활용할 때 왜곡 방지 | 선형 모드 프로젝트에서는 불필요할 수 있음 |
| 모바일에서 색상 일관성 유지 | 색상이 일부 씬에서는 과도하게 밝을 수 있음 |
Canvas Scaler 컴포넌트 옵션
Canvas Scaler는 UI 요소의 크기와 해상도를 조정하여 다양한 화면 크기와 해상도에 대응하도록 도와줍니다.
1. UI Scale Mode
1. Constant Pixel Size (픽셀 고정 크기)
설명:
- UI 요소의 크기를 고정된 픽셀 수치로 유지
- 화면 해상도가 바뀌더라도 UI 크기가 변하지 않음
특징:
- Canvas의 Scale Factor를 직접 설정할 수 있음
- 해상도 커지면 UI가 상대적으로 작게 보임
- 해상도 작아지면 UI가 커보일 수 있음
사용 예:
- 해상도에 반응하지 않는 단순한 UI
- 픽셀 단위로 정밀한 위치가 중요한 경우
Reference Pixels Per Unit
- Constant Pixel Size 모드에서 1 유닛당 몇 개의 픽셀로 표시할지 설정합니다.
- 일반적으로 100으로 설정합니다.
- 이미지의 픽셀 밀도에 영향을 줍니다.
2. Scale With Screen Size (화면 크기에 따라 스케일)
설명:
- 화면 해상도를 기준으로 UI 스케일을 자동 조절
- 지정한 “Reference Resolution”에 기반해서 UI 크기를 결정
주요 속성:
- Reference Resolution: 기준 해상도 설정 (예: 1920×1080)
Screen Match Mode:
- Match Width Or Height: 화면 너비/높이 중 어디에 맞출지 비율 설정 (
0 = 너비,1 = 높이) - Expand: 전체 UI가 항상 보이도록 확장
- Shrink: UI가 잘리지 않도록 축소
- Match Width Or Height: 화면 너비/높이 중 어디에 맞출지 비율 설정 (
특징:
- 가장 일반적이고 권장되는 방식
- 다양한 해상도에서 UI가 일관된 비율로 보이도록 함
사용 예:
- 모바일, PC 등 다양한 해상도 대응 UI
- 해상도 비율이 다양한 플랫폼
3. Constant Physical Size (물리 크기 고정)
설명:
- UI 크기를 기기 화면의 DPI를 기준으로 설정
- 모든 디바이스에서 실제 물리적 크기가 같도록 보정
주요 속성:
- Physical Unit: 인치, 센티미터 등 선택
- Fallback Screen DPI: DPI 정보를 얻을 수 없을 경우 기본값
- Default Sprite DPI: 스프라이트 해상도 기준
특징:
- 높은 DPI의 디바이스(예: Retina 디스플레이)에서도 동일한 물리 크기로 유지
- 정확한 물리적 UI 위치가 필요한 상황에 유리
사용 예:
- VR/AR, 태블릿 인쇄 미리보기 UI 등에서 실측 단위 필요할 때
비교 요약
| 모드 | 기준 | 해상도 반응 | 특징 | 사용 예 |
|---|---|---|---|---|
| Constant Pixel Size | 픽셀 고정 | X | 단순 UI, 작게/크게 보일 수 있음 | 툴 UI 등 |
| Scale With Screen Size | 해상도 기준 | O | 가장 일반적, 반응형 UI | 대부분의 게임 UI |
| Constant Physical Size | 물리 단위 (DPI) | O | 실제 크기 유지 | VR/AR, 인쇄 UI 등 |
2. Dynamic Pixels Per Unit
- 월드 공간에서의 UI에 사용됩니다.
- 1 유닛당 몇 개의 픽셀이 들어가는지를 설정합니다.
- 높은 값: 작은 픽셀 크기 → 더 정밀한 렌더링
- 낮은 값: 큰 픽셀 크기 → 덜 정밀한 렌더링
Canvas Scaler의 Screen Match Mode
Match Width or Height
- 해상도 비율이 다른 경우,
- 가로 기준(0) 또는 세로 기준(1)을 선택합니다.
- 0.5로 설정 시 가로와 세로를 절충합니다.
Expand
- 화면 크기를 기준 해상도보다 크게 조정하여 화면을 채우도록 확장합니다.
- 일부 요소가 잘려 보일 수 있음
Shrink
- 화면 크기를 기준 해상도보다 작게 조정하여 화면에 모두 보이도록 축소합니다.
- 여백이 발생할 수 있음
정리
- Canvas 컴포넌트는 UI의 렌더링 모드와 정렬을 제어합니다.
- Canvas Scaler는 UI의 해상도 대응을 관리합니다.
- Render Mode는 UI의 공간 유형을 설정하고,
- UI Scale Mode는 화면 비율에 맞춰 UI를 조정합니다.
- Pixel Perfect와 Dynamic Pixels Per Unit은 화질과 해상도 문제를 해결합니다.
- 게임의 UI가 다양한 기기에서 일관성을 유지하도록 설정하는 것이 핵심입니다.
Unity의 Canvas Scaler 컴포넌트의 UI Scale Mode에는 세 가지 옵션이 있으며, 이 옵션은 UI가 해상도나 화면 크기에 따라 어떻게 크기를 조절할지 결정합니다.
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.