웹애플리케이션
디자인 방법론
마이크로소프트 황리건
uxfactory.com

사진촬영 OK
me2sms OK

이번 세션에서
다룰 내용

웹 애플리케이션
• 웹 브라우저 등을 통해서 접근 가능
• 웹에 연결 되어 있음
• 작업 지향적(Task-oriented) 소프트웨어

웹 애플리케이션의 패러다임
Web Site: User navigates to information Web App: Functionality comes to the user
This is about wayfinding… This is about working in one place…

디자인 원칙

1. 단순함
JONE MAEDA

2. 정보
EDWARD TUFTE

3. 사용자 중심

4. 문제 해결
BILL BUXTON

5. 싞뢰성
BJ FOGG

디자인 방법론

웹 애플리케이션 디자인 방법롞
Web Site Web Application
– User Research – User Research
– Personas – Activity Scenarios
– Card Sorting – Task Analysis
– Content Structure – Workflow Diagram
– Wireframes – Storyboards
– Usability Test – Usability Test
– Refine – Refine
– Site Map – Screenflow diagrams
– Treat – Treat
– ... – ...

워크플로우
The Hiser Group

Work Flow Diagram
Interpolate
Set
Parameters
Retouch
Images
Select
Nodes
Convert & Arrange Convert & Record
Scan in Plan Special Build
Manipulate Elements on Composite Manipulate Composite
Film Rolls Effect Flowgraph
Tape Lightbox Tape to Film
Preview
Preparation Planning Implementation Completion

Interaction Model
Node Palette
Palette
Palette
Palette
Interpolation
Palette
Node
Parameters
File Conversion/ Flowgraph
Manager Lightbox Paint
Transfer
Manager
Console
Navigation
Job Preview Composite Notes Scrapbook
Minature
The Hiser Group Early draft

Screen Flow Diagram
Edit Default
Edit  Property
Location Save
PRO020
2.1.2  
Offender File Offender File
window – Select Property Item window – View
Offender Property Item
Property 
Edit
from
PRO010 PRO030
A11 PRO030
Open item for Editing
Print Property Add New Item… Update
 Add/Edit from PRO010
Transaction Property Item
 PRO110 A10 PRO040
If launched
from PRO100

Offender File
window – In Store  Edit Property
Property Update Location
History
PRO100  PRO060

Paper Prototyping

디자인 가이드

디자인 솔루션

프롞트엔드 기술
Thin Client RIA Rich Client
AJAX AIR Java FX
Silverlight
XBAP
Web Desktop
Open Rich User Experience
Wide Reach Local Processing
No Footprint UI Toolkits
Deployment Offline Availability

고상한 것이 현재의 기술이면
대중적인 것은 미래의 기술이다.

프롞트엔드 기술 고려 사항
1. User Experience
2. Deployment & Reach
3. Processing
4. Interface Components & Customization
5. Back-end Integration
6. Unique Features
7. Future Proofing
8. Staffing & Cost

한글 글꼴 사용 방식
• HTML/CSS
• 브라우저 글꼴 설정
• 운영체제 기본 글꼴
• 임베디드 글꼴
• IME
• 웹폰트(EOT)

협업으로 가는 길
Expression Night
지난 10월 4일에 있었던 이야기

어부바 모델
piggyback

어부바 중
;;

“코딩은 왜 하는 것입니까?”

개발자에게는 코딩이 밥이다.

협업으로 가는 길
1. 중계자 모델
2. 협업 도구
3. 공통의 언어
4. 작업 규칙 문서

디자이너 vs 개발자

누군가는 해야 하는 작업
?
layout,
animation,
events, markup,
integration

중계자 모델
Integrator
layout,
animation,
events,
integration

팀 작업을 돕는 도구

도구 갂의 작업 연계
PhotoShop
Illustrator
Expression Expression Expression
Visio... Design Web Web
Expression
AfterEffects
Media
FinalCut Pro
Expression Expression Expression
Audigy... Encoder Blend Blend
Zam3D
DeepZoom ...
Composer

공통의 언어 필요
XAML XAML
XAML

<XAML>

Common Controls

Wireframe

경험을 통해 배운 점
• 작업 규칙의 중요성
– 미리 약속한 이름 사용
– 이름 정하기 규칙
• 디자이너-개발자 갂의 프로젝트 공유
• 디자인-개발 툴 워크플로우
• 와이어프레임의 활용

좋은 개발 파트너의 6가지 조건
1. 프로젝트 문서 작성 능력. 요구사항 문서는 필수.
2. 요구사항 문서가 실제 요구를 정확하게 반영.
3. 좋은 방법롞과 분명한 프로젝트 계획.
4. 깔끔하고 뛰어난 커뮤니케이션 채널.
5. 프로젝트 범위를 잘 정의하고 공유함.
6. 비즈니스 모델에 대한 이해도.

5C 프로세스 모델
Concept
Content
Composition
Construction
Contract
Naming
conventions
Sketch Events Media
Layout
Wireframe States Graphics Slice
User
Comp Data sources controls Copy HTML
• Pen • TFS • Expression • Expression • Expression
• Visio • Word Blend Media Design
• Expression • Expression • Expression Web
Design Encoder
• Omnigraffle • Expression
design
• Axure
• Photoshop
• ...

Contract
작업 규칙 문서(Contract)
Naming
conventions
• 디자이너와의 협업을 Events
위한 오브젝트 네이밍, States
파일 형식, 이미지 사이 Data sources
즈, 애니메이션 구조 정
의 문서
• 백엔드와의 통싞에 대
한 통싞 방식, 오브젝트,
이벤트, 프로토콜 정의
문서

테스트 방법론

사용성 테스트

Eye-tracking 테스트
1. 일반적인 생각과 다르게 그래픽 보다는 텍스트가 더 주목을 끈다.
3. 사용자는 웹페이지의 맨 윗 쪽부터 F 자 형태로 웹페이지를 탐색한다.
5. 예쁜 장식이나 폰트는 대개 무시된다.
7. 글씨 크기는 보는 방식에 영향을 미친다.(작은 폰트는 집중, 큰 폰트는 탐색)
8. 흥미로운 요소(관심있는 키워드)가 있을 때만 부제를 본다.
14. 텍스트 광고를 가장 주의깊게 본다.
15. 이미지가 크면 클수록 더 큰 주목을 받는다.
22. 여백은 내용을 젂달하는데 좋은 영향을 준다.

오늘의 내용 정리
• 웹 애플리케이션 디자인 원칙
– 단순함, 정보, 사용자 중심, 문제 해결, 싞뢰성
• 디자인 방법롞
– 워크플로우, 인터랙션 모델, 페이퍼 프로토타이핑, 디자인 가이드
• 디자인 솔루션
– Thin Client, RIA, Rich Client
• 협업으로 가는 길
– 중계자, 도구, 비주얼 언어, 작업 규칙 문서(5C모델)
• 평가 및 테스트
– 사용성 테스트, 아이트래킹

ㅍ

UI 개발자는
인터랙션 디자이너다.

2008년 유망 직종
Usability/ User Experience
Specialist

디자인을 똑똑하게 하면
개발도 효과적으로 할 수 있다

감사합니다

참고 자료
• http://www.slideshare.net/garrettdimon/improving-interface-design
• http://www.slideshare.net/shanemo/web311-designing-compelling-silverlight-user-experiences-with-expression-
studio-presentation
• http://www.slideshare.net/shanemo/from-website-to-webapp-shane-morris-presentation
• http://www.slideshare.net/guest83d3e0/how-to-express-your-creative-self-with-windows-presentation-
foundation-and-silverlight
• http://www.slideshare.net/billwscott/designing-for-ajax/
• http://www.lukew.com/resources/articles/ajax_design.asp
• http://www.uie.com/articles/malouf_scott_interview/
• http://looksgoodworkswell.blogspot.com/2006/01/nine-tips-for-designing-rich-internet.html
• http://www.lukew.com/resources/webapplicationsolutions.pdf
• http://www.sapdesignguild.org/resources/TSDesignGL/INDEX.HTM
• http://www.lukew.com/resources/articles/web_forms.html
http://www.lukew.com/resources/articles/web_applications.html
• http://www.adaptivepath.com/ideas/essays/archives/000385.php
• http://www.flickr.com/photos/factoryjoe/collections/72157600001823120/
• http://me2day.net/sumanpark/2008/10/19#15:21:48
• http://dobiho.com/?p=113
• http://dobiho.com/?p=922
• http://kin.naver.com/knowhow/entry.php?d1id=10&dir_id=10&eid=B53b7vcreAmITtnA2HpEcXS79zZ+Hj1p&qb=
vsbAzLXwvu4gvcOwosit
• http://www.uigarden.net/english/the-human-interface
• http://uxlog.net/46
• http://interaction.tistory.com/150