포스트

[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 - OverlayUI가 항상 화면 위에 고정되어 표시됩니다. (UI 카메라 설정 불필요)
Screen Space - Camera지정한 카메라를 통해 UI를 렌더링합니다. (UI의 거리감과 깊이 설정 가능)
World SpaceCanvas를 월드 좌표계에 배치하여 일반 오브젝트처럼 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:
    • 물리적으로 정확한 색 표현
    • 조명이 자연스럽고 현실적

어떤 경우에 활성화해야 하나?

  1. 버텍스 컬러가 있는 모델 사용 시 : 모델링 툴에서 감마 색상으로 저장된 경우

  2. 색상 왜곡이 발생하는 경우 : 특히 선형 공간에서 감마 공간 컬러가 사용될 때

  3. 모바일 디바이스에서 색이 달라 보일 때 : 감마와 선형 모드를 지원하는 디바이스 간 색상 일관성 문제

장단점

장점단점
버텍스 컬러가 정확하게 표현됨프로젝트에 따라 색상이 밝아 보일 수 있음
감마 모드로 저장된 모델을 활용할 때 왜곡 방지선형 모드 프로젝트에서는 불필요할 수 있음
모바일에서 색상 일관성 유지색상이 일부 씬에서는 과도하게 밝을 수 있음



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가 잘리지 않도록 축소

특징:

  • 가장 일반적이고 권장되는 방식
  • 다양한 해상도에서 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

  • 화면 크기를 기준 해상도보다 작게 조정하여 화면에 모두 보이도록 축소합니다.
  • 여백이 발생할 수 있음

정리

  1. Canvas 컴포넌트는 UI의 렌더링 모드정렬을 제어합니다.
  2. Canvas Scaler는 UI의 해상도 대응을 관리합니다.
  3. Render Mode는 UI의 공간 유형을 설정하고,
  4. UI Scale Mode화면 비율에 맞춰 UI를 조정합니다.
  5. Pixel PerfectDynamic Pixels Per Unit화질과 해상도 문제를 해결합니다.
  6. 게임의 UI가 다양한 기기에서 일관성을 유지하도록 설정하는 것이 핵심입니다.

Unity의 Canvas Scaler 컴포넌트의 UI Scale Mode에는 세 가지 옵션이 있으며, 이 옵션은 UI가 해상도나 화면 크기에 따라 어떻게 크기를 조절할지 결정합니다.


이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.