[h3 2012] 모두의 도구로 프로토타이핑을 시작하라
DESCRIPTION
H3 2012 발표자료 모두의 도구로 프로토타이핑을 시작하라 -KTH 지훈TRANSCRIPT
![Page 1: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/1.jpg)
모두의 도구로프로토타이핑을시작하라FI팀 | 지훈
![Page 2: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/2.jpg)
BookAuthor
yamoo9 Speaker
facebook.com/yamoo9
![Page 3: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/3.jpg)
Session Agenda
모두의 도구프로토타입에버노트파이어웍스
![Page 4: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/4.jpg)
응? 다소 H3 페이지에
소개된 주제와 다른 건가요?
에버노트와 파이어웍스 라뇨?
![Page 5: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/5.jpg)
<모두의 도구>로 프로토타이핑을 시작하라!
나눠진 책자를 확인해주세요.
![Page 6: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/6.jpg)
Collaboration is Everything
![Page 7: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/7.jpg)
모두가����������� ������������������ 함께하면����������� ������������������ 다툴����������� ������������������ 일도����������� ������������������ 없겠죠?����������� ������������������ 함께해요!!!
예에~
워우어~
예쓰~
EVERYBODYPUT YOUR HANDS
![Page 8: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/8.jpg)
Evernote
Fireworks
![Page 9: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/9.jpg)
에버노트와����������� ������������������ 파이어웍스?두����������� ������������������ 도구는����������� ������������������ 쓰임새가����������� ������������������ 전혀����������� ������������������ 다른데...����������� ������������������ 어떤����������� ������������������ 관계가??
![Page 10: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/10.jpg)
모든 것을 기억하라!에버노트
34,000,000
![Page 11: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/11.jpg)
Evernote에버노트는 데스크톱/모바일 플랫폼, 브라우저 제약 없이 어느 환경에서나 활용 가능합니다.
Cross Platform
Cross Browsers
![Page 12: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/12.jpg)
기획자가����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 를����������� ������������������ 사용해도...����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������
디자이너가����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 을����������� ������������������ 사용해도...
개발자가����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 을����������� ������������������ 사용해도...맞아...다들����������� ������������������ 다른����������� ������������������ 환경이지..
![Page 13: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/13.jpg)
에버노트라면언제����������� ������������������ 어디서나~����������� ������������������ 문제����������� ������������������ 없죠!~����������� ������������������ ㅡ̂̂
그렇겠군!에버노트라면~
![Page 14: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/14.jpg)
모두의����������� ������������������ 도구로서����������� ������������������ 에버노트가����������� ������������������ 적합한����������� ������������������ 이유입니다.
좋아!모두가����������� ������������������ 함께����������� ������������������ 사용할����������� ������������������ 수����������� ������������������ 있겠어!
![Page 15: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/15.jpg)
에버노트����������� ������������������ 활용����������� ������������������ 방법은����������� ������������������ 파이어웍스와����������� ������������������ 함께����������� ������������������ 살펴보죠!
어떻게?!활용할����������� ������������������ 생각이지..?
![Page 16: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/16.jpg)
어도비����������� ������������������ 파이어웍스가����������� ������������������ 모두의����������� ������������������ 도구로����������� ������������������ 유용한가요?
![Page 17: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/17.jpg)
파이어웍스 역시 크로스 플랫폼 도구로 에버노트처럼모두의 환경에서 사용 가능할 뿐 아니라, 포토샵을 다뤄봤다면 누구나 쉽게 사용 가능합니다.
Fireworks무슨 소리?!
디자인 프로토타입을파이어웍스로 왜?포토샵을 써야지!
![Page 18: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/18.jpg)
.......
그렇지 않아요.디자인 프로토타입 제작에 보다 적합한 도구는 포토샵이 아닌,파이어웍스에요.
Fireworks
![Page 19: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/19.jpg)
포토샵보다 파이어웍스가 프로토타입에 적한한 도구인 이유! 첫번째!
페이지Page
.......
Fireworks
![Page 20: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/20.jpg)
Fireworks
![Page 21: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/21.jpg)
Fireworks
24
![Page 22: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/22.jpg)
Fireworks
1
![Page 23: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/23.jpg)
Fireworks
![Page 24: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/24.jpg)
Fireworks
150 Pages
+
파이어웍스는����������� ������������������ 150����������� ������������������ 페이지����������� ������������������ 이상을����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 하나의����������� ������������������ 파일에서����������� ������������������ 관리할����������� ������������������ 수����������� ������������������ 있다는����������� ������������������ 놀라운����������� ������������������ 사실!
![Page 25: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/25.jpg)
Page 3
Page 2
Page 1
Folder (Layers)
Fireworks
Objects!
페이지����������� ������������������ 관리는웹/앱에����������� ������������������ 딱이군요!
![Page 26: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/26.jpg)
마스터 페이지(Master Page)모든 페이지의 공통 항목을 담고 있는 페이지를 말합니다.유지/보수 차원에서 매우 편리하게 관리할 수 있죠.
페이지(Page)어플리케이션 및 사이트의 각 페이지를 말합니다.내부에는 여러개로 구성된 레이어(폴더)를 포함하고 있습니다.
생성
복제
제거
이름변경
Fireworks
![Page 27: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/27.jpg)
마스터 페이지에 링크(Link to Master Page)마스터 페이지의 캔버스 크기 및 색상 등 속성을 그대로 사용하고자 할 때활용할 수 있습니다. 예) 캔버스 사이즈, 색상 등등
마스터 페이지 설정 제거
마스터 페이지 설정
Fireworks
![Page 28: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/28.jpg)
폴더 내부에서만 레이어 구성 가능.파이어웍스는 포토샵과 달리, 폴더 내부에서만 레이어 구성이 가능합니다.포토샵과 비교하여 레이어 사용은 불편합니다.
마스터 페이지는 잠겨있습니다.마스터 페이지의 레이어는 마스터 페이지에서만 수정할 수 있습니다.
새로운 폴더 추가(복제)
새로운 서브 폴더 추가
마스크 추가
비트맵 이미지 추가
제거
Fireworks
![Page 29: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/29.jpg)
레이어 다른 페이지와 공유.마스터 페이지가 모든 페이지와 공유하는 항목이라면,레이어 공유는 모든 페이지가 아닌 몇몇 페이지와 공유가 가능한 기능입니다.
Fireworks
![Page 30: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/30.jpg)
에버노트����������� ������������������ +����������� ������������������ 파이어웍스����������� ������������������ 콤비네이션!
그런데...?파이어웍스의
페이지와 에버노트의관계는 무슨 관계?
![Page 31: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/31.jpg)
Evernote
에버노트가 파이어웍스와 함께 하면 좋은 이유!
함께쓰기
Share
![Page 32: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/32.jpg)
Evernote
무료 사용자는노트 공유만 가능합니다.
![Page 33: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/33.jpg)
Evernote
유료 사용자는함께 쓰기가 가능합니다.
![Page 34: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/34.jpg)
Evernote
에버노트는 다양한 포멧의 파일을 첨부할 수 있어요.
기획자들의 PDF 문서나, 디자이너의 PSD, Ai, PNG 와일반적인 그래픽 데이터 포멧, 텍스트, 워드 등등등
![Page 35: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/35.jpg)
Evernote
파이어웍스는 PNG이기 때문에 가능!
![Page 36: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/36.jpg)
Evernote
50MB
![Page 37: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/37.jpg)
Evernote
![Page 38: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/38.jpg)
포토샵보다 파이어웍스가 프로토타입에 적한한 도구인 이유! 두번째!
심볼Symbol
.......
![Page 39: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/39.jpg)
DesignPatterns
![Page 40: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/40.jpg)
버튼Buttons
배너Banners
메뉴바Menu Bar
목록Lists
갤러리Gallery
내비게이션Navigation
![Page 41: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/41.jpg)
PatternsComponents
Library
패턴 = 특정 영역 내에서 자주 사용되는 요소의 기능 및 역할 정의
컴포넌트 = 패턴을 토대로 만들어 실제 사용되는 구성 요소
라이브러리 = 패턴/컴포넌트 를 모아 둔 저장소
![Page 42: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/42.jpg)
Fireworks
심볼의 타입은 크게 3가지.그래픽, 애니메이션, 버튼!
파이어웍스는����������� ������������������ 플래시/일러스트레이터와����������� ������������������ 유사한����������� ������������������ 개념의����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 심볼을����������� ������������������ 제공합니다.����������� ������������������ 이를����������� ������������������ 활용하면����������� ������������������ 디자인����������� ������������������ 패턴을����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 만들기가����������� ������������������ 아주����������� ������������������ 용이하죠!
Graphic
Symbol
![Page 43: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/43.jpg)
Fireworks
라이브러리에 등록된 심볼
Page Page Page
Page Page Page
Page Page Page!
라이브러리에등록된����������� ������������������ 심볼로����������� ������������������ 디자인을관리하는����������� ������������������ 군요!
![Page 44: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/44.jpg)
Fireworks
CommonLibrary
![Page 45: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/45.jpg)
Fireworks
CommonLibrary
![Page 46: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/46.jpg)
에버노트����������� ������������������ +����������� ������������������ 파이어웍스����������� ������������������ 콤비네이션!
기대되네요!패턴 라이브러리 활용이!에버노트와의 조합으로!
![Page 47: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/47.jpg)
Evernote
에버노트가 파이어웍스와 함께 하면 좋은 이유!
동기화 ~
Sync
![Page 48: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/48.jpg)
Evernote
하나의 파일로다수의 디자이너가 변경된 내용을 처리할 수 있어 관리 측면에서 뛰어나네요.
Library
![Page 49: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/49.jpg)
Evernote
에버노트가 파이어웍스와 함께 하면 좋은 이유!
버전관리
Version
![Page 50: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/50.jpg)
Evernote
!와우!버전����������� ������������������ 관리까지이전����������� ������������������ 파일을����������� ������������������ 복구할����������� ������������������ 수����������� ������������������ 있군요!
![Page 51: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/51.jpg)
Evernote
에버노트가 파이어웍스와 함께 하면 좋은 이유!
검색Search
![Page 52: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/52.jpg)
Evernote
PDFSearching
![Page 53: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/53.jpg)
Evernote
fw.PNGSearching
![Page 54: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/54.jpg)
Evernote
에버노트가 파이어웍스와 함께 하면 좋은 이유!
암호화Search
![Page 55: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/55.jpg)
Evernote
![Page 56: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/56.jpg)
에버노트와파이어웍스로프로토타입을시작하라
![Page 57: [H3 2012] 모두의 도구로 프로토타이핑을 시작하라](https://reader034.vdocuments.pub/reader034/viewer/2022052216/54954b5fb47959993a8b466a/html5/thumbnails/57.jpg)
야무의오픈지식강의비메오서비스