iPhone X UI 대응 사례

iPhone X 디자인 나왔을 때 대부분의 사람들은 아이폰 디자인이라는 고정관념을 벗어나 충격을 받았을 것입니다.

iPhone X의 대표적인 변화 두가지는 노치 디자인 과 홈 버튼 삭제 로 정리할 수 있을 것입니다.

사용자 입장에서 UI 개선한 것으로 보이는 iPhone X 하지만 모두에게 환영 받지는 못했습니다.

그 비환영자 중 하나였던 저 또한 왜 기본 UI을 벗어나서 새롭게 만들었을까? 아이폰의 핵심은 홈 버튼인데 그걸 왜 없앴을까? 생각을 했습니다. 막상 iPhone X 대응으로 UI 구성하였을 때 잘못된 생각이었구나 생각을 하였습니다.

[왼쪽] iphone 8 [오른쪽] iphonX (그림 참조 : 뚜루뚜루 앱 화면)

iPhone X의 특성에 맞게 구성한 앱 화면으로 두 기기의 차이점을 비교한다면 확연히 iphonX 화면이 크고 잘 보인다는 것을 확인할 수 있습니다.

여기서 알아야할 사항은 위의 화면은 iphoneX 대응으로 UI변경을 하였기에 화면을 가득 채웠다는 점입니다.

만약 별도의 iphoneX 대응을 안해주었으면 SafeArea 로 상하좌우에 빈 여백이 생길 것입니다.

iPhone X UI 구성 방법

iPhone X 가 출시 되면서 SafeArea 영역과 SuperView 영역의 구분을 통하여 UI을 구성해야 합니다.

SafeArea 영역은 iPhone X 의 노치 부분과 하단의 바 에 영향을 안미칠 수 있도록 영역을 자동으로 설정해줍니다.

그럴 경우 사용자 입장에서는 상하좌우가 떨어진 부자연스러운 UI을 보여주게 됩니다.

이런 이슈 사항을 막기 위해서 제가 사용한 방법은 배경 영역은 SuperView로 구성하고, 배경을 제외한 영역은 SafeArea로 구성하였습니다.

[iPhone X 대응 방법]

1. 배경화면 : SuperView

2. 배경 제외한 화면 : SafeArea 적용된 View

xcode 스토리보드 구성방법

xcode에서는 view 가 두 개로 존재 할 수 있습니다.

각각의 View의 제약조건을 배경화면은 SuperView 배경을 제외한 화면은 SafeArea로 적용하면 쉽게 iPhone X 대응하게 됩니다.

배경 View의 제약조건은 SuperView에 설정합니다.

배경이 아닌 View의 제약조건은 SafeArea 설정합니다.

각 View에 맞춰서 UI 구성을 합니다.

SafeArea 는 iPhone X 에 적용되므로 다른 디바이스에서는 꽉찬 화면으로 구성됩니다.

정리

어떻게 보면 간단한 방법인 View의 분리로 iPhone X 의 UI 구성을 하는 방법에 대해서 공유하였습니다.

이 방법 외에도 더 좋은 방법이 있을 것으로 생각됩니다.

iPhone X UI 대응을 한다면 사용자에게 iPhone X 구매에 대한 만족감을 줄 것으로 기대합니다.