iPhone X에 대한 개발 튜토리얼(Development Tutorial. for iPhone X)

[최종 수정일 : 2017.11.01]

원문 : https://www.raywenderlich.com/173928/develop-design-iphone-x

iPhone X에 대한 개발 튜토리얼(Development Tutorial. for iPhone X)

모두가 iPhone X, 전체화면인 아이폰에 대해 흥분하고 있습니다. 거기에 페이스(Face) ID, TrueDepth 셀프/애니모지(animoji) 카메라, 12 메가 픽셀 광각(wide-angle)과 망원(telephoto) 후방 카메라, A11 바이오닉 신경 엔진 칩(Bionic neural engine chip), 그리고 무선충전을 제공합니다. 하지만 기가막힌 새로운 화면은 여러분의 앱 디자인을 약간 변경해야 합니다. 이 튜토리얼에서, 여러분은 새로운 종횡비(aspect ratio)에 대해 살펴보고, 네비게이션 바에 검색 컨트롤러가 통합된 앱을 만들수 있습니다. 그런 다음 iPhone X 발표 직전에 만들어진 앱을 수정하는 방법을 살펴볼 것입니다: 안전 영역(safe area)를 켜는 것으로 충분하나요? 해답을 찾으려면 계속 읽으세요.

무엇이 다른가요? (What’s Different?)

먼저, iPhone X 화면과 무엇이 다른지에 대해서 간략히 설명합니다.

• 화면 크기는 375 x 812 포인트입니다, 따라서 종횡비는 9:16 대신에 9:19.5 입니다. iPhone 6/7/8의 4.7" 화면보다 145pt 높지만 상태바는 44pt를 사용하고 홈 인디게이터(indicator)는 툴바 높이의 거의 두배입니다.
• 화면 해상도는 3x : 1125 x 2436 픽셀입니다.
• 화면 디자인는 센서 하우징(sensor housing), 홈 인디게이터(home indicator), 둥근 모서리를 고려해야 합니다.

• 세로모드(portrait)에서, 네비게이션 바는 88pt, 또는 큰 타이틀의 경우 140pt입니다. 툴바는 44pt 대신에 83pt입니다. landscape에서 툴바는 53pt이고 레이아웃 마진(margins)은 20pt 대신에 64pt입니다.
• 세로모드(portrait)에서, 상태바가 큽니다 -44pt, 20pt가 아닙니다- 그리고 앱에서 사용하지 않는 공간을 센서 하우징(sensor housing) 양쪽에서 사용합니다. 그리고 전화, 위치-추적, 백그라운드 작업을 나타내며 크기는 변하지 않습니다.

Geoff Hackworth의 Medium article에 그의 Adaptivity 앱이 좋다고 생각하며, 새로운 화면구조에 대한 매우 유용한 그림이 있습니다.

시작하기(Getting Started)

시작 패키지를 다운로드하고 압축을 푸세요.

먼저, iPhone X 화면에 9:16 이미지를 로드하면 어떻게 되는지 직접 보세요. AspectRatioSample을 열고나서, Main.storyboard을 여세요. iPhone X로 보기(View as) 설정하고, 이미지 뷰를 선택합니다. Attributes inspector에서, Content Mode를 Aspect Fit과 Aspect Fill 간에 전환합니다.

8 Plus 이미지는 두개의 이미지 뷰를 쌓아서 생성되었고, iPhone 8 Plus 시뮬레이터에서 만들고 실행하고 나서 스크린 샷을 찍었습니다. 따라서 이미지의 종횡비는 9:16 입니다.

이미지 뷰의 제약조건은 안전영역(safe area)를 채우기 위해 설정되고, 따라서 종횡비(aspect ratio)는 9:19.5 입니다.

Aspect Fit에서, 검정 배경 뷰는 이미지의 위와 아래에 보여집니다(letter-boxing). Aspect Fill은 뷰를 덮지만 이미지의 측면을 잘라냅니다.

landscape 방향에서, Aspect Fit은 기둥 상자(pillar-box) 이미지(측면에 있는 배경뷰를 봅니다) 이고, Aspect Fill은 위와 아래를 잘라냅니다.

iPhone X에 대해 다른 이미지를 생성하고 싶지 않다고 가정하고, 뷰를 덮길 원하면, 잘라내기를 할 것입니다.

규칙 : Aspect Fill 잘라내기 할때 중요한 시각적 정보를 잃지 않도록 이미지를 구성합니다.

새로운 앱 디자인하기(Designing a New App)

AspectRatioSample를 닫고, NewCandySearch을 열고 iPhone X 시뮬레이터에서빌드하고 실행합니다.

이것은 사탕 목록이 있는 master-detail 앱입니다. detail뷰는 선택된 사탕의 이미지를 보여줍니다.

여러분이 좋아하는 간식을 먹는 동안 기다릴것입니다. :]

테이블 뷰를 스크롤해서 홈 인디게이터(home indicator)를 피하려고 아무것도 하지 않았다는 것을 확인합니다. 세로로 스크롤 할 수 있는 뷰와 배경 이미지의 경우에 완벽합니다.

규칙
* 센서 하우징(sensor housing)과 홈 인디게이터(home indicator)를 피하고, 배경이미지와 세로로 스크롤 할수 있는 뷰는 제외한다.
* 홈 인디게이터(home indicator) 또는 모서리를 잘라내는 곳에 컨트롤을 배치하지 않는다.
* 센서 하우징(sensor housing)이나 홈 인디게이터(home indicator)를 주의해서 숨기거나 당겨준다.

오토레이아웃 사용하기(Use Auto Layout)

Main.storyboard를 열고, 뷰 컨트롤러를 선택하고 identity Inspector를 봅니다.

Xcode 9에서 생성된 새로운 프로젝트는 기본적으로 오토 레이아웃(Auto Layout)과 안전 영역(Safe Area) 레이아웃 가이드를 사용합니다. 이것은 iPhone X 디자인에 필요한 작업을 줄이는 가장 간단한 방법입니다.

규칙 
* 안전 영역(safe area) 레이아웃 가이드 사용하기
* 여백(margin) 레이아웃 가이드 사용하기
* 대칭적인 중심 콘텐츠(center content) 또는 끼워넣기(inset)

표준 UI 요소 사용하기(Use Standard UI Elements)

이제 영역 바(scope bar)를 사용해서 검색 바(search bar)를 추가할 것입니다. 그리고 새로운 큰 제목(large title)을 선택할 수 있습니다.

Master Scene/Navigation Bar를 선택해서, Attributes Inspector를 보고, Prefers Lage Titles에 대한 박스를 체크합니다.

여기서 이러는 동안, 테이블 뷰의 셀을 선택하고, 배경 색상을 밝은 회색으로 설정합니다.

다음으로, MasterViewController.swift을 엽니다: 이미 대부분의 검색 컨트롤러 코드가 있습니다. 여러분은 setupSearchController() 안의 TODO 주석을 이것으로 교체하면 됩니다.

// In iOS 11, integrate search controller into navigation bar
if #available(iOS 11.0, *) {
  self.navigationItem.searchController = searchController
  // Search bar is always visible
  self.navigationItem.hidesSearchBarWhenScrolling = false
} else {
  tableView.tableHeaderView = searchController.searchBar
}

기기에서 iOS 11을 실행하는 경우에, 네비게이션 항목의 searchController요소를 설정합니다. 그렇지 않으면, 테이블 뷰의 테이블 헤더 뷰안에 검색 바(search bar)를 넣습니다. 

iPhone X 시뮬레이터에서 빌드하고 실행합니다. 큰 제목에 감상하고 나서, 시뮬레이터를 가로방향으로 회전하고, 검색 필드를 탭해서 영역 바(scope bar)를 표시하세요.

검색 필드(search field), 취소 버튼과 영역 바(scope bar) 모두 둥근 모서리와 센서 하우징(sensor housing)에 멋지게 들어갑니다. 셀 배경 색상이 전체적으로 펼쳐져 있고, 홈 인디게이터(home indicator) 아래로 테이블 뷰가 스크롤 됩니다. 표준 UI 요소를 사용하는 경우에만, 이 모든 동작이 꽁짜로 얻어집니다. 

권장 사항: 표준 UI 요소를 사용한다. 

노트: 영역 바(scope bar)가 표시되는 동안에 다시 세로로 회전하면, 검색 필드가 엉망이 됩니다. 다행이도, 여러분은 여전히 취소 버튼을 탭하여 영역 바(scope bar)를 없앨 수 있습니다. 이것은 iOS 11 버그로 보입니다: 검색 바(search bar)가 테이블 헤더 뷰에 있을때에도 마찬가지 이지만, iOS 10에서 실행되는 동안 동일한 앱에서는 발생하지 않았습니다.

iPhone 8 시뮬레이터에서 앱을 빌드하고 실행해서, 그것이 잘 보이는지 확인합니다.

노트: iPhone X는 가로(landscape) 방향의 compact 넓이 이며, iPhone 8 처럼 동작하며, 8 Plus는 아닙니다. 

다음은 권장 사항 몇가지입니다.

상태 바(Status Bar)

• iPhone X 상태바는 높으며, 정된 20 pt 높이를 사용하는 대신에, 기기 타입에 따라서 동적으로 콘텐츠를 배치합니다.
• 여러분의 앱에 실제 가치가 더해지지 않는 한 항상 상태 바를 보여줍니다.

3x 화면 해상도(3x Screen Resolution)

• 평면 벡터 그림에 PDF를 사용합니다: 레스터화된 그림의 @3x와 @2x를 제공.
• LaunchScreen.storyboard가 없는 경우에 3x를 사용하지 않습니다.

특수한 경우의 홈 인디게이터(Home Indicator Special Cases)

• 여러분의 앱에서 하단에서 위로 스와이프하는 동작을 사용하는 경우에, preferredScreenEdgesDeferringSystemGestures()로 edge protect가 켜집니다 : 사용자는 홈 인디게이터(home indicator)에 접근하기 위해 위로 스와이프(swipe up)를 두번해야 합니다.
• 앱에 수동(passive) 보기가 포함된 경우에, preferHomeIndicatorAutoHidden()로 auto-hiding이 켜집니다 : 사용자가 몇 초동안 화면을 터치하지 않으면, 홈 인디게이터(home indicator)는 사라지고, 사용자가 화면을 터치하면 다시 나타납니다.

iPhone X 시뮬레이터 대 기기(iPhone X Simulator vs Device)

• 시뮬레이터를 사용하여 가로(portrait)와 세로(landscape) 레이아웃을 확인합니다.
• iPhone X 기기를 사용하여 와이드 색상 이미지(wide color imagery), 메탈(Metal), 전면-얼굴 카메라(front-facing camera)를 테스트 합니다.

나머지 것들(Other Stuff)

• iPhone X에서 Touch ID를 참조하지 마세요. Touch ID를 지원하는 기기에서 Face ID를 참조하지 마세요.
• Emoji / Globe와 Dictation 버튼 처럼 시스템 제공 키보드 기능을 복제하지 마세요.

기존 앱 업데이트 하기(Updating an Existing App)

iPhone X에 대해서 기존 앱을 업데이트 하려면 무엇을 해야 하나요? 우선, 배경 이미지를 포함한, assets를 PDF로 업데이트하거나 @3x 이미지를 추가합니다. 그리고 나서 LaunchScreen.storyboard가 있는지 확인하고, Safe Area를 켭니다. 안전 영역(safe area) 레이아웃 가이드가 위, 아래와 가장자리 제약 조건을 변경하므로 이를 확인하고, 필요한 경우 수정합니다.

20pt 상태 바(status bar) 또는 44pt 도구 바(tool bar)에 의존하는 레이아웃을 확인하고, 다른 높이를 허용하도록 수정합니다. 또는 여러분의 앱이 상태 표시줄을 숨기면, iPhone X에 대해 숨기기 해제를 고려합니다.

다음으로, iPhone X에 View as를 설정하고, 모든 레이아웃 구성을 확인합니다. 가장자리(edges), 모서리(coners), 센서 하우징(sensor housing)과 홈 인디게이터(home indicator)로 부터 컨트롤들을 이동시킵니다.

네비게이션 바에 검색 뷰 컨트롤러를 통합하는 것을 고려합니다.

iPhone X 시뮬레이터에서 앱을 빌드하고 실행하고, 모든 레이아웃 구성을 확인합니다. 가로모드(landscape)에서, 테이블 뷰 셀과 섹션 헤더 내용이 삽입되어 있는지 확인하지만, 배경이 가장자리까지 펼쳐집니다.

다음은 간단한 예제 입니다. UISearchController Tutorial로 부터 (원본)완성된 샘플 앱을 다운로드합니다. 이 앱은 Xcode 9 베타로 제작되며, 애플이 iPhone X를 발표하기 전이라서, Tom Elliott는 iPhone X 시뮬레이터에서 테스트 할수 없었습니다.

iPhone X 시뮬레이터에서 빌드하고 실행합니다. 가로모드(portrait)에서, NewCandSearch처럼 보이며, 큰 제목 대신에 네비게이션 바에 candy-green 배경 색과 화려한 제목 이미지를 더합니다.

하지만 검색 바가 테이블 헤더 뷰 안에 있기 때문에 네비게이션 바와 검색 바 사이에는 줄(line) 하나가 있습니다. 그것은 더 나빠진다 : 영역 바를 보기위해 검색 필드를 탭합니다.

검색 바를 네비게이션바로 교체하고, 상태 바로 부터 배경 색상을 제거합니다. 검색 바는 여전히 초록색이며, 제대로 표시되지 않습니다.

더 많은 문제를 보려면, 영역 바를 취소하고 나서 가로모드(landscape)로 회전합니다.

제목 이미지는 약간 잘리고, 센서 하우징(sensor housing)이 검색 막대의 왼쪽 모서리에서 약간 잘라냅니다. 하지만 테이블 뷰는 사용자정의 되지 않으며, 셀 내용은 센서 하우징(sensor housing)에서 명확합니다.

다시, 영역 바(scope bar)를 보기 위해 검색 필드를 탭합니다.

이제 모서리가 둥그럽게 검색 바를 잘라냅니다.

노트: 아마도 여러분을 영역 바(scope bar)를 보여주는 것이 첫번째 테이블 뷰 셀인 초코렛 바(Chocolate Bar)를 숨기는 것을 알것 입니다. 비록 NewCandySearch에서 발생하지 않지만, 네비게이션 바 안으로 검색 바를 옮기는 이유는 아닙니다. 이것은 Tom Elliott가 2017년 8월 2일에 애플에 보고한 iOS 11 버그입니다. 이 튜토리얼을 작성하는 시점에, 여전히 오픈되어 있습니다.

안전 영역 켜기(Turning on Safe Area)

Main.storyboard를 열고, 뷰 컨트롤러 하나를 선택하고 File Inspector를 보세요.

이 앱은 안전영역(safe area) 레이아웃 가이드를 사용하지 않습니다! 그래서 체크박스를 체크하고나서 제약 조건이 안전 영역(Safe Area)을 참조하는지 확인합니다.

빌드하고 실행하고, 영역 바(scope bar)가 가로모드(landscape)에서 어떻게 보이는지 봅니다.

이것이 더 나쁩니다! 테이블 바닥(footer) 뷰는 괜찮지만, 테이블 헤더(header) 뷰는 superview를 훨씬 넘어 확장됩니다. 아마도 다른 iOS 11 버그 일수 있으며, 이 튜토리얼을 읽을때에는 수정될 수 있습니다.

안전 영역(Safe Area)이 모서리 잘림(corner clipping)을 방지하더라도, 검색 바(search bar)가 네비게이션 바로 교체될때 상태 바(status bar)가 배경 색상을 잃어버리는 것은 좋아보이지 않습니다. 검색 바를 네비게이션 바 안으로 이동해서 문제를 해결할 수 있으며, 그것을 여러분이 다음에 할 일 입니다.

검색 바 통합하기(Integrating the Search Bar)

글세, 이것은 쉽습니다 - CandySearch 안으로 네비게이션 바의 searchController를 설정하는 NewCandySearch 코드를 복사합니다. 두 프로젝트에서 MasterViewController.swift를 열고, NewCandySearch로부터 다음 줄을 복사합니다:

// replace tableHeaderView assignment with this
if #available(iOS 11.0, *) {
  self.navigationItem.searchController = searchController
  // Search bar is always visible
  self.navigationItem.hidesSearchBarWhenScrolling = false
} else {
  tableView.tableHeaderView = searchController.searchBar
}

CandySearch의 MasterViewController.swift에서 viewDidLoad()안에 복사하고 다음 줄을 주석 처리 합니다.

tableView.tableHeaderView = searchController.searchBar

이제 AppDelegate.swift를 열고, 다음 줄을 찾습니다.

UISearchBar.appearance().barTintColor = .candyGreen
UISearchBar.appearance().tintColor = .white
UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).tintColor = .candyGreen

첫번째 줄을 삭제하거나 주석처리: 검색 바는 네비게이션 바로부터 색조(tint) 색상을 가져옵니다.

빌드하고 실행하고, 영역 바를 보기 위해 검색 필드를 탭합니다:

그래서 상태 바(status bar) 배경 색상이 고정되어 있지만, 텍스트 필드 또한 녹색이며, 검색 필드 프롬프트 텍스트와 아이콘을 보기 어려워 집니다. 삽입 바(insertion bar) 또한 녹색이지만, 수정할 수 있습니다 - AppDelegate.swift에서 세번째 appearance 설정을 변경합니다.

UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).tintColor = .white

이 아래에 다음 줄을 추가합니다:

UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).backgroundColor = .white

이렇게하면 텍스트 필드 배경이 흰색이 되지만, 이 튜토리얼을 작성할때, 동작하지 않으며, 다른 iOS 11 버그를 제안합니다. 임시로 고치고, 검색 필드 프롬프트 텍스트와 아이콘의 색상을 변경할 수 있습니다. 예를 들어, 프롬프트 텍스트를 흰색으로 만들려면, AppDelegate.swift의 application(_:didFinishLaunchingWithOptions:)에 다음 코드를 추가합니다.

let placeholderAttributes: [NSAttributedStringKey : Any] = [NSAttributedStringKey(rawValue: NSAttributedStringKey.foregroundColor.rawValue): UIColor.white, NSAttributedStringKey(rawValue: NSAttributedStringKey.font.rawValue): UIFont.systemFont(ofSize: UIFont.systemFontSize)]
let attributedPlaceholder: NSAttributedString = NSAttributedString(string: "Search", attributes: placeholderAttributes)
UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).attributedPlaceholder = attributedPlaceholder

검색 아이콘을 만들고 흰색 버튼을 지우려면, MasterViewController.swift의 viewDidLoad()에 다음에 오는 코드를 추가합니다.

let textField = searchController.searchBar.value(forKey: "searchField") as! UITextField
let glassIconView = textField.leftView as! UIImageView
glassIconView.image = glassIconView.image?.withRenderingMode(.alwaysTemplate)
glassIconView.tintColor = .white
let clearButton = textField.value(forKey: "clearButton") as! UIButton
clearButton.setImage(clearButton.imageView?.image?.withRenderingMode(.alwaysTemplate), for: .normal)
clearButton.tintColor = .white

다시 말하지만, 이 튜토리얼을 작성하는 시점에는 작동하지 않지만, 여러분이 이것을 읽을때까지는 고쳐질 수도 있습니다.

이제 여기에서 어디로 가나요?(Where To Go From Here?)

iPhone X이나 다른 iPhone에서 멋지게 보이는 앱을 디자인하는 좋은 아이디어가 있습니다. 다음은 이 튜토리얼의 모든 코드와 함께 두개의 샘플 프로젝트 묶음입니다. 더 깊이 알고 싶으면, 다음 리소스를 확인하세요.

애플(Apple)

• iPhone X에 대한 디자인: Mike Stern이 발표한 iPhone X Human Interface Guidelines
• iPhone X에 대한 앱 빌드하기: Paul Marcos는 안전 영역(safe area) 레이아웃을 사용하고, 컨텐츠 뷰 대신에 배경 뷰에 대한 색상을 설정하고, 네비게이션 바 안에 검색 바를 이동하여 세가지 문제를 해결하여, WWDC 앱을 업데이트했습니다.
• iPhone X 디자인 리소스: 포토샵, 스케치, Adobe XD에 대한 템플릿

raywenderlich.com

오토 레이아웃(auto layout)을 처음 사용하거나 다시 공부해야 한다면, 튜토리얼과 비디오 과정을 확인합니다.

• iOS 11에서 오토 레이아웃 튜토리얼: 시작하기: iOS 11, Xcode 9와 Swift 4로 업데이트 되었지만, iPhone X 발표 이전입니다.
• 오토 레이아웃 비디오 과정 시작하기: 이 튜토리얼을 작성할때 iOS 10, Xcode 8과 Swift 3에 대한 비디오 과정이 최신 버전입니다.
• iOS 11에서 적응형 레이아웃 튜토리얼: 시작하기: iOS 11, Xcode 9와 Swift로 업데이트 되었지만, iPhone X 발표 이전입니다. 특정 플랫폼 코드 없이 모든 iOS 기기에서 동작하는 단일 레이아웃을 만듭니다. 적응형 레이아웃(Adaptive layout)은 아직 출시되지 않는 미래의 기기에서도 잘 어울립니다.