iOS HIG 문서입니다. 한글번역 Codesquad(Jake, Napster, Min)

1. Human
Interface
Guidelines
by. Jake
by. Napster
by. Min

2. 1. Overview
2. App Architecture
3. User Interaction

3. Overview
· Themes
· iPhone X
· What’s new in iOS11
· Interface Essentials

4. Overview : Themes
iOS Design Themes
세가지 주요한 iOS Design 의 차별성:
•Clarity(명확함). 텍스트, 아이콘, 장식들을 보기 좋게하자. 기능이 명확하게 드
러나도록 디자인하자. 중요한 요소를 강조하자.
•Deference(컨텐츠 존중). 좋은 화면 구성을 통해 사용자들이 콘텐츠들을 이해
하기 쉽도록 하자. 전체화면을 활용하자. 컨텐츠가 부각되도록 하자. 베젤이나
그라데이션, 그림자등을 최소화 해서 화면이 밝고 가볍게 느끼도록 하자.
•Depth(깊이). 레이어와 모션을 통해 계층구조를 표현하자. 특정한 동작에 의
해 컨텐츠가 손실되지 않도록 하자. 보고 있거나 이동하려는 화면의 깊이감을
느끼도록 하자.

5. Overview : Themes
Design Principles(디자인 원칙)
·Aesthetic Integrity(미적인 통일성)
·Consistency(일관성)
·Direct Manipulation(직접조작) - 제스처를 통해 실제 사물을 만지는 것 같은 느낌을 주자
·Feedback(피드백) - 그래픽, 사운드 등을 통해 적절한 반응을 주자
·Metaphors(비유) - 사람들에게 친숙한 비유를 통해 이해를 돕자
·User Control(사용자 통제) - 중요한 작업은 사용자가 직접 결정해서 동작하도록 하자.

6. Overview : iPhone X
·Screen Size
- 가로 4.7" == iPhone 6 / iPhone 7 / iPhone 8
- 위 세 제품에 비해 세로 145pt 가 더 길다(약 20% 더 길다)

7. Overview : iPhone X
·Layout

8. Overview : iPhone X
·Layout

9. Overview : iPhone X
·Layout

10. Overview : iPhone X
·Color

11. Overview : iPhone X
·Video

12. Overview : iPhone X
·Video

13. Overview : What’s new in iOS 11
·AR
·Bolder Navigation
·Clearer icons
·Face ID and Touch ID

14. Overview : Interface Essentials
UIKit
·Bars(탭이나 내비게이션 등)
·Views(화면 표현되는 부분)
·Controls(버튼, 스위치 등)

15. App Architecture
· Accessibilty
· Loading
· Modality
· Navigation
· Onboarding
· Requesting Permission
· Settings

16. App Architecture : Accessibilty
·Reduce Transparency
·VoiceOver
·Button Shapes

17. App Architecture : Loading

18. App Architecture : Modality
Full Screen Page Sheet
Form Sheet Current Context

19. App Architecture : Navigation
Hierarchical Navigation Flat Navigation
Content-Driven or Experience-Driven Navigation

20. App Architecture : Onboarding
·실행 화면 제공하라
·앱의 방향과 일치시켜라
·빠르게 동작하도록 하라
·기다리는 동안 유용 팁 등을 표현해주면 좋다.
·필수 튜토리얼을 삽입해도 좋다.
·흥미를 유발 시키면 좋다.
·처음에 셋업을 위한 정보를 제공하지 않는 것이 좋다.
·라이센스 동의 등을 앱 안에 넣지 않는 것이 좋다.(앱 스토어에서 확인)
·앱을 다시 실행 했을때 예전의 상태를 저장해둬라.
·사용자 리뷰를 너무 자주 요청하지 마라
·재부팅을 강요하지 않도록 해라.

21. App Architecture : Request Permission
·확실히 필요할 때만 요구할 것
·왜 필요한지 명시할 것
·처음 실행할때 요구할 것
·불 필요하게 위치 정보를 수집하지 말 것

22. App Architecture : Settings
•어떤 것을 설정변경할 수 있는지 언급하
라
•우선순위를 정해서 배치하라
•설정들을 세팅앱을 통해 설정할 수 있다.
•Settings 앱으로 가는 단축 아이콘을 포
함해놓자.

23. User Interaction
· 3D Touch
· Audio
· Athentication
· Data Entry
· Drag and Drop
· FeedbackFile Handling
· Gestures
· Near Field
Communication
· Undo and Redo

24. User Interaction : 3D Touch
•Home Screen Interaction
•Peek and Pop
•Live Photos

25. •미리보기 사용
•손가락으로 가리지 않도록 충분히 큰 미리보기 제공
•일부에만 적용하지 말고 통일되게 최대한 모든 곳에서 적용
•사용자에게 혼동을 주지 않도록 항목 구성을 하라
•작업 버튼을 제공하는 것도 좋다.
•미리보기 메뉴를 제공하지 마라.(Deep press 등 일반적인 사용방식)
User Interaction : 3D Touch

26. User Interaction : Audio
·Silence
·Volume
·Headphones

27. User Interaction : Audio
Designing a Great Audio Experience
·필요한 경우 자동으로 조절하지만 전체 볼륨은 조정하지 않아야 함
·적절한 경우 오디오의 경로 변경을 허용하라.
·시스템 제공 볼륨보기를 사용하여 오디오 조정 허용하라.
·짧은 사운드와 진동에는 시스템의 사운드 서비스를 사용.
·사운드가 앱에 필수라면 오디오를 분류하라.(Audio Session Programming Guide)
·중단이 발생하면 오디오 재생을 다시 시작하라.
·앱이 임시 오디오 재생을 마칠 때 다른 앱에 알린다.
·필요할 경우에만 오디오 컨트롤에 응답하라.
·오디오 컨트롤을 용도 변경하지 마라.

28. User Interaction : Audio
범주 의미 행동
Solo ambient
사운드는 필수는 아니지만 다른 오디오는
들리지 않습니다.(사운드 트랙이 있는
게임)
무음 스위치에 응답 O
다른 소리와 믹스 X
백그라운드에서 재생 X
Ambient
사운드가 필수는 아니지만 다른 오디오를
조용하게 함.
무음 스위치에 응답 O
다른 소리와 믹스 O
백그라운드에서 재생 X
Playback 사운드 필수. 다른 오디오와 혼합 가능.
무음 스위치에 응답 X
다른 소리와 믹스 O, X
백그라운드에서 재생 O
Record
소리 녹음
재생으로 전환 가능
무음 스위치에 응답 X
다른 소리와 믹스 X
백그라운드에서 녹음 O
Play and Record
동시에 녹음과 재생
(오디오 메시지, 화상통화 앱)
무음 스위치에 응답 X
다른 소리와 믹스 O, X
백그라운드에서 녹음, 재생 O

29. User Interaction : Authentication
•최대한 늦게 표시
•어떤 권한을 필요하는지 설명
•최소 입력으로 해결되도록 처리
•Passcode 라는 용어를 사용하지 마라
•가능하다면 Biometric Authentication 을지원하라.

30. User Interaction : Data Entry

31. User Interaction : Drag and Drop
·Drag 동작시 목적지가 될 수 있는 것과 아닌것을 구분해서 보여주자(Drag
and Drop in UIKit).
·같은 Context에서 이동(예: 텍스트 내)과 다른 Context로의 이동(예: Reminder의
목록을 리스트간 이동)
·가능하다면 이동 중에 프리뷰를 볼 수 있도록 하자.
·가능하다면 표현방식의 다양성을 주자.

32. User Interaction : Feedback
·사용자가 확인할 수 있도록 유용한 피드백 제
공.
(예: 업데이트 진행률, 완료 확인 등)
·불필요한 알림을 제공하지 말라.
·Haptic Feedback 피드백을 활용해라
(Animation and Haptics)

33. User Interaction : File Handling
·파일을 주기적으로, 키고 끌때, 이동할 때 자동으로 저장.
·디바이스에 파일을 저장하도록 하지 말고 클라우드 환경에 저장.
·관리화면을 효과적으로 표현해라(예: iBook).
·App을 벗어나지 않고 Preview를 할 수 있도록 하라.
·필요하다면 다른앱과의 공유기능 제공하라(Document Picker Programming Guide
활용).

34. User Interaction : Gestures
·게임이 아닐 경우엔 항상 표준 Gestures를 사용해야 혼동하지 않는다
·HomeScreen, Control Center, Notification Center등
systemwide screen-edge 제스쳐를 막지 않아야 한다.
·가능하다면 Shortcut Gestures를 지원해라.(예: Swipe Back기능)
·UIGestureRecognizer를 활용하여 사용자에게
Multifinger Gesutres를 지원하는 것도 추천한다.

35. User Interaction : Gestures
Standard Gestures
·Tap : 선택, 컨트롤
·Drag : 이동(item, 화면 등)
·Flick : 스크롤이나 전환을 빠르게 하기
·Swipe : 한 손가락 - 이전 화면으로 이동
split view controller에서 뒤의 화면 보이게 하기
삭제등 액션 버튼 보이게 하기
네 손가락(iPad) - 다른 앱으로 전환
·Double-tap : Zoom-in, Zoom-out
·Pinch : Zoom-in, Zoom-out
·Touch and hold : 텍스트(편집을 위한 메뉴), Certain View(item 재조정을 위한
모드로 진입)
·Shake : Redo and Undo

36. User Interaction : Near Field Communication
NFC
·물리적으로 접촉할 필요가 없기 때문에 용어를 잘 선택.
- “touch”, “tap” 대신 “scan”, “hold near” 등
·”NFC tag” 등 전문적인 용어를 사용하지 말고 친근한 언어 사용.
·최대한 직관적이고 간단한 언어 사용하고,
단계가 여러개일 경우 중복되는 문구 제거.

37. User Interaction : Undo and Redo
·간단하고 정확한 단어로 실행할 것과 취소할 것을 명시
·Shake Gestures를 사용할 경우에 다른 action을 중첩시기지 말것.
·Redo와 Undo는 분리시켜서 명확하게 한가지씩 동작하도록 할 것.

38. System Capability

39. MultitaskingOverView
•실행중인 앱에서 다른 앱으로 언제든 빠르게 전환할 수 있게 해
주고, 특히 iPad에서 gesture로 전환가능하게 합니다.
•iPad에서 두가지 앱을 한화면에 띄울 수 있는걸 가능하게 합니
다.
Slide Over
Split View
Picture in Picture

40. Multitasking
•앱 디자인 철칙 & 앱개발시 명심해야할 사항
1. 멀티태스킹 환경에 맞게 앱을 디자인하세요.
2. 앱 사용이 중단될경우(알람 등등..)현재 상태를 저장하고,
중단상태가 끝나고, 돌아왔을때 자연스럽게 동작하게하
세요.
3. a double-high status bar 상태일때 지원하세요.
4. 앱에서 다른앱으로 이동할때, 사용자가 특별한 활동을 하
지 않아도(저장) 그상태를 그대로 유지하세요.
Contents

41. Multitasking
5. 다른앱에서의 audio 소리에 적당히 반응하세요.
6. 앱이 Background상황이되면 종료상황이라 인식하세요.
그에 맞는 적절한 조치를 취해주세요.
7. 알림을 적절히 사용하세요.
5.음악을 들을떄나, 전화가 올떄 시리에의해서 현재 동작중인 앱의 소리가 시리에게 우선순위가
간다. 이때 우리의 앱은 사용자의 기대에 충족해야한다. 말그대로 사용중인 앱의 소리가 잠시 줄
어들고 활성화된 앱에 소리가 커진다. 예를들면 GPS directional notifications처럼.말이다.
6.앱이 Background상황이 되면 사용자는 앱을 종료시킨걸로 인식한다.
7. 당신이ㅡ 앱이 백그라운드 상태이든, 실행중이 아닐때든 알림은 특정시간에 보낼 수 있다.
알림을 적절히 사용하면 사용자와 소통하는데 큰도움이 되지만 너무많은 사용은 활르 부른다.
예를들면 백그라운드로 들어갈때마다 알림을 보낼 필요는 없다

42. NotificationsOverView
•앱의 알림은 디바이스가 잠겨있어도, 중요한 정보를 어느때나
알림을 만들어 낼 수 있습니다.
•각각의 알림은 앱 이름, small아이콘, 메세지를 포함.
* 새로운 이벤트가 발생하거나, 상태가변하거나, 메세지가 도착했을때
등등.
*

43. Notifications Behavior
•알림의 동작은 Setting에서 앱 하나하나 정해줄 수 있습니다.
•알림의 종류
•Banner. 디바이스를 사용중일때 몇초간 화면 top부분에 보여짐.
•Alert. 디바이스 사용중일때 수동으로 없애기 전까지 사라지지않음.
•잠금화면에서 Tapping, Swiping 하면 알림은 사라지고 알맞는
정보가 보여집니다.
•혹은, Swiping Up하거나 disappear을 선택하면 알림만
사라집니다.
•잠금 해제화면에서 3D Touch를 사용하거나, Swiping Down하
면
Detail하게 볼 수 있습니다.
for example, opens Mail and sh
the new message.
Contents

44. Notifications Behavior
•Customizable 가능합니다.
•4가지버튼의 액션을 정할 수 있습니다..
for example, opens Mail and sh
the new message.
NOTE
알림의 설정의 여부는 앱이 처음 실행될때 정해지며, 그 후엔 Setting
에서
정할 수 있음.

45. Designing a Great Notification Experience
•Provide useful, informative notifications.
•완벽한 문장, 문장케이스, 적절한 구두점, 끊기지 않은 메세지
(시스템은 자동으로 문장을 자르기도함 필요하면)
•앱을 실행하라는 메세지는 피하세요.
•특정한 화면으로의 전환, 특정한 버튼을 이용한 전환, 다른 테
스크로의 전환하라는 말은 피하세요.
(주의!! 알림은 일단 dismissed됨.)
•같은 정보에대한 알림을 여러번 보내지마세요.
•앱이름, 아이콘을 넣지마라.(자동으로 넣어준다.)

46. Designing a Great Notification Experience
•알림 미리보기가 숨겨진경우 서술하는 문구를 제공하세요.
•알림과 함께 알림 소리도 정해주세요.
•디테일 뷰를 고려하세요.
•직관적이고 유익한 액션을 제공하세요.
•적절한 4가지의 버튼액션으로 앱 사용 태스크를 줄일 수 있다.
•디테일 뷰에서 알람을 없애는 액션을 신중히 사용하세요.
•만약 사용해야겠다면 사용자에게 충분히 경고를 알려야한다.

47. Badging
•알림을 쌓기위해 Badging을 이용하라,
특정한 정보를 표시하지마세요.
•Badging은 오직 알림에만 사용하세요.
•Badging업데이트에 항상 신경써주세요.
•사용자는 알림을 확인하면 Badging이 즉각
업데이트 되길 바랍니다.
Contents

48. Printing
OverView
•Air-Print 기술을 사용하여 무선으로 여러 문서를 프린팅 할수 있습니
다.
•만약 Air-Print를 사용하는 앱에서 프린트가 가능할때 유저들은
Navigation bar의 Print버튼이나, toolbar의 Print 버튼을 이용합니다.

49. Printing
•프린트 시스템 버튼을 누른다면
사용자에게 다음과 같은 모습으로
버튼을 보여주세요.
•프린트가 가능할때만 프린트기능을 활성화 시켜주세요.
(프린트가 가능하지 않을땐 아에 보여주지 않는다.)
•프린트하면 생각나는 기능들을 제공해주세요.
•인쇄 범위
•인쇄 장수
•첫장부터 인쇄, 뒷장부터인쇄 등등..
Contents

50. Quick LookOverView
•미리보기는 다양한 포맷을 지원합니다.
Keynote, Numbers, Pages, and PDF documents, images,
types of files, 지원하지 않는 파일의 포맷포함.
•보통 메일에서 다운로드한 파일을 미리보기에 사용

51. Quick Lock
•현재 보고있는 화면에서 적절하게 뷰를 보여주세요.
•아이폰의 경우 네비게이션 바가 있다면 화면을 옆으로 밀어
서
보여주어야한다. 마치 다른 뷰가 켜지는 것처럼.
•아이패드에서 네비게이션바가 없다면 modal뷰안에 네비
게이션 바를 포함해야합니다.
Contents

52. Ratings and Reviews
OverView
•별점과 평가는 사용자들의 앱 선택에 도움을 많이 줍니다.
- 긍정적인 별점과 평가는 더욱 사람들의 이목을 끌 수 있습니다..
•좋은 별점과 평가를 얻기위해 적절한 시점에 사용자에게 피드백
을 요구하는게 중요합니다.
•나의 앱과 사용자가 입증된 계약이 되어있을때 별점을 요구하세
요.
(앱을 실행하자마자 요구하는건 말이안된다.)
•유저를 방해하는 시점에 요구하지마세요.

53. System Rating and Review Prompts
•시스템은 거슬리지않는 적절한 시점에 별점과 리뷰를 요청해야합
니다.
•최근 별점을 주었다면, 당분간은 알람을 띄어서는 안됩니다.
•시스템은 자동적으로 356일안에 별점 요청을 3번으로 제한합니
다.
•되도록이면 시스템이 제공하는 별점창을 사용하세요.
•피드백을 위한 다른 버튼을 만들지마세요.
Contents

54. Screenshots
OverView
•유저는 현재화면을 캡처할 수 있다. iOS11부터 화면 하단에
짧게 캡처한 화면이 보여진다.
•되도록이면 시스템 스크린샷 인터페이스를
그대로 유지하세요.

55. Siri
OverView
•개발자의 앱에 Siri를 함께 이식해 음성으로 상호 작용할 수 있
Contents
•음성으로만 동작하게 최선을 다하세요!
(잠금해제없이 유저들은 시리를 사용하길 원한다.)
•Siri를 가장한 다른 Siri를 만들거나, Siri를 직접 다루지 마세요.
(만약 그러면 애플에서 직접 조치가 온답니다.)
•공격적인 내용을 담지마세요.(욕을 한다던지...)
•Siri를 광고에 사용하지마세요.

56. Responding to People
•최소한의 개입으로, 반응은 빠르게.
•중간과정없이 Siri로 받은 명령는 직접 실행하세요.
(Siri를 통해 앱을 실행할때 중간 단계(Screen) 없이 연결해야
한다.
•정확한 행동과 믿을 수 있는 반응.
(Message 보내라고 했는데, 전화를 하면 안된다.)
•Siri를 통한 명령이 금전적인 요구가 있다면 안전하게 그리고
최소한의 금액을 요구하는 옵션을 마련하세요.
(구매항목이 여러개 있는데 제일 비싼걸 디폴트로 하지마라.)

57. Designing a Custom Interface
•개발자의 앱에 Siri를 커스텀하려면, Siri의 모양을 최대한 살리
세요.
•인터페이스를 정의할때, 최소한의 여유 간격을 두고 만들어주세
요.
•최소한의 높이를 갖는 인터페이스를 만들어주세요.
•대화형 인터페이스를 만들지 마세요.
(탭, 제스터로 동작하게.)
•인터페이스에 앱이름, 아이콘을 포함하지마세요.
(자동으로 만들어주니까)

58. Increasing Accuracy
•커스텀 단어를 정의해서 사용하세요.
(Siri가 더많은 액션을 위해 단어를 정의, 단 기본적인 단어는
중복 정의하지마라. ex “Hey Siri”)
•다양한 앱 이름을 정의해놓으세요.
(UnicornChat -> Unicorn)
•Siri 사용의 예제를 만들어 주세요.
(시리 Jake에게 문자보내줘.)

59. TV Providers
TV App Integration
사용자들에게 장비를 상관하지 않고 좋아하는 영화,
TV Show를 보여줄 수 있다.
•화면 전환의 부드러운 연속성을 유지하세요.
TV App이 실행될때 검은 화면이 먼저 보여지고 끝날때도 동일합니다
•TV App을 실행할때, 내용을 우선해서 먼저 보여주세요.
중간에 splash화면이나 다른 것들이오면 좋지 않습니다.
•영상을 시작할땐 사용자에게 재생할것인지 묻지마세요.
•올바른 사용자에게 내용이 보여지는지 확실하게 하세요.
앱이 여러 프로필을 지원하는 경우, TV App은 재생 요청할때
지정할 수 있습니다.

60. TV Providers
Loading Content
2초이상 로딩이 지연되는경우 화면 중앙에 Activity spinner을 위치하
세요.
•가능하면 로딩화면을 피하세요.
•가능하면 재생을 빠르게 하세요.
로딩화면이 필요하면, 재생에 필요한 만큼만 로딩하세요.
•로딩 화면은 검정으로 하세요.
TV App의 하얀 화면과 대비가 잘됩니다.
•로딩 화면시 컨텐츠는 최소한으로 보여주세요.

61. TV Providers
Exiting Playback
유저는 영상을 재생완료 후 TV App으로 이동하는게 아니라 여러분의
앱에 남아있어야합니다. 그래야 유저에게 혼동을 주지 않죠.
•상황에 맞는 화면을 보여주세요.
- 콘텐츠를 종료할때, 방금까지 보았던 내용을 표시해주세요.
- 다시 시작하는 버튼도 옵션으로 넣어주세요.
- 콘텐츠가 포함된 메뉴를 보여주거나, 앱의 메뉴를 보여주세요.
•사용자가 언제든 종료할 수 있으니, 그거에대한 대비를 하세요.

62. TV Providers
Single sign-On
TV Providers가 사용자 계정 인증을 요구합니다. 그럴때 사용하세요.
•유저가 system Level에서 인증을 했다면, 또다시 인증을
요청하지 마세요.
•Privacy controls 에서 로그아웃을 하게 하지마세요.

63. Visual Design

64. Adaptivity and Layout
OverView
•사용자들은 다양한 디바이스에서 동일한 앱을 사용하길 원한
다.
•iOS는 자동으로 화면의 크기에 맞게 모양을 바꾸어준다.
iPhone 7, 750px * 1334px
iPhone 7 Plus, 1242px * 2208px
iPhone X, 1125px * 2436px
iPhone SE, 640px * 1136pxDevice Screen Sizes

65. Adaptivity and Layout
Auto Layout
•Auto Layout을 이용해 화면상의 규칙을 정할 수 있다.
•자동으로 레이아웃을 Constraints를 통해 줄 수 있다.
Auto Layout including
•다른 크기의 스크린과 다른 색상들.(sRGB/P3)
•다른 디바이스의 회전화면들(portrait/landscape)
•iPad Split view
•Multitasking mode (iPad)
•Dynamic Type (텍스트 사이즈 조절)
•국제화적인 특징을 가질 수 있다.(왼쪽오른쪽 레이아웃 방향,시간등)

66. Adaptivity and Layout
Layout Guides and Safe Area
•레이아웃 가이드는 실제 화면에선 보이지않는 정사각형의 레
이아웃을 정의한다.
•safe 영역과 layout margins (UIKit)을 고수해라.

67. Adaptivity and Layout
Size Classes
•디바이스마다 스크린 사이즈를 불러오는 클래스
•regular
•compact

68. Adaptivity and Layout
iPhone X

69. Adaptivity and Layout

70. Adaptivity and Layout

71. Adaptivity and Layout

72. Adaptivity and Layout
Layout Considerations
•Context가 바뀌는동안, 현재의 콘텐츠에 집중할 수 있게하라.
•중요한 내용이라면 한가지 화면에 다 담도록 노력해라.
•화면이 바뀔때 통일되게 유지하라.
•중요한것을 전달하기위해 시각적인 균형을 잘맞추어라.
•정렬을 사용해 읽기편한, 보기편한 화면을 만들어라.
•화면을 가득채워라.
•적절한 빈공간과 주변을 콘텐츠로 채워라.

73. Adaptivity and Layout
Layout Considerations
•큰화면의 디바이스에서 읽기좋은 화면 간격을 유지해라.
•충분한 터치가 가능한 버튼, 아이콘을 넣어라.

74. Adaptivity and Layout
Layout Considerations
•불필요한 Layout 변경은 피해라.
•가능하면 가로, 세로 모드를 모두 지원해라.
•만약 필요하다면 하나의 모드만 지원해라.
•앱의 내용에따라 화면 전환을 커스텀해라.
•폰트크기의 변화에 대응할 준비를해라.

75. Animation
•iOS는 미묘한 애니메이션을 이용해서 Beautiful.
•적절한 사용은 유저들의 행동에 도움을 준다.
•현명하게 애니메이션 효과를 사용해라.
•현실성있게, 신뢰성있게 되려고 노력해라.
(사람들은 생각한대로 안움직이면 혼란스러워한다.)
•일관된 애니메이션을 사용해라.
•애니메이션을 만드는것을 선택적으로 해라.

76. Branding
OverView
•훌륭한 앱은 톡특한 브랜드의 특성을 가지고있다.
(폰트, 색상, 이미지)

77. Branding
•정교하고 깔끔한 브랜딩을 만들어라.
•브랭딩이 앱디자인을 방해하게 하지마라.
(브랜딩보다 iOS앱 답게 만드는게 더 중요하다.)
•만든 앱의 모든곳에 나의 로고를 넣고싶은 유혹을 뿌리쳐라.
•애플 가이드라인을 고수하십시오.

78. Color
OverView
•색상은 유저와의 상호작용에 큰 도움이 된다.
•App tint 색상을 고를 때는 색상 설계 가이드를 보고 선택해
라.

79. Color
•의사소통을 위해 색상을 신중히 선택하라.
(경고의 경우 빨간색)
•상호보완적인 색을 앱에 사용해라.
•앱로고와 일맥상통하는 색상을 사용하여라. 브랜딩에 도움이
된다.
•하나의 대표 색상을 정해서 앱에 적용하세요.
•활성화, 비활성화 색상은 같은 색을 사용하지 마세요.

80. Color
•artwork와 반투명사이의 색상을 고려해라.

81. Color
•다양한 환경에서 색상을 테스트하세요.
(실내, 실외에 따라 다르게 보일 수 있습니다.)
•True Tone 효과(자동밝기조절)가 색상에 영향을 미치는걸
고려하세요.
•색맹에 대해 알고 있어야합니다.
•문화권, 나라마다 다른 색상에 대한
의미를 고려해야합니다.
•충분한 색상 대비 비율을
사용하십시오.
(4.5:1)

82. Color
•스타벅스
•이마트

83. Color
•5%가 사람들에게 주제 색상을 인식 시켜준다.
•마법의 비율 70:25:5

84. Color
•마법의 비율!

85. Color Management
•iOS standard RGB (sRGB)에 맞는 이미지를 사용해라.
•호환 가능한 색상을 최대한 사용하세요.
(Display P3) 픽셀당16비트 P3프로파일 .png

86. Color Management
•iPhone 7 최초의 DCI-P3 color space 사용제품

87. Terminology
OverView
•유저와의 소통을 위해 어떤 소통법이 편안함을 주는지 알아봅
시다.
Contents
•친숙하고 이해하기 쉬운 용어와 문장을 사용합시다.
(일반적으로 모든사람이 사용하는 앱은 기술적인 용어는 필요
없다.)
•인터페이스 텍스트를 간결하고 명확하게 보여줍시다.
(사람들은 읽는것을 강요받는걸 싫어한다.)

88. Terminology
Contents
•사람과 대화하는 느낌의 Label문장과 Button을 만드세요.
(요소를 한눈에 알아볼 수 있어야 합니다.)
•잘난척하는 말투는 삼가하세요.
(우리, 나, 너 라는 단어는 피하는게 좋다. 건방지게 들린다.)
•비공식적이고, 친숙한 언어를 사용하게 노력하세요.
•유머를 사용할때는 조심해서 사용하세요.
(다른 문화권에서도 통한다고 생각하면 오산입니다.)

89. Terminology
Contents
•관련성있고 일관된 이미지와 텍스트를 사용하세요.
(iPad사용자가 iPhone 정보나 이미지를 보여주지 마세요.
•날짜를 정확하게 사용하세요.
- 앱을 사용하는 사람의 시간대에 맞추어서 날짜정보를
보여줘야합니다.
- 비행일정표를 보여주는 앱, 비행의 출발과 도착 시간을
명시적으로 표현해 주어야 한다.

90. Typography
OverView
•San Francisco(SF)는 iOS의 시스템 폰트입니다. 이 폰트는 앱
의 텍스트에 가독성을 높여주고, 깔끔하게 해줍니다.
•한글 서체인 애플SD 고딕 네오와의 조합도 괜찮습니다.

91. Typography
Contents
•중요한 정보는 강조하세요.
•가능하면 한가지 서체를 사용하세요.
•가능하면 기본으로 제공하는 text style을 사용하세요.
•Custom fonts가 잘보이는지 확인하세요.
•Custom fonts가 사용자 지정 크기변화에도 적용이 잘되야합
니다.

92. Typography
Dynamic Type Sizes
•SF는 유동적인 크기변화에도 잘 작동합니다.
•xSmall, Small, Medium, Large, xLarge, xxLarge,
xxxLarge
Style, Weight, Point size
Leading, Tracking

93. Typography
Larger Accessibility Type Sizes
•추가적으로 더큰 사이즈의 타입을 지원합니다.
Font Usage and Tracking
•인터페이스의 실물 크기로 올바른 글꼴을 사용합시다.
- Button, Label, 표준 컨트롤러 라이브러리는 사용자 설정으
로
자동으로 폰트가 변경됨.

94. Icons and Images

95. Image Size and Resolution
OverView
•iOS는 이미지를 배치할때 사용하는 기본 좌표는 Point
Display에서는 Pixel이다.
•Standard-Resolution screen에서는 Point == Pixel
•고생도에서는 Pixel의 수가 더 많아진다.Point != Pixel

96. Image Size and Resolution
Contents
•앱이 지원하는 모든 장치에 대해 고해상도 이미지가 있어야합
니다.
- 표준 해상도 이미지의 배율은 1.0이고, @1x
- 2.0 배율은, @2x
- 3.0 배율은, @3x
@1x = 10px * 10px , @2x = 20px * 20px, @3x = 30px *
30px

97. Image Size and Resolution
Designing High-Resolution Artwork
•8px-by-8px grid를 사용하세요.
- 깔끔하고, 날카롭게하는 다듬기 작업이 수월합니다.
- 이미지 경계를 그리드로 맞추면, 이미지 축소시 발생하는 이
미지
손실을 최소한으로 줄일 수 있다.
•적절한 포맷의 이미지를 사용하세요. (.png권장)
- 무손실이미지
- 사진이라면 JPEG 기술을 사용하세요. 사이즈를 줄여주지만,
Artwork보다 손실된 이미지를 구분하기 어렵습니다.
•24-bit가 다 필요없다면, 8-bit color palette를 사용하세요.
(이미지 손실없이 8-bit면 충분히 표현할 수 있습니다. 사진 - X)
Why??

98. Image Size and Resolution
Designing High-Resolution Artwork
•JPEG를 사용하면 사이즈와 quality의 균형을 잘 맞추세요.
•이미지 및 아이콘에 대한 텍스트 정보를 제공하세요.
VoiceOver

99. App Icon
OverView
•모든 앱은 앱스토어나, 홈화면에서 이목을 끌고, 기억에 남는
아름다운 아이콘을 가져야합니다.
•아이콘은 앱의 목적과 어떤 앱인지 짧게 보여줄 수 있는 기회
이다.
•아이콘은 시스템 전반에서 어디든지 보여진다.(검색, 설정등..)

100. App Icon
Contents
•단순함을 받아들이세요.
(앱의 본질을 표현할 수 있는 것을 톡특한 모양으로 정해보세
요.)
•한가지 포인트를 정하세요.
(포인트를 정하면 앱의 정체성과, 이목을 끌 수 있습니다.)
•알아보기 쉬운 디자인을 하세요.
•배경을 단순하게하고 투명을 피하세요.
•로고일 경우에만 단어를 사용하세요.

101. App Icon
Contents
•사진, 스크린샷, 인터페이스 요소를 넣지 마세요.
•애플껀 사용하지마세요.
•인터페이스에 사용된걸 쓰지마세요.
•여러 배경(홈화면 의 다양한 웰페이퍼)에서 테스트하라.
•아이콘의 모서리는 정사각형으로 유지하세요.
(자동으로 둥그렇게 만들어주니까요.)

102. App Icon
App Icon Attributes
•아이콘은 다음과 같은 특성이 있습니다.

103. App Icon
App Icon Sizes
•모든 앱은 만드시 Small아이콘이 있어야합니다.(홈화면에 쓸
것)
큰아이콘은 App Store에서 사용된다.

104. App Icon
App Icon Sizes
•다양한 디바이스에서 아이콘이 멋지게 보이는지 확인하세요!
•작은 아이콘을 앱스토어에 사용하지마세요.
앱스토어엔 좀더 상세한 묘사를 할 수 있습니다.

105. App Icon
Spotlight, Settings, and Notification Icons
•모든 앱은 만드시 Small아이콘이 있어야합니다. 검색할때, 세
팅에서, 알림에서 쓰인다.
•세팅아이콘에 중첩이나 테두리를 사용하지마세요.
(자동으로 하얀 배경에도 잘보이게 테두리를 추가합니다.)

106. Custom Icons
OverView
•우리가 만든 앱이 시스템 아이콘으로 다 표현할 수 없다면, 새
롭게 만들 수 있다.
Contents
•알아보기 쉽게, 간단히 디자인하세요.
•Glyph처럼 아이콘을 디자인하세요.

107. Custom Icons
Contents
•Glyphs는 @2x와 PDF로 저장하세요.
(PDF는 vector format으로 높은 해상도를 가지고 있습니다.)
•아이콘에 일관성을 유지하세요.
•읽기 쉬운 아이콘이어야합니다.
•아이콘이 선택되었을때와 그렇지 않을때를 color로 나눠사용합
니다.

108. Custom Icons
Contents
•아이콘에 텍스트를 사용하지마세요.
(텍스트가 필요하면 Label로 사용하세요.)
•애플기본 아이콘을 사용하지마세요.
•아이콘과 마찬가지로 VoiceOver 기능에 대응하세요.

109. Custom Icons
Custom Icon Sizes
•아이콘은 동일한 사이즈를 가져야합니다.
Navigation Bar and Toolbar Icon size

110. Custom Icons
Tab Bar Icon Size
•Portrait 방향일때, Landscape 방향일때 아이콘의 크기를
정해줘야합니다.
•Regular tab bar 일때와 Compact tab bar

111. Launch Screen
OverView
•앱이 실행되기전 화면입니다. 실행되면 빠르게 실행화면으로
전환되기 때문에 예술적으로 보여줄 기회는 아닙니다.
•모든 앱은 Launch Screen이 있습니다.

112. Launch Screen
OverView
•launch screen은 디바이스마다 다르기때문에, Xcode에서
storyboard를 사용하거나 static이미지로 launch screen으로
사용할 수 있게 도와줍니다.
•storyboard를 사용하는 것을 권장합니다. AutoLayOut Guide
Contents
•앱의 첫번째 화면이기 때문에 정체성을 보여 줄수 있는 화면
으로 만드십시오.
•텍스트를 피하세요.
(정해진 화면이기 때문에 국제화에 대응할 수 없습니다.

113. Launch Screen
Contents
•사용자들이 앱을 자주 바꿔서 실행하기 때문에, 이목을 끄는
launch Screen은 사용하지 마세요.
•광고에 사용하지마세요.
Static Launch Screen Images size

114. System Icons
Over View
•iOS에서 제공해주는 아이콘을 사용하세요.
사람들에게 친숙함을 느끼게 해줍니다.
•Navigation Bar and Toolbar Icons
•Tab Bar Icons
•Home Screen Quick Action Icons

115. System Icons
Contents
•의도에 맞는 아이콘을 사용하세요.
•아이콘에 대체 text-Label을 제공하세요.(VoiceOver)
•필요하면 커스텀아이콘을 사용하세요!

116. Views
- 앱 콘텐츠를 표시
- 하위 뷰를 표시
- 콘텐츠 조회, 수정, 갱신, 삭제 가능
UI Elements
Bars
- 앱 내 사용자의 위치 표시
- 문맥정보를 가지고 적합한 기능 또는 정보 제
공
Controls
- 사용자 입력을 받음
- 부수적인 정보 표시
Temporary Views
-특정 상황에서 중요한 메시지를 전달하
고 추가적인 입력을 받기 위한 일시적인
뷰

117. Bars
UI Elements

118. Navigation Bars
계층구조로 구성된 연속적인
페이지를 차례로 조회 가능
•위치: 화면 상단의 상태바 아래
•좌측: 보통 뒤로가기 버튼 삽입. 보통
이전 페이지 제목으로 표시.
•우측: 기타 컨트롤 요소 삽입. 보통
수정 또는 완료 버튼 표시.
뒤로가기 버튼 기타 컨트롤 요소
숨김 처리
•제스처 발생, 키보드 노출, 뷰 사이즈 변경 등의 상황에 바를 숨긴다.
•콘텐츠를 전체화면으로 보여주는 경우, 바를 숨기는 편이 좋다.

119. Navigation Bars
바 내부에 컨트롤 요소 배치 시 권유
사항
•컨트롤 요소를 너무 많이 넣지 않는다.
•버튼 사이 간격을 넓게 한다.
(UIBarButtonSystemItemFixedSpace 참고)
•뒤로가기 버튼은 Standard Back Button 사용.
항상 직전 화면을 표시하는 액션만 취해야 한다.
•세그먼트 컨트롤을 사용하면 페이지들의 계층
구조를 단순하게 보여줄 수 있다.
•세그먼트 컨트롤을 넣을 땐 타이틀을 제외한다.
타이틀 배치 시 권유사항
•현재 보여지는 뷰의 제목을 표시하는 편이 좋다.
•종류: Standard title, Large title
•기본적으로 Large title로 표시한 후, 스크롤 등의 이벤트가 발생 시
Standard title로 변경하는 것이 좋다. (prefersLargeTitles 참고)
Standard TitleLarge Title
현재 뷰 제목
컨트롤 요소
세그먼트 컨트롤

120. Tab Bars
앱 내에서 다른 섹션으로 스위칭 가능
•앱 구조를 단순하게 표시할 수 있다. 앱 레벨에서 사용한다.
•위치: 화면 하단
•탭바 버튼은 액션을 수행하는 데 사용하지 않는다. 현재 뷰에서
특정 액션을 취해야 하는 경우, Tool Bar를 사용한다.
•기기 사이즈나 오리엔테이션에 따라 보여지는 탭 개수가 달라
진다.
•너무 많은 탭을 쓰지 않는다: 보통 3~5개의 탭을 쓴다.
•탭은 항상 활성화 상태로 둔다: 탭 내부 콘텐츠가 사용할 수 없
더라도 탭 내부에서 이를 표시한다.
•특정 탭에 업데이트된 정보가 있으면 배지를 달아서 표시할 수
있다.
•액션 수행에 사용하지 않음
•3~5개가 적당
•항상 활성화 상태
•업데이트 표시는 배지 사용

121. Tab Bars
예시1. 화면 상단에 위치한 탭 바 예시2. 커스텀 탭바

122. Tool Bars
현재 뷰에서 수행가능한 기능 표시
•위치: 화면 하단
•현재 화면과 관련된 버튼만 표시한다.
•툴바 위에 세그먼트 컨트롤은 사용하지 않는 편이 좋다.
•텍스트 버튼들은 간격을 넓게 한다
(UIBarButtonSystemItemFixedSpace)
Q. 툴바?

123. Search Bars
•단독으로 배치되거나 내비게이션 바 등의 뷰 내부에 배치
•Text Field 말고 Search Bar 요소를 이용한다.
•Clear 버튼 사용
•Cancel 버튼을 만들어 검색을 중단할 수 있도록 한다.
•검색 중 하단에 연관검색어를 보여주면 좋다.
•힌트 문구를 넣어 검색 가능한 범위를 알 수 있도록 한다.
모두 지우기 검색 취소
연관 검색어 리스트
검색어 힌트
Scope Bar
검색 바에 붙이면 검색 범위를 좁힐 수 있다.

124. Status Bars
현재 시간, 네트워크 상태, 배터리 등 기기의 현재 상태를 표시
•시스템 제공 바를 사용한다.
•앱 디자인에 따라 바 색상을 변경할 수 있다: Light / Dark
•기본적으로 투명해서 콘텐츠가 비쳐보인다: 상태바 내용이 잘 보일 수 있도록
상태바 뒷부분에 UIBlurEffect를 적용하여 흐리게 만든다.
•전체화면으로 미디어를 보여줄 때는 상태바를 잠시 숨긴다.
Light Dark

125. Views
UI Elements

126. Tables
컬럼 1개인 리스트로,
여러 줄의 데이터를 스크롤 조회 가능
•주로 텍스트 기반의 콘텐츠나 Split View에서 내비게이션을
표시할 때 사용됨.
•테이블 너비를 고려한다.
•이미지 등의 추가적인 데이터를 보여주기 위해 기다리지 않는
다: 텍스트 데이터부터 빠르게 보여준다.
•콘텐츠가 로드될 때까지 Progress Indicator를 보여준다.
•테이블 콘텐츠를 정기적으로 업데이트하는 방법을 고려한다.
단, 업데이트될 때 현재 스크롤 위치는 유지한다.

127. Tables
Plain
•행이 라벨이 있는 섹션 단위로 묶일 수 있다.
•Header와 Footer를 가질 수 있다.
•우측에는 색인(index)을 세로로 삽입할 수 있다.
•단, 우측에 Disclosure Indicator 등의 요소가 있
으면 색인은 넣지 않는다.
Grouped
•행이 그룹 단위로 묶일 수 있다.
•Header와 Footer를 가질 수 있다.
•항상 1개 이상의 그룹을 가지며, 각 그룹은 1개
이상의 행을 가진다.
•색인은 삽입할 수 없다.
Disclosure
Indicator
Footer
Header
Index

128. Tables
Subtitle
Left Detail
Basic
Right Detail
행 스타일
이미지 삽입 가능
제목 왼쪽 정렬
부제목 삽입
제목
왼쪽 정렬
부제목
오른쪽 정렬
제목
오른쪽 정렬
부제목
왼쪽 정렬

129. Collections
정렬된 콘텐츠 모음을 관리하고
시각적인 레이아웃으로 표시
•엄격한 선형구조를 요구하지 않기 때문에, 여러 사이즈로 콘텐츠들을 보
여주는 데 적합하다.
•콘텐츠 주위에 패딩 사용: 레이아웃을 깨끗하게 유지하고 콘텐츠가 겹치
는 것을 방지할 수 있다.
•텍스트 콘텐츠 배치 시, 컬렉션보다 테이블 사용

130. Split Views
스크린을 두 화면으로 나누어 관리
•주 화면(왼쪽): 변하지 않는 내용 표시
•보통 카테고리(내비게이션) 표시
•사용하지 않을 땐 숨겨둔다.
•보조 화면(오른쪽): 관련 콘텐츠 표시
•화면 분할은 콘텐츠 균형에 맞게 한다:
•기본적으로 주 화면은 1/3, 보조 화면은 2/
3를 차지한다.
•보조 화면이 주 화면보다 더 작아지면 안된
다.
•숨겨져 있는 주 화면 노출 시, 여러 방법 제공:
•스와이핑, 버튼 클릭 등
주 화면
Master
보조 화면
Detail

131. Split Views
Q. 아이폰에서의 스플릿 뷰인
가?

132. Scroll Views
사용자와 상호작용 시, 일시적인 스크롤 인디케이터 노출
•tap, flick, drag, pinch, swipe 제스처를 따른다.
•사용자 제스처의 적정선을 설정한다: 예를 들어, 줌인 시 너무 커지거나 작
아지지 않도록 최대 스케일, 최소 스케일 값을 설정한다.
•페이징 모드로 설정 시: 스크롤 시 새 페이지로 전환 가능
•스크롤 뷰 안에 스크롤 뷰를 중첩해서 넣지 않는다.
•스크롤 뷰는 한 화면에 1개만 보여준다:
•만약 2개의 스크롤 뷰를 넣어야 한다면, 다른 방향으로 스크롤 하도록
만든다. 제스처가 다른 뷰에 영향을 주지 않기 때문.

133. Pages
문서, 책, 메모장, 달력 등에 사용되며,
여러 장의 콘텐츠를 차례대로 접근 가능
•화면 전환 방법: Scrolling 또는 Page-curl
•연속되지 않는 특정 페이지에 바로 접근할 수 있도록 구현하면
좋다.

134. Text Views
•텍스트 뷰는 어떤 높이도 될 수 있으며, 콘텐츠가 뷰보
다 길어질 때 스크롤 가능하다.
•텍스트는 읽기 쉽게 쓴다:
•여러 글꼴, 색 등을 입혀 창의적인 방법을 사용할 수
있지만, 콘텐츠 가독성을 유지하는 것이 중요하다.
•Dynamic Type을 사용하면 기기에서 텍스트 크기
가 변경되어도 여전히 좋게 보인다.
•만약 텍스트뷰가 수정 가능하면(editable), 탭 시 키보
드가 올라온다.
•적절한 키보드를 보여준다: 효율적인 텍스트 입력을
위해서는 필드에 들어갈 콘텐츠 타입에 맞는 키보드를
노출해야 한다. (UIKeyboardType)

135. Image Views
한 장의 이미지나 여러 장의 연결된 이미지들을
표시
•이미지는 이미지뷰 안에서 늘어나거나 커지거나 작아지거나
딱 맞춰지거나 특정 위치에 고정될 수 있다.
•이미지뷰는 기본적으로 사용자 상호작용이 불가능하다.
•연속되는 이미지들을 통해 애니메이션 형태로 보여줄 땐 최대
한 같은 사이즈의 이미지를 사용한다: 시스템이 스케일링을 해
주긴 하지만, 미리 이미지들이 뷰 사이즈에 맞게 처리돼있는
것이 좋은 결과를 보여준다.
•템플릿 이미지로 설정된 이미지: color 값이 제거되고 이미지
뷰의 틴트값을 사용한다.
•이미지를 항상 템플릿 이미지로 그리는 옵션:
UIImageRenderingModeAlwaysTemplate
* 템플릿 이미지란?
단색 이미지로, 마스크를 사용하여 모양을 정의함.
투명도가 있고, 안티앨리어싱 기능이 있으며 명암이 없다.
이는 자동으로 상황이나 상호작용에 따라 적절한 색상 지정,
강조 표시 등을 받아 사용한다.

136. Map Views
지형정보를 보여주고
빌트인 맵 앱에서 제공하는 기능을 지원
•표준지도, 위성이미지 표시 가능
•pin, overlay, zooming, panning 기능 제공
•이동루트 표시 가능 (feat. 러닝앱)
•예측 가능한 pin 색상을 사용한다: 사용자는 표준 pin 색상에
익숙하다. 목적지는 빨간색, 출발지는 녹색, 사용자 선택 지점
은 보라색으로 표시한다.

137. Web Views
HTML이나 웹사이트 등 웹 콘텐츠를 앱 내부에 표
시
•필요하면 이전페이지보기/ 다음페이지보기 버튼을 활성화한다:
•기본적으로 비활성화 되어있다. 앱에서 여러 페이지의 웹뷰를
보여줘야 한다면 활성화하는 것이 좋다.
•웹뷰를 웹브라우저로 사용하지 않는다.

138. Temporary Views
UI Elements

139. Alerts
•중요한 상황에만 사용한다:
•사용자 작업을 한 번 더 확인하거나 삭제 등의 작업을 수행하
거나 문제 사항을 알릴 때 등에만 사용한다.
•기본 알럿창은 보통 커스터마이즈 될 수 없다.
•필요한 정보만 노출시키도록 사이즈를 최소화한다.
•Landscape 모드, Portrait 모드에서 모두 확인해본다.

140. Alerts
제목
•한 줄로 작성한다.
•한 단어만 사용하진 않는다: 한 단어만 사용하면 내용란에 부가적인 설명이 필요할 수 있다.
설명
•설명은 되도록 적지 않는다.
•꼭 적어야 한다면, 짧은 문장으로 적는다.
버튼
•주로 버튼은 2개만 배치한다:
•버튼 1개로는 사용자가 상황을 컨트롤하기 힘들다.
•3개 이상의 버튼이 필요하면 액션시트로 대체한다.
•사용자들이 더 많이 누를 것 같은 버튼은 오른쪽에 배치하며, 취소버튼은 항상 왼쪽에 배치한다.
•취소버튼명은 항상 ‘취소(Cancel)’로만 표시되어야 한다.
•Delete 등의 버튼은 Destructive 스타일(UIAlertActionStyleDestructive)로 만든다. 또, 취소 버튼도 같이
제공한다.
•홈 버튼 등으로 앱이 종료되는 경우, 알럿이 취소되도록 구현한다:
•알럿창이 노출된 상황에서 홈 버튼으로 앱이 종료되면, ‘취소’ 버튼을 누른 것과 같은 결과를 내야 한다.
•만약 알럿창에 취소 버튼이 없으면 앱이 종료되는 시점에 취소 액션을 구현할 수도 있다.
제목
부제목
취소 삭제

141. Alerts
Q. 커스텀 알럿인가?

142. Action Sheets
알림 컨트롤러의 일종으로, 2~3 개 이상의 선택지
제공
•새 작업창을 열거나, 종료 여부 확인 시 사용하면 좋다.
•작은 화면에서는 액션시트가 화면 아래에 표시되지만, 큰 화면에
서는 팝오버(Popover) 형태로 나타나야 한다.
•아이패드에서는 구현 시에 팝오버로 띄우지 않으면 에러 발생
•취소 버튼을 반드시 넣는다: 액션 시트 마지막 항목으로 배치하면
좋다.
•위험한 선택지는 눈에 띄게 넣는다: 빨간색을 사용하여 눈에 띄게
표시한다. 액션 시트 첫 항목으로 배치하면 좋다.
•스크롤이 생기지 않도록 너무 많은 항목을 넣지 않는다.

143. Action Sheets
예시. 커스텀 액션시트

144. Popovers
특정 컨트롤이나 영역 탭 시
콘텐츠 위에 잠시 뜨는 뷰
• 비모달 형태:
• 스크린의 다른 부분을 탭하거나 팝오
버 위의 버튼을 누르면 닫힘
• 닫히기 직전에 자동으로 내용을 저장
하는 것이 좋다.
• 한 번에 1개만 표시한다.
• 팝오버 위에는 알럿 외에 다른 뷰를 띄
우지 않는다.
• 너무 크게 만들어 스크린 전체를 사용하
지 않도록 주의한다.

145. Popovers
• 팝오버는 아이패드에 주로 사용되며, 아이폰에선 사용하지 않
는다:아이폰에서는 스크린의 모든 공간을 사용하여 모달형식으
로만 뷰를 표시하기 때문에 팝오버를 쓰지 않는 것이 좋다.
Q. 팝오버인가?

146. Activity Views
해당 페이지에 관련된 액티비티 관리
•액티비티:
•현재 페이니 내에서 수행할 수 있는 복사, 즐겨찾기, 검색 등의 작업
단위
•액티비티 뷰의 관리를 받는데, 액션시트나 팝오버 형태로 표시된다.
•시스템 제공 빌트인 액티비티: Print, Message, AirPlay. 액티비티 뷰
에 가장 먼저 표시되며, 순서를 변경할 수 없다. 제외는 가능.
•작업명은 아이콘 바로 아래 간단히 표시: 작업명이 길면 iOS는 텍스트
를 먼저 줄인 후 너무 길면 자른다. 또한, 회사나 제품 이름을 포함시키
지 않는다.
•시스템이 제공하는 Action(공유) 버튼을 사용한다.

147. Controls
UI Elements

148. Buttons
시스템 제공 버튼
System Button
•주로 내비게이션 바나 툴
바에 사용
•되도록 동사로 작성
Detail Disclosure Button
•세부정보 뷰를 띄움
•테이블에서 특정 행의 세부
정보 페이지 띄울 때 주로
사용
•테이블 행 전체를
세부정보에 사용하고 싶을
땐 Detail disclosure
accessory type을 사용 ( >
표시)
Info Button
•앱의 상세 설정창 표시 시 사
용
•현재 뷰의 뒷면을 나타낼 때
사용하기도 함
Add Contact Button
•연락처 리스트 탐색 시, 새
텍스트필드나 다른 뷰 삽입
시 사용

149. Labels
•텍스트는 읽기 쉽게 쓴다:
•여러 글꼴, 색 등을 입혀 창의적인 방법을 사용할 수 있지만, 콘
텐츠 가독성을 유지하는 것이 중요하다.
•Dynamic Type을 사용하면 사람들이 기기에서 텍스트 크기를
변경하는 경우에도 여전히 좋게 보이게 할 수 있다.

150. Text Fields
1줄짜리 라인 필드로, 소량의 정보를 요청할 때 사
용
•높이는 고정이다.
•사용자가 탭하면 키보드가 자동으로 노출된다.
•되도록 라벨을 따로 두지 말고 힌트를 사용한다.
•오른쪽 끝에 Clear 버튼을 삽입한다.
•암호와 같은 중요한 데이터를 요청할 때, 항상 보안 필드를 활용한
다.
•이미지와 버튼을 사용하여 텍스트 필드에 목적과 추가기능을 표시
한다: 일반적으로 텍스트 필드의 왼쪽 끝은 필드의 목적을 나타내
고, 오른쪽 끝은 북마크와 같은 추가 기능이 있음을 나타낸다.
•여러 줄의 텍스트를 입력받기 위해선 Text View를 사용한다.
•적절한 키보드 유형을 표시한다. (UIKeyboardType)

151. Edit Menus
•현재 페이지에 적합한 메뉴들만 표시:
•기본적으로, 잘라내기, 복사하기, 붙여넣기, 선택, 전
체 선택, 삭제 기능을 제공하지만, 선택적으로 비활성
화 시킬 수 있다.
•필요한 경우, 위치를 변경한다:
•기본적으로 선택한 부분의 위 또는 아래에 배치되지
만, 중요한 콘텐츠를 가리고 있는 경우 위치를 변경할
수 있다.
•수정 불가한 텍스트는 선택/복사가 가능하도록 만들면
좋다.
•수정 메뉴는 한 번 실행되면 취소할 수 없기 때문에,
Undo/Redo 명령을 제공한다.

152. Progress Indicators
복잡한 데이터 로드, 동기화 작업
등 수치화 불가능한 작업 수행 중
사용
•계속 움직이도록 만든다: 사용자
들은 인디케이터가 정지되면 작
업도 정지되었다고 생각한다.
•기다리는 동안 유용한 정보를 제
공하면 좋다: ‘로딩 중’, ‘인증 중’
과 같은 모호한 용어는 쓰지 않는
다.
왼쪽에서 오른쪽으로 트랙을 채워가
면서 작업의 진행률을 보여줌
•취소 버튼이 함께 제공되기도 한다.
•부정확한 진행 정보는 표시하지 않
는다.
•기간이 명확한 작업에 사용한다.
네트워킹 발생 시 회전하며,
네트워킹이 연결되면 멈춤
•아이폰X 예외
•몇 초가 지나도 연결이 안 될 때
만 사용한다.
Activity Indicators Progress Bars Network Activity Indicators

153. Progress Indicators
Q. Progress Bar 인가?

154. Refresh Content Controls
•주로 테이블뷰에서 수동으로 새로고침 시 사용된다.
•기본적으로 숨겨져 있으며, 화면을 아래로 드래그하면 나타난다.
•자동 업데이트도 정기적으로 수행하도록 구현한다:
•사용자들은 자동 업데이트가 실행되기를 기대한다.
•값이 추가되는 경우에만 짧은 제목을 제공한다:
•제목을 포함시킬 수 있는데, 대부분의 경우 불필요하다.
•제목을 포함할 경우엔 콘텐츠에 대한 가치있는 정보를 제공한다.
예를 들어, 마지막 업데이트 발생 시점을 보여줄 수 있다.

155. Refresh Content Controls
예시. 커스텀 새로고침 컨트롤

156. Page Controls
여러 페이지 중 현재 페이지를 나타냄
•일련의 작은 점으로 표시되는데, 색칠된 점은 현재 페이지를 나타낸다.
•점들은 항상 같은 거리를 유지하며, 너무 많으면 잘린다.
•페이지 컨트롤의 앞부분/뒷부분을 탭하면 바로 앞 페이지나 뒷 페이지
로 이동하지만, 특정 페이지로 이동할 수는 없다.
•계층구조의 페이지에는 사용하지 않는다: 페이지 컨트롤은 페이지들
이 관련된 방식을 보여주지 않고, 각 점에 해당되는 페이지를 나타내
지 않는다. 페이지 컨트롤은 동등한 관계에 있는 페이지를 위해 설계
되었다.
•항상 콘텐츠와 스크린 사이에 위치해야 한다.

157. Segmented Controls
각 세그먼트는 상호배타적이며, 다른 뷰를 표시하는 데 사용되기도
함
•모든 세그먼트의 폭은 동일하며, 텍스트나 이미지를 삽입할 수 있다.
•단, 텍스트와 이미지를 혼합하지 않는다.
•세그먼트 수를 제한한다: 아이폰에서는 5개 이하여야 한다.
•콘텐츠 크기도 일관성 있어야 한다:
•모든 세그먼트가 동일한 폭을 가지기 때문에 콘텐츠가 일부 세그먼트만 채우고 다른 세
그먼트는 채우지 않으면 좋아 보이지 않는다.

158. Switches
Default Custom
상호배타적인 2개의 상태값을 지닌 토글
•스위치 모양을 앱의 스타일에 맞춰 변경하면 좋다.
•스위치는 테이블에서 사용되도록 설계되었다. 테이블 행에만 사용한다:
•툴바나 내비게이션 바에는 스위치 대신 버튼을 사용한다. (현재 상태를 나타내는 아이콘 2개 삽입)
•스위치 값을 설명하는 라벨은 넣지 않는다.
•연관 인터페이스의 요소들에 미칠 영향을 고려한다:
•스위치는 종종 화면의 다른 콘텐츠에 영향을 미친다.
•(예) Wi-Fi 스위치 비활성화 시, 사용가능한 네트워크 및 기타 옵션이 사라짐.

159. Sliders
가로트랙 위에서
최소값과 최대값 사이를 이동시켜 특정 값 변경
•양쪽으로 최소값, 최대값을 의미하는 아이콘을 표시할 수 있다.
•오디오 볼륨에는 슬라이더를 사용하지 않는다:
•앱에서 볼륨 컨트롤을 제공해야 하는 경우, Volume View를
사용

160. Steppers
2개의 세그먼트로 이뤄진 컨트롤.
값을 증가/감소시키는 데 사용
•스테퍼가 영향 주는 값을 명확히 표시한다:
•스테퍼 자체는 값을 표시하지 않기 때문에 변경하는 값이 뭔지 알
려줘야 한다.
•큰 값을 변경할 때는 스테퍼를 사용하지 않는다:
•스테퍼는 보통 몇 번의 탭으로 변경할 수 있는 정도에만 사용한다.

161. Pickers
•보통 화면 아래쪽에 표시되거나 팝오버 형태로 표시된다.
•테이블 특정 행의 인라인으로 표시되기도 한다.
•피커의 높이는 5개 행 정도이다.
•논리적으로 정렬된 값을 사용한다:
•많은 값이 숨겨져 있기 때문에 사용자가 어떤 값이 나올 지 예측 가능하
도록 만드는 것이 중요하다. (예) 알파벳 순, 날짜 순 등
•피커를 보여주기 위해 화면전환을 하지 않는다:
•현재 페이지 내에서 편집하는 필드 아래나 근처에 위치시킨다.
•아주 긴 리스트를 보여줘야 할 때는 피커 대신 테이블을 사용한다:
•너무 긴 피커는 탐색할 때 지루해질 수 있다. 반면, 테이블은 높이를 조정
할 수 있고 색인이 있기 때문에 빠르게 탐색할 수 있다.

162. Pickers
Date Picker
특정 날짜나 시간을 선택하는 피커
•4가지 모드가 있다:
•Date: 년/월/일
•Time: 시/분/AM/PM
•Date and Time: 위의 둘 모두 표시 가능
•Countdown timer: 시/분
•분 간격을 넓힐 수 있다: 기본적으로 1분 단위로 제공되지만, 선택
적으로 간격을 설정할 수 있다.
•피커에 표시되는 정확한 값은 사용자의 위치에 따라 다르다.