Designing Web Apps

웹애플리케이션
디자인 방법론
마이크로소프트 황리건
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…

4. 문제 해결

BILL BUXTON

웹 애플리케이션 디자인 방법롞
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

프롞트엔드 기술

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일에 있었던 이야기

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

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

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

누군가는 해야 하는 작업

?
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

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

좋은 개발 파트너의 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

Designing Web Apps

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Designing Web Apps