iPhone X를 위한 디자인

1125 × 2436px의 iPhone X Super Retina Display를 장착한 (iPhone 10)이 발표되었습니다.

iPhone 10은 디바이스 전체가 디스플레이 일 뿐 아니라, Touch ID보다 미래지향적 인증 시스템인 Face ID를 장착하였습니다.

이 아름다운 디바이스에 맞는 디자인을 하는 것은 디자이너들에게는 새로운 도전과제이며, 동시에 새로운 디자인 기회일 수 있습니다.

(출처 : Human Interface GuidelinesiOS,iPhone X)

iPhone X의 세로 모드의 경우, 너비는 iPhone 6, 7 및 8과 동일하지만 높이가 145pt이므로 수직으로 공간이 ± 20% 더 커졌습니다.

@ 1x를 디자인할 때 375 × 812 픽셀의 아트보드가 필요하며, 새로운 Retina Display로 인해 iPhone 8과 같이 @ 2x, iPhone 7-8 Plus와 같이 @ x를 내보낼 필요가 없습니다.

iPhone X를 위한 디자인을 할 때는 디바이스의 고유한 특징들 (둥근 모서리, M자의 상태 표시 바에 맞춰 상단을 잘라 내기, 홈 인디케이터)을 사용하여 UI를 디자인해야 합니다.

iPhone X에서의 홈 인디케이터는 화면 하단에 막대선을 나타냄으로써 물리적이었던 홈버튼을 대체합니다. 홈 화면이나 멀티 태스킹으로 돌아가기 위해서는 모든 앱에서 아래에서 위로 스와이프 합니다.

보이는 하단의 하얀 막대선이 새로운 홈 인디케이터 입니다.

현재 iOS 네이티브 앱이라면 앱의 컴포넌트들은(내비게이션 바, 테이블, 탭 바, 리스트뷰 등) 새로운 iPhone에 맞게 자동으로 조정됩니다.

왼쪽이 iPhone 8 디자인, 오른쪽이 자동으로 iPhone X에 맞춰진 디자인

커스텀 된 레이아웃을 사용하는 경우 앱을 새로운 iPhone에 맞는 레이아웃으로 업데이트해야 될 수 있습니다. 그러나 자동 레이아웃을 사용하면 상당히 쉽습니다.

시작해 봅시다.

전체 화면을 사용하는 환경을 디자인해야 합니다. 스크롤 뷰를 화면 맨 아래까지 스크롤하는 디자인이라면 디자인이 곡선이 있는 가장자리를 넘어가도 괜찮습니다. 또한, 애플은 상단의 M자 컷아웃과 하단 커브의 가장자리에 디자인 요소를 숨기지 않도록 권장합니다. 기존의 검은색 상태 표시 바를 배치해서 구식 iPhone처럼 보이게 하지 마십시오.

중요한 정보를 중심에 두고 나머지 정보를 배치합니다. 중요한 내용이 중앙에 정렬되고 대칭인 레이아웃을 사용해야 UI가 디바이스의 센서나 모서리에 의해 잘리지 않습니다. 자동 레이아웃을 사용하면 콘텐츠가 자동으로 안전한 영역에 배치되어 디자인이 모서리, 센서 또는 홈 인디케이터 뒤에 숨겨지지 않습니다.

새로운 상태 표시. 디스플레이 상단의 센서(M자의 들어간 부분)로 인해 상태 표시 바가 두 부분으로 나뉩니다. UI가 그 공간 (M자의 들어간 부분, 이전의 20pt, 현재는 44pt)에서 특별한 액션을 하도록 디자인되어있다면 iPhone X에서는 세로의 높이가 늘어났기 때문에 인터페이스를 업데이트해야 합니다. 본인의 디자인에서 높이를 변경할 수 있는지 확인하십시오. 이전에 다른 iPhone의 경우와 다르게 새로운 iPhone의 가장 좋은 점은 사용자가 전화를 걸거나 내비게이션 앱을 사용하는 경우에 앱 화면의 높이가 변경되지 않는다는 것입니다.

잘려지고 세로로 길어진 상태표시바

디자인할 때 새로운 상태 표시 바를 표시합니다. 현재 디자인에서 상태 표시 바를 숨기면 Apple에서 이 결정을 재고해줄 것을 요청합니다. 화면의 높이가 높아져서 콘텐츠를 표시할 수 있는 공간이 더 많으므로 상태 표시 바를 다시 디자인하는 데 공간은 충분할 수 있습니다. 사용자는 상태 표시 바에서 유용한 정보를 찾을 수 있으며 이 공간은 대부분 다른 UI 요소들에 의해 사용되지 않을 공간입니다.

전체 화면 이미지. 현재 디자인에서 전체 화면 이미지를 사용하는 경우 새로운 iPhone 용으로 전체 화면 이미지를 업데이트해야 합니다. 만약 현재 이미지를 그대로 사용한다면, 그 이미지들은 잘릴 수 있고 어떤 부분들은 안 보일 수 있습니다.

인터렉션 컨트롤러를 화면 하단에 배치하지 마십시오. 새로운 iPhone에서는 홈으로 돌아가기 위해서 화면을 위로 스와이프 해야 하기 때문에 홈 인디케이터 주위에 제스처를 위해 일정 간격을 남겨둬야 합니다. 홈 인디케이터 또는 디스플레이 하단의 둥근 모서리 근처에 버튼을 배치하면 사용자가 실수로 홈으로 돌아가는 제스처를 사용하여 이탈이 생길 가능성이 있고 사용자가 원하는 기능을 하는 UI가 손에 닿기 어려울 수 있습니다. 탭 바는 계속 사용할 수 있지만 홈 인티 케이터를 방해해서는 안된다는 점에 유의해야 합니다.

홈 인디케이터를 숨기지 마십시오. iOS는 당신의 앱에서 사용자가 몇 초 동안 화면을 터치하지 않으면 홈 인디케이터를 자동으로 없어질 수 있게 합니다. 화면을 터치하면 홈 인디케이터가 다시 나타나며 이것은 주로 비디오 또는 사진 보기와 같은 몰입형 경험에만 사용되어야 합니다. 정말로 필요하지 않다면 홈 인디케이터를 없애지 마십시오. 홈 인디케이터는 앱의 배경에 따라 자동으로 색상이 변경됩니다.

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

위로 스와이프, 제스처들의 사용에 주의해야 합니다. 물리적인 홈 버튼이 없어졌기 때문에 제스처를 사용하여 iPhone과 인터렉션을 해야 합니다.

위로 쓸어 올리면 홈으로 돌아가거나 멀티태스킹으로 이동합니다. 멀티태스킹 뷰에서는 왼쪽 및 오른쪽으로 스와이프 하면 열려있는 앱을 전환할 수 있습니다. 화면 상단에서 아래로 스와이프 하면 알림 또는 제어 센터로 이동합니다.

게임에서처럼 기본 iOS 동작을 무시할 수 있는 맞춤 제스처를 사용할 수도 있습니다. 한 번 뿐이지만, OS 제스처를 사용하기 전에 앱의 특정 제스처를 먼저 사용할 수 있게 하는 기능인 "edge protect”을 사용하여 자신 만의 제스처를 사용할 수 있습니다. 하지만 이 기능을 사용하면 사용자가 시스템 기능을 사용하기가 더 어려워 지므로 웬만하면 사용하지 마십시오.

Face ID. 이전 iPhone은 사용자가 지문을 사용하여 디바이스를 잠금 해제하거나 앱 내부에서 비밀번호로 잠긴 작업을 수행할 수 있는 훌륭한 기능인 터치 ID를 가지고 있었습니다. 이 센서는 홈 버튼 내부에 숨겨져 있었고, 홈 버튼이 iPhone X에서 사라졌기 때문에 Apple은 face ID로 더 고급스럽고 안전한 방법으로 기기를 잠금 해제합니다.

face ID를 입력하면 새로운 iPhone은 얼굴을 감지하고 기기의 잠금을 해제하는 데 아주 훌륭한 알고리즘을 사용합니다. 이렇게 하면 앱에 새로운 UI가 표시되며 iPhone X가 더 풍부한 사용자 경험을 할 수 있게 해줍니다. 또한 온보딩이나 메뉴에서 Touch ID를 더 이상 사용하지 않고 Face ID로 대체합니다.

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

커진 내비게이션 바. iOS 11을 사용하면 네이티브 내비게이션 바의 디자인이 키가 더 크게 업데이트되었습니다. 이 디자인은 특히 키가 큰 iPhone X의 새로운 상태 표시 바와 잘 어울립니다. 따라서 이를 고려해서 디자인하는 것이 좋습니다. 또한 스크롤할 때는 멋진 네이티브 애니메이션이 가미됩니다.

요약

- iPhone X는 145pt 더 크므로 375x667 pt 대신 375x812 pt를 위한 디자인이 필요합니다.

- iPhone X은 @ 3x 에셋을 사용합니다.

- 전체 화면을 사용한 경험을 만들고, 디바이스의 고유한 특징들을 숨기지 마십시오.

- UI의 중요한 콘텐츠를 중앙에 배치하고, 디자인 요소가 장치의 센서나 모서리에 항상 숨겨져 있지는 않은지 항상 확인합니다.

- 이전 22pt였던 상태 표시 바가 이제는 44pt에 달하고, 두 부분으로(M자 모양) 나누어져 있습니다.

- 전체 화면 이미지는 이미지가 완전히 표시되도록 업데이트되어야 합니다.

- 화면 하단에 있는 홈 인디케이터 근처에 버튼을 추가하지 마십시오.

- 정말로 필요할 때가 아니면 홈 인디케이터를 숨기지 마십시오.

- P3 컬러 스펙트럼 덕분에 더 풍부하고 넓은 범위의 색상을 얻을 수 있습니다.

- 홈 인디케이터 및 상태 표시 막대 근처에서 사용자의 기본 동작을 예상하고, 이를 혼동하지 마십시오.

- Face ID는 Touch ID를 대체하고 UI를 업데이트하며 Touch ID에 대한 참조들을 대체합니다.

- 커스텀 키보드는에 이모지 및 받아쓰기 버튼을 추가할 필요가 없습니다.

- 더 큰 내비게이션 바는 키가 큰 디스플레이에서 잘 보이고 애니메이션으로 나타납니다.

iPhone 용 Designing에 대한 Apple의 비디오를 시청하는 것도 좋은 방법입니다.

내 앱 UI를 미리 보려면?

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

iOS 11 및 iPhone X 리소스를 찾을 수 있는 곳?

Apple은 Sketch, Photoshop 및 Adobe XD를 위한 새로운 리소스를 보유하고 있습니다.

Apple Design Resources에서 찾을 수 있습니다.

참고 : 대부분의 정보는 Apple UI Guidelines에서 제공됩니다.

iPhone X를 위한 디자인

댓글