아이폰 X을 위한 디자인 가이드

지난 13일 아이폰 X(아이폰 10)이 공식적으로 공개되었습니다. 1125x2435px의 Super Retina Display가 탑재되었고, 화면 상단에는 혁신적인 얼굴 인식 센서들이 추가되었지요.

아이폰 X은 디바이스 전체가 디스플레이일 뿐만 아니라, Touch ID가 아닌 Face ID를 이용합니다. 기존의 휴대폰들과 전혀 다른 아이폰 X을 디자인 하는 건 새로운 도전이지만, 그에 따른 새로운 디자인 기회일 수 있습니다.

오늘 프리랜서 가이드에서는 아이폰 X을 위한 디자인 가이드를 알려드립니다.

아이폰 X을 위한 디자인 가이드

아이폰 X은 너비는 기존의 아이폰 6, 7, 8과 동일하지만, 높이가 145pt로 수직 공간이 ± 20% 더 커졌습니다. @1x를 디자인할 때, 375x812 픽셀의 아트보드가 필요하며, 새로운  Retina Display로 인해 아이폰 8과 같은 @2x, 아이폰 7, 8 plus와 같이 @x를 내보낼 필요가 없습니다.

아이폰 X를 위한 디자인할 때, 새로운 디바이스의 고유한 특징들(둥근 모서리, M자 모양의 화면 상단 센서들, 홈 인디케이터)을 가리지 않도록 UI 디자인을 해야 합니다.

(이미지: 하단의 하얀 막대선 모양인 아이폰 X의 홈 인디케이터)

현재 iOS 네이티브 구성 요소(네비게이션 바, 테이블, 컬렉션 뷰, 탭 모음 등)를 사용하는 앱은 모두 새로운 아이폰에서도 사용할 수 있습니다. 이 요소들은 모두 자동으로 삽입되고 배치되지요.

(이미지: 아이폰 8 디자인 / 자동으로 아이폰 X에 맞춰진 디자인)

커스텀 된 레이아웃을 사용하는 경우 새로운 아이폰의 레이아웃에 맞게 앱을 업데이트해야 합니다. 자동 레이아웃(Auto Layout)을 사용하면 쉽게 업데이트할 수 있습니다.

고려해야 하는 사항들

화면 전체를 사용하세요. 스크롤 뷰를 화면 맨 아래까지 스크롤하는 디자인이라면 디자인 곡선이 있는 가장자리를 넘어가도 괜찮습니다. 또한, 애플은 기기 상단의 센서들과 기기 하단의 곡선을 기존 아이폰처럼 검은색 상태 표시 바로 덮지 말 것을 권장합니다.

중요한 정보는 중앙에 배치하세요. 중요한 콘텐츠가 기기의 센서와 코너에 잘리지 않게 중앙에  정렬되고 대칭인 레이아웃을 사용해야 합니다. 자동 레이아웃을 사용하면 콘텐츠가 안전한 영역에 자동으로 배치되므로 모서리, 센서 또는 홈 인디케이터에 가려지지 않게 디자인할 수 있습니다.

새로운 상태바. 디스플레이 상단의 센서(M자의 들어간 부분)로 인해 상태 표시 바가 두 부분으로 나뉩니다. UI가 해당 공간(이전에는 20pt, 현재 44pt)을 사용할 경우, 아이폰 X에서는 세로 길이가 늘어났기 때문에 인터페이스를 업데이트해야 합니다. 이전에 다른 아이폰의 경우와 다르게 아이폰 X는 사용자가 전화를 걸거나 내비게이션 앱을 사용하는 경우 앱 화면의 높이가 변경되지 않습니다.

(이미지: 두개로 나뉘고 더 길어진 상태 바)

상태 바를 유용하게 사용하세요. 현재 디자인에서 상태 바를 사용하고 있지 않다면, 상태 바를 사용하는 것을 고려해보세요. 아이폰 X는 화면의 높이가 높아져서 콘텐츠를 표시할 수 있는 공간이 더 많으므로 상태 바를 숨기지 않아도 됩니다. 사용자는 상태 바에서 유용한 정보들을 볼 수 있으며, 이 공간은 대부분 다른 UI 요소들에 의해 사용되지 않는 공간입니다.

전체 화면 이미지. 현재 전체 화면 이미지를 사용하고 있다면, 새 아이폰을 위해 업데이트가 필요합니다. 이미지가 잘릴 수도 있고 중요한 부분이 가려질 수도 있기 때문이지요.

인터렉션 컨트롤러를 화면 하단에 배치하지 마세요. 새로운 아이폰에서는 홈으로 돌아가려면 화면을 위로 스와이프 해야 합니다. 따라서 홈 인디케이터 주변에 버튼을 배치하는 것은 좋지 않습니다. 사용자가 실수로 홈으로 돌아가는 제스처를 할 수도 있고, 버튼을 누르기 힘들어할 수도 있기 때문이지요. 탭 바는 계속 사용할 수 있지만, 홈 인디케이터를 방해햐지 말아야 한다는 점을 명심하세요.

홈 인디케이터를 (항상) 숨기지 마세요. 사용자가 화면을 몇 초 동안 터치하지 않으면 자동으로 홈 인디케이터를 숨기고, 화면을 터치하면 다시 나타나게 할 수 있습니다. 이것은 비디오나 사진을 보는 것처럼 몰입해야 하는 상황에 주로 사용하고, 평소에는 홈 인디케이터를 숨기지 마세요. 또한, 홈 인디케이터는 앱 배경에 따라 자동으로 색상이 변경됩니다.

더 많은 색상. 새로운 Super Retina Display는 sRGB 대신 P3 컬러를 더 많이 표시합니다. 이는 더 풍부한 색상을 보여줄 수 있지요. 특히, 비디오와 사진의 경우, 넓은 색상 범위의 이점을 누릴 수 있습니다.

'위로 스와이프'와 같은 제스처들에 대해 알아두세요. 물리적인 홈 버튼이 사라졌기 때문에 제스처를 사용하여 아이폰과 인터렉션 해야 합니다.
위로 쓸어 올리면 홈으로 돌아가거나 멀티태스킹으로 이동합니다. 멀티태스킹 뷰에서 왼쪽이나 오른쪽으로 스와이프 하면 열려있는 앱을 전환할 수 있지요. 화면 상단에서 아래로 스와이프하면 알림 또는 제어 센터로 이동합니다.
게임에서처럼 기본 iOS 제스처보다 우선하는 맞춤 제스처를 사용할 수도 있습니다. 하지만 사용자가 시스템 기능과 헷갈리게 될 수 있으니 조심히 사용해야 합니다.

Face ID. 이전 아이폰은 사용자가 지문을 사용하여 디바이스 잠금을 해제하거나 비밀번호를 입력하는 Touch ID를 사용했습니다. 이 센서는 홈 버튼 안에 숨겨져 있었지요. 아이폰 X에서는 홈 버튼이 사라지고, Face ID를 사용하여 잠금을 해제하는 방식으로 대체되었습니다.

커스텀 키보드. 커스텀 키보드를 디자인할 때 키보드에 이모지나 받아쓰기 버튼을 추가하지 마세요. 홈 인디케이터 주변의 키보드 아래에 자동으로 추가됩니다.

더 커진 네비게이션 바. iOS 11을 사용하면 네비게이션 바가 훨씬 길어집니다. 이 디자인은 더 길어진 아이폰 X의 새로운 상태 표시 바와 잘 어울리지요. 네비게이션 바는 멋진 스크롤 애니메이션들이 가미될 것이기 때문에 이를 고려하여 디자인하는 것이 좋습니다.

요약

- 아이폰 X는 145pt 더 길어졌으므로 375x667pt가 아니라, 375x813pt에 맞춰서 디자인하세요.
- 아이폰 X는@3x 에셋을 사용합니다.
- 화면 전체를 이용하고, 기기의 고유한 기능을 숨기지 마세요.
- 기기의 센서나 모서리에 가려지지 않도록 중요한 콘텐츠는 중앙에 배치하세요.
- 길어진 상태 바는 두개로 나누어 집니다. 이전에는 22pt였지만 이제44pt에 달합니다.
- 기존의 전체 화면 이미지는 이미지가 잘리지 않도록 업데이트해야 합니다.
- 화면 하단의 홈 인디케이터 주변에 버튼을 추가하지 마세요.
- 홈 인디케이터는 꼭 숨겨야 할 때가 아니라면 숨기지 마세요.
- P3 색상 범위를 통해 더 풍부하고 넓은 범위의 색상을 얻을 수 있습니다.
- 홈 인디케이터 및 상태 표시 바 근처에서 사용되는 기본 제스처들을 인지하세요.
- Face ID는 기존의 Touch ID를 대체합니다. UI를 업데이트하고 Face ID로 교체하세요.
- 커스텀 키보드는 이모지와 받아쓰기 버튼을 추가할 필요가 없습니다.
- 더 커진 네비게이션 바는 멋진 애니메이션을 가지고 있으며, 길어진 디스플레이와 잘 어울립니다.

추가적인 정보는Apple에서 제공하는 비디오를 확인하세요.

Q. 앱 UI를 미리 보려면 어떻게 해야 하나요?

Xcode 9 시뮬레이터를 사용하여 앱을 미리 볼 수 있습니다. UI를 업데이트해야 하는 경우 바로 표시됩니다.

Q. iOS 11과 아이폰 X의 리소스는 어디서 찾을 수 있나요?

Apple은 Sketch, Photoshop, Adobe XD를 위한 새로운 리소스를 보유하고 있습니다. Apple Design Resources에서 찾을 수 있습니다.

본문 내용은 https://blog.prototypr.io/designing-for-the-iphone-x-4239d5ac736c을 각색하여 작성했습니다.