 관련분류 |
|
| 책소개 |
|
지금 개발하고 있는 소프트웨어, 웹 사이트, 모바일 기기나 그 밖의 디지털 제품의 로열티를 증가시키고 경쟁상품보다 먼저 선택 받기를 원하는가?
이 책은 아이팟과 같은 모바일 디바이스를 포함한 최고의 웹 사이트, 소프트웨어 등에서 수집한 디자인의 지혜를 담고 있다. 곧바로 적용할 수 있는 아이디어가 풍부하게 들어있기 때문에 더 이상 아이디어를 찾는다고 시간과 노력을 낭비할 필요가 없을 것이다.
소프트웨어 개발자, 인터랙션 디자이너, 그래픽 디자이너뿐만 아니라 사용자를 지향하는 소프트웨어(user facing software)를 만들고자 하는 모든 사람들에게 추천한다. 인터페이스 디자인에 대한 해결책을 찾고 있을 때, 특별한 테크닉을 배우고자 할 때, 혹은 창의적인 도움말을 원할 때도 이 책을 사용할 수 있다.
역자 블로그 http://blog.naver.com/ououmomo |
|
| 저자 및 역자 소개 |
|
 |
저자 : 제니퍼 티드웰
|
 |
인터랙션 디자이너이자 소프트웨어 개발자로 테크니컬 컴퓨팅 소프트웨어 제조사인 MathWorks에서 일하고 있다. 그녀는 디자인과 데이터 구조 분석, 시각화 툴을 전문적으로 다루고 있으며 MATLAB 데이터 툴의 새로운 디자인을 개발하였다. MATLAB은 자동차, 비행기, 단백질을 개발하고 우주 이론을 연구하는 세계 각국의 리서처, 학생, 엔지니어들에게 쓰이는 소프트웨어이다. 저자는 웹 사이트 디자인에 대해서도 전문적인 지식을 가지고 있으며 초창기 리치 인터넷 애플리케이션(RIA) 기술에 열중하여 2000년 초기에 Curl을 디자인하고 개발하는데 도움을 주었다. 제니퍼는 MIT에서 기술 교육을 받았으며 매사스추세츠 예술 대학에서 디자인 교육을 받았으나, 아직까지도 배움의 길을 멈추지 않고 있다. 그녀는 1997년부터 사용자 인터페이스 패턴들을 조사해왔다. 그 외에도 그림을 그리고 글을 쓰는 창조적인 활동에 몰입해 있으며, 뉴 잉글랜드의 야외에서 바이크, 보트, 산책, 스키, 등산으로 많은 시간을 보내고 있다.
http://jtidwell.net에서 저자의 개인 웹 사이트를 볼 수 있다. |
|
|
역자 : 김소영
|
|
| ououmomo@gmail.com 이화여자대학교 화학과를 거쳐 국민대학교 시각디자인학과를 졸업하였다. 다년간 UI 전문 회사에서 PC 애플리케이션, 모바일, DTV, 내비게이션, 홈네트워크, 생활 가전 등 다양한 제품의 인터페이스 프로젝트를 진행하며, GUI 디자인, UI 설계, 사용자 조사, 리서치와 기획에 이르기까지 유저 인터페이스에 대한 깊이 있는 실무 경험을 쌓았다. |
|
| 목차 |
|
|
|
• 목차보기
|
|
| |
|
01장. 사용자들은 무엇을 하는가
목적을 이루기 위한 수단
사용자 조사의 기본
사용자들의 배우고자 하는 동기
패턴
01 안전한 탐색(safe exploration)
02 즉각적인 만족(instant gratification)
03 최소한의 충족(satisficing)
04 흐름 변화(changes in midstream)
05 선택 미루기(deferred choices)
06 구조 늘리기(incremental construction)
07 습관화(habituation)
08 공간 기억(spatial memory)
09 미래 예측 기억(prospective memory)
10 능률적인 반복(streamlined repetition)
11 키보드만 사용하기(keyboard only)
12 다른 이들의 충고(other people's advice)
02장. 콘텐츠 구성하기: 정보 구조와 애플리케이션 구조
정보 구조의 기본 : 나누기
물리적인 구조
패턴
13 투 패널 셀렉터(two-panel selector)
14 캔버스 플러스 팔레트(canvas plus palette)
15 원 윈도우 드릴다운(one-window drilldown)
16 얼터네이티브 뷰(alternative views)
17 위자드(wizard)
18 엑스트라 온 디맨드(extras on demand)
19 인트리깅 브랜치(intriguing branches)
20 멀티 레벨 헬프(multi-level help)
03장. 둘러보기: 내비게이션, 사인, 길 찾기
머물러서 찾기
내비게이션의 비용
패턴
21 클리어 엔트리 포인트(clear entry points)
22 글로벌 내비게이션(global navigation)
23 허브 앤 스포크(hub and spoke)
24 피라미드(pyrimid)
25 모달 패널(modal panel)
26 시퀀스 맵(sequence map)
27 브레드크럽스(breadcrumbs)
28 주석이 있는 스크롤 바(annotated scrollbar)
29 컬러 코디드 섹션(color-coded sections)
30 애니메이티드 트랜지션(animated transition)
31 이스케이프 해치(escape hatch)
04장. 페이지 구성하기: 페이지 요소의 레이아웃
페이지 레이아웃의 기본
패턴
32 비주얼 프레임워크(visual framework)
33 센터 스테이지(center stage)
34 타이틀 섹션(tilted sections)
35 카드 스택(card stack)
36 클로저블 패널(closable panels)
37 무버블 패널(movable panels)
38 오른쪽/왼쪽 배열(right/left alignment)
39 대각선 균형(diagonal balance)
40 속성 시트(property sheet)
41 리스판시브 디스클로저(responsive disclosure)
42 리스판시브 인에이블링(responsive enabling)
43 리퀴드 레이아웃(liquid layout)
05장. 실행하기: 액션과 커맨드
푸싱 바운더리
패턴
44 버튼 그룹(button groups)
45 액션 패널(action panel)
46 중요한 '완료' 버튼(prominent 'done' button)
47 스마트 메뉴 아이템(smart menu items)
48 프리뷰(preview)
49 프로그레스 인디케이터(progress indicator)
50 캔슬러빌리티(cancelability)
51 멀티 레벨 언두(multi-level undo)
52 커맨드 히스토리(command history)
53 매크로(macros)
06장. 복잡한 데이터 보여주기: 트리, 테이블, 그리고 다른 정보 그래픽들
정보 그래픽의 기본
패턴
54 오버뷰 플러스 디테일(overview plus detail)
55 데이터팁(datatips)
56 다이내믹 쿼리(dynamic queries)
57 데이터 브러싱(data brushing)
58 로컬 주밍(local zooming)
59 로우 스트리핑(row striping)
60 소터블 테이블(sortable table)
61 점프 투 아이템(jump to item)
62 뉴 아이템 로우(new-item row)
63 캐스캐이딩 리스트(cascaing lists)
64 트리 테이블(tree table)
65 멀티 Y 그래프(multi-Y graph)
66 스몰 멀티플즈(small multiples)
67 트리맵(treemap)
07장. 사용자로부터 인풋 얻기: 폼과 컨트롤
폼 디자인의 기본
컨트롤 선택
패턴
68 관용적인 포맷(forgiving format)
69 구조화된 포맷(structured format)
70 빈 곳 채우기(fill-in-the-blanks)
71 인풋 힌트(input hints)
72 인풋 프롬프트(input prompt)
73 자동 완성(autocompletion)
74 드롭다운 선택자(dropdown chooser)
75 그림으로 되어 있는 선택 항목(illustrated choices)
76 리스트 빌더(list builder)
77 굿 디폴트(good defaults)
78 동일한 페이지에서 오류 메시지(same-page error messages)
08장. 빌더와 편집기
편집기 디자인의 기본
패턴
79 에디트 인 플레이스(edit-in-place)
80 스마트 셀렉션(smart selection)
81 컴포지트 셀렉션(composite selection)
82 원 오프 모드(one-off mode)
83 스프링 로디드 모드(spring-loaded mode)
84 제한된 리사이즈(constrained resize)
85 매그너티즘(magnetism)
86 가이드(guides)
87 페이스트 변형 기능(paste variations)
09장. 보기 좋게 만들기: 비주얼 스타일과 심미성
동일한 콘텐츠, 다른 스타일
비주얼 디자인의 기본
데스크탑 애플리케이션을 위한 디자인이란 무엇을 뜻하는가
패턴
88 깊이 있는 배경(deep background)
89 적은 색감, 많은 컬러값(few hues, many values)
90 코너 처리(corner treatments)
91 폰트를 되풀이 사용하는 보더(borders that echo fonts)
92 헤어라인(hairlines)
93 폰트 대비(contrasting font weights)
94 스킨(skins)
참고문헌
|
|
|
|
|
| 줄거리 |
|
| 1장에서 5장까지는 어떠한 인터페이스를 디자인하더라도 적용할 수 있는 내용이다. 데스크탑 애플리케이션, 웹 애플리케이션, 웹 사이트, 하드웨어 디바이스 혹은 그밖에 어떠한 것에도 공통적으로 쓰인다. ● 1장 "사용자들은 무엇을 하는가"에서는 좋은 인터페이스를 대하는 사용자들의 일반적인 행동양식과 사용 패턴에 대해 설명한다. ● 2장 "콘텐츠 구성하기"에서는 상호작용성이 높은 인터페이스에 적용되는 정보 구조를 다루고 있다. 동일한 콘텐츠지만 구성이 다른 인터페이스, 사용자가 한 번에 볼 수 있는 콘텐츠의 양, 그리고 윈도우, 패널, 페이지를 가장 효과적으로 사용하는 방법에 대해서 이야기한다. ● 3장 "둘러보기"에서는 내비게이션에 대해서 논의한다. 페이지들 간에서, 윈도우들 사이에서, 그리고 넓은 가상공간 안에서 인터페이스를 이동하는 패턴들을 설명한다. ● 4장 "페이지 구성하기"에서는 레이아웃과 페이지의 요소들을 배치시키는 패턴을 다룬다. 모든 요소를 어떤 방식으로 적절한 위치에 놓았을 때 의미를 단순화하고 잘 전달할 수 있는지를 이야기한다. ● 5장 "실행하기"에서는 액션과 커맨드를 표현하는 방법에 대해 말한다. 앞서 인터페이스의 명사를 다뤘다면 이 장에서는 '동사(verbs)'를 다루기 위해 이러한 패턴을 사용한다. 이어지는 6장에서 8장까지는 특별한 인터페이스를 디자인하는 경우에 사용되는 개념이다. 이 장 전체를 다 읽는 것이 좋겠지만 실제 프로젝트에서는 여기에 나타나는 모든 개념을 다 사용할 일은 아마도 없으리라 생각한다. 6장과 7장은 최근 인터페이스에서 자주 쓰이는 트리 구조, 테이블, 폼을 다루고 있기 때문에 가장 광범위하게 적용할 수 있는 내용이다. ● 6장 "복잡한 데이터 보여주기"에서는 일반적인 트리 구조, 테이블, 차트, 그리고 정보 그래픽 패턴을 포함하고 있다. 이 장에서는 데이터의 인지적 양상에 대해 논의하고, 지식과 의미를 전달하기 위해 이 패턴들을 어떻게 이용해야 하는지에 대해 이야기한다. ● 7장 "사용자로부터 인풋 얻기"에서는 폼과 컨트롤을 다루고 있다. 이 장에서는 다양한 컨트롤을 위한 데이터 테이블을 패턴에 따라 설명한다. ● 8장 "빌더와 에디터"에서는 위지위그 그래픽 편집기와 텍스트 편집기에서 자주 사용되는 기술과 패턴에 대해 논의한다. 마지막 장은 인터페이스 디자인 과정에서 가장 끝부분에 해당하지만 디자인에 중요하게 적용되는 내용이다. ● 9장 "보기 좋게 만들기"에서는 심미성과 적합한 마감에 대해 다룬다. 그래픽 디자인의 원리와 인터페이스의 동작이 확정된 후 룩앤필을 완성하는 방법과 그 이유를 알려주는 패턴이 나와있다. 이 책의 예제들은 여러 가지 이유에 근거하여 선택하였다. 그 중 가장 중요한 이유는 주어진 패턴과 컨셉을 얼마나 잘 나타낼 수 있는가 하는 것이다. 물론 일반적인 디자인 적합성, 인쇄 적합성 및 데스크탑 애플리케이션, 웹 사이트, 디바이스 등을 포함한 다양한 플랫폼, 그리고 독자들에게 얼마나 잘 알려져 있으며 널리 사용되고 있는 애플리케이션인가 하는 사항들도 포함되어 있다. 이 예제들은 마이크로소프트, 애플 소프트웨어, 특정 웹 사이트, 쉽게 찾아 볼 수 있는 소프트웨어와 디바이스를 중점적으로 다루고 있다. 그렇다고 해서 이 책에 나와있는 제품들이 항상 좋은 디자인의 본보기라고 말하는 것은 아니다. 또한 널리 알려지지 않은 애플리케이션이라고 해서 수많은 디자이너들에 의해 이루어진 훌륭한 작업을 가볍게 다루려고 하는 마음도 절대 없다. 이 책에 나와 있는 패턴에 맞는 적합한 예제를 알고 있는 분은 언제라도 저자에게 제안해주기 바란다. |
|
|
• 출판사 리뷰
|
|
| |
|
|
매력적이고 간편한 UI를 만드는 실천적 지혜
손에서 또는 모니터 속에서 매일매일 휴대폰, 모바일 기기, 웹 사이트, 애플리케이션 등을 만난다. 그렇다고 모든 제품이 소비자에게 선택을 받고 일상에 사용되는 것은 아니다. 비슷한 성능의 고만고만한 것이라면, 매력적인 디자인에 손이 가고 간편한 인터페이스에 빠져들게 된다.
바야흐로 좋은 인터페이스가 성공의 키워드로 자리매김했다고 해도 과언이 아니다.
지금 개발하고 있는 소프트웨어, 웹 사이트, 모바일 기기나 그 밖의 디지털 제품의 로열티를 증가시키고 경쟁상품보다 먼저 선택받기를 원하는가?
이 책은 아이팟과 같은 모바일 디바이스를 포함한 최고의 웹 사이트, 소프트웨어 등에서 수집한 디자인의 지혜를 담고 있다. 곧바로 적용할 수 있는 아이디어가 풍부하게 들어있기 때문에 더 이상 아이디어를 찾는다고 시간과 노력을 낭비할 필요가 없을 것이다.
다음과 같은 내용을 다루고 있다.
* 좋은 인터페이스를 대하는 사용자의 일반적인 행동과 사용 패턴
* 상호작용성이 높은 인터페이스에 적용되는 정보 구조
* 가상 공간 안에서 인터페이스를 이동하는 패턴
* 레이아웃과 페이지 요소들을 배치하는 패턴
* 액션과 커맨드를 표현하는 방법
* 일반적인 트리 구조, 테이블, 차트 그리고 정보 그래픽 패턴
* 폼과 컨트롤을 다루는 방법
* WYSIWYG 그래픽 편집기와 텍스트 편집기에서 자주 사용되는 기술과 패턴
* 그래픽 디자인의 원리와 인터페이스의 동작이 확정된 후 룩앤필을 완성하는 방법
이 책에서는 가장 많이 나타나는 문제 유형별로 실용적인 디자인 어드바이스와 다양한 예제를 담고 있어서, 소프트웨어 개발자, 인터랙션 디자이너, 그래픽 디자이너뿐만 아니라 사용자를 지향하는 소프트웨어를 만들고자 하는 모든 사람들에게 가치 있는 자료가 될 것이다.
 추천평 |
 |
|
 |
|
"정말 훌륭하다! UI 디자인 패턴에 관한 가장 훌륭한 책이며 동시에 지난 수년간 인터랙션 디자인 분야에서 새로 나온 책 중 최고이다. 명쾌하고, 시원하며, 힘이 넘치는 이 글은 초보자와 전문가를 동시에 만족시킬 수 있는 근본적이며 정교한 개념들을 모두 다루고 있다. 기존의 진부한 '패턴 언어'에서 드러나는 사소한 문제와 인터랙션 디자인의 딜레마를 훌쩍 뛰어넘는다. 이 책은 단지 패턴을 모아 놓은 집합이 아니라 현대의 비주얼 디자인과 인터랙션 디자인의 완벽한 코스이다. 모든 디자이너들이 반드시 읽어야만 할 필독서이다." - 래리 컨스탄틴, IDSA, 디자이너 수상자이며 『Software for Use』 (Addison-Wesley, 1999)의 공동 저자.
"디자이닝 인터페이스는 모든 이들이 인터페이스 디자인 커뮤니티에서 얻은 지혜와 경험을 배울 수 있게 한다. 이제부터는 디자인을 할 때 4가지를 가지고 작업을 하게 될 것 같다. 스케치 북, 포토샵, 플래시, 그리고 이 디자이닝 인터페이스 책. 이 책은 디자인 툴로 영원히 남을 것이다. 또한 브레인 스토밍을 도와주고 내 작업을 평가해주기도 한다. 인터페이스를 창조하는 작업과 관련된 모든 이에게 추천하고 싶다." - 폴 후버, 제품 디자이너, 마이크로소프트의 모바일 PC 사업팀 - |
|
|
 |
|
 |
|
|
|
+ 
(
Comments (0)