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

Post on 20-Dec-2014

2.289 views 2 download

description

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

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

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

BookAuthor

yamoo9 Speaker

facebook.com/yamoo9

Session Agenda

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

응? 다소 H3 페이지에

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

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

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

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

Collaboration is Everything

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

예에~

워우어~

예쓰~

EVERYBODYPUT YOUR HANDS

Evernote

Fireworks

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

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

34,000,000

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

Cross Platform

Cross Browsers

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

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

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

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

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

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

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

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

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

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

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

Fireworks무슨 소리?!

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

.......

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

Fireworks

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

페이지Page

.......

Fireworks

Fireworks

Fireworks

24

Fireworks

1

Fireworks

Fireworks

150 Pages

+

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

Page 3

Page 2

Page 1

Folder (Layers)

Fireworks

Objects!

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

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

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

생성

복제

제거

이름변경

Fireworks

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

마스터 페이지 설정 제거

마스터 페이지 설정

Fireworks

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

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

새로운 폴더 추가(복제)

새로운 서브 폴더 추가

마스크 추가

비트맵 이미지 추가

제거

Fireworks

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

Fireworks

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

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

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

Evernote

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

함께쓰기

Share

Evernote

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

Evernote

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

Evernote

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

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

Evernote

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

Evernote

50MB

Evernote

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

심볼Symbol

.......

DesignPatterns

버튼Buttons

배너Banners

메뉴바Menu Bar

목록Lists

갤러리Gallery

내비게이션Navigation

PatternsComponents

Library

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

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

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

Fireworks

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

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

Graphic

Symbol

Fireworks

라이브러리에 등록된 심볼

Page Page Page

Page Page Page

Page Page Page!

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

Fireworks

CommonLibrary

Fireworks

CommonLibrary

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

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

Evernote

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

동기화 ~

Sync

Evernote

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

Library

Evernote

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

버전관리

Version

Evernote

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

Evernote

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

검색Search

Evernote

PDFSearching

Evernote

fw.PNGSearching

Evernote

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

암호화Search

Evernote

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

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

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

yamoo9@kthcorp.com@yamoo9