시작하면서
얼마 전까지 iOS에서 가장 핫한 이슈였으며 골칫거리였던 주제는 iPhone X의 탈모 디자인이었다. 각진 사각형이거나 살짝 라운드가 들어간 기존의 안드로이드나 iOS의 화면과는 다르게 화면 상단 부분에 1)M자 탈모처럼 생긴 검은 영역이 생겼기 때문이다. 탈모도 문제였지만 2)물리 홈버튼을 제거하면서 생겨난 홈바가 터치 화면의 일정 영역을 차지했고, 이 영역 또한 고려해 프로그램을 작성해야 했다.
우리는 이 두 개의 요소를 고려해 대응할 필요가 있다. (그래야 피쳐드를 받...읍읍) 이런 대응은 일반적인 iOS 개발은 기존에 있었던 Auto layout 정책을 잘 따랐다면 쉽게 대응할 수 있다고는 한다.
하지만, 게임은 주로 상용화된 게임 엔진을 이용하여 제작하는 경우가 많기 때문에 빌드 사이에 트릭을 섞어 쓰거나 사용하는 엔진이 자동으로 잘 지원해주기를 기도해야 한다.
물론, 아무 것도 안하고 엔진에서 마법을 부려주는 일은 없다.
하지만 고맙게도 Unity 2017.2p3 이상부터는 적어도 편하게 iPhone X를 대응 할 수 있도록 도와주는 기능을 추가하였다. 여기서 추가된 기능을 통해 좀 더 간편하게 iPhone X를 지원하면서도 탈모 디자인이 적용된 모습을 에디터 내부에서 편하게 확인해볼 수 있는 플러그인을 제작해보았고 배웠던 것을 공유해보고자 한다.
Unity의 지원
Unity는 2017.2p3 버전부터 iPhone X를 지원할 수 있는 기능을 High level에서 지원한다. SafeArea라는 API인데 실행되고 있는 디바이스의 SafeArea 즉, 안전한 영역의 크기를 Rect 타입으로 반환받을 수 있다. (그 외에도 iOS.DeviceGeneration.iPhoneX를 통해 디바이스 필터링을 할 수 있다.)
Screen.SafeArea를 통해 얻어온 값으로 조절이 필요한 UGUI 영역을 조절하는 방법을 통해 보다 깔끔한 UI Layout으로 iPhone X를 지원할 수 있다. 코어 코드는 다음과 같다.
Screen.SafeArea는 Static이기 때문에 쉽게 값을 가져올 수 있고, 각각의 값들을 이용하여 조정할 UGUI RectTransform의 Anchor를 조정하게 된다. 따라서 안전 영역에 들어가야만 하는 UI들을 한데 묶고 Anchor Min Max를 조정하면 딱 알맞게 UI들을 안전 영역 안으로 집어넣을 수 있게 된다.
플러그인 소개
이런 기능들을 정리하고 또, 탈모가 적용된 모습을 빌드해서 확인하는 것보다 Editor에서 바로바로 확인해 볼 수 있으면 좋을 것 같아 관련 기능을 지원하는 플러그인을 제작하였다.
플러그인 : UnitySafeAreaController
위 이미지처럼 플러그인을 통해 UI를 안전 영역 안으로 넣어 버림과 동시에 Editor에서도 탈모 모양을 확인해 볼 수 있다. 사용 방법을 간단하게 소개하면
1) 위 스크립트를 Canvas에 붙인다 (해당 캔버스 하위에 Notch와 Frame 리소스가 들어가니 참고!)
2) SafeArea가 업데이트될 타이밍을 선택한 뒤에
3) SafeArea에 들어가야할 UGUI의 묶음들을 리스트로 만들어 엘리먼트에 각각 붙인다. (순서는 상관 없다)
4) 원하는 Test Device Type을 선택하고 Show Safe-Area를 클릭하면
마치며
그 외에도 iOS.DeviceGeneration.iPhoneX 라는 Enum을 통해 디바이스 분기를 타서 직접 Anchor를 조절할 수도 있지만, 탈모가 꼭 iPhone X가 끝이라는 법이 없으니 일단 최대한 확장성 있게 대응하는 것이 좋을 것 같다. 모두 즐거운 코딩을!