t02

아이폰X를 생각하며 디자인하자.

- 아이폰X ui 가이드라인과 그에 따른 해상도 대응

지난해 말 드디어 국내에도 아이폰X가 출시되었습니다. 공개된 아이폰X는 기존의 아이폰 시리즈와는 디자인에서 상당한 차이를 보였습니다.  디자이너의 시각으로 제일 먼저 눈에 띈 것이 홈버튼이 사라지고 디바이스 앞면 전체를 디스플레이로 사용한 것이었습니다.  (흔히 ‘M자 탈모’라고들 하는 아래 형태를 말합니다.) t03

이 글은 iOS Human Interface Guidelines 학습과 더불어 현재 기존의 애플리케이션이 아이폰X에 어떻게 해상도 대응을 하고 있고, 앞으로 아이폰X를 고려한 디자인을 하기 위해 어떤 점을 유의해야 하는지 살펴보기 위해 여러 관련있는 아티클과 가이드들을 번역 및 가공하였습니다.

그리고 아이폰X 가이드라인에는 다양한 내용들이 있지만 아이폰X의 고유한 특성에 유의하며 디자인을 해보면서, 디자이너로서 기존의 아이폰시리즈와 어떤 부분에서 변화가 생겼는지, 어떤 부분을 유의해야 하는지 느낀 점들을 살펴보았습니다.

공식 UI가이드라인에서 가져온 내용 등 일부 오역 및 의역이 있을 수 있다는 점을 유의하시고, 사실과 다르거나 잘못된 부분이 있다면 언제든 의견 주세요.

 

아이폰X를 위한 디자인

새로 발표된 아이폰X에 대응하기 위해 추가된 주요 사항은 다음과 같습니다.

  • 아이폰 6/7 대비 세로 크기 145pt 증가 (812pt 375pt)
  • 화면 배율은 @3x 사용
  • 사용할 수 없는 영역(상단바, 둥근 화면 모서리)을 피하기 위한 안전영역(safe area) 추가
  • 큰 네비게이션 타이틀을 사용할 수 있게 됨
  • 홈 화면 진입, 앱 전환 제스처와 충돌하지 않도록 제스처 사용

위 사항들은 아이폰X가 출시되면서 앞으로 iOS 앱 디자인을 할 때도 유의해야 하는 중요한 UI 가이드입니다. 하단에서 더욱 자세히 살펴보기로 하겠습니다.

 

  1. Size

아이폰X의 세로모드의 경우,  디스플레이 너비는 아이폰 6,7,8의 4.7인치 디스플레이 너비와 동일하며,  높이는 4.7인치 디스플레이보다 145pt 더 큽니다. 이 것은 기존보다 콘텐츠를 위한 공간이 약 20% 더 늘어 난 것을 의미합니다.

 

01

 

그리고 위 표에서 보는 것과 같이 아이폰X는 배율이 3배(@3x)인 고해상도 슈퍼 망막 디스플레이를 사용합니다.

기존의 포토샵과 같은 툴을 이용하여 디자인을 하시는 분들이라면 아이폰X는 3배수 이미지를 사용한다는 점을 유의하면서 디자인을 하셔야겠습니다.

 

  1. 아이폰X Cutout (notch)

아이폰X는 전면 상단 카메라, 스피커, 마이크 및 새로운 얼굴 ID 센서를 수용하기 위해 화면 상단에 컷 아웃(notch)이 있습니다.

 

02

  1. Safe Area

안전영역(safe area)은 원래 TV OS에서 처음 도입된 개념으로 컨텐츠가 가리지 않는 것이 보장되는 영역입니다. 아이폰 X이 등장하면서 안전영역을 폰에서도 사용하게 되었습니다. 디자인할 때 주요 콘텐츠와 버튼이 이 영역을 벗어나지 않도록 해야 합니다.

iPhone X를 디자인할 때 화면을 채우는 디자인 레이아웃이 장치의 둥근 모서리, 센서 하우징 또는 홈 화면에 액세스하기 위한 표시기로 가려지지 않도록 해야합니다.

03

탐색 막대, 표 및 모음과 같이 시스템에서 제공하는 표준 UI 요소를 사용하는 대부분의 응용 프로그램은 장치의 새로운 폼 팩터에 자동으로 적응합니다. 배경 이미지는 디스플레이의 가장자리까지 확장되며 UI 요소는 적절하게 삽입되고 배치됩니다.

04

커스텀  된 레이아웃이 있는 앱의 경우, 자동 레이아웃과 안전 영역 및 여백 레이아웃 가이드를 준수했다면 iPhone X를 지원하는 것이 상대적으로 쉽습니다. 자동 레이아웃(Auto Layout)에 관련해서는 하단에서 다시 살펴보겠습니다.

다음은 안전영역(Safe Area) 및 아이폰X 디자인을 할 시 참고할 유의사항입니다.

 

전체 화면 경험을 제공하십시오. 배경이 디스플레이의 가장자리까지 뻗어 있고 테이블 및 컬렉션과 같이 세로로 스크롤 가능한 레이아웃이 맨 아래까지 계속 이어져 있는지 확인하십시오.

 

상태 표시 줄 높이에 주의하십시오. iPhone X에서 상태 표시줄은 다른 iPhone보다 높습니다. 시스템의 양호한 모습을 유지하기 위해 Apple은 iPhone X의 상태 표시 줄 높이를 20pt에서 44pt로 두 배 늘렸습니다. 그리고 스마트 폰의 둥근 모서리 화면으로 이동했습니다. 이를 고려하여 사용자의 디바이스를 기반으로 콘텐츠를 유동적으로 배치하도록 앱을 업데이트해야 합니다. 음성 녹음 및 위치 추적과 같은 백그라운드 작업이 활성화되어 있어도 iPhone X의 상태 표시줄의 높이는 변경되지 않습니다.

05

현재 디자인된 앱이 상태 표시줄을 숨기고 있다면 iPhone X디자인에 대한 결정을 재고하길 요청합니다. 상태 표시줄에는 사람들이 유용하다고 생각하는 정보도 표시되기 때문에 이 정보는 부가 가치에 대한 대가로만 숨겨져 있어야 합니다. iPhone X 의 표시 높이는 4.7 “iPhone보다 더 많은 수직 공간을 제공하며 상태 표시줄은 앱과 상관없는 화면 영역을 차지합니다.

 

  1. Auto Layout

아이폰 6와 6+가 출시된 이후 기존과 비교하여 가장 크게 변화한 점은 아무래도 iOS의 디스플레이 크기가 다양해졌다는 점일 것입니다. 이런 변화로 인해 그 전에 좌표와 크기로 작업하던 방식으로는 다양한 디스플레이 사이즈에 대응하기 어렵다는 결론에 도달한 apple은 Adaptive layout (Auto layout) 에 대한 지원을 하게 되었습니다.

자동 레이아웃(Auto Layout)은 구성요소들 간의 관계를 ‘규칙’으로 정의해서 화면 크기가 변경되더라도 적용되게 하는 방법입니다. 이제는 이러한 자동 레이아웃을 이용하여 아이폰6, 6+ 이후 iOS 시리즈, 아이폰X까지도 상대적으로 쉽게 지원할 수 있습니다.

06

자동 레이아웃에 대한 더 자세한 내용은 Auto Layout Guide 또는 UITraitCollection를 참고합니다.

 

  1. 다양한 종횡비 및 오리엔테이션 지원

많은 앱이 특정 너비와 높이 또는 비율에 따라 콘텐츠를 배치합니다. 하지만 아이폰X의 화면 높이와 비율은 다른 아이폰장치와 다르죠. 그렇기 때문에 아이폰X에서는 콘텐츠의 크기가 올바르게 조정되었는지 확인이 필요합니다.

07

08

그리고 가로 방향으로도 앱을 테스트해야 합니다. 대부분의 문제는 가로방향에서 나타나기 때문입니다. 기기가 왼쪽, 오른쪽으로 회전된 모든 상태를 테스트합니다.

09

 

  1. iPhone X 디자인 가이드 라인 따르기

이미 언급했듯이 화면의 둥근 모서리와 함께 노치 (notch) 때문에 앱의 콘텐츠가 잘릴 수 있습니다. iPhone X 용으로 디자인할 때 이 노치영역을 주의해야 합니다. 이 목적을 위해 Apple은 안전 영역 가이드를 작성하고 이를 손상시키지 않으면서 앱에 콘텐츠를 배치하는 방법을 알려주었습니다. 앱의 배경이 가이드를 따르지 않아야 한다면 버튼, 그림, 텍스트 등과 같은 다른 콘텐츠가 반드시 있어야 합니다.

 

10

* 이미지 출처 : https://www.cleveroad.com

 

  1. 앱에서 iPhone X 가로 모드를 생각하기

11

 

휴대 전화를 가로 모드로 전환하면 콘텐츠에 최대 공간을 제공하기 위해 상태 표시줄이 숨겨집니다.

모든 앱이 iPhone X 가로 모드의 이점을 필요로하지는 않지만 사실상 그 사용법에 대한 시나리오는 여전히 남아 있습니다. 예를 들어 사진, 비디오, 텍스트와 같은 다양한 종류의 콘텐츠를 전체 화면으로 볼 때 적합합니다. 그리고 게임이 있습니다. 사용자가 iPhone X와의 상호 작용을 끝내면 가로로 바뀌므로 세로 모드로 쉽게 전환할 수 있어야 합니다.

Apple은 표준 UI 요소 (예 : 테이블, 탐색 모음 등)를 사용하는 앱이 새로운 폼 팩터에 자동으로 적응하기 때문에 괜찮을 것이라고 확신합니다. 맞춤 레이아웃을 사용하는 앱의 경우 자동 레이아웃이 적용되고 ‘iPhone X 안전 영역을 따라 여백 가이드’가 있는 경우 가로 모드 적응이 비교적 쉽습니다.

기존 앱을 아이폰X용으로 업데이트하려면 먼저 배경 이미지를 포함한 asset을 PDF로 업데이트하거나 @3x이미지를 추가해야 합니다. 그리고 안전 영역을 켜서 안전 영역 레이아웃 가이드에 맞춰 수정합니다. (안전 영역 레이아웃 가이드는 위쪽, 아래쪽 및 가장자리 구속조건을 변경하므로 이 부분을 확인하고 필요한 경우 수정하세요.)

만약 세로 스크롤이 있는 경우, 안전 영역 가이드에 맞춰 오토 레이아웃을 통해 기존의 앱을 아이폰X용으로 빠르게 대처할 수 있지만, 한 화면에 전체 배경 이미지 소스가 들어가는 경우 아이폰X를 위한 디자인을 업데이트 해야 할 것 같습니다.

컨트롤은 모서리, 센서 하우징에서 멀리 이동해야 합니다. 기존의 Touch ID는 물리적 홈버튼이 없는 아이폰X에서는 사용할 수 없으므로 Face ID로 대체 가능하게 해야 합니다.
모든 사항을 수정한 후에는 아이폰X 시뮬레이터에서 앱을 빌드하여 실행하고 각각의 레이아웃 구성을 하나씩 확인해야 합니다.

t06

새로운 디바이스가 출시 될 때마다 개발자와 디자이너가 고려해야 할 사항들이 추가되고 있습니다. 그리고 더욱 편리하기도 때로는 더욱 힘들기도 한 것 같습니다.
다음 아이폰 시리즈는 어떤 디자인일까요? 아이폰X과 같은 디자인일까요? 아니면 새로운 시도의 디자인 혹은 기존의 아이폰시리즈로 돌아갈까요?

 

– 가치디자인그룹 박솔아

 

* 참고자료 및 출처

https://www.apple.com/iphone-x/
https://www.developerinsider.in/iphone-x-ios-developer-guide/
https://www.cleveroad.com/blog/designing-for-iphone-x–9-ways-to-make-your-app-look-neat-and-clean-on-non-standard-screen
https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
https://developer.apple.com/ios/update-apps-for-iphone-x/
https://www.raywenderlich.com/173928/develop-design-iphone-x
http://leipiel.tistory.com/12
https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/index.html#//apple_ref/doc/uid/TP40010853-CH7-SW1
http://mathewsanders.com/designing-adaptive-layouts-for-iphone-6-plus/
https://www.raywenderlich.com/173928/develop-design-iphone-x
https://blog.shako.net/ios-human-interface-guidelines-summary/

 

Share this:

Leave a comment