Xamarin.iOS앱을 iPhone X에서 테스트해보기

2017년 WWDC 행사에서 소개된 iPhone X는 새로운 형태의 스크린과 UI를 보여주고 있습니다.

크게 아래와 같이 3가지로 구분됩니다.

1. 상단 Status Bar 돌출부 (엠자탈모)
2. 하단 Home Indicator (과거 홈버튼에 해당하는 영역)
3. 스크린 모서리가 곡선처리 됨
   

따라서 충분한 여백이 없는 앱의 경우 컨텐트가 잘리거나 가려지는 문제를 야기할 수 있습니다. 따라서 애플은 새로운 디자인 가이드를 제시하고 있으며 새로운 개발옵션을 제공하고 있습니다. 여기서는 어떻게 테스트 하고 무엇을 테스트해야하는지 설명합니다. iPhone X 지원을 위한 상세한 디자인 가이드는 여기를 확인해주세요.

Xamarin 앱을 iPhone X에서 테스트하기

IDE를 최신으로 업데이트하는 것만으로 iPhone X 환경에서 테스트할 수 있습니다.

1. XCode를 최신 버전으로 업데이트 합니다. 업데이트 후에는 iPhone X Simulator를 실행하실 수 있습니다.
   
   
2. VisualStudio를 최신버전으로 업데이트합니다. 또한 Xamarin.iOS도 버전 11로 업데이트 합니다.

iPhone X Simulator를 실행할 수 있으면 전체적으로 잘리는 부분은 없는지, UI가 잘 어울리는지, 터치는 잘되는지 테스트를 진행해 봅시다.

1. 가로모드를 지원한다면 반드시 화면을 가로로 돌려보고 잘리는 부분이 없는지 확인합니다.
2. 앱을 시작할 때 Luanch Screen이 정상적으로 나타나지 않는다면, Unified Storyboard를 사용하여 Launch Screen을 작성해보세요.
3. 버튼이나 링크를 터치했을 때 불편함은 없는지 테스트해보세요. 특히 하단의 Home Indicator 부분과 겹치지 않는지 확인해야 합니다. 예를들어 아래와 같은 경우는 조정이 필요한 경우입니다.
   

견고한 UI 개발하기

앱을 다양한 UI에서도 문제 없이 나타나도록 하기 위해서는 UI를 구성할 때 Auto Layout을 사용하는 것이 권장됩니다. Auto Layout을 사용하면 다양한 해상도에서도 유연하기 레이아웃을 조정해 줍니다.

iOS 11에서는 SafeAreaLayoutGuide 옵션이 추가되었습니다. 이 옵션을 활성화 하면 View의 위치가 모든 iPhone 스크린 내부에 위치하도록 도와줍니다. iPhone X에서도 모서리 라운딩이나 상하단의 돌출부로 View가 잘리지 않도록 보장해줍니다.

SafeAreaLayoutGuide는 Storyboard 속성에서 활성화 할 수 있습니다. 아래는 Visual Studio for Mac을 기준으로 설명합니다.

1. Storyboard의 여백 영역을 클릭합니다.
2. Properties 영역의 Use safe Area layout Guides를 체크합니다.
   
3. 이제부터 Auto Layout을 통해 UI를 개발할 때 녹색 선을 통해서 Safe 영역을 표현해 줄 것입니다.