Safe Area

유니티 모바일 UI에서 Safe Area는 노치/카메라홀/라운드 코너/홈 인디케이터 영역을 피해서 UI를 배치할 수 있는 화면 영역이다.

가장 쉽게 사용하는 방식은 Canvas 안에 SafeArea 루트 패널 하나를 만들고,
그 패널의 RectTransform을 Screen.safeArea에 맞춰 앵커(min/max) 로 계속 갱신하는 방식이다.

SafeArea 루트 패널에 아래와 같은 코드를 붙이면 회전에 대응해서 safe area를 유지시켜준다.

코드

using UnityEngine;

public class SafeAreaFitter : MonoBehaviour
{
    [SerializeField] private bool applyOnUpdate = true; // 회전/해상도 변경 대응
    private RectTransform _rt;
    private Rect _lastSafeArea;
    private Vector2Int _lastScreenSize;
    private ScreenOrientation _lastOrientation;

    private void Awake()
    {
        _rt = GetComponent<RectTransform>();
        ApplySafeArea();
    }

    private void OnEnable()
    {
        _rt = GetComponent<RectTransform>();
        ApplySafeArea();
    }

    private void Update()
    {
        if (!applyOnUpdate) return;

        // 에디터/디바이스에서 회전, 해상도 변화, safeArea 변화 감지
        if (Screen.safeArea != _lastSafeArea ||
            Screen.width != _lastScreenSize.x ||
            Screen.height != _lastScreenSize.y ||
            Screen.orientation != _lastOrientation)
        {
            ApplySafeArea();
        }
    }

    private void ApplySafeArea()
    {
        if (_rt == null) _rt = GetComponent<RectTransform>();

        Rect safe = Screen.safeArea;

        _lastSafeArea = safe;
        _lastScreenSize = new Vector2Int(Screen.width, Screen.height);
        _lastOrientation = Screen.orientation;

        // 픽셀 좌표 safeArea → 0~1 정규화 → 앵커로 반영
        Vector2 anchorMin = safe.position;
        Vector2 anchorMax = safe.position + safe.size;

        anchorMin.x /= Screen.width;
        anchorMin.y /= Screen.height;
        anchorMax.x /= Screen.width;
        anchorMax.y /= Screen.height;

        _rt.anchorMin = anchorMin;
        _rt.anchorMax = anchorMax;
        _rt.offsetMin = Vector2.zero;
        _rt.offsetMax = Vector2.zero;
    }
}

예시

에디터에서 이런 식으로 각 기기의 safe area를 표시해준다.