노주환씨가 쓴 스마트폰용 UI 분석 책자입니다.
이 책을 쓰기위해서 약 만개의 어플 앱을 설치했다고 하니 그 노력과 정성이 대단한듯한데, 레이아웃, 메뉴, 컨트롤바, 버튼, 리스트, 입력요소, 검색, 지도, 시각화 등 다양한 카테고리별로 잘되어있는 앱의 멋진 UI를 보여주고, UX를 어떻게 할지를 생각해보는데 참 많은 도움이 될만한 책입니다.
 |
|
시간이 없는 개발자를 위한다고 했는데, 이런 책은 한번 정도 정독을 하시고, 스마트폰의 다양한 기능과 디자인등을 알아두시고, 필요할때마다 참고해보시면 좋을듯 합니다.
저같은 경우는 이번에 하는 프로젝트를 위해서 떠오르는 아이디어를 체크하다가 보니, 참 많은 아이디어가 떠오르더군요.
이런식으로 이것이 무엇이고, 어떨때 사용하고, 어떤 제스쳐에서 작동하며, 어떻게 디자인하고, 사용하는것이 좋으며, 소개한 프로그램에 대한 간략한 설명도 하고 있습니다.
다만 80%이상 아이폰용앱이고, 간혹 안드로이드용 앱이 섞여있는데, 뭐 가만보면 어떤 특정 OS에 국한된 문제는 아닌듯 합니다.
한번 읽으면서 보니 참 포스트잇을 많이도 붙였는데, 책의 밑부분에 붙인것은 이번에 하는 일에 도움이 될 아이디어를 적었고, 위에는 새로운 앱에 대한 아이디어를 적어두었는데, 참 많은 도움이 되는듯 합니다.
한번 일독하고난후에 다음에 또 새로운 프로젝트를 하게되면 다시한번 보면서 또 아이디어를 떠올려도 되고, 필요한 단원만 보면서 화면설계나 UI/UX를 생각해보시면 좋을듯 합니다.
제스처의 정의와 종류
방법 및 테크닉ㆍMethods & Techniques
01. 인증 후 사용ㆍLogin First
02. 등록 후 사용ㆍMust Sign-Up
03. 업데이트 후 사용ㆍUpdate First
04. 확인 후 사용ㆍConfirmation First
05. 사용자에 의한 시작ㆍClick Here to Begin
06. 신중한 확인을 위한 제약ㆍConstraints for Careful User Confirmation
07. 반응에 의한 활성화ㆍResponsive Enabling
08. 일련의 회원가입 프로세스ㆍSign-Up in Single Context
09. 분기시키기ㆍBranching-Off
10. 순서화된 컨트롤ㆍOrdered Controls
11. 마법사ㆍWizard
12. 스텝핑ㆍStepping
13. 백스텝핑ㆍBackstepping
14. 북마크ㆍBookmark
15. 페이지 찾아가기ㆍGo to Page
16. 무작위 선택ㆍRandom Selection
17. 일직선 만들기ㆍSame Line to Match
18. 자세히 보기ㆍMore Details
19. 상세 정보를 볼 수 있는 개요ㆍOverview by Detail
20. 다음 내용 보여주기ㆍWhat’s Next Contents
21. 결과 비교하기ㆍComparing Results
22. 카테고리 추가하기ㆍAdd Category
23. 2단계 확인ㆍTwo Step Confirmation
24. 빠른 저장ㆍInstant Save
25. 인스턴트 체크ㆍInstant Check
26. 풀다운에 의한 리프레시ㆍPull Down to Refresh
27. 다이내믹 로딩ㆍDynamic Loading
28. 프리로더ㆍPreloader
29. 태핑에 의한 아이템 바꾸기ㆍTapping to Change Items
30. 설정 초기화ㆍRestore Default Settings
31. 반복되는 화면ㆍRepeated Screen If Not Confirmed
32. 위지윅 설정ㆍWYSIWYG Settings
33. 상품 구성기ㆍProduct Configurator
34. 계산기ㆍCalculator
35. 투표하기ㆍPoll
36. 개요 정보ㆍOverview
37. 도움말ㆍHelp
38. 제스처 설명ㆍInstructions for Gesture
39. 사용법 범례ㆍInstruction Legend
40. 내보내기/가져오기ㆍExport & Import
41. 체험하기ㆍDemo
42. 셰이크 컨트롤ㆍShake Control
43. 지그재그 모션ㆍZigzagging
레이아웃과 스크린ㆍLayout & Screen
44. 아이콘 방식의 초기 화면ㆍHome Screen with Icon Sets
45. 가로 화면 전용ㆍLandscape-Only
46. 세로 구성ㆍVertical Layout
47. L자형 레이아웃ㆍL-Shape Layout
48. 타일 모양의 레이아웃ㆍTiled Layout
49. 2단 레이아웃ㆍTwo-Column Layout
50. 2면 레이아웃ㆍDiptych Layout
51. 멀티 바 레이아웃ㆍMultiple Bar Layout
52. 경로 중심의 설계ㆍCourse-Focused Design
53. 페이지 인덱스ㆍPage Index
54. 요약 페이지ㆍSummary Page
55. 메타데이터 페이지ㆍMetadata Page
56. 상세 페이지ㆍDetail Page
57. 개인화 페이지ㆍPersonalized Page
58. 더 보기 화면ㆍMore Screen
59. 탭 바 설정 화면ㆍConfigure Screen
60. 편집 모드ㆍEdit Mode
61. 긴 제목ㆍLong Title
62. 강화된 읽기 화면ㆍEnhanced Reading View
63. 푸터 없는 화면ㆍScreen without Footer
64. 투명한 페이지ㆍTransparent Page
65. 팝업 뷰ㆍPop-up View
66. 팝오버 뷰ㆍPop-over View
67. 문서 캔버스ㆍDocument Canvas
68. 정보 패널ㆍInformation Panel
69. 컨트롤 패널ㆍControl Panel
70. 레이어 컨트롤ㆍLayered Controls
71. 반투명 정보 패널ㆍTranslucent Information Panel
72. 모달 패널ㆍModal Panel
73. 고정 헤더ㆍFixed Header
74. 이미지 스트립ㆍImage Strip
75. 뉴스 티커ㆍNews Ticker
76. 아코디언 패널ㆍVertical Accordion Panels
77. 보기 옵션ㆍView Options
78. 서가로 보기ㆍBookshelf View
79. 탭 뷰ㆍTabbed View
80. 듀얼 뷰ㆍDual View Mode
81. 이미지 뷰어ㆍImage Viewer
82. 미리보기ㆍPreview
83. 페이지 매기기ㆍPagination
84. 자동 페이지 매기기ㆍAuto-Pagination
85. 이어지는 스크롤ㆍContinuous Scrolling
86. 화면 토글링ㆍFull-Screen Toggling
87. 스크린 시프트ㆍScreen Shift
88. 로테이션에 의한 보기 모드ㆍChange View Mode through Rotation of the Device
89. 랜덤 슬라이드쇼ㆍRandom Slideshow
90. 자동 슬라이딩 초기 화면ㆍAuto Sliding Home Screen
메뉴ㆍMenus
91. 메인 메뉴ㆍMain Menus
92. 테이블 형식의 메인 메뉴ㆍMain Menu with Table
93. 팝업 메인 메뉴ㆍPop-Up Main Menus
94. 슬라이딩 메뉴ㆍSliding Menus
95. 더블 슬라이딩 메뉴ㆍDouble-Sliding Menus
96. 2단 탭 메뉴(Double-Layered Tab Menus
97. 회전 메뉴ㆍCarrousel
98. 원형 메뉴ㆍCircular Menus
99. 스핀 메뉴ㆍSpin Menus
100. 옵션 메뉴ㆍOption Menus
101. 컨텍스트 메몴ㆍContext Menus
102. 스스로 움직이는 메뉴ㆍSelf-Moving Menus
103. 플로팅 메뉴ㆍFloating Menus
104. 플라이 아웃 메뉴ㆍFly-Out Menus
105. 풀업 메뉴ㆍPull-Up Menu
106. 반복 메뉴ㆍRepeated Menu
107. 트리 테이블ㆍTree Table
108. TV 스케줄 메뉴ㆍTV Schedule Menus
컨트롤 바ㆍControl Bar
109. 내비게이션 바ㆍNavigation Bars
110. 커스텀 내비게이션 바ㆍCustom Navigation Bar
111. 정보성 내비게이션 바ㆍInformative Navigation Bars
112. 실행 바ㆍAction Bar
113. 아이덴티티 바ㆍIdentity Bar
114. 이중 상태 바ㆍDouble-High Status Bar
115. 제목 바ㆍTitle Bar
116. 소제목 바ㆍSub-Title Bar
117. 탭 바ㆍTab Bars
118. 커스텀 탭 바ㆍCustom Tab Bar
119. 슬라이딩 탭 바ㆍSliding Tab Bars
120. 툴 바ㆍToolbar
121. 커스텀 툴 바ㆍCustom Toolbar
122. 정보성 툴 바ㆍInformative Toolbars
123. 알림 바ㆍNotification Bar
124. 정보 바ㆍInformation Bar
125. 다운로드 바ㆍDownload Progress Bar
126. 재생 컨트롤 바ㆍPlayback Control Bar
127. 미니 재생 컨트롤 바ㆍMini Playback Control Bar
128. 자동 접힘 내비게이션 바ㆍAuto-Collapsible Navigation Bar
129. 슬라이드업 바ㆍSlide-Up Bar
130. 키보드 툴 바ㆍKeyboard Toolbars
131. 스크롤 바ㆍScroll Bar
버튼ㆍButtons
132. 내비게이션 버튼ㆍNavigational Button
133. 둥근 사각형 버튼ㆍRounded Rectangle Button
134. 자세히 보기 버튼ㆍDetail Disclosure Button
135. 실행 버튼ㆍAction Button
136. 완료 버튼ㆍDone Button
137. 정보 버튼ㆍInfo Button
138. 설정 버튼ㆍSetting Button
139. 마이크로폰 버튼ㆍMicrophone Button
140. 소거 버튼ㆍDestructive Button
141. 삭제 제어 버튼ㆍDelete Control Button
142. 삭제 버튼ㆍDelete Button
143. 가로 행 추가 버튼ㆍRow Insert
144. 전체 삭제 버튼ㆍButton for Delete All
145. 라디오 버튼ㆍRadio Button
146. 체크 버튼ㆍCheck Button
147. 더 보기 탭ㆍMore Tab
148. 분절화된 컨트롤ㆍSegmented Control
149. 액션 시트ㆍAction Sheet
150. 푸시 버튼 스위치ㆍPush-Button Switch
151. 토글 스위치ㆍToggle Switch
152. 사이드 탭 컨트롤ㆍSide Tab Contorls
153. 인라인 옵션 컨트롤ㆍInline Option Controls
154. 블라인드 버튼ㆍWindow Shade Button
155. 슬라이드 버튼ㆍSlide Button
156. 유인 버튼ㆍAffordable Button
157. 구독 버튼ㆍSubscribe Button
158. 확대 버튼ㆍZoom-In Button
159. 동기화 버튼ㆍSync Button
160. 이미지 맵 버튼ㆍImage Map Button
161. 캡션 버튼ㆍCaption Button
162. 설명 버튼ㆍDescription Button
163. 전후 이동 버튼ㆍBack and Forth Button
164. 페이지 내 이동 버튼ㆍButtons for Browsing in a Page
165. 모바일 웹 버튼ㆍGo Button for Transition to the Web
166. 더 보기 버튼ㆍMore Button
167. 쇼하이드 버튼ㆍShow-Hide Button
168. 모서리 버튼ㆍDog-Ear Button
169. 업데이트 배너 버튼ㆍBanner Button for Update
170. 미동작 버튼ㆍNon-Actionable Button
171. 자동회전 잠금 버튼ㆍAuto-Rotation Lock Button
172. 큰 버튼ㆍBig Button
173. 버튼 스택ㆍStack of Buttons
174. 버튼 배지ㆍButton Badge
175. 긴 레이블ㆍControls with Long Labels
176. 인라인 링크ㆍInline Links
얼럿ㆍAlerts
177. 버튼 없는 얼럿ㆍAlert without Any Button
178. 텍스트 박스 얼럿ㆍAlert with Text Box
179. 원 버튼 얼럿ㆍOne Button Alert
180. 투 버튼 얼럿ㆍTwo Buttons Alert
181. 상태 표시기 얼럿ㆍAlert with Progress Indicator
182. 프롬프트 얼럿ㆍAlert with Prompt
183. 체크 박스 얼럿ㆍAlert with Checkbox
184. 토스트 메시지ㆍToast Message
픽커ㆍPickers
185. 스피너ㆍSpinner
186. 싱글 픽커ㆍSingle Picker
187. 멀티 픽커ㆍMultiple Picker
188. 연결된 픽커ㆍLinked Picker
189. 시간 픽커ㆍTime Picker
190. 날짜 픽커ㆍDate Picker
191. 캘린더ㆍCalendar
192. 텍스트 픽커ㆍText Picker
193. 커스텀 픽커ㆍCustom Picker
194. 컬러 픽커ㆍColor Picker
테이블과 리스트ㆍTable & Lists
195. 단순한 리스트ㆍSimple List
196. 그룹화된 리스트ㆍGrouped List
197. 목록화된 리스트ㆍIndexed Lists
198. 모듈화된 리스트ㆍModular Lists
199. 상세한 리스트ㆍDetailed Lists
200. 복잡한 리스트ㆍList with Complicated Structure
201. 인덱스 리본ㆍIndex Ribbon
202. 피시아이 인덱스 리본ㆍFisheye Index Ribbon
203. 카드 인덱스ㆍCard Index
204. 커버 플로우ㆍCover Flow
205. 더 보기 표시ㆍDisclosure Indicator
206. 더 보기 리스트ㆍList for More Results
207. 다중 선택 리스트ㆍMulti-Selection Lists
208. 이동 가능한 리스트ㆍMovable Lists
209. 방문한 리스트ㆍVisited List
210. 추천 리스트ㆍFeatured List
211. 풀다운 옵션 리스트ㆍPull-down Option Lists
212. 강조된 리스트ㆍMarked Lists
213. 열고 닫히는 인덱스 바ㆍOpenable & Closable Index Bar
214. 위시 리스트ㆍWish List
215. 상품 리스트ㆍProduct Lists
216. TOCㆍTable of Contents
217. 시간표ㆍtimetable
218. 프레임화된 테이블(Framed Table
219. 데이터 테이블ㆍData Table
220. 테이블 헤더ㆍTable Header
221. 테이블 소터ㆍTable Sorter
222. A-Z 인덱스ㆍA-Z Index
223. 테이블 범례ㆍTable Legend
224. 이동식 데이터 셀ㆍMoving Data Cell
225. 포토 갤러리ㆍPhotos Gallery
226. 포토 스택ㆍStack of Photos
227. 폴더링ㆍFoldering
228. 캡션ㆍCaption
229. 순서 매기기ㆍOrdered Contents
230. 숫자 레이블ㆍNumbered Label
입력 요소ㆍInput Elements
231. 텍스트 필드ㆍText Field
232. 키보드 커서ㆍKeyboard Cursor
233. 텍스트 카운터ㆍText Counter
234. 구조화된 입력 형식ㆍStructured Input Format
235. 관대한 입력 형식ㆍForgiving Input Format
236. 코멘트 뷰ㆍComment View
237. 플레이스홀더 텍스트ㆍPlaceholder Text
238. 입력 힌트ㆍInput Hints
239. 인스턴트 입력ㆍInstant Input Mode
240. 텍스트 필드 하이라이팅ㆍText Field Highlighting
241. 빈칸 채우기ㆍFill In The Blanks
242. 터치 앤 홀드 컨트롤ㆍTouch-and-Hold Control
243. 커스텀 키보드ㆍCustom Keyboard
244. 커스텀 숫자 키패드ㆍCustom Numeric Keypad
245. 슬라이더ㆍSlider
246. 더블 슬라이더ㆍDouble Slider
247. 맞춤 슬라이더 썸ㆍCustom Slider Thumb
248. 텍스트 크기 조절기ㆍText Enlarger
표시 및 마크ㆍIndicator & Mark
249. 동작 표시기ㆍActivity Indicator
250. 푸시 알림ㆍPush Notifications
251. 페이지 표시ㆍPage Indicator
252. 스크린 컬ㆍScreen Curl
253. 가로 행 조정 표시ㆍRow Reorder
254. 다운로드 표시기ㆍDownload Indicator
255. 소극적인 알림ㆍPassive Notifications
256. 시선 끌기 아이콘ㆍSmall Icon for Spotlight
257. 캘린더 아이콘ㆍCalendar Icon
258. 상태 아이콘ㆍStatus Icon
259. 식별자ㆍIdentifier
260. 체크 마크ㆍCheckmark
261. 연락 가능 표시ㆍPresence Indicator
262. 즐겨찾기 마크ㆍFavorite Mark
263. 비디오 마크ㆍVideo Mark
264. 로딩 커버ㆍLoading Cover
265. 그림 노트ㆍNotes in the Picture
266. 포토 마크ㆍPhoto Mark
267. 코너 리본ㆍCorner Ribbon
268. 피플 마크ㆍPeople Mark
269. 프렌즈 마크ㆍFriends Mark
270. 네임 태그ㆍName Tag
271. 코멘트 마크ㆍComment Mark
272. 데모 마크ㆍDemo Mark
273. 레벨 표시기ㆍLevel Indicator
274. 생략 기호ㆍEllipsis Mark In Button
275. 축약된 심볼ㆍAbbreviated Symbols
276. 브레드크럼ㆍBreadcrumbs
검색ㆍSearching
277. 검색 바ㆍSearch Bar
278. 범위 바ㆍScope Bar
279. 앞뒤로 이동 가능한 검색 바ㆍSearch Bar with Back and Forth Buttons
280. 상세 검색ㆍAdvanced Search
281. 검색 모드ㆍSearch Mode
282. 입력된 검색 필드ㆍPre-filled Search Field
283. 자동 완성ㆍAutocomplete
284. 연필 버튼ㆍPencil Button
285. 인스턴트 서치ㆍInstant Search
286. 검색 결과ㆍSearch Results
287. 검색 요약ㆍSearch Result Summary
288. 키워드 매치ㆍKeyword Matches
289. 검색 결과 하이라이팅ㆍSearch Results Highlighting
290. 태그 클라우드ㆍTag Cloud
291. 디자인 검색ㆍDesign Search
지도와 위치ㆍMap & Location
292. 구글 맵ㆍGoogle Map
293. 커스텀 맵ㆍCustom Map
294. 정보 버블ㆍInformation Bubble
295. 위치 버튼ㆍLocation Button
296. 위치 입력기ㆍLocator
297. 길 찾기ㆍWayfinding
298. 맵 핀ㆍMap Pin
299. 맵 범례ㆍMap Legend
300. 맵 소터ㆍMap Sorter
301. 레이더 맵ㆍRadar Map
302. 찾아가는 길 리스트ㆍDirections List
303. 내비게이션 뷰ㆍNavigation View
304. AR 뷰ㆍAugmented Reality View
시각화 기법ㆍVisualization
305. 명확한 대비ㆍClear Contrast
306. 폰트 대비ㆍFonts Contrast
307. 명확한 하이라이팅ㆍClear Highlighting
308. 선택된 아이템ㆍSelected Item
309. 색으로 구분된 영역ㆍColor Coded Section
310. 교차 배색ㆍAlternating Row Colors
311. 시각적 단위ㆍVisual Chunk
312. 큰 글자ㆍLarge Type
313. 큰 숫자ㆍLarge Numbers
314. 강한 색의 버튼ㆍStrong Color Button
315. 다채색 컨트롤ㆍMulti-Color Controls
316. 진한 배경ㆍDeep Background
317. 무늬 있는 배경ㆍTextured Background
318. 종이 배경ㆍPaper Background
319. 포스트잇ㆍPost-it
320. 그림으로 선택하기ㆍIllustrated Choices
321. 일러스트레이션 사용하기ㆍUsing Illustration
322. 그래픽 배지ㆍGraphic Badge
323. 말 풍선ㆍWord Balloons
324. 콜아웃ㆍCallout
325. 폴라로이드 프레임ㆍPolaroid Frame
326. 필름스트립ㆍFilmstrip
327. 스코어보드ㆍScoreboard
328. 사진 프레임ㆍPicture Frame
329. 모서리 다루기ㆍCorner Treatment
룩앤필ㆍLook & Feel
330. 은유적 디자인ㆍMetaphorical Design
331. 사실적인 디자인ㆍRealistic-Looking Design
332. 깔끔한 디자인ㆍClean Design
333. 대시보드 디자인ㆍDashboard Design
334. 자연스러운 형태ㆍNatural Shape
335. 나무 스타일ㆍWooden Style
336. 가죽 스타일ㆍLeather Style
337. 금속 스타일ㆍMetallic Style
338. 노트 스타일ㆍNotebook Paper Style
339. 모노톤 스타일ㆍMonotone Style
340. 올드 페이퍼 스타일ㆍOld Paper Style
341. 패브릭 스타일ㆍFabric Style
342. 매거진 스타일ㆍMagazine Style
343. 태그 스타일ㆍTag Style
344. 수채화 스타일ㆍWatercolor Style
345. 미니멀 스타일ㆍMinimal Style
346. 그런지 룩 스타일ㆍGrunge Look Style
소셜 네트워킹ㆍSocial Networking
347. 소셜 아이콘ㆍSocial Icon
348. 프로필 카드ㆍProfile Card
349. 프로필 페이지ㆍProfile Page
350. 소셜 프로필ㆍSocial Profile
351. 소셜 버튼ㆍSocial Button
352. 라이프스트림ㆍLifestream
353. 사용자 평가ㆍUser Rating
354. 찬성-반대 버튼ㆍThumb Up & Down Buttons
마케팅 요소ㆍMarketing Elements
355. 슬라이드업 배너ㆍSlide-up Banner
356. 리스트 타입의 배너 광고ㆍList-Like Banner AD
357. 중간 광고ㆍInterstitial AD
358. 가격표ㆍPrice Tag
359. 쿠폰ㆍCoupon
360. 관련 애플리케이션ㆍRelated Application
361. 회원제 콘텐츠ㆍMembers Only Content
|
|
smartPhone 개발쪽에 뛰어든지 얼마되지도 않았고, 이제 시작이지만... 하다보니 다른 프로그램밍을 하셨던 분이라면 스마트폰은 프로그래밍 기술력보다는 아이디어와 디자인의 승부가 아닐까 싶은 생각이 드는데, 특히나 작은 화면에서 디자인이 만만치가 않습니다.
모방은 창조의 어머니, 독창적이고 창조적인 사용자 인터페이스 프로그램을 만들고 싶다면 어떻게 해야 할까?
하지만 모방은 창조의 어머니라고, 다른 사람들의 잘만들어놓은 화면디자인을 모양이나 색깔은 물론 폰트 모양, 사이즈까지 따라해보면서 습작으로 연습을 하다보면 참 많은 도움이 되는데,
이 책은 스마트폰의 다양한 기능을 아는것외에, 벤치마킹을 하기에도 좋고, 다양하고 기발한 앱들에게서 새로운 아이디어가 떠오를수도 있는 아주 괜찮은 책이 아닐까 싶습니다.
모바일 관련 프로그래머나 디자이너분이라면 라이브러리처럼 한권 가지고 보시면 좋을듯 합니다