유니티 safe Area 대응

 

safe area란?

safe area, 즉 안전영역이란 안정적으로 콘텐츠가 보일 수 있는 영역을 의미합니다.

예를 들자면 아이폰X의 디스플레이 영역은 상/ 하단에 라운드 영역을 포함하고 있으며,

특히 상단 영역은 카메라, 스피커 등 센서가 있는 노치 때문에 콘텐츠가 제대로 노출되지 않는 영역이 있습니다.

그래서 그런 영역을 제외하고 콘텐츠가 안전하게 노출되는 영역인 Safe area의 개념이 존재합니다.

 

특히 게임과 같은 경우 버튼과 같은 UI를 화면의 중앙이 아닌 가장자리 부분에 위치하는 경우가 많기 때문에,

또한 핸드폰 기종에 따른 safe area의 변화에 적절히 대응하기 위해서도 safe area 설정을 해주어야 합니다.

 

 

Safe Area 설정

1. 캔버스가 존재하는 게임 오브젝트 자식으로 빈 오브젝트를 생성해줍니다.

2. 그 오브젝트의 Rect Transform의 Anchor Presets을 stretch, stretch로 설정해 주고, 해당 오브젝트에 safe area를 설정하는 스크립트를 위치시킵니다.

3. 그 오브젝트의 자식으로 safe area에 위치시키고 싶은 UI 컴포넌트들을 넣어주면 됩니다.

 

Menu가 canvas가 위치하는 오브젝트입니다.

그 하에 safeArea라는 오브젝트를 생성해줍니다.

 

safeArea의 RectTransform - Anchor Presets를 stretch stretch로 설정해줍니다.

 

safeArea 스크립트를 작성해서 넣어줍니다.

이 때 RectTransform에는 자기 자신을 넣어주면 됩니다. (safeArea가 가지고 있는 RectTransform에 접근해야하기 때문)

그리고 safearea에 위치해야하는 UI 요소들을 이 오브젝트의 자식으로 넣어주면 됩니다.

 

 

 

SafeArea의 스크립트는 아래와 같습니다.

using UnityEngine;

public class SafeArea : MonoBehaviour
{
    public RectTransform rectTransform; //safearea 스크립트 붙는 컴포넌트 넣어주기
    Rect safeArea;
    Vector2 minAnchor;
    Vector2 maxAnchor;

    private void Awake()
    {
        //safeArea를 받아서 min 앵커와 max 앵커에 Position 부여
        //픽셀로 반환되니 앵커에 넣기 위해서는 비율로 변환 필요
        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;
    }
   
}