brunch

매거진 디자이너 성장일기

라이킷 285 댓글 7

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 서한교 Sep 16. 2017

iOS 디자인 가이드라인 번역 - iPhone X

이 글은 iOS Human Interface Guidelines를 학습하기 위해 번역한 것이며, 개인적인 이해를 돕기 위한 의역이 포함되어 있습니다. 잘못된 부분은 댓글 남겨주시면 감사하겠습니다. :)

iPhone X는 이전보다 풍부하고 다양한 콘텐츠를 잘 전달할 수 있는 큰 고해상도 디스플레이를 갖고 있습니다.

Screen Size

세로인 경우 iPhone X의 디스플레이 너비는 iPhone 6, 7, 8의 4.7 인치 디스플레이의 너비와 일치합니다. 그러나 iPhone X의 높이는 4.7인치 디스플레이보다 145pt가 더 큽니다. 이는 콘텐츠를 볼 수 있는 영역이 20% 늘어났다는 것을 의미합니다.

앱의 아트웍에 고해상도 이미지를 사용하세요.

iPhone X는 3x배율의 고해상도 디스플레이를 제공합니다. 글리프나 다른 아트웍의 경우에 디스플레이의 크기와 관계없이 일관된 크기로 표시되는 독립적인 pdf를 사용하는 것이 가장 좋습니다. 레스터화 된 아트웍의 경우 3x, 2x를 모두 제공해야 합니다.

Layout

iPhone X에 적합한 디자인은, 화면에 가득 차게 레이아웃을 잡아야 하고 디자인이 디바이스의 둥근 모서리와 센서 하우징 또는 홈 화면에 접근할 수 있는 인디케이터에 가려지면 안 됩니다.

표준을 사용하는 앱의 내비게이션 바, 테이블 및 컬렉션과 같은 시스템 UI는 디바이스의 새로운 폼 팩터에 맞게 자동으로 조정됩니다. 배경은 디스플레이의 모서리까지 확대되며, UI 요소는 적절하게 삽입되고 배치됩니다.

앱에 커스텀 레이아웃을 사용한 경우에도 오토 레이아웃 그리고 Safe area 및 레이아웃 가이드라인을 준수했다면 iPhone X를 지원하는 것 또한 비교적 쉬울 것입니다.

Preview your app on iPhone X.

Xcode에 포함된 Simular를 사용하여 iPhone X에서 앱을 미리 보고 클리핑 및 기타 레이아웃 문제를 확인할 수 있습니다. 와이드 컬러 이미지와 같은 일부 기능은 실제 디바이스에서 미리 보는 것이 가장 좋습니다.

Provide a full-screen experience.

배경이 디스플레이의 끝까지 뻗어있고, 테이블 및 컬렉션과 같이 세로로 스크롤 가능한 레이아웃이 맨 아래까지 계속 이어져 있는지 확인하세요.

클리핑(콘텐츠 짤림)을 방지해야 합니다.

일반적으로 콘텐츠는 중앙에 위치하고 대칭적으로 삽입되어야 모든 방향에서 좋아 보입니다. 또한 모서리와 센서 하우징 또는 홈 화면에 접근할 수 있는 인디케이터에 가려지면 안 됩니다. 최고의 결과를 위해서는 시스템이 제공하는 표준 UI 요소를 사용하고, 오토 레이아웃을 사용하여 인터페이스를 구성하세요. 모든 앱은 UIKit에 정의된 safe area 및 레이아웃 가이드라인을 준수해야 디바이스에 맞게 적절하게 적용됩니다. safe area는 콘텐츠와 status bar, navigation bar, toolbar, 그리고 tab bar가 부분적으로 겹쳐지는 것을 방지해줍니다.

status bar 높이에 주의하세요.

iPhone X는 다른 iPhone보다 status bar 영역이 큽니다. 이를 고려하여 사용자의 디바이스에 따라서 콘텐츠가 유동적으로 배치되도록 앱을 업데이트해야 합니다. 음성 녹음 및 위치 추적과 같은 백그라운드 작업이 활성화된 경우에도 iPhoneX의 status bar의 높이는 변경되지 않습니다.

만약 지금 당신의 앱이 status bar를 가리고 있다면 다시 생각해봐야 합니다.

iPhone x는 4,7인치 iPhone보다 더 넓은 화면을 제공하고, status bar는 앱과 상관없는 영역을 차지하고 있습니다. status bar에는 사용자가 유용하다고 생각하는 정보가 표시됩니다. 이 정보는 부가가치에 대한 대가로만 숨겨져야 합니다.

기존 아트웍 재사용시 종횡비 차이에 유의하세요.

4.7인치 iPhone의 아트웍을 iPhone X에서 보면 잘리거나 레터박스(letterbox)로 나타납니다. (*레터박스 : 화면의 상하에 검은 띠가 생기는 것) 마찬가지로 iPhone X의 풀사이즈 아트웍을 4.7인치 iPhone에서 보면 잘리거나 필러 박스(pillarbox)로 나타납니다. (*필러 박스 : 화면의 좌우에 검은 띠가 생기는 것) 중요한 콘텐츠가 두 디스플레이에서 모두 문제없이 보이는지 확인하세요.

화면 최하단과 모서리에 상호작용할 수 있는 제스처나 버튼을 넣지 마세요.

사용자는 화면의 하단에서 스와이프를 사용하여 홈 화면 및 앱 스위처에 접근하며, 이러한 동작은 이 영역에서 구현한 커스텀 제스처를 취소시킬 수도 있습니다. 화면의 모서리는 사용자가 편하게 접근하기 어려운 곳입니다. (*앱 스위처 : 홈버튼 두번 탭)

디스플레이에 있는 주요한 기능에 무언가를 씌우거나 강조하지 마세요.

화면의 상단과 하단에 검은색 바를 배치하여 홈 화면에 액세스 하기 위한 둥근 모서리, 센서 하우징 또는 인디케이터를 숨기려고 하면 안 됩니다. 또한 괄호, 배젤, 도형, 코치마크와 같은 시각적 장식을 이용하여 이 영역을 강조해서도 안됩니다.

홈 화면에 접근할 수 있는 인디케이터의 자동 숨기기 기능을 허용합니다.

자동 숨기기가 활성화된 상태에서, 사용자가 몇 초 동안 화면을 터치하지 않으면 인디케이터가 사라집니다. 그리고 사용자가 화면을 터치하면 다시 나타납니다. 이 동작은 비디오 또는 사진 슬라이드 쇼를 재생하는 환경에서만 활성화되어야 합니다.

Color

iPhone X의 디스플레이는 P3 컬러 스페이스를 지원하므로 sRGB보다 더 풍부한 컬러를 보여줍니다.

와이드 컬러는 시각적 경험을 향상시킵니다. 와이드 컬러를 사용하는 사진과 비디오는 훨씬 생생합니다.

Gestures

iPhone X는 Screen-edge gestures를 사용하여 홈 화면, 앱 스위처, 알림 센터 및 제어 센터에 접근할 수 있습니다.

Screen-edge gestures는 시스템 전체에 영향을 주면 안 됩니다.

드문 경우지만 게임과 같이 몰입해야 하는 앱의 경우, 시스템 제스처보다 우선순위가 높은 게임 맞춤형 제스처가 필요할 수도 있습니다. 첫 번째 스와이프는 앱 관련 제스처를 호출하고 두 번째 스와이프는 시스템 제스처를 호출해야 합니다. edge protect라고 하는 이 동작은 사용자가 시스템 레벨의 액션에 접근하는 것을 어렵게 할 수 있기 때문에 적절하게 구현되어야 합니다.

Additional Design Considerations

인증 방법을 정확하게 구분하여 사용하세요.

iPhone X는 인증을 위한 Face ID를 지원합니다. 앱이 Apple Pay 또는 다른 시스템 인증 기능과 통합되는 경우 iPhone X에서는 Touch ID를 사용하면 안 됩니다. 마찬가지로 앱이 Touch ID를 지원하는 장치에서 Face ID를 사용하지 않도록 해야 합니다.