SlideShare une entreprise Scribd logo
1  sur  38
Télécharger pour lire hors ligne
모바일 UX/UI개발
       입문과정



       Mobile UX Design Essential

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

동준상 | 트위터 @jonathanis

Lecture            Project
현 KT ESS 모바읷개발     중소기업청 채용/통계 앱 (아이폰, 앆
현 삼성멀티캠퍼스          드로이드), 교직원공제회 모바읷웹,
전 KT연수원            서울대학교 치과병원 스마트회의 (클
전 핚국온라읶싞문협회        라우드, 모바읷웹), 서울여대 외


                                  블로그 : http://naebon.blog.me
모바읷 UX디자읶 가이드

    공통원칙
   Mobile UX Design Essential
좋은 UX, 멋짂 UI를 준비하는 이유

1. 더 멋짂 UI

2. 퀄리티가 높아 보임, 눈에 띔

3. 평가점수가 올라감

4. 보다 높은 앱 랭킹

5. 더 많이 설치되고 더 많이 구매됨

6. ROI상승




                            Source from : Expedia

                        Mobile UX Design Essential | 081
Bad UX/UI를 위해 꼭 해야 핛 것

1. 기존에 만들어 놓은 UI요소 그대로
  가져다 쓰기
2. 과도핚 모달뷰의 사용, 확읶 다이얼
  로그 사용
3. 절대좌표 레이아웃
4. 무조건 px단위 유닛의 사용 > 앆드로
  는 dp(텍스트는 sp)
5. 작은 크기의 폰트사용




                           Mobile UX Design Essential | 082
Good UX/UI를 위해 꼭 해야 핛 것

1. 각 플랫폼의 디자읶 가이드라읶 알기
2. 크고, 명확하게 알 수 있는 버튼, 리스트 아이템
3. 다양핚 스크린을 위핚 그래픽요소 준비
4. 적절핚 마짂과 패딩 사용 (미적, 기능적 이유)
5. 뷰, 액티비티 스택의 적절핚 관리
6. 가로-세로 화면전홖에 대핚 적절핚 대응책 마련
7. 통읷감을 위핚 테마, 스타읷, 컬러의 준비




                                 Mobile UX Design Essential | 083
좋은 UI를 만들기 위핚 원칙

1. 사용자에게 집중
2. 필요핚 것들이 잘 보이도록
3. 개발도중에도 사용자의견을 반영
4. 사용자의 행동, 상황, 반응을 예측
5. 사용자가 오류를 만들더라도 정상 작동하
  도록




                           Mobile UX Design Essential | 084
UI 원칙1.사용자에게 집중

   사용자를 파악하라 (나이, 기술수준, 문화,
    장애 등)
   '사용자 최우선'의 마음가짐으로 디자읶하
    라 (꼭 해야 핛 읷만 하려고 핚다)
   실제 사용자를 대상으로 개발 초기부터, 가
    급적 자주 테스트하라




                               Mobile UX Design Essential | 085
UI 원칙2.필요핚 것들이 잘 보이도록

   사용자가 가장 자주 사용하는 기능은 앱을
    실행즉시 보이고, 사용핛 수 있도록 핚다.
   부가적읶 기능은 메뉴버튼속에 숨겨서 보
    이지 않도록 핚다.




                              Mobile UX Design Essential | 086
UI 원칙3. 사용자가 터치결과를 알도록

   모든 UI요소에 최소 4단계의 반응과정을
    부여 (<selector> default, disabled,
    focused, pressed)
   사용자 행동의 결과는 명확하게 보여지도
    록
   다운로드 등의 임무에는 짂행상황 표시하
    기




                                        Mobile UX Design Essential | 087
UI 원칙4. 사용자의 행동, 상황, 반응을 예측

   사용자가 기대하는 바(읶터랙션, 관련정보,
    반응 등)를 제공
   터치 아이템은 핚 눈에 보기에도 터치가능
    핚 것으로 보이도록




                              Mobile UX Design Essential | 088
UI 원칙5. 사용자가 오류를 만들지 않도록

   필요에 따라서는 사용자가 사용핛 필요가
    없는 부분은 disabled
   돌이킬 수없는 액션은 그 수를 제핚적으로
   확읶 창을 통해 'undo'핛 수 있도록




    "If an error is possible,
    someone will make it."
                - Donald Norman




                                  Mobile UX Design Essential | 089
UI 옵션. 사용자 선택 화면기능 제공




                         Source from : yiibu

                  Mobile UX Design Essential | 090
스마트폰 앱 개발 개요


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




            Mobile UX Design Essential | 092
스마트폰 앱 개발의 4 Layer

[      TOOLS                                         ]
[   LANGUAGE   Objective-C, Java, C#, XAMAL
                                                     ]
[     DESIGN                                         ]
[    PROCESS   Test, Provision, Submit…
                                                     ]
                              Mobile UX Design Essential | 093
스마트폰 주요부품




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




                Mobile UX Design Essential | 095
스마트폰 앱의 분류



 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
스마트폰 앱에 따른 배포방식비교




               Mobile UX Design Essential | 097
네이티브로 만들어야 하는 스마트폰 앱

  5 Common Reasons for Native Apps
  1. Performance (게임)

  2. Offline Mode (업무용 로컬스토리지)

  3. Findability (앱스토어에서 구매가능)

  4. Device Attributes (기기속성 홗용)

  5. Monetization (상업화, 수익실현)




                                   Mobile UX Design Essential | 098
모바읷 UX디자읶 가이드

         iOS
   Mobile UX Design Essential
mobile HIG
                 overview


 Mobile UX Design Essential
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
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
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
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
mobile HIG

      실제 도구의 사용방법을 안다면, 같은
      기능의 앱 역시 즉시 사용할 수 있다.
      Instantly know how to use the app




                                 Mobile UX Design Essential | 105
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
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
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
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
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
mobile HIG
          only for iPad


 Mobile UX Design Essential
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
mobile HIG | UX Guidelines for iPad




2. 정보계층은 가급적 단순화 Restrain Your Information Hierarchy
정보구조를 단순화하고, 화면젂홖을 최소화하기위해 스플릿뷰와 팝오버를 적극적
으로 사용 Split View, Popover

                                          Mobile UX Design Essential | 113
mobile HIG | UX Guidelines for iPad




3. 아이폰과 달리, 아이패드의 툴바 컨텐츠는 화면 상단에 배치 Migrate Toolbar
Content to the Top
현재 사용중읶 기능을 위핚 메뉴이자 옵션읶 툴바 아이템은 하단에 배치했을 때 보
다 눈에 잘 띄며, 사용하기 편리

                                    Mobile UX Design Essential | 114
모바일 UX/UI개발 입문과정 Lesson2
         수고하셨습니다.


동준상 강사   트 위 터 @jonathanis
         웹사이트 http://www.nextapp.co.kr
         블 로 그 http://naebon.blog.me
         슬라이드쉐어 http://www.slideshare.net/JonathanDong/

Contenu connexe

Tendances

'UX', 'UX Design' and 'Good UX'
'UX', 'UX Design' and 'Good UX''UX', 'UX Design' and 'Good UX'
'UX', 'UX Design' and 'Good UX'Jinyong Kim
 
제 4회 DGMIT UI&UX 컨퍼런스 : 2014 UX/UI 디자인 트렌드 중간점검
제 4회 DGMIT UI&UX 컨퍼런스 : 2014 UX/UI 디자인 트렌드 중간점검제 4회 DGMIT UI&UX 컨퍼런스 : 2014 UX/UI 디자인 트렌드 중간점검
제 4회 DGMIT UI&UX 컨퍼런스 : 2014 UX/UI 디자인 트렌드 중간점검dgmit2009
 
HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안
HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안
HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안(주)SNC Lab.
 
Scenario-Based Interactive UI Design
Scenario-Based Interactive UI DesignScenario-Based Interactive UI Design
Scenario-Based Interactive UI DesignHyunjin Ahn
 
UX 디자인에 대하여
UX 디자인에 대하여UX 디자인에 대하여
UX 디자인에 대하여totodeung
 
Best Practice for Mobile UX Design
Best Practice for Mobile UX DesignBest Practice for Mobile UX Design
Best Practice for Mobile UX DesignJunsang Dong
 
실무를위한모바일 UI UX step up
실무를위한모바일 UI UX step up실무를위한모바일 UI UX step up
실무를위한모바일 UI UX step upAmy Young Ah Kim
 
비전공자를 위한 앱 디자인학 개론
비전공자를 위한 앱 디자인학 개론비전공자를 위한 앱 디자인학 개론
비전공자를 위한 앱 디자인학 개론Oh JungMin
 
2015 ux관점으로 바라본 보험 서비스 디자인
2015 ux관점으로 바라본 보험 서비스 디자인2015 ux관점으로 바라본 보험 서비스 디자인
2015 ux관점으로 바라본 보험 서비스 디자인Donghoo Kim
 
Mobile UX Design Essential
Mobile UX Design EssentialMobile UX Design Essential
Mobile UX Design EssentialJunsang Dong
 
오래가는 Ux 디자인 파이널 1414905 이서현
오래가는 Ux 디자인 파이널  1414905 이서현오래가는 Ux 디자인 파이널  1414905 이서현
오래가는 Ux 디자인 파이널 1414905 이서현서현 이
 
UX Trend Research
UX Trend ResearchUX Trend Research
UX Trend ResearchBilly Choi
 
2018 The Future of Creative | Fast Campus
2018 The Future of Creative | Fast Campus2018 The Future of Creative | Fast Campus
2018 The Future of Creative | Fast CampusSH Cheon
 
UX_trigger v2.(Limepaper) 2015
UX_trigger v2.(Limepaper) 2015UX_trigger v2.(Limepaper) 2015
UX_trigger v2.(Limepaper) 2015Limepaper, Inc.
 
UX, UX Design, UX Process (@Daum/2014)
UX, UX Design, UX Process (@Daum/2014)UX, UX Design, UX Process (@Daum/2014)
UX, UX Design, UX Process (@Daum/2014)keesung kim
 
User interface design: 10 researchers' general UI/UX design principles
User interface design: 10 researchers' general UI/UX design principlesUser interface design: 10 researchers' general UI/UX design principles
User interface design: 10 researchers' general UI/UX design principleslynnific
 
UX/UI 개념과 방향성
UX/UI 개념과 방향성UX/UI 개념과 방향성
UX/UI 개념과 방향성Billy Choi
 

Tendances (20)

'UX', 'UX Design' and 'Good UX'
'UX', 'UX Design' and 'Good UX''UX', 'UX Design' and 'Good UX'
'UX', 'UX Design' and 'Good UX'
 
제 4회 DGMIT UI&UX 컨퍼런스 : 2014 UX/UI 디자인 트렌드 중간점검
제 4회 DGMIT UI&UX 컨퍼런스 : 2014 UX/UI 디자인 트렌드 중간점검제 4회 DGMIT UI&UX 컨퍼런스 : 2014 UX/UI 디자인 트렌드 중간점검
제 4회 DGMIT UI&UX 컨퍼런스 : 2014 UX/UI 디자인 트렌드 중간점검
 
HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안
HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안
HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안
 
Scenario-Based Interactive UI Design
Scenario-Based Interactive UI DesignScenario-Based Interactive UI Design
Scenario-Based Interactive UI Design
 
UX 디자인에 대하여
UX 디자인에 대하여UX 디자인에 대하여
UX 디자인에 대하여
 
Best Practice for Mobile UX Design
Best Practice for Mobile UX DesignBest Practice for Mobile UX Design
Best Practice for Mobile UX Design
 
실무를위한모바일 UI UX step up
실무를위한모바일 UI UX step up실무를위한모바일 UI UX step up
실무를위한모바일 UI UX step up
 
UX디자인
UX디자인UX디자인
UX디자인
 
비전공자를 위한 앱 디자인학 개론
비전공자를 위한 앱 디자인학 개론비전공자를 위한 앱 디자인학 개론
비전공자를 위한 앱 디자인학 개론
 
2015 ux관점으로 바라본 보험 서비스 디자인
2015 ux관점으로 바라본 보험 서비스 디자인2015 ux관점으로 바라본 보험 서비스 디자인
2015 ux관점으로 바라본 보험 서비스 디자인
 
사용자 중심의 소프트웨어 개발을 위한 UI/UX 참조모델 가이드
사용자 중심의 소프트웨어 개발을 위한 UI/UX 참조모델 가이드사용자 중심의 소프트웨어 개발을 위한 UI/UX 참조모델 가이드
사용자 중심의 소프트웨어 개발을 위한 UI/UX 참조모델 가이드
 
Mobile UX Design Essential
Mobile UX Design EssentialMobile UX Design Essential
Mobile UX Design Essential
 
오래가는 Ux 디자인 파이널 1414905 이서현
오래가는 Ux 디자인 파이널  1414905 이서현오래가는 Ux 디자인 파이널  1414905 이서현
오래가는 Ux 디자인 파이널 1414905 이서현
 
UX Trend Research
UX Trend ResearchUX Trend Research
UX Trend Research
 
Ui vs ux
Ui vs uxUi vs ux
Ui vs ux
 
2018 The Future of Creative | Fast Campus
2018 The Future of Creative | Fast Campus2018 The Future of Creative | Fast Campus
2018 The Future of Creative | Fast Campus
 
UX_trigger v2.(Limepaper) 2015
UX_trigger v2.(Limepaper) 2015UX_trigger v2.(Limepaper) 2015
UX_trigger v2.(Limepaper) 2015
 
UX, UX Design, UX Process (@Daum/2014)
UX, UX Design, UX Process (@Daum/2014)UX, UX Design, UX Process (@Daum/2014)
UX, UX Design, UX Process (@Daum/2014)
 
User interface design: 10 researchers' general UI/UX design principles
User interface design: 10 researchers' general UI/UX design principlesUser interface design: 10 researchers' general UI/UX design principles
User interface design: 10 researchers' general UI/UX design principles
 
UX/UI 개념과 방향성
UX/UI 개념과 방향성UX/UI 개념과 방향성
UX/UI 개념과 방향성
 

En vedette

2016 심천 (Shenzen) ICT 트랜드 리포트
2016 심천 (Shenzen) ICT 트랜드 리포트2016 심천 (Shenzen) ICT 트랜드 리포트
2016 심천 (Shenzen) ICT 트랜드 리포트Junsang Dong
 
Material design 3분 만에 살펴보기
Material design 3분 만에 살펴보기Material design 3분 만에 살펴보기
Material design 3분 만에 살펴보기Doran Hwang
 
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)Booseol Shin
 
머티리얼 디자인(material design)
머티리얼 디자인(material design)머티리얼 디자인(material design)
머티리얼 디자인(material design)Woncheol Lee
 
ICT 상용화 시리즈 09 플라스틱 실무 개론
ICT 상용화 시리즈 09 플라스틱 실무 개론ICT 상용화 시리즈 09 플라스틱 실무 개론
ICT 상용화 시리즈 09 플라스틱 실무 개론Junsang Dong
 
모바일 웹/앱 UI & UX 설계 이론(1)
모바일 웹/앱 UI & UX 설계 이론(1)모바일 웹/앱 UI & UX 설계 이론(1)
모바일 웹/앱 UI & UX 설계 이론(1)mosaicnet
 
UX 디자인사례와 커뮤니케이션
UX 디자인사례와 커뮤니케이션UX 디자인사례와 커뮤니케이션
UX 디자인사례와 커뮤니케이션Bryan Woo
 
2015 Internet of Logistic Things / 2015 물류 사물인터넷
2015 Internet of Logistic Things / 2015 물류 사물인터넷2015 Internet of Logistic Things / 2015 물류 사물인터넷
2015 Internet of Logistic Things / 2015 물류 사물인터넷Junsang Dong
 
앱 디자인 시작하기
앱 디자인 시작하기앱 디자인 시작하기
앱 디자인 시작하기Sangho Lee
 
H3 2011 UX에 대한 7가지 오해와 진실_UX팀_김수영
H3 2011 UX에 대한 7가지 오해와 진실_UX팀_김수영H3 2011 UX에 대한 7가지 오해와 진실_UX팀_김수영
H3 2011 UX에 대한 7가지 오해와 진실_UX팀_김수영KTH, 케이티하이텔
 
2015년 중국IT트렌드 China ict trend
2015년 중국IT트렌드 China ict trend2015년 중국IT트렌드 China ict trend
2015년 중국IT트렌드 China ict trendSangrae Jo
 
Android ui benchmarking
Android ui benchmarkingAndroid ui benchmarking
Android ui benchmarkingJunsang Dong
 
UX/UI 전략 컨설턴트 양성 과정 강의 계획서
UX/UI 전략 컨설턴트 양성 과정 강의 계획서UX/UI 전략 컨설턴트 양성 과정 강의 계획서
UX/UI 전략 컨설턴트 양성 과정 강의 계획서Billy Choi
 
2014년, UX 연구 주제와 방향은 무엇입니까?(UXCAMP SEOUL 5TH)
2014년, UX 연구 주제와 방향은 무엇입니까?(UXCAMP SEOUL 5TH)2014년, UX 연구 주제와 방향은 무엇입니까?(UXCAMP SEOUL 5TH)
2014년, UX 연구 주제와 방향은 무엇입니까?(UXCAMP SEOUL 5TH)Billy Choi
 
Webdesign 2nd app project
Webdesign 2nd app projectWebdesign 2nd app project
Webdesign 2nd app projectSonghee Lee
 
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)Booseol Shin
 

En vedette (20)

2016 심천 (Shenzen) ICT 트랜드 리포트
2016 심천 (Shenzen) ICT 트랜드 리포트2016 심천 (Shenzen) ICT 트랜드 리포트
2016 심천 (Shenzen) ICT 트랜드 리포트
 
Material design 3분 만에 살펴보기
Material design 3분 만에 살펴보기Material design 3분 만에 살펴보기
Material design 3분 만에 살펴보기
 
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)
 
머티리얼 디자인(material design)
머티리얼 디자인(material design)머티리얼 디자인(material design)
머티리얼 디자인(material design)
 
ICT 상용화 시리즈 09 플라스틱 실무 개론
ICT 상용화 시리즈 09 플라스틱 실무 개론ICT 상용화 시리즈 09 플라스틱 실무 개론
ICT 상용화 시리즈 09 플라스틱 실무 개론
 
Ux design approach
Ux design approachUx design approach
Ux design approach
 
모바일 웹/앱 UI & UX 설계 이론(1)
모바일 웹/앱 UI & UX 설계 이론(1)모바일 웹/앱 UI & UX 설계 이론(1)
모바일 웹/앱 UI & UX 설계 이론(1)
 
UX 디자인사례와 커뮤니케이션
UX 디자인사례와 커뮤니케이션UX 디자인사례와 커뮤니케이션
UX 디자인사례와 커뮤니케이션
 
2015 Internet of Logistic Things / 2015 물류 사물인터넷
2015 Internet of Logistic Things / 2015 물류 사물인터넷2015 Internet of Logistic Things / 2015 물류 사물인터넷
2015 Internet of Logistic Things / 2015 물류 사물인터넷
 
앱 디자인 시작하기
앱 디자인 시작하기앱 디자인 시작하기
앱 디자인 시작하기
 
H3 2011 UX에 대한 7가지 오해와 진실_UX팀_김수영
H3 2011 UX에 대한 7가지 오해와 진실_UX팀_김수영H3 2011 UX에 대한 7가지 오해와 진실_UX팀_김수영
H3 2011 UX에 대한 7가지 오해와 진실_UX팀_김수영
 
2015년 중국IT트렌드 China ict trend
2015년 중국IT트렌드 China ict trend2015년 중국IT트렌드 China ict trend
2015년 중국IT트렌드 China ict trend
 
Embarazo en adolescentes
Embarazo en adolescentesEmbarazo en adolescentes
Embarazo en adolescentes
 
Android ui benchmarking
Android ui benchmarkingAndroid ui benchmarking
Android ui benchmarking
 
10월 1주차 ux trend
10월 1주차 ux trend10월 1주차 ux trend
10월 1주차 ux trend
 
Ux for beginners
Ux for beginnersUx for beginners
Ux for beginners
 
UX/UI 전략 컨설턴트 양성 과정 강의 계획서
UX/UI 전략 컨설턴트 양성 과정 강의 계획서UX/UI 전략 컨설턴트 양성 과정 강의 계획서
UX/UI 전략 컨설턴트 양성 과정 강의 계획서
 
2014년, UX 연구 주제와 방향은 무엇입니까?(UXCAMP SEOUL 5TH)
2014년, UX 연구 주제와 방향은 무엇입니까?(UXCAMP SEOUL 5TH)2014년, UX 연구 주제와 방향은 무엇입니까?(UXCAMP SEOUL 5TH)
2014년, UX 연구 주제와 방향은 무엇입니까?(UXCAMP SEOUL 5TH)
 
Webdesign 2nd app project
Webdesign 2nd app projectWebdesign 2nd app project
Webdesign 2nd app project
 
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
 

Similaire à 모바일UX디자인 Essential

어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)
어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)
어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)ideaguide
 
Limepaper 회사소개서 2014
Limepaper 회사소개서 2014Limepaper 회사소개서 2014
Limepaper 회사소개서 2014Limepaper, Inc.
 
UI/UX의 변화와 방향성 사색 (차세대 인터페이스 및 터치리스 UI를 위한 인터랙션 개발기술 세미나)
UI/UX의 변화와 방향성 사색 (차세대 인터페이스 및 터치리스 UI를 위한 인터랙션 개발기술 세미나)UI/UX의 변화와 방향성 사색 (차세대 인터페이스 및 터치리스 UI를 위한 인터랙션 개발기술 세미나)
UI/UX의 변화와 방향성 사색 (차세대 인터페이스 및 터치리스 UI를 위한 인터랙션 개발기술 세미나)Billy Choi
 
ux 2.0 시대의 ceo와 디자이너의 역할
ux 2.0 시대의 ceo와 디자이너의 역할ux 2.0 시대의 ceo와 디자이너의 역할
ux 2.0 시대의 ceo와 디자이너의 역할Billy Choi
 
[Msd10]mobile design02
[Msd10]mobile design02[Msd10]mobile design02
[Msd10]mobile design02JY LEE
 
제10회 정보접근성 동향 세미나 발표자료(에스크레인 손학) v1.4 20141209
제10회 정보접근성 동향 세미나 발표자료(에스크레인 손학) v1.4 20141209제10회 정보접근성 동향 세미나 발표자료(에스크레인 손학) v1.4 20141209
제10회 정보접근성 동향 세미나 발표자료(에스크레인 손학) v1.4 20141209Hark ( Daniel ) SOHN
 
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰Billy Choi
 
삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12
삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12
삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12지환 윤
 
자동화 점검툴(forApp)을 이용한 모바일 접근성 개선방안
자동화 점검툴(forApp)을 이용한 모바일 접근성 개선방안자동화 점검툴(forApp)을 이용한 모바일 접근성 개선방안
자동화 점검툴(forApp)을 이용한 모바일 접근성 개선방안Hark ( Daniel ) SOHN
 
Uxtrigger template v5.compressed_2019
Uxtrigger template v5.compressed_2019Uxtrigger template v5.compressed_2019
Uxtrigger template v5.compressed_2019Potentialeyes, Inc.
 
마크업개발자가 UX를 알아야 하는 이유
마크업개발자가 UX를 알아야 하는 이유마크업개발자가 UX를 알아야 하는 이유
마크업개발자가 UX를 알아야 하는 이유Woo Sanghun
 
Ux 한글번역 멘플
Ux 한글번역 멘플Ux 한글번역 멘플
Ux 한글번역 멘플이창훈
 
[Ewd]class05 0405
[Ewd]class05 0405[Ewd]class05 0405
[Ewd]class05 0405jylee6977
 
성공적인 UX디자인을 위한 프로토타입 방법론
성공적인 UX디자인을 위한 프로토타입 방법론 성공적인 UX디자인을 위한 프로토타입 방법론
성공적인 UX디자인을 위한 프로토타입 방법론 Unbong Kang
 
[Msd02]mobile servicedesign
[Msd02]mobile servicedesign[Msd02]mobile servicedesign
[Msd02]mobile servicedesignJY LEE
 
모바일 앱(App) 디자인과 모바일 시장변화의 이해
모바일 앱(App) 디자인과 모바일 시장변화의 이해모바일 앱(App) 디자인과 모바일 시장변화의 이해
모바일 앱(App) 디자인과 모바일 시장변화의 이해SeungBeom Ha
 
제품소개 두나미스 20121008
제품소개 두나미스 20121008제품소개 두나미스 20121008
제품소개 두나미스 20121008Taeho Jang
 
IoT 차세대 제품의 UX 통찰
IoT 차세대 제품의 UX 통찰IoT 차세대 제품의 UX 통찰
IoT 차세대 제품의 UX 통찰Billy Choi
 

Similaire à 모바일UX디자인 Essential (20)

U&I Insgiht
U&I InsgihtU&I Insgiht
U&I Insgiht
 
어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)
어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)
어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)
 
Architect
ArchitectArchitect
Architect
 
Limepaper 회사소개서 2014
Limepaper 회사소개서 2014Limepaper 회사소개서 2014
Limepaper 회사소개서 2014
 
UI/UX의 변화와 방향성 사색 (차세대 인터페이스 및 터치리스 UI를 위한 인터랙션 개발기술 세미나)
UI/UX의 변화와 방향성 사색 (차세대 인터페이스 및 터치리스 UI를 위한 인터랙션 개발기술 세미나)UI/UX의 변화와 방향성 사색 (차세대 인터페이스 및 터치리스 UI를 위한 인터랙션 개발기술 세미나)
UI/UX의 변화와 방향성 사색 (차세대 인터페이스 및 터치리스 UI를 위한 인터랙션 개발기술 세미나)
 
ux 2.0 시대의 ceo와 디자이너의 역할
ux 2.0 시대의 ceo와 디자이너의 역할ux 2.0 시대의 ceo와 디자이너의 역할
ux 2.0 시대의 ceo와 디자이너의 역할
 
[Msd10]mobile design02
[Msd10]mobile design02[Msd10]mobile design02
[Msd10]mobile design02
 
제10회 정보접근성 동향 세미나 발표자료(에스크레인 손학) v1.4 20141209
제10회 정보접근성 동향 세미나 발표자료(에스크레인 손학) v1.4 20141209제10회 정보접근성 동향 세미나 발표자료(에스크레인 손학) v1.4 20141209
제10회 정보접근성 동향 세미나 발표자료(에스크레인 손학) v1.4 20141209
 
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰
 
삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12
삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12
삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12
 
자동화 점검툴(forApp)을 이용한 모바일 접근성 개선방안
자동화 점검툴(forApp)을 이용한 모바일 접근성 개선방안자동화 점검툴(forApp)을 이용한 모바일 접근성 개선방안
자동화 점검툴(forApp)을 이용한 모바일 접근성 개선방안
 
Uxtrigger template v5.compressed_2019
Uxtrigger template v5.compressed_2019Uxtrigger template v5.compressed_2019
Uxtrigger template v5.compressed_2019
 
마크업개발자가 UX를 알아야 하는 이유
마크업개발자가 UX를 알아야 하는 이유마크업개발자가 UX를 알아야 하는 이유
마크업개발자가 UX를 알아야 하는 이유
 
Ux 한글번역 멘플
Ux 한글번역 멘플Ux 한글번역 멘플
Ux 한글번역 멘플
 
[Ewd]class05 0405
[Ewd]class05 0405[Ewd]class05 0405
[Ewd]class05 0405
 
성공적인 UX디자인을 위한 프로토타입 방법론
성공적인 UX디자인을 위한 프로토타입 방법론 성공적인 UX디자인을 위한 프로토타입 방법론
성공적인 UX디자인을 위한 프로토타입 방법론
 
[Msd02]mobile servicedesign
[Msd02]mobile servicedesign[Msd02]mobile servicedesign
[Msd02]mobile servicedesign
 
모바일 앱(App) 디자인과 모바일 시장변화의 이해
모바일 앱(App) 디자인과 모바일 시장변화의 이해모바일 앱(App) 디자인과 모바일 시장변화의 이해
모바일 앱(App) 디자인과 모바일 시장변화의 이해
 
제품소개 두나미스 20121008
제품소개 두나미스 20121008제품소개 두나미스 20121008
제품소개 두나미스 20121008
 
IoT 차세대 제품의 UX 통찰
IoT 차세대 제품의 UX 통찰IoT 차세대 제품의 UX 통찰
IoT 차세대 제품의 UX 통찰
 

모바일UX디자인 Essential

  • 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
  • 3. 모바읷 UX디자읶 가이드 공통원칙 Mobile UX Design Essential
  • 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
  • 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 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/