한빛출판네트워크

매력적이고 간편한 UI를 만드는 실천적 지혜

손에서 또는 모니터 속에서 매일매일 휴대폰, 모바일 기기, 웹 사이트, 애플리케이션 등을 만난다. 그렇다고 모든 제품이 소비자에게 선택을 받고 일상에 사용되는 것은 아니다. 비슷한 성능의 고만고만한 것이라면, 매력적인 디자인에 손이 가고 간편한 인터페이스에 빠져들게 된다. 바야흐로 좋은 인터페이스가 성공의 키워드로 자리매김했다고 해도 과언이 아니다.

지금 개발하고 있는 소프트웨어, 웹 사이트, 모바일 기기나 그 밖의 디지털 제품의 로열티를 증가시키고 경쟁상품보다 먼저 선택받기를 원하는가?

이 책은 아이팟과 같은 모바일 디바이스를 포함한 최고의 웹 사이트, 소프트웨어 등에서 수집한 디자인의 지혜를 담고 있다. 곧바로 적용할 수 있는 아이디어가 풍부하게 들어있기 때문에 더 이상 아이디어를 찾는다고 시간과 노력을 낭비할 필요가 없을 것이다.

다음과 같은 내용을 다루고 있다.

• 좋은 인터페이스를 대하는 사용자의 일반적인 행동과 사용 패턴
• 상호작용성이 높은 인터페이스에 적용되는 정보 구조
• 가상 공간 안에서 인터페이스를 이동하는 패턴
• 레이아웃과 페이지 요소들을 배치하는 패턴
• 액션과 커맨드를 표현하는 방법
• 일반적인 트리 구조, 테이블, 차트 그리고 정보 그래픽 패턴
• 폼과 컨트롤을 다루는 방법
• WYSIWYG 그래픽 편집기와 텍스트 편집기에서 자주 사용되는 기술과 패턴 * 그래픽 디자인의 원리와 인터페이스의 동작이 확정된 후 룩앤필을 완성하는 방법

이 책에서는 가장 많이 나타나는 문제 유형별로 실용적인 디자인 어드바이스와 다양한 예제를 담고 있어서, 소프트웨어 개발자, 인터랙션 디자이너, 그래픽 디자이너뿐만 아니라 사용자를 지향하는 소프트웨어를 만들고자 하는 모든 사람들에게 가치 있는 자료가 될 것이다.

추천평

"정말 훌륭하다! UI 디자인 패턴에 관한 가장 훌륭한 책이며 동시에 지난 수년간 인터랙션 디자인 분야에서 새로 나온 책 중 최고이다. 명쾌하고, 시원하며, 힘이 넘치는 이 글은 초보자와 전문가를 동시에 만족시킬 수 있는 근본적이며 정교한 개념들을 모두 다루고 있다. 기존의 진부한 "패턴 언어"에서 드러나는 사소한 문제와 인터랙션 디자인의 딜레마를 훌쩍 뛰어넘는다. 이 책은 단지 패턴을 모아 놓은 집합이 아니라 현대의 비주얼 디자인과 인터랙션 디자인의 완벽한 코스이다. 모든 디자이너들이 반드시 읽어야만 할 필독서이다."
- 래리 컨스탄틴, IDSA, 디자이너 수상자이며 『Software for Use』 (Addison-Wesley, 1999)의 공동 저자.

"디자이닝 인터페이스는 모든 이들이 인터페이스 디자인 커뮤니티에서 얻은 지혜와 경험을 배울 수 있게 한다. 이제부터는 디자인을 할 때 4가지를 가지고 작업을 하게 될 것 같다. 스케치 북, 포토샵, 플래시, 그리고 이 디자이닝 인터페이스 책. 이 책은 디자인 툴로 영원히 남을 것이다. 또한 브레인 스토밍을 도와주고 내 작업을 평가해주기도 한다. 인터페이스를 창조하는 작업과 관련된 모든 이에게 추천하고 싶다."
- 폴 후버, 제품 디자이너, 마이크로소프트의 모바일 PC 사업팀

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)   

참고문헌