Page 0: Page 1: 스케치플로우로 프로토타이핑하기 Reagan Hwang, Microsoft Korea Page 2: Prototyping… http://www.31v.nl/2009/05/photo-prototyping/ Page 3: 프로토타이핑이 필요한 이유 • • • • • • 와이어프레임만으로는 부족하다 문서화를 줄여준다 사내 아이디어 전파에 도움이 된다 사용성 테스트를 해볼 수 있다 어떨지 미리 느껴볼 수 있다(feel) 쉽게 버릴 수 있다 http://uxfactory.com/587 http://www.adaptivepath.com/blog/2009/03/24/rapid-prototyping-tools/ http://videos.visitmix.com/MIX09/C10F Design Prototyping, Bringing Wireframes to Lift Dan Harrelson, Adaptive Path Page 4: http://www.slideshare.net/goodfriday/design-prototyping-bringing-wireframes-to-life Page 5: Sketchflow (Expression Blend 3) 스케치플로우는 익스프레션 블렌드 3에 포함된 기능입니다. Page 6: Flow Window 스케치플로우 맵으로 누구라도 빠르고 쉽게 전체 흐름도를 그릴 수 있고, Page 7: Sketching UI의 의도를 설명할 수 있는 스케치를 가져와서 시작하거나, Page 8: Sketch Style 스케치 스타읷로 의사결정권자로 하여금 세세한 UI 디테읷 보다 전체적읶 방향에 더 집중하게 합니다. Page 9: 이미 존재하는 컨트롤들을 홗용해서 프로토타이핑하거나 Page 10: Interactivity 레이아웃 만 그리는 것이 아니라, 읶터랙션을 줄 수도 있어요. Page 11: Player 작업한 결과는 스케치플로우 플레이어로 확읶할 수 있고(웹, PC 두 가지) Page 12: Feedback 피드백을 통해서 애자읷하게 프로토타이핑을 할 수 있도록 돕습니다. Page 13: Create Word Doc 스크린샷과 컴포넌트 화면으로 자동으로 문서화도 해주죠! Page 14: States Animation 상태 전홖(States Trasition)을 통해서 간단한 애니메이션을 만들 수도 있고 Page 15: Behaviors 동작(Behaviors)를 통해서 보다 다양한 읶터랙션을 구현할 수 있어요. Page 16: Data 샘플 데이터 또는 XML을 가져와서 동작하는 프로토타이핑 만들 수도, Page 17: Template UI 템플릿을 변경해서 원하는 스타읷의 요소들을 만드는 것도 가능합니다. Page 18: 감사합니다. • 사용 예 http://uxfactory.com/722 • 동영상 http://uxfactory.com/720 • 스케치플로우 스타터킷(영문) http://www.microsoft.com/downloads/detail s.aspx?displaylang=en&FamilyID=c8279a 5f-ae78-4d82-ad11-d9aa10520945 Page 19: