iOS앱을 iPhone X 화면 크기에 적용하는 방법(How iOS Apps Adapt to the iPhone X Screen Size)

[최종 수정일 : 2017.11.04]

원문 : https://medium.com/@hacknicity/how-ios-apps-adapt-to-the-iphone-x-screen-size-a00bd109bbb9

iOS앱을 iPhone X 화면 크기에 적용하는 방법(How iOS Apps Adapt to the iPhone X Screen Size)

Apple은 새로운 기기나 iOS의 버젼이 출시 될 때 기존 앱과의 호환성을 제공하는 뛰어난 기록을 가지고 있습니다. 앱은 큰 화면에 맞도록 레터 박스(letter-boxed) 또는 확대/축소(zoomed) 되었습니다. iOS는 종종 이전 앱 환경에 대해 어떠한 추정도 하지 못하도록 이전 버젼처럼 동작합니다. Apple은 최신 기기와 iOS 버젼에서 오래된 앱을 올바르게 동작하기 위해 노력하고 있습니다.

앱 개발자가 자신의 앱이 앞으로 어떻게 호환되도록 암시적 또는 명시적으로 선언하는 방법은 이 글의 핵심이 아닙니다. 앱이 빌드된 Xcode의 버젼(그리고 iOS 타겟 버전), 런쳐(launch) 화면 스토리보드의 존재와 특정 Info.plist 키(keys)들은 가장 중요한 요소입니다. 여기에서 논의하고자 하는 것은 새 iPhone X와 이전 앱과 업데이트된 앱 모두 실행할때의 동작 방식입니다.

iPhone X

iPhone X 는 다른 iPhone과는 여러가지 면에서 물리적으로 다르지만, 개발자의 관점에서 앱에서 기기를 보는 방법이 중요합니다.

• 진정한 3x용 기기입니다: 1 point는 화면에서 3x3 픽셀의 정사각형입니다.
• 화면 크기가 다릅니다: 375x812 points (1125x2436 픽셀)
• 화면의 종횡비(aspect ratio)가 다릅니다: 그것은 iPhone 6/6s/7/8과 같은 넓이(물리적인 크기가 아닌, 포인트 단위)를 가지고 있지만, 눈에 띄게 큽니다. 2012년 iPhone5 이후로, 모든 iPhone은 대략 9:16(가로모드에서 넓이:높이로 측정) 종횡비(aspect ratio)를 가지고 있습니다. 초기 3.5인치 iPhone은 2:3입니다. iPhone X는 대략 9:19.5 입니다.
• 눈금: 상태 바(status bar)는 전면 카메라, 전화기와 기타 센서가 장착되어 있는 양쪽 영역을 잘라내서 분할됩니다.

iPhone X의 독특한 화면에서 앱을 어떻게 보여주나요? 그것은 앱이 빌드된 Xcode 버젼에 따라 다릅니다. 

iPhone 8 / iOS 10 이전

Xcode 8이나 이전 버전(예를들어, iOS 10 이전 버젼 대상)으로 제작된 앱은 iOS 11의 큰 네비게이션 바 제목과 iPhone X의 새로운 화면 크기가 있다는 것을 인식하지 못합니다.

참고로, 다음은 iPhone 6/6s/7/8 기기의 기본 해상도에서 iOS 10 앱 나타나는 방법입니다. (예를들어, 화면 확대축소(zoom)를 사용안함)

Xcode 8 / iOS 10에서 적응형(Adaptivity)으로 빌드된 iPhone 7 시뮬레이터에서 iOS 11을 세로모드로 실행

이것은 iPhone 4.7인치 iPhone의 375x667 point 세로모드 화면 크기를 보여주며, 네비게이션 바와 툴바에 대한 일정한(regular) 높이입니다.

가로모드(landscape)에서 상태 바(status bar)는 기본적으로 숨겨지고 바의 높이가 줄어듭니다.

Xcode 8 / iOS 10에서 Adaptivity로 빌드된 iPhone 7 시뮬레이터에서 iOS 11을 가로모드로 실행

새로운 iPhone X에서 동일한 Xcode 8 / iOS 10 앱 실행은 세로모드에서 레터박스(letterboxed)이고 약간 둥근 모서리가 있습니다.

Xcode 8 / iOS 10에서 Adaptivity로 빌드된 iPhone 7 시뮬레이터에서 iOS 11을 세로모드로 실행

상태 바(status bar)는 여전히 파여있지만 앱은 4.7인치 iPhone 6/6s/7/8과 똑같은 크기의 화면으로 보입니다. 네비게이션 바는 상태 바에 있는 것처럼 여전히 64 point 큽니다. 이것은 Apple의 이전 버젼과의 호환성 작업입니다.

가로모드에서, 예상대로, 앱은 기둥 박스(pillar boxed)이지만 하단에 있는 새로운 손잡이를 위해 공간을 남겨두기 위해 화면에서 약간 축소되었습니다. 

Xcode 8 / iOS 10에서 Adaptivity로 빌드된 iPhone 7 시뮬레이터에서 iOS 11을 가로모드로 실행

5.7인치 iPhone plus 모델 처럼, 이것은 앱의 자산(assets)이 어느 쪽 방향으로도 픽셀(pixel)이 완벽히 표시되지 않는 것을 의미합니다. 픽셀(pixel) 밀도가 훨씬 높아지면 정상적인 사용에서 알 수 없습니다.

Xcode 9 / iOS 11

Xcode 9의 Gold Master 버전으로 만들어진 경우에, 앱은 iPhone X 화면의 본질을 보며, 기본 네비게이션 바 제목과 iOS 11의 큰 제목과 함께 보여집니다. (iPhone에서 세로모드만 큽니다)

Xcode 9 / iOS 11에서 Adaptivity로 빌드된 iPhone 7 시뮬레이터에서 iOS 11을 세로모드로 실행

Xcode 9 / iOS 11에서 Adaptivity로 빌드된 iPhone 7 시뮬레이터에서 iOS 11을 세로모드로 실행

툴바는 정상 높이의 거의 두배입니다(83 point 대 44 point).

가로모드에서, 네비게이션 바는 평소처럼 높이가 줄어들지만, 툴바는 손잡이에 대해 21 point 여분을 가지고 있습니다. 레이아웃 마진(margins)은 20에서 64point로 증가합니다.

Xcode 9 / iOS 11에서 Adaptivity로 빌드된 iPhone 7 시뮬레이터에서 iOS 11을 가로모드로 실행

결론(Conclusion)

예상대로, Apple은 iPhone X와 iOS 11을 Xcode 8로 제작되었으며 이전 버전과 호환되도록 앱을 설계했기 때문에 새 기기를 합리적으로 처리 할 수 없다는 것을 기대할 수 없습니다. 오토레이아웃을 사용하고 스토리보드를 실행하는 앱은 화면의 가운데에 표시 될것입니다. Xcode 9로 다시 만들면(rebuild) 새로운 화면 설계는 개발자가 선택합니다.

Adaptivity iOS App

이 글의 스크린 샷은 Adaptivity iOS 앱을 실행하는 iOS 시뮬레이터에서 가져온 것입니다. Adaptivity는 다양한 기기와 iPad 멀티 태스킹 크기에서 실행할때 사용할 수 있는 다양한 화면 크기, 레이아웃 마진(margins), 읽기 가능한 콘텐츠 가이드, 바 높이와 동적 타입 크기를 시각화한 도구입니다. 웹 사이트에서 더 많은 기능을 사용 할 수 있는 스크린샷과 정보를 볼 수 있습니다.