1. Part 1
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. 1. UI 개요
4 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com
ⓒwinnerslab.org
4

5. 아이폰 UI 구현원리
(아이폰 어플리케이션 뷰의 레이어 구조)
5 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

6. 설명
• 일반적인 아이폰의 UI 사례를 보고
계십니다.
• 아이폰, 안드로이드의 경우도 동일합니다.
• 이는 아이폰 뿐만 아니라 안드로이드 등
스마트폰, 테블릿PC등 모바일기기가
가지는 특성때문에 비슷한 UI구성을 갖고
있습니다.
6 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

7. 아이폰 UI 구현원리
(아이폰 어플리케이션 뷰의 레이어 구조)
Option : Nabigation Bar
window
Option : Tab Bar
Custom View
7 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

8. 설명
• 보시는 바와 같이 UI는 레이어개념으로
구현되고 있습니다.
• 이는 아이폰, 안드로이드는 물론 테블릿PC도
마찬가지입니다.
• 포토샵의 레이어 개념과 동일합니다.
• 윈도우는 작업영역을 의미합니다.
• 스테이터스바, 네이게이션바, 탭바, 커스텀뷰가
각각의 윈도우로 구현되어 있고, 이것이
레이어개념으로 중첩되어 보이고 있습니다.
8 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

9. 아이폰 UI의 구성 및 명칭
Status Bar
Navigation Bar
Custom View
Tab Bar
9 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

10. 설명
• 각각에 대한 설명은 뒤에 자세히 나오게
됩니다.
• 여기서는 각각의 위치별 이름만 숙지하시기
바랍니다.
• 안드로이드나 윈도우즈폰7에서의 이름과는
다른 경우가 있습니다.
10 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

11. 2. iOS4 개요
11 11 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com
ⓒwinnerslab.org

12. 스마트폰의 특징을 명심하라!
작은 스크린 사이즈
“주머니에 쏙 들어가지만, 개발자에게는 여러 어려움을 준다!”
메모리 제한이 있다!
“하드디스크? 모바일 기기이므로 자원의 효율적 사용 매우 중요!”
한 번에 한 화면만!
“작은 화면이라 분할이용불가, 단 음악 플레이는 가능!”
한 번에 하나의 어플리케이션만!
4.0부터 멀티테스킹 지원
“배터리수명, 안정성!”
도움말의 최소화
“고객은 바쁘다! 매뉴얼이 없어도 될만큼 직관적 디자인 필요!”
12 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

13. 당신의 개발방식은 무엇인가?
• iPhone Application
• Web-only content
• A hybrid application
13 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

14. 설명
개발방식 설명
- 일반적인 앱
iPhone Application - 네이티브로 개발된 앱
※ 네이티브 : 컴파일이 필요한 코드
A hybrid application
- 우리가 말하는 “모바일웹”
Web-only content
- 브라우저에서 실행되는 웹기반 콘텐츠
-하이브리드앱 : 프레임은 네이티브, 내부 콘텐츠는
A hybrid application
웹으로 구성된 앱
14 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

15. 앱의 세 가지 스타일 > 개요
• Productivity Application
- 사용자는 P.A를 사용해서 중요한 작업을 처리할 수 있다!
- P.A 는 계층구조로 구성되는 경향이 있다.
예 ) 메일
• Utility Application
- 사용자의 최소한의 입력에 의해 단순한 작업을 실행한다!
- 행배열의 리스트에 현재의 데이터를 보여주는 경향이 있다!
- 사용자가 자신의 필요에 따라 보여주는 정보를 변경할 수 있다.
예 ) 날씨
• Immersive Application
- 사용자에게 풀스크린에 비주얼한 사용성을 제공해 몰입하게 만든다!
- 재미, 정보전달, 간단한 작업의 실행
예 ) 게임, 뉴스, 수평계(각종 유틸)
15 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

16. 앱 의 세가지 스타일 > Productivity Application
16 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

17. 앱 의 세가지 스타일 > Utility Applications
17 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

18. 앱 의 세가지 스타일 > Utility Applications
18 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

19. 앱 의 세가지 스타일 > Immersive Applications
19 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

20. PC용 어플리케이션을 가지고 있다면
• PC용 어플리케이션을 iPhone에 그대로 사용할 수 있을까?
• iPhone 사용자는 ‘이동’ 중이라는 사실을 기억하라!
• 아이디어만 갖고 오고 싶다면 80대 20법칙을 기억하라
• “모두를 만족시키려하지말라! 80%에 집중하라!”
• PC용 어플리케이션에서 좋은 아이디어를 많이 얻을 수 있다.
Mac PC를 사용하고 연구해보라!
20 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

21. 사진보기 UI
iPhoto
21 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

22. 세가지 방식의 사진보기
iPhoto 세가지 방식의 사진보기
22 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

23. 설명
“아이폰(스마트폰)은 Depth Finding 구조”
Depth 설명
1 - 테이블 : 리스트 형태의 콘텐츠 표출
- 리스트중에 하나를 선택하면 표출
2 - 썸네일 : 작은 사이즈의 콘첸츠를 표출함으로서
사용자의 주목유도
3 - 콘텐츠 : 상세 컨텐츠
23 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

24. 옵션서비스
iPhoto
24 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

25. HI의 원리(애플)
• Metaphors (은유, 익숙한 것) 왜 PC에서 폴더라는 이름을 사용하나?
• Direct Manipulation (직접 조작하기) 결과를 바로 보여주어야 한다!
• See and Point (직관) 키패드 VS 피커?
• Feedback (즉각적인 반응) 검색결과를 경고창으로 먼저보여준다!
• Use Control (편리한 이용) 앱을 쉽게 이용하도록! 슬라이더!
• Asenthetic Integrity (미적완벽함) 일관된 UI, 보기 쉬운 화면
25 25 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com
ⓒwinnerslab.org

26. 설명
항목 의미 설명
사람들은 익숙한 것을 편하게 느낀다.
Metaphors 은유, 익숙한 것
예) 책앱 -> 서가, 책꽂이UI
Direct 사용자들이 직접 관리할 수 있는 권한을
직접 조작하기
Manipulation 위임하라!
See and Point 직관 설명서가 필요없어야 한다.
Feedback 즉각적인 반응 사용자의 행위에 대해 즉각 반응이 나타나야 한다.
Use Control 편리한 이용 사용자에게 보다 편리한 이용환경을 제공
Asenthetic
미적완벽함 미적으로 완벽을 추구해야한다.
Integrity
26 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

27. 3. App의 정의에서 브랜딩까지
27 27 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com
ⓒwinnerslab.org

28. 좋은 앱의 특징(애플)
• 명확성
• 화면 상단에 중요정보 제공
• 데이터 입력 최소화
• 간결한 정보제시
• 효과적인 커뮤니케이션
• 탭이 가능한 모든 요소는 적절한
사이즈로 배치
• 우선순위과제에 집중
28 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com
ⓒwinnerslab.org
28

29. 명확성
무엇에 쓰는 물건인고?
29 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

30. 화면 상단에 중요정보 제공
양 손 사용하는 경우 한 손만 사용하는 경우
“어떠한 경우든 화면 하단에
위치한 정보는 가릴 확률이 높음”
30 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

31. 데이터 입력의 최소화
31 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

32. 설명
• 모바일환경을 극단적으로 가정해보면,
사용자는 모바일기기를 들고 뛴다고 가정할
수 있습니다.
• 이때에도 사용자가 편리한 이용이 되기
위해서는 데이타입력이 간편해야 합니다.
• 편의성 : 키보드<버튼<피커
32 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

33. 간결한 정보제시
33 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

34. 효과적인 커뮤니케이션
• 사용자의 입력이나 행위가 처리되었는지 알기 쉬운가?
• 화면전환으로 인한 데이터 손실은 없는가?
• 빈번한 경고창사용은 없는가?
• 타이틀 사용시 사용자 중심용어 사용
“사용자의 행위별로, 상황에 따른 커뮤니케이션
및 효과적인 피드백을 제공해야 함!”
34 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

35. 탭이 가능한 모든 요소는 적절한 사이즈로 배치
Provide Fingertip-Size Targets
터치영역
44x44
“조작가능한 버튼등의 요소들을
적절한 간격으로 배치함!”
35 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

36. 우선순위 과제에 집중
?
- 날짜 우선 강조
- 날짜를 탭하면 해당 이벤트 표시
?
36 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

37. 제스처는 아이폰 OS기반 장치가 상호작용하도록 한다!
※ Swipe (신용카드같은 전자인식기에) 갖다 대다
※ magnify 확대하다. -> 텍스트입력기에서 입력된 글 수정시
37 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

38. iPhone Gesture의 종류
scrub
38 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

39. 4. App의 작업별 고려사항
39 39 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com
ⓒwinnerslab.org

40. Handling Common Tasks
• Starting
• Stopping
• Accommodating Multitasking
• Hosting Ads
• Managing Settings or Configuration Options
• Supporting Copy and Paste
• Supporting Undo and Redo
• Enabling Local and Push Notifications
• Making Your Application Accessible
• Providing Search and Displaying Search Results
• Using the User‟s Location
• Handling Orientation Changes
• Using Sound
• Providing Choices
• Providing a License Agreement or a Disclaimer
40 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

41. Starting
앱을 실행할 때, 즉각 구동 및 지연 현상 없어야 함
적절한 스테이터스바 결정
인트로이미지 제시
가급적 세로보기로 구동
App의 마지막 상태 저장
App 설치 후 재부팅 지양
41 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

42. Stopping
사용자는 별도의 끄기 액션을 하지 않는다!
iOS4
- 다른 앱열만 기존 앱 자동 종료
- 홈버튼 눌러 App종료 - 종료된 앱은 백그라운드에서
대기상태
언제라도 종료 가능함을 인지 -> 수시로 저장
종료시 현재의 세부 상태 저장
사용자의 의도가 아닌 앱 사전계획에 의한 종료 지양
실행 중, 외부요인으로 수행불가시 경고창으로 표시
42 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

43. 멀티테스킹
the double-high status bar
43 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

44. Accommodating Multitasking
다른 앱들과의 조화로운 공존이 중요함
갑작스런 중단을 항상 준비, 다시 실행할 준비태세
사용자 UI에서 DHSB(Double High Status Bar) 조작지원
사용자 주의 또는 참여요구활동을 중단할 준비를 하라!
오디오가 안정적으로 제공될 수 있도록 하라!
로컬 노티피케이션은 꼭 필요할때만 사용하라!
적절할 때, 백그라운드에서 사용자의 초기작업을 종료하라!
44 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

45. Hosting iAd
• iOS4 또는 이후 버전에서만 제공가능
• 광고클릭, 보는 것만으로도 수익분배
• 수익분배율 : 개발자 대 애플 = 6 대 4
• 배너뷰 사이즈
- 가로형 : 480 x 32 points
- 세로형 : 320 x 50 points
45 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

46. Hosting iAd
광고효과를 높이기 위한 가이드
광고배너는 화면의 하단 가까이 배치하라
앱의 적절한 화면 위치에 배너뷰 설치
가급적 가로, 세로 양방향에서 광고노출
광고를 보거나, 상호작용 중에는 시선 분산 앱기능 중단
예외적 상황을 제외하고 지속적으로 광고
46 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

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

48. 설명
• 스마트폰에서 광고배너의 기본적인 위치는
가장 하단!
• 탭바나 툴바가 있을 경우는 바로 그 위에
위치시킴!
48 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

49. Managing Settings or Configuration Options
사용자의 80%에 집중
다른 소스로부터 중요 정보 획득
필요한 정보는 설치초기에 입력 요청 및 저장
49 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

50. Enabling Local and Push Notifications
• 어떻게 전달할 것인가?
• 방금 도착한 메시지
• 막 발생한 이벤트
• 다운로드 가능한 새로운 데이트
• 변경된 상태값
50 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

51. Enabling Local and Push Notifications
Local Notification
- 앱에 의해서 스케줄링
- 현재 앱의 사용여부와 관계없이 아이폰OS
를 사용하는 동종 폰으로 발송
사례) 캘린더, 업무용 앱의 미팅약속알람
51 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

52. Enabling Local and Push Notifications
Push Notification
- 앱의 원격서버에 의한 애플의 푸시
노티피케이션 서비스를 통해 전송
- 해당 앱이 설치된 모든 폰으로 푸시됨
사례) 각종 뉴스의 공지, 업데이트 안내
- 푸시 노티피케이션의 표시
1) 홈스크린 아이콘 배지를 통한 표출
2) 경고창을 통한 표출
52 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com

53. 5. App의 구성요소들
“다음 파트에 이어집니다!”
53 53 www.winnerslab.org 위너스 모바일앤소셜 연구소 / 동 우 상 소장 / brucedong@naver.com
ⓒwinnerslab.org

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

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

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