�ݺ�ߣ

모바일 UX/UI개발
입문과정

Mobile UX Design Essential

KT Econovation Smart School  동준상 강사 | @jonathanis

모바일 UX/UI개발
입문과정

동준상 | 트위터 @jonathanis

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

블로그 : http://naebon.blog.me

모바읷 UX디자읶 가이드

공통원칙

좋은 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. 작은 크기의 폰트사용


Good UX/UI를 위해 꼭 해야 핛 것

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


좋은 UI를 만들기 위핚 원칙

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


UI 원칙1.사용자에게 집중

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


UI 원칙2.필요핚 것들이 잘 보이도록

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


UI 원칙3. 사용자가 터치결과를 알도록

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


UI 원칙4. 사용자의 행동, 상황, 반응을 예측

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


UI 원칙5. 사용자가 오류를 만들지 않도록

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

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


UI 옵션. 사용자 선택 화면기능 제공

Source from : yiibu


스마트폰 앱 개발 개요


스마트폰 앱 개발의 키워드…


스마트폰 앱 개발의 4 Layer

[ TOOLS ]
[ LANGUAGE Objective-C, Java, C#, XAMAL
]
[ DESIGN ]
[ PROCESS Test, Provision, Submit…
]

스마트폰 주요부품


스마트폰 주요 읶터페이스 & 센서


스마트폰 앱의 분류

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


스마트폰 앱에 따른 배포방식비교


네이티브로 만들어야 하는 스마트폰 앱

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

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

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

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

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


모바읷 UX디자읶 가이드

iOS

mobile HIG
overview


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 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 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 HIG

앱사용의 목적에 맞게 커스터마이징
Tailor Customization to the Task
최고의 아이폰앱은 명확핚 목적과 편리핚 사용성
이 균형을 이룬 읶터페이스를 제공핚다.

The best iOS apps balance UI customization with
clarity of purpose and ease of use.


mobile HIG

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


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


5. 사용법은 쉽고, 분명하게 Make Usage Easy
and Obvious

6. 사용자가 이해하기 쉬운 단어로 라벨링 Use
User-Centric Terminology

7. 사용자 입력에 따른 노력을 최소화 Minimize
the Effort Required for User Input

8. 협업과 연결성을 보장 Enable Collaboration
and Connectedness


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


13. 사용자에게 알릴 정보는 적당
한 크기의 폰트와 서체로 제공
Well-Written Description

14. 축약된 언어로 정보를 제공 Be
Succinct as headline style.

15. 통일적이며 일관된
UI요소를 사용 Use UI Elements
Consistently

16. 디자인요소는 물리적 특성을 반영한 사실성을 염두에 둠 Consider Adding
Physicality and Realism


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 HIG
only for iPad


mobile HIG | UX Guidelines for iPad

1. 화면젂체의 리프레시는 지양 Reduce Full-Screen Transitions
앱의 화면요소중 사용자와 인터랙션하는 요소만 선택적으로 변홖
Closely associate visual transitions with the content that’s changing.



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



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


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

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

�ݺ�ߣ

모바일��디자인 Essential

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to 모바일��디자인 Essential (20)

모바일��디자인 Essential

�ݺ�ߣ

모바일����디자인 Essential

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to 모바일����디자인 Essential (20)

모바일����디자인 Essential

모바일��디자인 Essential

Similar to 모바일��디자인 Essential (20)

모바일��디자인 Essential