1. Part 2
iPhone iOS 4.0
HIG(Human Interface Guide)
요약 및 해설
위너스 모바일앤소셜 연구소
2010.10
1 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com
ⓒwinnerslab.org

2. 목차
• 1. UI 개요
• 2. iOS4 개요
• 3. App의 정의에서 브랜딩까지
• 4. App의 작업별 고려사항
• 5. App의 구성요소들
• 위너스랩 소개
2 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

3. 인사말
2009년말 아이폰에 빠져 공부할 때 보던 자료 중에 하나가 이 HIG!
그러나 평소 영어울렁증(^^;)에 시달려온 저로서는 정말 갑갑했습니다.
맨땅에 헤딩하는 마음으로 처음 보는데 한 달여 걸렸던 기억이 납니다.
궁극적으로는 HIG원서와 친해지라는 말씀을 드리고 싶습니다.
저도 이제 1년 넘게 봐왔더니… 그런대로 눈에 들어옵니다.
본 자료는 애플의 iOS UI 문서인 HIG(Human Interface Guide)를 기초로
작성하였습니다.
http://developer.apple.com/library/ios/#documentation/UserExperience
/Conceptual/MobileHIG/Introduction/Introduction.html
(수시로 업데이트되므로 자주 들어가 보시기 바랍니다.)
이 자료는 제가 위너스랩이나 삼성멀티캠퍼스에서 강의할 때 사용하는
PPT자료입니다.
따라서 상세설명이 잘 없습니다. (여러분의 호응에 따라 추가하겠습니다. ^^;)
다만, 제 강의를 수강하신 분들중 본 자료에 대한 요청이 자주 있어 이렇게
올리게 되었습니다.
저의 모바일UI/UX 강의를 듣고자 하시는 분은 연락바랍니다.
부디 여러분께 작으나마 도움되시길 바랍니다!
(도움되신 분들은 페이스북에 시~~원하게 ‘좋아요’ 부탁해용 ^^)
위너스랩
동우상 소장
3 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

4. 5-1. App의 구성요소들
Bar
4 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com
ⓒwinnerslab.org
4

5. Status Bar에는 사용자를 위한 중요한 정보를 표시한다.
5 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

6. 세가지 스타일의 Status Bar
6 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

7. 화면전환, 콘텐츠 제어 기능의 Navigation Bars
7 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

8. 설명
• 네비게이션바의 기능은
• 첫째, 말그대로 상위, 하위 뷰로 이동가능한
• 네비게이션의 역할
• 둘째, 해당 뷰의 설정값에 대한 대한 저장,
• 취소 등의 콘트롤 기능
8 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

9. 여러 가지 Navigation Bars
9 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

10. 설명
• 네비게이션바의 용도는
• 첫째, 타이틀바
• 둘째, 본래 의미의 네이게이션바
• 셋째, 각종 버튼을 담는 콘테이너
• 그중 셋째의 경우에서 여러 버튼을 배치할
경우, 각 버튼은 일정한 간격의 공백이 필요
10 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

11. 여러 가지 Navigation Bars
11 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

12. Toolbar 는 해당 작업의 맥락내에서 기능성을 제공
12 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

13. Toolbar의 아이템을 적절한 간격으로 배치하라!
일반적으로 세로화면 기준시
탭바내의 아이템은 5개이내가 적당
13 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

14. Tab bar는 어플리케이션내에서 화면을 전환한다!
14 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

15. Tab bar에서 선택되어진 Tab
※ 주의사항 : 선택되어진 탭을 표시하기 위해 탭 바의 크기나 투명도를
변경해서는 안된다.
※ 주의사항 : 탭바에는 5개까지만 표출해야한다.
15 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

16. 추가되는 Tab은 아래와 같이 표시
16 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

17. 추가되는 Tab은 아래와 같이 표
Figure 6-14
When an application has more than five tabs,
users can select their favorite tabs to display
in the tab bar
17 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

18. 배지는 Tab bar에서 정보를 전달한다!
배지
(Badge)
18 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

19. 5-2. App의 구성요소들
Alerts, Action Sheets,
and Modal Views
19 19 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com
ⓒwinnerslab.org

20. Action Sheets, Modal Views and Alerts
20 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

21. 설명
• 액션시트(Action Sheet)
• - 작은 화면의 스마트폰에서 웹의 팝업과
같은 기능.
• 모달뷰(Modal View)
- 해당 뷰에 대한 입력이나 처리를 해야만
다음 뷰로 전환이 가능함.
• 경고창(Alert View)
• - 일반적인 경고창, 공지의 기능도 수행.
21 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

22. 두 개 버튼의 경고창
22 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

23. 삭제버튼의 색상과 위치
Figure 7-4
A button that performs a destructive action should
be red and located at the top of the action sheet
23 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

24. 대표적인 액션시트 네 개의 버튼을 가진 Action sheet
24 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

25. Modal view는 어플리케이션 화면과 잘 어울려야 한다.
키패드는 별도 제작가능하나
작업량이 크다.
또한 고객에게 낯설 수 있다.
가급적 기본 키패드를 사용하자!
25 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

26. 5-3. App의 구성요소들
Table Views, Text Views,
and Web Views
26 26 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com
ⓒwinnerslab.org

27. Table view를 사용하는 세가지 방법
A simple list A indexed list A grouped list
27 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

28. 설명
• 심플 리스트 : 가장 일반적인 리스트
• 인덱스 리스트 : A부터 Z까지, r부터 g까지
일정한 문자열의 순으로 검색가능한 리스트
• 그룹 리스트 : 특정한 조건 및 조합으로
각각의 그룹으로 나뉜 리스트
28 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

29. A simple list
29 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

30. Grouped Table
30 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

31. 콘텐츠 영역의 두 가지 형태
31 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

32. Delete button & control button
Figure 8-4
A table view can display the Delete button
and the delete control button
32 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

33. Switch control
33 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

34. Text view
34 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

35. Web view
기존 웹서버에서 DB연동
35 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

36. Activity indicator
36 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

37. Date and time picker
37 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

38. Detail disclosure button
Figure 9-3
A detail disclosure button reveals
additional details or functionality
※ Disclosure : 폭로, 알림
38 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

39. Info button
Figure 9-4
An Info button reveals information,
often configuration details
Info
Button
39 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

40. Label
40 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

41. Page indicator
41 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

42. Picker
42 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

43. Bar-style progress view
43 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

44. Rounded rectangle buttons
Figure 9-9
Rounded rectangle buttons
perform application-specific actions
44 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

45. Search bar
Figure 9-10
A search bar with optional
placeholder text and a Bookmarks button
45 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

46. Segmented control
46 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

47. Slider
47 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

48. Text field
48 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

49. 메일 toolbar의 기본형 버튼
49 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

50. 어플리케이션 아이콘
50 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

51. 어플리케이션 세팅시 시작이미지
51 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

52. 주식 어플리케이션의 시작이미지
52 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

53. Icon
Produce a 57 x 57 pixel image
■ Has 90-degree corners
■ Has no shine or gloss
■ Does not use alpha transparency
iPhone OS 4.1 automatically adds
• ■ Rounded corners
• ■ Drop shadow
• ■ Reflective shine
53 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

54. iPhone Icon
iPhone Format
Application icon 57 x 57
Application icon
512 x 512
(App stoer)
PNG
Spotlight Search Results 50 x 50
a Settings Icon 29 x 29
54 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

55. “성공하는 이들은 다르다!”
위너스랩은…
모바일과 소셜시대의 앞서가는
리딩 기업과 서비스를 연구합니다.
이를 통해 그들의 성공비결과 인사이트를 담아
여러분께 서비스합니다.
55 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

56. “위너스랩 서비스”
 교육 (앱기획,모바일UX,앱마케팅)
 외주개발 (스마트폰, 테블릿PC앱)
 솔루션 (모바일앱, 소셜앱)
 자체서비스 (모바일 소셜 B2C 서비스)
56 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

57. 위너스 모바일앤소셜 연구소
동 우 상 소장
010-4728-4994
woosang dong
@dongwoosang
brucedong@naver.com
http://www.winnerslab.org
57 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com