자유 게시판

사이트 이용규칙을 준수하여
닥터몰라 회원과 자유롭게 소통하는 게시판입니다.

[꿀팁] 애플 휴먼 인터페이스 가이드라인 : 아이폰 X

iMola | 조회 7685 | 추천 6 | 2017.09.18. 18:05 http://drmola.com/bbs_free/235940

애플이 아이폰 X을 발표하면서 휴먼 인터페이스 가이드라인(링크)을 함께 공개했습니다. 해당 문서에서 아이폰 X에서 앱들이 어떻게 동작하는지에 대한 인사이트를 얻을 수 있고, 개발자분들은 해당 문서를 통해 자신의 앱을 어떻게 아이폰 X에 맞도록 업데이트해야하는지를 알 수 있습니다. 영어 읽기가 거북하신 분들을 위해 제가 번역을 했지만, 이는 애플의 공식 번역이 아니고 당연히 해당 글과 여기에 포함되는 사진에 대한 모든 권리는 애플에 있습니다. 해당 문서를 절대 상업적으로 전용하지 마시길 바랍니다.

 

iPhone X

 

iPhone X은 기기의 끝부분까지 이어진 큰 고해상도의 디스플레이를 가지고 있습니다. 이 디스플레이는 이전에는 보지 못한 수준으로 컨텐츠로 가득찬 경험을 제공합니다.

 

OV_Hero_2x.png

 

 

화면 크기

 

세로 방향 화면 모드에서, 아이폰 X 디스플레이의 너비는 4.7인치 디스플레이를 가진 아이폰 6, 아이폰 7, 아이폰 8과 같습니다(역자 주 : 여기서 말하는 너비는 화면상의 위치를 수치적으로 나타낸 포인트 기준이며, 실제로는 해당 포인트를 3배로 렌더링하여 화면에 투사하기 때문에 물리적인 너비는 당연히 4.7인치 디스플레이 아이폰보다 더 큽니다. 다만 컨텐츠 기준으로는 나타낼 수 있는 가로 컨텐츠의 양은 4.7인치 디스플레이 아이폰과 같습니다. 즉, 컨텐츠가 조금 더 크게 보입니다). 하지만 아이폰 X 디스플레이의 높이는 4.7인치 디스플레이보다 145pt 더 깁니다. 이는 대략 세로로 20% 정도 컨텐츠가 들어갈 추가 공간이 생겼다는 말이죠.

 

스크린샷 2017-09-18 오후 5.04.23.png

 

당신의 앱에 들어가는 모든 아트워크에 고해상도 이미지를 사용하십시오. 아이폰 X은 스케일 팩터가 @3x(역자 주: 포인트 수치와 실제 픽셀 매칭이 1:3으로 이루어진다는 의미입니다)인 고해상도 디스플레이를 가지고 있습니다. 화면에 표시되는 플랫한 벡터 아트워크들은 해상도에 독립적인 PDF 형식으로 제공되는 것이 가장 좋습니다. 그 외에 래스터화된(벡터가 아니라 픽셀 단위의 이미지) 아트워크들은 해당 아트워크의 @2x와 @3x 버전을 모두 제공하십시오. 이미지 크기와 해상도 문서(링크)와 커스텀 아이콘 문서(링크)를 참조하세요.


 

레이아웃

 

아이폰 X을 위한 앱을 디자인할 때, 당신의 앱 레이아웃이 스크린의 네 귀퉁이와 센서 하우징 부분, 그리고 홈 스크린 인디케이터가 들어갈 위치에 가려지지 않는지 반드시 확인해야 합니다.

 

스크린샷 2017-09-18 오후 5.15.26.png

 

대부분의 앱들이 사용하는 네비게이션 바, 테이블, 그리고 컬렉션과 같은 시스템이 제공하는 표준 사용자 인터페이스 요소들은 새로운 폼팩터에 맞게 자동으로 조정됩니다. 배경은 디스플레이의 엣지에 맞게 확장되고 사용자 인터페이스 요소들은 그 안에서 적절한 위치에 배치됩니다.

 

스크린샷 2017-09-18 오후 5.15.44.png

 

커스텀 레이아웃을 가지는 앱들이 아이폰 X을 지원하는 것은 여전히 꽤 쉽습니다. 당신의 앱이 자동 레이아웃 기능(원문 : auto layout)을 사용하고, 컨텐츠 안전 영역(원문 : safe area)과 가장자리 여백(원문 : margin) 레이아웃 가이드를 잘 따랐다면 아이폰 X을 지원하는 것은 훨씬 쉬울 것입니다.

 

당신의 앱을 아이폰 X에서 어떻게 보일지 미리 살펴보세요. 당신은 Xcode에서 제공되는 시뮬레이터를 이용해서 당신의 앱에 잘려나가거나 혹은 다른 레이아웃 문제가 발생하는지를 확인할 수 있습니다. 물론 광색역 컬러 이미지 등 일부 기능들은 실제 기기에서 봤을 때 가장 완벽하게 확인할 수 있습니다.

 

화면에 가득차는 경험을 제공하세요. 배경을 반드시 화면 끝까지 확장하세요. 그리고 테이블이나 컬렉션처럼 세로로 스크롤되는 레이아웃은 화면의 가장 아래 끝까지 계속 보이도록 하세요.

 

스크린샷 2017-09-18 오후 6.02.26.png

 

필수적인 컨텐츠들은 잘려나가지 않는 위치에 삽입하세요. 일반적으로 컨텐츠는 가운데에 위치하고, 좌우 대칭으로 삽입되었을 때 어떤 방향에서든 가장 멋지게 보이며, 코너와 센서 하우징 부분에 의해 잘려나가거나 홈 스크린 인디케이터에 의해 방해받지 않습니다. 가장 좋은 방법은 시스템이 제공하는 표준 인터페이스와 자동 레이아웃 기능을 사용해 앱의 인터페이스를 만드는 것입니다. 모든 앱들은 UIKit에 정의된 컨텐츠 안전 영역과 가장자리 여백을 준수해야 합니다. 이 사항들을 준수하면 당신의 컨텐츠는 모든 디바이스와 상황에 맞게 제대로된 위치에 삽입될 것입니다. 이 컨텐츠 안전 영역은 컨텐츠가 상태 바, 네비게이션 바, 툴바, 탭바 등과 겹치는 일 역시 방지해줍니다.

 

상태 바의 높이를 명심하십시오. 아이폰 X의 상태 바는 다른 아이폰들보다 더 깁니다. 만약 당신의 앱이 고정된 크기의 상태 바를 상정하고 그 아래쪽에 컨텐츠를 놓는 방식으로 만들어져 있다면, 반드시 컨텐츠의 위치를 유저의 기기에 따라 동적으로 조정하도록 업데이트해야 합니다. 이 때 아이폰 X의 상태 바는 음성 녹음이나 위치 추적기능들이 동작할 때도 그 높이가 변하지 않는다는 점을 알아두십시오(역자 주 : 지금까지 통화, 음성녹음, 위치 추적 등의 기능이 동작할 때 상태 바의 색이 바뀌고 높이가 더 넓어진 것과 달리 아이폰 X의 상태바는 그렇지 않습니다).

 

만약 당신의 앱이 상태 바를 숨기고 있다면, 아이폰 X에서는 그 선택을 재고하십시오. 아이폰 X의 디스플레이는 현재 4.7인치 화면을 가진 아이폰들보다 컨텐츠가 들어갈 수 있는 더 많은 수직 공간을 제공합니다(역자 주 : 원문에 주어가 The display height on iPhone이라고 나와있는데 해당 부분은 아이폰 X의 디스플레이의 오기로 보여 이를 수정한 상태에서 번역했습니다). 아마 당신의 앱은 아이폰 X에서 상태 바가 점유하고 있는 공간을 완전히 사용하지 못할 겁니다. 상태 바 역시 사용자들이 유용하게 여기는 정보를 포함하고 있습니다. 정말로 해당 영역을 이용해서 추가적인 가치를 제공할 수 있는 경우에만 상태 바를 제고하시기 바랍니다.

 

스크린샷 2017-09-18 오후 6.03.36.png

 

현재 사용중인 아트워크를 그대로 사용할 때는 종횡비가 다르다는 점을 명심하십시오. 아이폰 X은 다른 4.7인치 아이폰들과는 다른 종횡비를 가지고 있습니다. 4.7인치 화면의 아이폰에서 화면에 딱 맞게 제작된 아크워크는 아이폰 X에서 잘려서 보이거나, 레터박스가 생길 것입니다. 반대로, 아이폰 X의 화면에 딱 맞게 제작된 아트워크는 4.7인치 화면의 아이폰에서 역시 잘려나가거나 필러박스가 생길 것입니다. 중요한 시각적 컨텐츠는 두 사이즈 모두를 감안해서 만들어야 합니다.

 

인터랙티브 컨트롤을 화면의 가장 아래나 구석에 배치하지 마십시오. 아이폰 X 사용자들은 홈 스크린이나 앱 스위처에 접근하기 위해 아래에서부터 스와이프하는 동작을 사용합니다. 이 동작은 당신이 해당 영역에 배치해놓은 커스텀 동작을 취소시킬 것입니다. 또, 화면의 귀퉁이는 사람들이 편안하게 터치하기 힘든 부분이라는 것도 고려하십시오.

 

디스플레이의 특징적인 부분을 가리거나 눈에 띄게 하지 마십시오. 기기의 둥글게 마감된 코너나 센서 하우징 부분, 혹은 홈 스크린 인디케이터 부분을 화면 상단과 하단에 검은색 바를 넣는 방식으로 감추려 하지 마십시오. 그리고 괄호나 테두리, 도형, 기능을 적은 텍스트 등 해당 영역을 더 눈에 띄도록 만들 수 있는 시각적 장식 역시 사용하지 마십시오.

 

홈 인디케이터를 자동으로 숨기는 기능을 절제해서 사용하십시오. 홈 인디케이터를 자동으로 숨기는 기능이 켜지면 몇 초간 사용자의 입력이 없을 때 홈 인디케이터가 사라집니다. 홈 인디케이터는 사용자가 스크린을 터치하면 다시 나타납니다. 이 동작은 비디오를 보거나 사진 슬라이드 쇼를 보는 등의 수동적인 시청 경험에서만 사용하는 것이 좋습니다.

 

더 자세한 정보는 적응성과 레이아웃 문서(링크)를 참조하십시오.


 

컬러

 

아이폰 X의 디스플레이는 P3 색영역을 지원합니다. P3 색영역은 sRGB 색영역보다 더 풍부하고 더 생생한 컬러를 보여줄 수 있습니다.

 

시각적 경험을 향상시키기 위해 광색역을 사용하십시오. 더 넓은 색영역을 보여주는 사진이나 동영상은 더 실제같이 보이고, 더 넓은 색영역으로 표현된 시각적 데이터나 상태 표시기는 더 인상적입니다. 더 자세한 내용은 컬러 매니지먼트 문서(링크)를 참조하세요.


 

제스쳐

 

아이폰 X의 디스플레이는 화면 끝에서부터 시작하는 제스쳐를 사용해 홈 스크린, 앱 스위처, 알림 센터, 제어 센터로 접근합니다.

 

가급적 시스템 전반에 걸쳐 제공되는 화면 끝에서 시작되는 제스처를 방해하지 마십시오. 사람들은 모든 앱을 사용하면서 위와 같은 제스쳐를 사용합니다. 하지만 드물게는 게임과 같은 전체 화면을 모두 사용하는 앱이 자체적으로 화면 끝에서 시작되는 제스쳐를 사용해야하는 경우가 있습니다. 이런 경우 앱의 자체적인 제스쳐의 우선순위가 시스템의 제스쳐보다 높아집니다. 예를 들어 첫 번째 스와이프는 앱의 제스처를 호출하고, 두 번째 스와이프는 시스템의 제스쳐를 호출하는 식입니다. 이런 동작(edge protect라고 불리는)은 사용자들이 시스템 전반에 걸쳐 제공되는 행동을 하기 어렵게 만들기에 반드시 필요한 경우에만 사용해야 합니다. 더 많은 정보는 제스쳐 문서(링크)를 참조하세요.


 

추가적으로 디자인할 때 고려해야 할 점

 

정확한 생체 인증 방식에 대해 언급하세요. 아이폰 X은 생체 인증 방식으로 Face ID를 지원합니다. 만약 당신의 앱에 애플페이나 다른 시스템이 제공하는 생체 인증 기능이 들어가 있다면, 아이폰 X에서 Touch ID에 대해 언급하지 마십시오. 이와 같은 맥락에서, Touch ID를 지원하는 기기들에서 Face ID에 대해 언급하지 마십시오. 더 자세한 내용은 생체 인증(링크) 문서를 참조하세요.

 

시스템이 제공하는 키보드 기능들을 중복으로 제공하지 마십시오. 아이폰 X에서, 이모티콘/언어 전환 버튼과 받아쓰기 버튼은 심지어 커스텀 키보드를 쓰는 경우에도 키보드 아래에 자동으로 나타납니다. 그리고 당신의 앱은 이 버튼들을 건드릴 수 없습니다. 따라서 혼동을 일으키지 않게 하려면 해당 기능들을 당신의 키보드에 중복으로 넣지 마십시오. 더 자세한 내용은 커스텀 키보드 문서(링크)를 참조하세요.


 

Resources

 

아이폰 X의 사용자 인터페이스 디자인 템플릿의 포토샵, 스케치 버전을 Resource(링크)에서 다운로드하세요.

iMola's Signature

적용중인 트로피가 없습니다.

  1. OV_Hero_2x.png (File Size:1.50MB/Download:0)
  2. 스크린샷 2017-09-18 오후 5.04.23.png (File Size:86.3KB/Download:0)
  3. 스크린샷 2017-09-18 오후 5.15.26.png (File Size:74.4KB/Download:0)
  4. 스크린샷 2017-09-18 오후 5.15.44.png (File Size:708.6KB/Download:0)
  5. 스크린샷 2017-09-18 오후 6.02.26.png (File Size:74.0KB/Download:0)
  6. 스크린샷 2017-09-18 오후 6.03.36.png (File Size:233.4KB/Download:0)
facebook twitter google plus pinterest kakao story band
Profile image iMola 2017.09.18 19:23
왜 ... 이죠...
Profile image [게임미식가] 잼아저씨 2017.09.18 19:25

126C3F5050305D10138909.gif

 

과연 저 디자인이 얼마나 오랫동안 갈 수 있는지가 궁금하긴 하네요. 3.5파이 없앤 것도 그렇고, 애플의 새로운 시도는 좋으나 늘 논란거리를 낳는다는 게...

Profile image iMola 2017.09.18 19:30
ㅂㄷㅂㄷ
Profile image iMola 2017.09.19 00:59
처음 봤을땐 민들레만 있었던거 같은데 언제 내용이?! 아마 저 디자인 꽤 오래 끌고가지 않으려나요. 트루뎁스 카메라 시스템 크기를 크게 줄이는 건 물리적으로 거의 불가능에 가까울 듯한데...
Profile image iMola 2017.09.19 11:22
애플이 저 디자인 만들면서 가장 자랑한게 에지 투 에지 디스플레이인데 없앨 리가 없어요 ㅋㅋㅋㅋ
Profile image ZardLuck 2017.09.19 14:09
하지만 또 신기록...
Profile image S.T.E.E.L.N.A.I.L. 2017.09.19 15:11
M자 탈모 디자인이 영...
그것만 빼면 최고인 것 같습니다.
다음 버전에는 아마 개선해서 나올 부분이 아닐지 생각이 됩니다.
Profile image iMola 2017.09.19 16:46
디자인 가이드라인 읽어보시면 저걸 아이폰의 디자인 언어로 만들 생각인 모양인데 한참동안 저 모양 유지될듯 합니다.
Profile image S.T.E.E.L.N.A.I.L. 2017.10.07 14:31
M자 탈모인의 세상이 왔도다.......... ㅠ_ㅠ
Profile image 치자피즈 2017.09.20 14:25
아이폰X 모델은 좀 시간이 지난후에 상황봐야 할거 같네요 흠..
Profile image iMola 2017.09.20 16:05
제가 마루타 해드릴테니 리뷰 보고 사세요!
Profile image ShiK 2017.09.20 20:02
으악...번역되어 있어도 어렵네요...ㅋㅋㅋ
제가 앱제작쪽에는 전혀 지식이 없어서 그런데
이번 X의 해상도가 변태적이라는 글을 어디서 봤습니다
보통의 경우 해상도가 홀수x홀수 or 짝수x짝수가 정상이라는 내용이었는데
그렇지 않을 경우에 한쪽으로 쏠리는?상황이 발생할수도 있다던데 맞는 말인가요?
그리고 제가 본 글에서 처럼 이번 X의 해상도(홀수x짝수)는 말도 안되는건가요?
Profile image iMola 2017.09.21 16:51
그 글 링크를 좀 얻을 수 있을까요? 적어도 제가 아는 선상에서 해상도의 홀짝 여부가 다르다고 컨텐츠가 쏠리는 현상이 발생하지는 않는데 어떤 맥락에서 그런 이야기를 하신건지 궁금합니다.(설마 나누기 2로 가운데를 찾는다던지...)
Profile image ShiK 2017.09.21 19:37
답변 기다리던 와중 관련글을 계속 보고 있었는데
궁금증이 풀렸네요 글쓴이가 제대로 확인하지 않은 부분이 있던것 같습니다 ㅎㅎㅎ
애플 관련 게시물 잘보고있습니다.
앞으로도 좋은글 부탁드리겠습니다^^
(답변 감사드립니다!)
Profile image iMola 2017.09.21 20:13
넵! 피드백 감사드려요~
Profile image 방송 2017.09.22 14:18
3배의 스케일로 만드는 치밀함이 있었군요.
아이폰6s 64를 쓰지만 아이폰 X 256이 나오면 사야겠다고 마음을 먹게 되네요.^^
감사드립니다.
Profile image iMola 2017.09.22 14:58
넵. 글 읽어주시고 피드백 주셔서 감사합니다~
번호 분류 제목 게임 글쓴이 조회 추천 날짜
공지 닥터몰라 스팀 그룹 가입 요청 방법 [41] file 닥터몰라 (drmola 닥몰) ZardLuck 574 8 08.22
공지 신규유저를 위한 닥터몰라 사용설명서 ver 0.3 (17.11.03 수정) [40] file   마린웨이브 1245 28 06.05
공지 닥터몰라를 소개합니다 [20]   Dr.Lee 1768 12 09.07
2636 [잡담] [녹화본교체] 로스트아크 CBT 5일차(새벽에 험블 이벤트)   뫼한 43 1 09.19
2635 [잡담] 애플에서 해외구매한지 꽤 돼서... [2]   치자피즈 117 0 09.19
2634 [잡담] [하스스톤] 오늘은 해적의 날. 게임 접속하여 100골드 챙기세요! file   뫼한 32 0 09.19
» [꿀팁] 애플 휴먼 인터페이스 가이드라인 : 아이폰 X [20] file 애플 (Apple) iMola 7685 6 09.18
2632 [잡담] [녹화본교체] 로스트아크 CBT 4일차   뫼한 19 0 09.18
2631 [잡담] 뫼한 님 방송에서 엄청난(?) 경쟁률을 뚫고 당첨된 선물 인증입니다 [2] file Samorost 3 프리맨 66 0 09.18
2630 [잡담] [녹화본교체] 로스트아크 CBT 3일차   뫼한 29 1 09.17
2629 [잡담] 약스포) GTA 온라인 같았던 영화 '베이비 드라이버' [1] 영화 (movies) Nemesis 55 1 09.17
2628 [잡담] 자게는 일기에 [3]   A_TNT 47 3 09.17
2627 [잡담] 스래드리퍼 더미 코어가 실제 코어??? [1]   윤뎅구 117 0 09.16
2626 [잡담] [녹화본교체] 로스트아크 CBT 2일차   뫼한 38 0 09.16
2625 [잡담] 네이버 전문가들이 결국... [4]   암드야아프디.. 264 1 09.16
2624 [잡담] 월페이퍼 엔진 쓰시는 분 계신가요? [2]   Warlord 79 0 09.16
2623 [잡담] 애플 취재를 갔다와서 열심히 글을 쓰다가 문득 든 생각인데 [5]   iMola 170 2 09.15
2622 [잡담] 간단한 번역 좀 부탁드립니당... [4]   Warlord 93 1 09.15
2621 [잡담] [녹화본교체] 새벽방송(드래곤볼)   뫼한 24 0 09.15
2620 [잡담] 애플 신제품... [1]   치자피즈 125 0 09.14
2619 [소개] 원래 자게에 올리려던 글 스케일이 커져서 한 편의 칼럼이 되었습니다. [1] 애플 (Apple) iMola 151 10 09.13
2618 [잡담] 집사 발견 [5] file   윤뎅구 138 3 09.13
2617 [소개] 스팀기프트 Steamgifts 업데이트 - 모두가 원하던 기능이 드디어! [5]   프리맨 100 2 09.13