1. 모바일 UX/UI개발
입문과정
Mobile UX Design Essential
KT Econovation Smart School 동준상 강사 | @jonathanis
2. 모바일 UX/UI개발
입문과정
동준상 | 트위터 @jonathanis
Lecture Project
현 KT ESS 모바읷개발 중소기업청 채용/통계 앱 (아이폰, 앆
현 삼성멀티캠퍼스 드로이드), 교직원공제회 모바읷웹,
전 KT연수원 서울대학교 치과병원 스마트회의 (클
전 핚국온라읶싞문협회 라우드, 모바읷웹), 서울여대 외
블로그 : http://naebon.blog.me
4. 좋은 UX, 멋짂 UI를 준비하는 이유
1. 더 멋짂 UI
2. 퀄리티가 높아 보임, 눈에 띔
3. 평가점수가 올라감
4. 보다 높은 앱 랭킹
5. 더 많이 설치되고 더 많이 구매됨
6. ROI상승
Source from : Expedia
Mobile UX Design Essential | 081
5. Bad UX/UI를 위해 꼭 해야 핛 것
1. 기존에 만들어 놓은 UI요소 그대로
가져다 쓰기
2. 과도핚 모달뷰의 사용, 확읶 다이얼
로그 사용
3. 절대좌표 레이아웃
4. 무조건 px단위 유닛의 사용 > 앆드로
는 dp(텍스트는 sp)
5. 작은 크기의 폰트사용
Mobile UX Design Essential | 082
6. Good UX/UI를 위해 꼭 해야 핛 것
1. 각 플랫폼의 디자읶 가이드라읶 알기
2. 크고, 명확하게 알 수 있는 버튼, 리스트 아이템
3. 다양핚 스크린을 위핚 그래픽요소 준비
4. 적절핚 마짂과 패딩 사용 (미적, 기능적 이유)
5. 뷰, 액티비티 스택의 적절핚 관리
6. 가로-세로 화면전홖에 대핚 적절핚 대응책 마련
7. 통읷감을 위핚 테마, 스타읷, 컬러의 준비
Mobile UX Design Essential | 083
7. 좋은 UI를 만들기 위핚 원칙
1. 사용자에게 집중
2. 필요핚 것들이 잘 보이도록
3. 개발도중에도 사용자의견을 반영
4. 사용자의 행동, 상황, 반응을 예측
5. 사용자가 오류를 만들더라도 정상 작동하
도록
Mobile UX Design Essential | 084
8. UI 원칙1.사용자에게 집중
사용자를 파악하라 (나이, 기술수준, 문화,
장애 등)
'사용자 최우선'의 마음가짐으로 디자읶하
라 (꼭 해야 핛 읷만 하려고 핚다)
실제 사용자를 대상으로 개발 초기부터, 가
급적 자주 테스트하라
Mobile UX Design Essential | 085
9. UI 원칙2.필요핚 것들이 잘 보이도록
사용자가 가장 자주 사용하는 기능은 앱을
실행즉시 보이고, 사용핛 수 있도록 핚다.
부가적읶 기능은 메뉴버튼속에 숨겨서 보
이지 않도록 핚다.
Mobile UX Design Essential | 086
10. UI 원칙3. 사용자가 터치결과를 알도록
모든 UI요소에 최소 4단계의 반응과정을
부여 (<selector> default, disabled,
focused, pressed)
사용자 행동의 결과는 명확하게 보여지도
록
다운로드 등의 임무에는 짂행상황 표시하
기
Mobile UX Design Essential | 087
11. UI 원칙4. 사용자의 행동, 상황, 반응을 예측
사용자가 기대하는 바(읶터랙션, 관련정보,
반응 등)를 제공
터치 아이템은 핚 눈에 보기에도 터치가능
핚 것으로 보이도록
Mobile UX Design Essential | 088
12. UI 원칙5. 사용자가 오류를 만들지 않도록
필요에 따라서는 사용자가 사용핛 필요가
없는 부분은 disabled
돌이킬 수없는 액션은 그 수를 제핚적으로
확읶 창을 통해 'undo'핛 수 있도록
"If an error is possible,
someone will make it."
- Donald Norman
Mobile UX Design Essential | 089
13. UI 옵션. 사용자 선택 화면기능 제공
Source from : yiibu
Mobile UX Design Essential | 090
19. 스마트폰 앱의 분류
Web 2.0 iPhone App Store
Web-based Apps Native Apps
Services & Mashups Few APIs between apps
Software as Service No Recurring Revenue
Cloud Computing Local Storage
Mobile UX Design Essential | 096
20. 스마트폰 앱에 따른 배포방식비교
Mobile UX Design Essential | 097
21. 네이티브로 만들어야 하는 스마트폰 앱
5 Common Reasons for Native Apps
1. Performance (게임)
2. Offline Mode (업무용 로컬스토리지)
3. Findability (앱스토어에서 구매가능)
4. Device Attributes (기기속성 홗용)
5. Monetization (상업화, 수익실현)
Mobile UX Design Essential | 098
23. mobile HIG
overview
Mobile UX Design Essential
24. mobile HIG
아이폰에서 작동하는 앱은 두 가지가 존재
1. iOS apps (보통 ‘앱’으로 지칭)
an application you develop using the iOS SDK to run natively on iOS-based devices
2. Web content (앱과 구분하기 위해 ‘웹 앱’으로 지칭)
Web apps / Optimized web-pages / Compatible web-pages
Mobile UX Design Essential | 101
25. mobile HIG
Human Interface Principles
1. 미적 조화 Aesthetic Integrity
a measure of how well the appearance of the app integrates with its function
2. 일관성 Consistency
an application that takes advantage of the standards and paradigms people are
comfortable with iOS standards / uniform terminology and style / consistent with
its earlier versions
3. 조작성 Direct Manipulation
Use gestures / Rotate or otherwise move / Can see that their actions have immediate,
visible results
Mobile UX Design Essential | 102
26. mobile HIG
Human Interface Principles
4. 반응성 Feedback
The built-in iOS applications respond to every user action with some perceptible
change
5. 은유성 Metaphors
The classic example of a software metaphor is the folder
6. 통제성 User Control
Users feel more in control of an app when behaviors and controls are familiar and
predictable.
Mobile UX Design Essential | 103
27. mobile HIG
앱사용의 목적에 맞게 커스터마이징
Tailor Customization to the Task
최고의 아이폰앱은 명확핚 목적과 편리핚 사용성
이 균형을 이룬 읶터페이스를 제공핚다.
The best iOS apps balance UI customization with
clarity of purpose and ease of use.
Mobile UX Design Essential | 104
28. mobile HIG
실제 도구의 사용방법을 안다면, 같은
기능의 앱 역시 즉시 사용할 수 있다.
Instantly know how to use the app
Mobile UX Design Essential | 105
29. mobile HIG | User Experience Guidelines
1. 최우선순위의 임무에 집중
Focus on the Primary Task
2. 사용자가 중요시하는 컨텐츠를 상단에. Elevate
the Content People Care About
3. 중요도 순으로 화면 상단에서 하단으로 이동 /
Think Top Down
4. 사용자에게 앱의 기능을 사용하기 위한 명확한 방
법을 제공 / Give People a Logical Path to Follow
Mobile UX Design Essential | 106
30. mobile HIG | User Experience Guidelines
5. 사용법은 쉽고, 분명하게 Make Usage Easy
and Obvious
6. 사용자가 이해하기 쉬운 단어로 라벨링 Use
User-Centric Terminology
7. 사용자 입력에 따른 노력을 최소화 Minimize
the Effort Required for User Input
8. 협업과 연결성을 보장 Enable Collaboration
and Connectedness
Mobile UX Design Essential | 107
31. mobile HIG | User Experience Guidelines
9. 사용자에 의한 세팅은 간소화 De-emphasize
Settings
10. 세팅 옵션은 메인화면에 노출 Offer
configuration options in the main user
interface
11. 브랜딩을 위한 통일된 로고, 컬러, 폰트를 사
용 Brand Appropriately
12. 앱의 내용을 손쉽게 찾을 수 있는 인덱스 목
록을 제공 Make Search Quick and
Rewarding
Build indexes of your data
Mobile UX Design Essential | 108
32. mobile HIG | User Experience Guidelines
13. 사용자에게 알릴 정보는 적당
한 크기의 폰트와 서체로 제공
Well-Written Description
14. 축약된 언어로 정보를 제공 Be
Succinct as headline style.
15. 통일적이며 일관된
UI요소를 사용 Use UI Elements
Consistently
16. 디자인요소는 물리적 특성을 반영한 사실성을 염두에 둠 Consider Adding
Physicality and Realism
Mobile UX Design Essential | 109
33. mobile HIG | User Experience Guidelines
17. 세션진행 과정마다 항상 저장
하라 Ask People to Save Only
When Necessary
18. 모달뷰 사용은 최소화 Modal
Tasks Occasional and Simple
19. 앱 시작은 즉시
Start Instantly
20. 세션진행 도중 언제라도
종료를 대비 Always Be Prepared
to Stop
21. 사용자의 선택이 아닌한 앱의 자동종료 금지
Don’t Quit Programmatically
Mobile UX Design Essential | 110
34. mobile HIG
only for iPad
Mobile UX Design Essential
35. mobile HIG | UX Guidelines for iPad
1. 화면젂체의 리프레시는 지양 Reduce Full-Screen Transitions
앱의 화면요소중 사용자와 인터랙션하는 요소만 선택적으로 변홖
Closely associate visual transitions with the content that’s changing.
Mobile UX Design Essential | 112
36. mobile HIG | UX Guidelines for iPad
2. 정보계층은 가급적 단순화 Restrain Your Information Hierarchy
정보구조를 단순화하고, 화면젂홖을 최소화하기위해 스플릿뷰와 팝오버를 적극적
으로 사용 Split View, Popover
Mobile UX Design Essential | 113
37. mobile HIG | UX Guidelines for iPad
3. 아이폰과 달리, 아이패드의 툴바 컨텐츠는 화면 상단에 배치 Migrate Toolbar
Content to the Top
현재 사용중읶 기능을 위핚 메뉴이자 옵션읶 툴바 아이템은 하단에 배치했을 때 보
다 눈에 잘 띄며, 사용하기 편리
Mobile UX Design Essential | 114
38. 모바일 UX/UI개발 입문과정 Lesson2
수고하셨습니다.
동준상 강사 트 위 터 @jonathanis
웹사이트 http://www.nextapp.co.kr
블 로 그 http://naebon.blog.me
슬라이드쉐어 http://www.slideshare.net/JonathanDong/