유니티 노치 디자인 & 펀치홀 디스플레이 대응

노치 디자인 & 펀치홀 디스플레이

스마트폰의 화면을 최대한 활용하기 위한 디자인 기법

상단부에 카메라, 스피커 및 센서 등을 몰아넣어 화면의 일부가 파여있는 형태를 말한다.

---

기능 구현

SafeArea 내부에 적용이 안된 UI

유니티 시뮬레이터로 여러 핸드폰 기기를 확인하다 보면 상단과 같이 SafeArea로 노란색 범위를 확인할 수 있다.
SafeArea를 통해 UI Canvas에 Notch에 대응할 수 있게 코드를 작성한다.

---

SafeAreaFitter.cs

[RequireComponent(typeof(RectTransform))]
public class SafeAreaFitter : MonoBehaviour
{
    private void Awake()
    {
        var rectTransform = GetComponent<RectTransform>();
        var safeArea = Screen.safeArea;
        var anchorMin = safeArea.position;
        var anchorMax = anchorMin + safeArea.size;

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

        rectTransform.anchorMin = anchorMin;
        rectTransform.anchorMax = anchorMax;
    }
}

---

구현 결과

SafeArea 안에 들어온 UI

이제 적용할 캔버스에 해당 스크립트를 적용하여 UI Canvas들이 노란색 범위 안에 안전하게 표시된 거를 확인할 수 있다.