[Unity] SafeArea로 모바일 Notch 디자인 대응하기

참고

https://www.youtube.com/watch?v=VprqsEsFb5w 

 

위 영상에서는 Package Manager에서 Device Simulator를 다운받았지만,

내가 쓰고 있는 Unity 2021.1.17f1 버전에서는 이미 기본적으로 탑재되어있다.

 

대응하기

1. Canvas 밑에 빈 오브젝트를 만들고, 해상도에 영향을 받지 않도록 Anchor Preset을 Stretch Stretch로 바꾼다.

2. 빈 오브젝트에 밑의 스크립트를 적용한다.

using UnityEngine;

public class SafeArea : MonoBehaviour
{
    RectTransform _rectTransform;
    Rect _safeArea;
    Vector2 _minAnchor;
    Vector2 _maxAnchor;

    void Awake()
    {
        _rectTransform = GetComponent<RectTransform>();
        _safeArea = Screen.safeArea;
        _minAnchor = _safeArea.position;
        _maxAnchor = _minAnchor + _safeArea.size;

        _minAnchor.x /= Screen.width;
        _minAnchor.y /= Screen.height;
        _maxAnchor.x /= Screen.width;
        _maxAnchor.y /= Screen.height;

        _rectTransform.anchorMin = _minAnchor;
        _rectTransform.anchorMax = _maxAnchor;
    }
}

 

예를 들어

요런 Canvas가 있다고 하자.

우선 Game 창에서 Game에서 Simulator로 바꾼다.

Simulator에 많은 기능이 있지만, 일단은 Notch 게시글이니까 SafeArea 기능만 사용할 것이다.

Notch가 있는 핸드폰 기종을 아무거나 선택해주고, SafeArea를 켜주면!! 이렇게 테두리가 나온다.

1. Canvas 하위에 빈 오브젝트를 하나 만든 뒤, 설정을 해주고,

2. Canvas 요소들을 자식으로 보낸다.

순서 중요함!! 2번부터 하면, Anchor Preset을 변화시켰을 때 자기 멋대로 보정됨.

실행 전에는 왼쪽처럼 되어있지만, 게임을 실행하면 정상적으로 Notch에 대응할 수 있게 된다.

 

주의점

근데 이게 문제 있는 게 UI의 경우, BackGround를 다 가리는 UI가 있을 수 있다.

요거를 기존의 방식대로 적용시켜버리면, 오른쪽처럼 다 안가려진다.

배경은 빼고 적용되어야 하는 것들만 슥슥 묶어주면 되긴 한데, UI가 복잡할수록 좀 더 생각해봐야할 듯 싶다.