1.
모바일 UX/UI개발 입문과정 Mobile UX Design EssentialKT Econovation Smart School  동준상 강사 | @jonathanis

2.
모바일 UX/UI개발 입문과정동준상 | 트위터 @jonathanisLecture Project현 KT ESS 모바읷개발 중소기업청 채용/통계 앱 (아이폰, 앆현 삼성멀티캠퍼스 드로이드), 교직원공제회 모바읷웹,전 KT연수원 서울대학교 치과병원 스마트회의 (클전 핚국온라읶싞문협회 라우드, 모바읷웹), 서울여대 외 블로그 : http://naebon.blog.me

3.
모바읷 UX디자읶 가이드 공통원칙 Mobile UX Design Essential

4.
좋은 UX, 멋짂 UI를 준비하는 이유1. 더 멋짂 UI2. 퀄리티가 높아 보임, 눈에 띔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

14.
스마트폰 앱 개발 개요 Mobile UX Design Essential

15.
스마트폰 앱 개발의 키워드… Mobile UX Design Essential | 092

16.
스마트폰 앱 개발의 4 Layer[ TOOLS ][ LANGUAGE Objective-C, Java, C#, XAMAL ][ DESIGN ][ PROCESS Test, Provision, Submit… ] Mobile UX Design Essential | 093

17.
스마트폰 주요부품 Mobile UX Design Essential | 094

18.
스마트폰 주요 읶터페이스 & 센서 Mobile UX Design Essential | 095

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

22.
모바읷 UX디자읶 가이드 iOS Mobile UX Design Essential

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 devices2. Web content (앱과 구분하기 위해 ‘웹 앱’으로 지칭)Web apps / Optimized web-pages / Compatible web-pages Mobile UX Design Essential | 101

25.
mobile HIGHuman Interface Principles1. 미적 조화 Aesthetic Integritya measure of how well the appearance of the app integrates with its function2. 일관성 Consistencyan application that takes advantage of the standards and paradigms people are comfortable with iOS standards / uniform terminology and style / consistent with its earlier versions3. 조작성 Direct ManipulationUse gestures / Rotate or otherwise move / Can see that their actions have immediate, visible results Mobile UX Design Essential | 102

26.
mobile HIGHuman Interface Principles4. 반응성 FeedbackThe built-in iOS applications respond to every user action with some perceptible change5. 은유성 MetaphorsThe classic example of a software metaphor is the folder6. 통제성 User ControlUsers 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 withclarity 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 Guidelines1. 최우선순위의 임무에 집중Focus on the Primary Task2. 사용자가 중요시하는 컨텐츠를 상단에. Elevatethe Content People Care About3. 중요도 순으로 화면 상단에서 하단으로 이동 /Think Top Down4. 사용자에게 앱의 기능을 사용하기 위한 명확한 방법을 제공 / Give People a Logical Path to Follow Mobile UX Design Essential | 106

30.
mobile HIG | User Experience Guidelines5. 사용법은 쉽고, 분명하게 Make Usage Easyand Obvious6. 사용자가 이해하기 쉬운 단어로 라벨링 UseUser-Centric Terminology7. 사용자 입력에 따른 노력을 최소화 Minimizethe Effort Required for User Input8. 협업과 연결성을 보장 Enable Collaborationand Connectedness Mobile UX Design Essential | 107

31.
mobile HIG | User Experience Guidelines9. 사용자에 의한 세팅은 간소화 De-emphasizeSettings10. 세팅 옵션은 메인화면에 노출 Offerconfiguration options in the main userinterface11. 브랜딩을 위한 통일된 로고, 컬러, 폰트를 사용 Brand Appropriately12. 앱의 내용을 손쉽게 찾을 수 있는 인덱스 목록을 제공 Make Search Quick andRewardingBuild indexes of your data Mobile UX Design Essential | 108

32.
mobile HIG | User Experience Guidelines13. 사용자에게 알릴 정보는 적당한 크기의 폰트와 서체로 제공Well-Written Description14. 축약된 언어로 정보를 제공 BeSuccinct as headline style.15. 통일적이며 일관된UI요소를 사용 Use UI ElementsConsistently16. 디자인요소는 물리적 특성을 반영한 사실성을 염두에 둠 Consider AddingPhysicality and Realism Mobile UX Design Essential | 109

33.
mobile HIG | User Experience Guidelines17. 세션진행 과정마다 항상 저장하라 Ask People to Save OnlyWhen Necessary18. 모달뷰 사용은 최소화 ModalTasks Occasional and Simple19. 앱 시작은 즉시Start Instantly20. 세션진행 도중 언제라도종료를 대비 Always Be Preparedto Stop21. 사용자의 선택이 아닌한 앱의 자동종료 금지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 iPad1. 화면젂체의 리프레시는 지양 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 iPad2. 정보계층은 가급적 단순화 Restrain Your Information Hierarchy정보구조를 단순화하고, 화면젂홖을 최소화하기위해 스플릿뷰와 팝오버를 적극적으로 사용 Split View, Popover Mobile UX Design Essential | 113

37.
mobile HIG | UX Guidelines for iPad3. 아이폰과 달리, 아이패드의 툴바 컨텐츠는 화면 상단에 배치 Migrate ToolbarContent 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/