2012년 10월 31일 열린 KTH, H3 2012에서 발표한 세션 키노트입니다. "모두의 도구로 프로토타이핑하라"는 주제로 에버노트와 파이어웍스의 콜라보레이션을 다루고 있습니다. :-)

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

2. yamoo9
Book
Speaker
Author
facebook.com/yamoo9

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

4. 응? 다소 H3 페이지에
소개된 주제와 다른 건가요?
에버노트와 파이어웍스 라뇨?

5. <모두의 도구>로 프로토타이핑을 시작하라!
나눠진 책자를 확인해주세요.

6. Collaboration
is Everything

7. 쓰~
예
모두가

8. 함께하면

9. 다툴

10. 일도

11. 없겠죠?

12. 함께해요!!!
EVERYBODY
PUT YOUR HANDS
예 에~
워우어~

13. Evernote
Fireworks

14. 에버노트와

15. 파이어웍스?
? 두

16. 도구는

17. 쓰임새가

18. 전혀

19.
다른데...

20. 어떤

21. 관계가?

22. 34,000,000
모든 것을
기억하라!
에버노트

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

24. 기획자가

30. 를

31. 사용해도...

33.
디자이너가

48. 을

49. 사용해도...
맞아...
개발자가

54. 을

55. 사용해도...
다들

56. 다른

57. 환경이지..

58. 에버노트라면
언제

59. 어디서나~

60.
문제

61. 없죠!~

62. ^ㅡ^
그렇겠군!
에버노트라면~

63. 모두의

64. 도구로서

65. 에버노트가

66. 적합한

67. 이유입니다.
좋아!
모두가

68. 함께

69.
사용할

70. 수

71. 있겠어!

72. 어떻게?!
활용할

73. 생각이지..?
에버노트

74. 활용

75. 방법은

76. 파이어웍스와

77. 함께

78. 살펴보죠!

79. 어도비

80. 파이어웍스가

81.
모두의

82. 도구로

83. 유용한가요?

84. Fireworks
파이어웍스 역시 크로스 플랫폼 도구로 에버노트처럼
모두의 환경에서 사용 가능할 뿐 아니라, 포토샵을
다뤄봤다면 누구나 쉽게 사용 가능합니다.
무슨 소리?!
디자인 프로토타입을
파이어웍스로 왜?
포토샵을 써야지!

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

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

87. Fireworks

88. Fireworks
24

89. Fireworks
1

90. Fireworks

91. Fireworks
+
150
Pages
파이어웍스는

92. 150

93. 페이지

94. 이상을

98. 하나의

99. 파일에서

100. 관리할

101. 수

102. 있다는

103. 놀라운

104. 사실!

105. Fireworks
Page 3
Page 2
Page 1
Folder (Layers)
페이지

106. 관리는
웹/앱에

107. 딱이군요!
Objects
!

108. Fireworks
마스터 페이지(Master Page)
모든 페이지의 공통 항목을 담고 있는 페이지를 말합니다.
유지/보수 차원에서 매우 편리하게 관리할 수 있죠.
페이지(Page)
어플리케이션 및 사이트의 각 페이지를 말합니다.
내부에는 여러개로 구성된 레이어(폴더)를 포함하고 있습니다.
생성
복제
제거
이름변경

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

110. Fireworks
폴더 내부에서만 레이어 구성 가능.
파이어웍스는 포토샵과 달리, 폴더 내부에서만 레이어 구성이 가능합니다.
포토샵과 비교하여 레이어 사용은 불편합니다.
마스터 페이지는 잠겨있습니다.
마스터 페이지의 레이어는 마스터 페이지에서만 수정할 수 있습니다.
마스크 추가 제거
새로운 폴더 추가(복제) 비트맵 이미지 추가
새로운 서브 폴더 추가

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

112. 에버노트

113. +

114. 파이어웍스

115. 콤비네이션!
그런데...?
파이어웍스의
페이지와 에버노트의
관계는 무슨 관계?

116. Evernote
에버노트가 파이어웍스와
함께 하면 좋은 이유! Share
함께
쓰기

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

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

119. Evernote
에버노트는 다양한 포멧의 파일을 첨부할 수 있어요.
기획자들의 PDF 문서나, 디자이너의 PSD, Ai, PNG 와
일반적인 그래픽 데이터 포멧, 텍스트, 워드 등등등

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

121. Evernote
50
MB

122. Evernote

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

124. Design
Patterns

125. Buttons Banners
버튼 배너
Menu Bar
메뉴바
Lists
목록
Gallery
갤러리
Navigation
내비게이션

126. Patterns
패턴 = 특정 영역 내에서 자주 사용되는 요소의 기능 및 역할 정의
Components 컴포넌트 = 패턴을 토대로 만들어 실제 사용되는 구성 요소
Library 라이브러리 = 패턴/컴포넌트 를 모아 둔 저장소

127. Fireworks
Graphic
심볼의 타입은 크게 3가지.
그래픽, 애니메이션, 버튼!
Symbol
파이어웍스는

128. 플래시/일러스트레이터와

129. 유사한

130. 개념의

135. 심볼을

136. 제공합니다.

137. 이를

138. 활용하면

139. 디자인

140. 패턴을

148. 만들기가

149. 아주

150. 용이하죠!

151. Fireworks
Page Page Page
라이브러리에 등록된 심볼
Page Page Page 라이브러리에
등록된

152. 심볼로

153. 디자인을
관리하는

154. 군요!
!
Page Page Page

155. Fireworks
Common
Library

156. Fireworks
Common
Library

157. 에버노트

158. +

159. 파이어웍스

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

161. Evernote
에버노트가 파이어웍스와
함께 하면 좋은 이유! Sync
동기
화~

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

163. Evernote
에버노트가 파이어웍스와
함께 하면 좋은 이유! Version
버전
관리

164. Evernote
!
와우!
버전

165. 관리까지
이전

166. 파일을

167. 복구할

168. 수

169. 있군요!

170. Evernote
에버노트가 파이어웍스와
함께 하면 좋은 이유!
Search
검색

171. Evernote
PDF
Searching

172. Evernote
fw.PNG
Searching

173. Evernote
에버노트가 파이어웍스와
함께 하면 좋은 이유!
Search
암호화

174. Evernote

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

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

177. 감사합니다.
UXD / Front-End Interaction, PD / 지훈
yamoo9@kthcorp.com
@yamoo9