[유니티] Android 펀치홀, iOS 노치 UI SafeArea 적용하기

 

 

 

 

SafeArea

- 해상도가 세로로 길어지면서 생겨난 개념이다.

- 초창기에는 iPhone의 노치라는 변태 해상도(?)를 출발로 현재는 안드로이드도 펀치홀 디스플레이가 적용되서 이런 비정상적인 화면에 맞춰 UI를 정상적으로 보이게 배치해줘야한다.

- 안드로이드같은 경우 유니티 내장 기능에서 펀치홀 라인을 레터박스로 날리는 옵션지 주어져있다. (하지만 이 포스팅에서 이 옵션을 사용하지 않는다.)

 

 

 

Screen.safeArea

- 단어 뜻 그대로 화면의 안전 영역의 픽셀 단위를 반환한다.

- 기기 해상도 값과 SafeArea 해상도 값을 계산해서 UI의 anchor의 위치값을 계산해서 UI Rect의 새로운 값을 만들어낸다.

 

 

 

Hierachy 세팅

- Canvas 자식으로 빈 UI 게임오브젝트를 넣어주고 자식으로 넣은 게임오브젝트의 RectTransform AnchorPreset을 화면 전체로 세팅해준다.

- 다른 UI 요소는 위에 자식으로 넣은 게임오브젝트의 자식으로 넣어주면 된다.

- 다음 코드로 스크립트를 생성해 Safe Area를 적용할 게임오브젝트에 붙여준다.

 

 

 

코드

using UnityEngine;

public class SafeArea : MonoBehaviour
{
    private void Awake()
    {
        ApplySafeArea();
    }

    private void ApplySafeArea()
    {
        Rect safeAreaRect = Screen.safeArea;
        Vector2 anchorMin = safeAreaRect.position;
        Vector2 anchorMax = safeAreaRect.position + safeAreaRect.size;

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

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

        var rectTr = GetComponent<RectTransform>();
        //Apply anchor
        rectTr.anchorMin = anchorMin;
        rectTr.anchorMax = anchorMax;

        rectTr.offsetMin = Vector2.zero;
        rectTr.offsetMax = Vector2.zero;
    }
}

• 먼저 anchor의 Min, Max 값을 구한다음, offset을 각각 0으로 지정해주면 화면(Rect)이 SafeArea에 맞춰진다.
• Screen.safeArea.position의 값을 포함시키는 이유는 iPhone의 경우 Safe Area가 화면 밑부분을 더 띄워주므로 다른 위치값이 나온다.
• Screen.safeArea 실제 기기에서만 SafeArea에 맞는 값을 반환하기 때문에 에디터에서는 SafeArea가 적용 안되서 보이는게 정상이다.

 

 

 

결과 확인 (Safe Area 스크립트 적용 차이, 유니티 내장 Safe Area 적용)