[H3 2012] 모두의 도구로 프로토타이핑을 시작하라

58
모두의 도구 프로토타이핑 시작 하라 FI팀 | 지훈

description

H3 2012 발표자료 모두의 도구로 프로토타이핑을 시작하라 -KTH 지훈

Transcript of [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Page 1: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

모두의 도구로프로토타이핑을시작하라FI팀 | 지훈

Page 2: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

BookAuthor

yamoo9 Speaker

facebook.com/yamoo9

Page 3: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Session Agenda

모두의 도구프로토타입에버노트파이어웍스

Page 4: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

응? 다소 H3 페이지에

소개된 주제와 다른 건가요?

에버노트와 파이어웍스 라뇨?

Page 5: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

<모두의 도구>로 프로토타이핑을 시작하라!

나눠진 책자를 확인해주세요.

Page 6: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Collaboration is Everything

Page 7: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

모두가����������� ������������������  함께하면����������� ������������������  다툴����������� ������������������  일도����������� ������������������  없겠죠?����������� ������������������  함께해요!!!

예에~

워우어~

예쓰~

EVERYBODYPUT YOUR HANDS

Page 8: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Evernote

Fireworks

Page 9: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

에버노트와����������� ������������������  파이어웍스?두����������� ������������������  도구는����������� ������������������  쓰임새가����������� ������������������  전혀����������� ������������������  다른데...����������� ������������������  어떤����������� ������������������  관계가??

Page 10: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

모든 것을 기억하라!에버노트

34,000,000

Page 11: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Evernote에버노트는 데스크톱/모바일 플랫폼, 브라우저 제약 없이 어느 환경에서나 활용 가능합니다.

Cross Platform

Cross Browsers

Page 12: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

기획자가����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  를����������� ������������������  사용해도...����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  

디자이너가����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  을����������� ������������������  사용해도...

개발자가����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  을����������� ������������������  사용해도...맞아...다들����������� ������������������  다른����������� ������������������  환경이지..

Page 13: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

에버노트라면언제����������� ������������������  어디서나~����������� ������������������  문제����������� ������������������  없죠!~����������� ������������������   ㅡ̂̂

그렇겠군!에버노트라면~

Page 14: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

모두의����������� ������������������  도구로서����������� ������������������  에버노트가����������� ������������������  적합한����������� ������������������  이유입니다.

좋아!모두가����������� ������������������  함께����������� ������������������  사용할����������� ������������������  수����������� ������������������  있겠어!

Page 15: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

에버노트����������� ������������������  활용����������� ������������������  방법은����������� ������������������  파이어웍스와����������� ������������������  함께����������� ������������������  살펴보죠!

어떻게?!활용할����������� ������������������  생각이지..?

Page 16: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

어도비����������� ������������������  파이어웍스가����������� ������������������  모두의����������� ������������������  도구로����������� ������������������  유용한가요?

Page 17: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

파이어웍스 역시 크로스 플랫폼 도구로 에버노트처럼모두의 환경에서 사용 가능할 뿐 아니라, 포토샵을 다뤄봤다면 누구나 쉽게 사용 가능합니다.

Fireworks무슨 소리?!

디자인 프로토타입을파이어웍스로 왜?포토샵을 써야지!

Page 18: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

.......

그렇지 않아요.디자인 프로토타입 제작에 보다 적합한 도구는 포토샵이 아닌,파이어웍스에요.

Fireworks

Page 19: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

포토샵보다 파이어웍스가 프로토타입에 적한한 도구인 이유! 첫번째!

페이지Page

.......

Fireworks

Page 20: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Fireworks

Page 21: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Fireworks

24

Page 22: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Fireworks

1

Page 23: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Fireworks

Page 24: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Fireworks

150 Pages

+

파이어웍스는����������� ������������������  150����������� ������������������  페이지����������� ������������������  이상을����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  하나의����������� ������������������  파일에서����������� ������������������  관리할����������� ������������������  수����������� ������������������  있다는����������� ������������������  놀라운����������� ������������������  사실!

Page 25: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Page 3

Page 2

Page 1

Folder (Layers)

Fireworks

Objects!

페이지����������� ������������������  관리는웹/앱에����������� ������������������  딱이군요!

Page 26: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

마스터 페이지(Master Page)모든 페이지의 공통 항목을 담고 있는 페이지를 말합니다.유지/보수 차원에서 매우 편리하게 관리할 수 있죠.

페이지(Page)어플리케이션 및 사이트의 각 페이지를 말합니다.내부에는 여러개로 구성된 레이어(폴더)를 포함하고 있습니다.

생성

복제

제거

이름변경

Fireworks

Page 27: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

마스터 페이지에 링크(Link to Master Page)마스터 페이지의 캔버스 크기 및 색상 등 속성을 그대로 사용하고자 할 때활용할 수 있습니다. 예) 캔버스 사이즈, 색상 등등

마스터 페이지 설정 제거

마스터 페이지 설정

Fireworks

Page 28: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

폴더 내부에서만 레이어 구성 가능.파이어웍스는 포토샵과 달리, 폴더 내부에서만 레이어 구성이 가능합니다.포토샵과 비교하여 레이어 사용은 불편합니다.

마스터 페이지는 잠겨있습니다.마스터 페이지의 레이어는 마스터 페이지에서만 수정할 수 있습니다.

새로운 폴더 추가(복제)

새로운 서브 폴더 추가

마스크 추가

비트맵 이미지 추가

제거

Fireworks

Page 29: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

레이어 다른 페이지와 공유.마스터 페이지가 모든 페이지와 공유하는 항목이라면,레이어 공유는 모든 페이지가 아닌 몇몇 페이지와 공유가 가능한 기능입니다.

Fireworks

Page 30: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

에버노트����������� ������������������  +����������� ������������������  파이어웍스����������� ������������������  콤비네이션!

그런데...?파이어웍스의

페이지와 에버노트의관계는 무슨 관계?

Page 31: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Evernote

에버노트가 파이어웍스와 함께 하면 좋은 이유!

함께쓰기

Share

Page 32: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Evernote

무료 사용자는노트 공유만 가능합니다.

Page 33: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Evernote

유료 사용자는함께 쓰기가 가능합니다.

Page 34: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Evernote

에버노트는 다양한 포멧의 파일을 첨부할 수 있어요.

기획자들의 PDF 문서나, 디자이너의 PSD, Ai, PNG 와일반적인 그래픽 데이터 포멧, 텍스트, 워드 등등등

Page 35: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Evernote

파이어웍스는 PNG이기 때문에 가능!

Page 36: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Evernote

50MB

Page 37: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Evernote

Page 38: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

포토샵보다 파이어웍스가 프로토타입에 적한한 도구인 이유! 두번째!

심볼Symbol

.......

Page 39: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

DesignPatterns

Page 40: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

버튼Buttons

배너Banners

메뉴바Menu Bar

목록Lists

갤러리Gallery

내비게이션Navigation

Page 41: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

PatternsComponents

Library

패턴 = 특정 영역 내에서 자주 사용되는 요소의 기능 및 역할 정의

컴포넌트 = 패턴을 토대로 만들어 실제 사용되는 구성 요소

라이브러리 = 패턴/컴포넌트 를 모아 둔 저장소

Page 42: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Fireworks

심볼의 타입은 크게 3가지.그래픽, 애니메이션, 버튼!

파이어웍스는����������� ������������������  플래시/일러스트레이터와����������� ������������������  유사한����������� ������������������  개념의����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  심볼을����������� ������������������  제공합니다.����������� ������������������  이를����������� ������������������  활용하면����������� ������������������  디자인����������� ������������������  패턴을����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  만들기가����������� ������������������  아주����������� ������������������  용이하죠!

Graphic

Symbol

Page 43: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Fireworks

라이브러리에 등록된 심볼

Page Page Page

Page Page Page

Page Page Page!

라이브러리에등록된����������� ������������������  심볼로����������� ������������������  디자인을관리하는����������� ������������������  군요!

Page 44: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Fireworks

CommonLibrary

Page 45: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Fireworks

CommonLibrary

Page 46: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

에버노트����������� ������������������  +����������� ������������������  파이어웍스����������� ������������������  콤비네이션!

기대되네요!패턴 라이브러리 활용이!에버노트와의 조합으로!

Page 47: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Evernote

에버노트가 파이어웍스와 함께 하면 좋은 이유!

동기화 ~

Sync

Page 48: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Evernote

하나의 파일로다수의 디자이너가 변경된 내용을 처리할 수 있어 관리 측면에서 뛰어나네요.

Library

Page 49: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Evernote

에버노트가 파이어웍스와 함께 하면 좋은 이유!

버전관리

Version

Page 50: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Evernote

!와우!버전����������� ������������������  관리까지이전����������� ������������������  파일을����������� ������������������  복구할����������� ������������������  수����������� ������������������  있군요!

Page 51: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Evernote

에버노트가 파이어웍스와 함께 하면 좋은 이유!

검색Search

Page 52: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Evernote

PDFSearching

Page 53: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Evernote

fw.PNGSearching

Page 54: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Evernote

에버노트가 파이어웍스와 함께 하면 좋은 이유!

암호화Search

Page 55: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

Evernote

Page 56: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

에버노트와파이어웍스로프로토타입을시작하라

Page 57: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

야무의오픈지식강의비메오서비스

Page 58: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라

감사합니다.UXD / Front-End Interaction, PD / 지훈

[email protected]@yamoo9