[내배캠] 최종 프로젝트 #28. UI 해상도 대응

Anchor와 Pivot

직사각형으로 표현되는 UI요소의 경계의 왼쪽 아래가 (0, 0), 오른쪽 위가 (1, 1)

• Anchors : UI 요소가 부모 RectTransform 내에서 어떤 위치에 고정될지 결정
  • Min x, y / Max x, y를 조절하여 적절한 Anchor를 설정할 수 있다.
  • Anchor 설정을 통해 해상도에 대응하여 UI를 적절한 위치에 고정할 수 있다. 크기는 따로 width, height 값은 고정되어 있지만 Canvas scaler에서 Scale With Screen Size로 설정하면 화면 해상도에 따라 시각적으로 비례하여 커지거나 작아지게 보인다.
• Pivot : UI 요소의 회전과 크기 변경의 중심점

해상도 대응 작업

1. Canvas 설정

• 대부분의 경우 Canvas scaler를 Scale With Screen Size로 설정
• Match 설정
  • Match Width or Height : 화면의 너비 또는 높이를 기준으로 조절한다.
  • Expand : UI 오브젝트가 화면 밖으로 벗어나지 않도록 영역을 확장한다.
  • Shrink : UI 오브젝트가 화면 밖으로 벗어나면 영역을 자른다.

private CanvasScaler _canvasScaler;
//Awake에서 _canvasScaler = GetComponent<CanvasScaler>();
private void SetCanvasScalerMatch()
{
    // Default 해상도 비율
    float fixedAspectRatio = 1920f / 1080f;
    // 현재 해상도 비율
    float currentAspectRatio = (float)Screen.width / (float)Screen.height;

    // Default 해상도보다 가로 비율이 더 긴 경우
    if (currentAspectRatio > fixedAspectRatio) _canvasScaler.matchWidthOrHeight = 1;
    // Default 해상도의 세로 비율이 더 길 경우
    else if (currentAspectRatio < fixedAspectRatio) _canvasScaler.matchWidthOrHeight = 0;
}

이 스크립트를 사용하여 Match를 유연하게 설정할 수 있다.

2. UI 요소 Anchor 및 Pivot 설정

• 고정 위치 UI (고정된 위치에 있는 버튼이나 아이콘)
  앵커를 고정 위치에 설정. Anchor Preset에서 간편하게 설정 가능
• 화면 크기에 따라 동적 조정되는 UI
  앵커를 부모의 경계에 맞게 설정, Stretch 모드 활용
• 비율 기반 크기 조정 (화면 크기에 따라 비율이 조정되어야 하는 경우)
  앵커를 부모의 적절한 위치로 설정
  Aspect Ratio Fitter 컴포넌트를 사용하여 비율을 유지