Safe Area로 안심하고 UI 만들기

스크린 가장자리의 상태가 제각각인 모바일 기기가 상당히 많다.

노치가 있는 아이폰이라던지, 스크린 귀퉁이에다가 셀카를 박아버린 갤럭시라던지 말이다.

처음엔 모두 깔끔한 네모 사각형 디스플레이를 고집했는데, 아이폰이 변태짓을 시작하니까, 히힛 그럼 나도...? 하면서 모두다 전면 스크린에 이상한 짓을 하기 시작했다...

 

어쨋든 우리가 만들 앱들은 모든 모바일 기기에서 정상적인 디스플레이를 보여주어야 한다. 

그래서 Safe area라는 개념이 있다.

스크린 안쪽에 온전히 출력되는 것이 확실한 사격형의 영역이다.

 

예를 들어 노치와 라운드 처리된 귀퉁이를 가지고 있는 아이폰의 Safe area는 이렇게 되어있다.

우리는 중요한 UI와 이미지들을 저 Safe area안쪽에 표시하도록 만들어야 한다.

 

Safe area는 Screen 에 접근하여 얻을 수 있다.

Rect safeArea = Screen.safeArea

 

이것을 이용해서 UI의 사이즈를 조정해보자.

Canvas의 하위에 모든 UI를 포함하는 상위 오브젝트를 하나 만든다. 

위 그림에서는 anchor라는 이름의 오브젝트다. 이 오브젝트의 RectTransform 설정을 위 그림처럼 만들자.

    void Start()
    {
        RectTransform rect = GetComponent<RectTransform>();
        Rect safeArea = Screen.safeArea;
        Vector2 min = safeArea.position;
        Vector2 max = min + safeArea.size;

        min.x /= Screen.width;
        min.y /= Screen.height;
        max.x /= Screen.width;
        max.y /= Screen.height;

        rect.anchorMin = min;
        rect.anchorMax = max;
    }

이제 이런 코드를 작성하여 anchor에 붙이면 된다.

 

적용전                     /                    적용후