추가 적립 안내

『THE DESIGN OF SITES』 한국어판. 이 책은 사용자 경험을 중시하는 고객 중심 웹을 설계, 기획하고 디자인하는 데 바이블이 될 107가지 웹사이트 패턴을 망라한 가이드북이다. 웹 기획자, 디자이너 등 웹 종사자가 반드시 알아야 할 웹사이트 패턴을 정리하고, 잘 만든 웹사이트 설계에서 볼 수 있는 개념, 패턴, 방법 그리고 실제 적용 사례를 집대성하였다.

The Design of Sites 한국어판
고객 중심 웹 기획을 위한 웹사이트 디자인 패턴 107 바이블

사용자 경험을 중시하는 고객 중심 웹을 설계, 기획하고 디자인하는 데 바이블이 될 107가지 웹사이트 패턴을 망라한 완벽 가이드. 웹 기획자, 디자이너 등 웹 종사자가 반드시 알아야 할 웹사이트 패턴을 정리하고, 잘 만든 웹사이트 설계에서 볼 수 있는 개념, 패턴, 방법 그리고 실제 적용 사례를 집대성한 책이다. 이 책에서 제시하는 각종 도구와 기법을 통해 방문자의 웹사이트 경험을 개선하고 고객 만족도를 높이는, 모두에게 맞는 웹사이트 설계를 할 수 있다.

이 책을 참고하면 야후나 구글 같은 대기업처럼 많은 연구인력을 보유하지 않고도 성공 기업이 체득하고 사이트에 적용한 내용을 여러분의 사이트에 동일하게 활용할 수 있다.
- 아이린 오 / 구글 사용자 경험 팀 디렉터이자 前 야후! 사용자 경험과 사용자 디자인 팀 부사장

이 책에서는 잘 만든 웹사이트 설계에서 볼 수 있는 개념, 패턴, 방법 그리고 실제 적용 예시를 모아놓아 누구나 참고할 수 있다. 여기서 제시하는 각종 도구와 기법을 통해 고객의 웹사이트 경험을 개선하고 고객 만족도를 높이는, 모두에게 맞는 웹사이트 설계를 할 수 있다.

우선 웹사이트의 기반이 되는 설명 내용을 살펴본 이후 사이트 설계를 할 때 사용하는 13개의 주요 디자인 패턴 그룹을 설명한다. 패턴을 사용하면 모든 부분을 새롭게 만들지 않고서도 사이트에서 발생할 수 있는 여러 가지 문제를 해결할 수 있다. 패턴에서 다루는 내용은 견고한 내비게이션 프레임워크나 사이트에서 가장 중요한 메인 페이지를 만드는 것에서부터 고객에게 신뢰감을 주고 사이트의 효율을 높이는 데까지 다양하다.

이 책의 특징
● AJAX, 모바일 웹, 온라인 커뮤니티 등의 범위
● 전판의 90개 패턴에 블로그 사이트 형식 등 17가지 새로운 패턴 추가
● 20여 가지 패턴 내용 업데이트
● 450개의 컬러 스크린샷과 그래프 등 다양하고 화려한 볼거리
● 사이트맵, 스타일 시트, 동적인 구성요소, 고객 프로필 등 사이트의 주요 요소
● 쉽게 찾아볼 수 있도록 단원 별로 색을 구분해 시각적인 목차 구성
● 고객 요구와 비즈니스 요구 모두를 만족할 수 있는 균형 잡힌 사이트 설계 기법

이 책의 대상 독자
이 책은 웹사이트 기획과 디자인, 구현에 관련된 모든 이를 위한 책이며, 인터랙션 디자이너, 사용성 엔지니어, 정보 설계자, 시각 디자이너 등의 웹 디자인 전문가들 쪽에 좀 더 초점을 맞춘다. 그 밖에도 기업 임원에서부터 홍보 관리자, 소프트웨어 개발자, 컨텐츠 편집자까지 웹 개발 팀에 속한 모든 웹 종사자를 위해 쓰인 책이기도 하다. 최고의 팀이라면 고객 중심 기획의 철학을 이해하고 받아들일 것이다. 웹사이트가 구성되고 형태를 잡아가는 데 팀에 속한 모든 사람이 영향을 끼치기 때문이다.

웹 기획자
먼저 1장과 2장에서 고객 중심 디자인과 웹 디자인에 관한 패턴식 접근법의 동기를 이해한다. 고객 중심 디자인의 원칙(3장과 4장)이나 과정(5장)에 대한 충분한 배경 지식이 있다면, 3장에서 5장까지를 대충 훑어본 후 실제 패턴(2부)으로 넘어갈 수도 있다. 경험이 별로 없을 경우, 개발 중인 사이트가 어떤 종류든 간에 고객 중심 디자인과 개발에 관한 세 개 장(3장에서 5장)은 확실히 유용할 것이다.

비즈니스 관리자
고객 중심 디자인을 무시할 때의 사업적 영향과, 고객 중심으로 디자인된 사이트를 구축하는 데 필요한 원칙과 과정을 알기 위해 1장에서부터 5장을 읽는다. 특히 전자상거래 사이트의 경우 고객 중심 관점에서 생각하지 않으면 프로젝트가 실패할 위험성이 가장 크다. 1장부터 5장까지는 이런 위험을 감소시키고, 피처 크립(feature creep)을 줄이고, 구현과 유지보수에 들어가는 비용을 최소화할 수 있는 기법을 설명한다. 고객 중심 디자인은 개발 일정을 단축하고 전체적인 고객 만족 역시 증대시켜, 결과적으로는 클라이언트의 만족을 높여줄 것이다.

비즈니스 클라이언트
만약 여러분이 웹사이트 개발비를 대는 클라이언트라면, 처음 다섯 개 장을 읽어보라. 돈을 지불하는 클라이언트 입장에서는 왜 그렇게 고객 중심 기획을 강조하는지, 그리고 고객의 요구를 확실히 충족시키기 위해 디자인 팀에서 어떤 단계를 취해야 하는지에 특히 관심이 갈 것이다. 또 어떻게 해서 이 단계들이 실제로 여러분의 비용을 줄여주고 고객을 좀 더 행복하고 충성스럽게 만들어주는지 알게 될 것이다.

이 책에 쏟아진 각계의 찬사
IBM에서 국제 마케팅 역할을 맡은 덕택에 전 세계에서 가장 훌륭한 인터랙티브 에이전시나 사내 웹 팀들과 함께 일하는 이익을 누려왔다. 『The Design of Sites』를 읽다 보니 다년간의 전문적 진단에서 나온 통찰을 책으로 옮겨놓은 것이 고스란히 보인다. 인터넷 디자인 문제를 해결하고 예방하는 데 이렇게 실용적이고, 효과적이며, 쓰기 쉬운 책을 어디서도 본 적이 없다. 잊고 있던 것들을 일깨우고 신선한 시각을 얻기 위해 이 책을 항상 손 닿는 곳에 두자. 결코 실망하는 법이 없을 것이다.
- 존 실리오(JOHN CILIO)
IBM 시스템 x & z 스토리지 시너지, 마케팅 디렉터

『The Design of Sites』는 크리스토퍼 알렉산더가 패턴 언어에서 의도했던 것을 사용자 경험 디자인의 영역에서 뛰어나게 제시한다. 광범위하고 유용한 참고 자료다.
- 조지 해크먼 주니어(GEORGE HACKMAN, JR.)
오라클 코퍼레이션, 사용자 인터페이스 가이드라인, 패턴과 표준을 위한 사용자 경험 팀 디렉터

『The Design of Sites』는 내가 가진 최고의 사용성 도구 중 하나다. 이 책의 웹 UI 디자인 패턴을 사용해 투자에 상응하는 사용성의 가치를 최대한 얻어내는 방법을 클라이언트에게 쉽게 보여줄 수 있다.
- 클라우디아 앨든 케이스(CLAUDIA ALDEN CASE)
앨든 케이스 엔터프라이즈 사, 사용성 컨설턴트이며 인터랙션 디자이너

생물학 수업에서 이 책처럼 가르쳐줬다면 얼마나 좋았을까. 명쾌한 글, 비판의 여지가 없는 내용, 그리고 포괄적인 분류. 제작 도구로도 좋지만 영감의 원천으로도 훌륭하다. 진짜, 진짜 좋은 책이다. 웹사이트를 구축한다면 꼭 읽어보시라.
- 마크 캠벨(MARC CAMPBELL)
『Web Design Garage』 저자

이제 웹사이트를 디자인할 때마다 불필요한 일에 시간과 노력을 들이지 말자! 『The Design of Sites』는 웹사이트를 장르와 패턴의 관점에서 다시 생각하게 해준다. 이 책에 대략 설명된 것처럼 일단 패턴을 정하고 패턴에 맞는 모범 사례를 적용하고 나면, 디자인에 들어가는 노력이 50%로 줄어들 것이다…... 최소한!”
- 파완 R. 보라(PAWAN R. VORA)
쇠라 컴퍼니, 정보 설계 팀 부장

『The Design of Sites』의 내용은 초보자를 일주일 만에 노련한 전문가로 만들어줄 수 있을 것이다. 이 책의 주요 장에 들어 있는 정보를 얻기 위해 수많은 회사가 큰 돈을 지불한다는 사실을 잊지 말라.
- 존 실리오(JOHN CILIO)
IBM 시스템 x & z 스토리지 시너지, 마케팅 디렉터

이 책에는 일반 웹사이트 제작에서 해야 할 것과 하지 말아야 할 것에 대한 간편한 체크리스트를 많이 설명한다. 저자들의 충고를 따르는 것만으로도 여러분의 사이트는 가독성과 사용성 면에서 상위 몇 퍼센트 안에 너끈히 들어갈 것이다.
- 제프 래스킨(JEF RASKIN)
매킨토시 컴퓨터 제작자이자 『The Humane Interface』 저자

이 책의 출현으로 인해, 조잡한 디자인의 웹 페이지를 더 이상 참고 견딜 필요가 없어졌다. 저자들은 자신의 컨설팅과 교직 경험을 포함해, 성공한 웹 디자이너들로부터 패턴을 포착해냈고, 이 정보를 우리 모두가 볼 수 있도록 만들었다. 시간과 노력을 들일 만한 정보로 가득하고 쉽게 읽을 수 있는 책으로서, 모든 기획자와 디자이너의 서가에 반드시 구비해둬야 할 매우 유용한 책이다.
- 린다 라이징(LINDA RISING)
독립 컨설턴트이자 『The Patterns Handbook』, 『The Pattern Almanac 2000』, 『Design Patterns in Communications Software』 저자

이론과 실무의 격차를 보완하고, 웹 디자인 분야에 있는 사람들이 (대단한 훈련을 거치지 않고도) 사용자 중심의 디자인 원칙을 그들의 작업물에 적용할 수 있게 해주는 책이다.
- 마야 벤캐트러먼(MAYA VENKATRAMAN)
선 마이크로시스템즈, 휴먼 인터페이스 엔지니어

이 책이 다루는 범위는 탁월하다. ‘최고의 페이지를 디자인한다’는 데 중점을 두던 전통적 디자인의 논점을 넘어 컨텍스트를 훌륭히 보여준다. 이렇게 폭넓은 책은 본 적이 없다.
- 테리 위노그래드(TERRY WINOGRAD)
스탠포드 대학교 컴퓨터 공학과 교수이자 『Bringing Design to Software』 편집자

추천의 글
1979년 크리스토퍼 알렉산더(Christopher Alexander)는 설계와 건축, 기획을 위한 혁신적이고도 실용적인 언어를 소개한 『A Pattern Laguage(패턴 언어)』라는 독창적인 책을 썼는데, 이후 이 개념은 컴퓨터 공학에서부터 사용자 인터페이스 디자인 등의 영역에 적용돼왔다. 건축에서 시작한 이 개념이 다른 분야로 확장을 거듭해 오늘날까지 쓰이고 있다는 사실은 그 가치와 타당성을 입증해준다. 간단히 말하면 디자인 패턴은, 소프트웨어 분야든 건축이든 조경이든 혹은 웹 디자인 분야에서든, 반복해서 흔히 발생하는 문제에 대한 종합적인 해결 방안이라 할 수 있다.

디자인 패턴은 사용성에 있어 결정적인 요소이므로 웹 디자인과 특히 관련이 깊다. 쓰기 편한 제품을 만드는 원칙 중 하나는, 사물이 어떻게 작동하는지에 대한 사용자의 멘탈 모델(mental model)을 지원하는 것이다. 사용자가 제품을 반복 사용하면서 내비게이션 방법을 배우고 과업을 어떻게 수행할 것인지에 대한 멘탈 모델을 수립하는 과정에 일관성이 있다면, 한 제품의 사용 편의성을 확립하거나 강화하기가 쉬워진다. 디자인 패턴은 그런 모범 사례를 포착해낼 수 있는 수단이며, 일관된 방식으로 해결책을 구현해갈 수 있도록 지침을 제공해준다.

디자인 패턴은 한 조직이 커가는 것을 도와줄 수도 있다. 내가 예전에 야후!의 사용자 경험과 디자인 그룹장으로 일할 때였다. 그 당시 예산과 인원은 제한돼 있었으나 제품과 서비스는 늘어만 가는 상황이었고, 나는 이를 위해 효과적인 디자인을 만들어내야 하는 어려운 상황에 놓였다. 팀이 빠른 속도로 커지고 제품별로 팀이 구성되면서 디자이너들은 점차 독립적으로 작업을 진행하게 됐고, 많은 디자이너가 동일한 디자인 문제를 각자 나름대로 풀어가는 모습을 보게 됐다. 야후!에서 우수한 디자인을 효과적이고 일관성 있게 만들어낼 수 있으려면 모범 사례를 찾아내고 구현하는 일이 꼭 필요했다. 게다가 웹 디자인 패턴이 확립되면서 프론트엔드 엔지니어들은 재사용이 가능하고 모듈화된 코드를 만들어낼 수 있었고, 그럼으로써 개발 품질을 높이고 디자인에 들어가는 시간뿐만 아니라 개발에 들어가는 시간까지 줄일 수 있게 됐다.

『The Design of Sites』의 저자들은 종종 야후!의 사례를 인용하곤 한다. 광범위한 사용성과 민족지학적(ethnographic) 연구에 기반한 이 디자인들은 최고로 입증된 모범 사례를 보여준다. 야후!는 아주 광범위한 제품군을 제공하므로 이 팀에서는 거의 모든 소비재와 인터페이스 관련 문제를 경험했다고 할 수 있을 것이다. 이 책을 참고함으로써 여러분은 야후!와 같은 규모에 이르지 않더라도, 그리고 야후! 수준의 디자인 팀이나 연구 팀 인력이 없어도 그들이 지금까지 습득해온 것을 여러분 사이트에 적용할 수 있다.

웹에서의 사용자 인터랙션은 유연하고 끊김이 없다. 한 번의 마우스 클릭만으로 사용자는 고유한 룩앤필, 인터랙션 모델을 가진 완전히 다른 사이트에 있게 된다. 그러므로 디자인 커뮤니티가 웹 디자인 패턴의 구축을 이해하고 적용하고 참여하는 일이 그 어느 때보다 중요하다. 웹에서 공통된 디자인 패턴이 더 광범위하게 쓰일수록 사용자는 웹을 더 쉽게 쓸 수 있을 것이다. 모두를 위해 좋은 일이다.

물론 디자인 패턴이 특정한 제약이나 상황을 깊이 고려한 디자인을 대체할 수는 없다. 하지만 디자인 패턴은 웹사이트를 디자인하는 모든 사람의 시작점이 돼야 하며, 가능한 한 항상 지켜져야 한다. 디자이너는 이미 알려진 어떤 것에서 시작해 필요에 따라 그것을 변경하거나 세련되게 만들 수 있다. 불필요한 일에 시간과 노력을 들이지 않아도 되니 디자이너는 그 제품 자체의 문제와 혁신에만 집중할 수 있게 된다. 『The Design of Sites』는 디자인 문제에 대처하는 사고의 기초를 이룬다. 이 책은 웹 기획자가 문제에 관해 생각하고 해결 방안을 내고 아이디어를 공유할 때 공통 언어의 역할을 한다.

인터넷이 광활한 만큼 수많은 웹 디자인 문제가 여러 수준에서 반복되고 있다. 설계 단계를 예로 들자면, 웹사이트가 컨텐츠이든, 커뮤니티든, 커뮤니케이션이든, 쇼핑몰 사이트든 간에, 디자인 패턴은 디자이너가 문제점을 파악할 때, 그리고 제품 전략을 성공적으로 수행하는 데 중요한 결정을 내릴 때 지침을 제시해줄 수 있다. 사용자 인터페이스 단계에서 디자인 패턴은 과업을 완료하기까지의 인터랙션 모델에 일관성을 주므로 사용 편의성을 향상시킬 수 있다.

밴 듀인, 랜데이, 홍은 디자인 패턴이 다양한 수준에 적용될 수 있음을 깨닫고 광범위한 웹 디자인 관련 패턴을 수집해 이 책에 나오는 순서로 정리했다. 패턴들은 앞뒤 내용과 서로 참조되며, 많은 경우 다른 패턴과 서로 조합해 사용된다. 각 패턴마다 다양한 유명 사이트를 예로 들었고, 이론적인 근거와 적절한 사용법, 그리고 뜻밖의 함정을 명확히 설명했다. 웹 디자인 언어가 진화를 거듭함에 따라 이번 개정판에는 빠르게 변화하는 웹 디자인의 지평을 반영하는 패턴이 추가됐다. 모바일 기기의 편재성(ubiquity)이 증가하고 사용량이 늘어남에 따라 모바일 디자인 패턴에 관한 섹션이 새로 추가됐다. 독창적이고 종합적이며 사려 깊게 정리된 이 책은 웹 기획과 디자인 전문가에게 매우 귀중한 자원이다.

- 아이린 오(Irene Au)
구글 사용자 경험 팀 디렉터
야후! 사용자 경험과 디자인 팀 前 부장

저자 서문
4년 전에 우리는 말하는 개를 발견한 한 남자 이야기로 이 책을 시작했다. 개가 뭐라고 했냐고 물으면 이 남자는 “알게 뭐요? 이건 말하는 개라니까!”라고 대답했다. 1990년대 초반 웹이 처음 생기고 몇 년간, 웹이란 그 존재 자체만으로도 매혹적인, 말할 줄 아는 개였다. 사업가들은 웹을 이용하면 인쇄와 TV 광고에 드는 막대한 제작과 배포 비용을 들이지 않고 물건을 팔 수 있다는 사실을 알게 됐다. 하룻밤에 웹사이트는 돈벌이를 위한 모험이 됐고 이 새로운 매체를 위한 짧은 진화의 기간이 시작됐다. 웹이 진화하면서 웹 개발자가 직면했던 문제는 여느 산업이 성숙기에 직면했던 문제와 같았다. 사람들은 기술 자체의 신기함보다 가치나 편리함, 사용 편의성에 더 신경을 쓰기 시작했다. 이 변화에 최우선으로 대처하기 위한 노력으로 고객 중심 디자인(customer-cetered design)이라는 새로운 용어가 만들어졌다.

더글러스 밴 듀인과 제임스 랜데이, 제이슨 홍이 e-비즈니스에서 항상 고객 중심 디자인을 주창해온 것은 아니다. 8년 전 우리는 소프트웨어 디자인 경험을 가진 기업가, 버클리대 컴퓨터과학과 교수, 그리고 박사 과정을 밟고 있는 대학원생이었고, 당시 우리에겐 웹이라는 새로운 매체를 사용한 사업 개발에 꼭 필요한 ‘고객에 대한 통찰’을 제공하겠다는 비전이 있었다. 그 비전은 결국 번창하는 웹 개발 사업과 이 책으로 결실을 맺었지만, 그 과정에서 여러 가지 질문에 대한 해답을 찾아야만 했다. 왜 대다수 사이트가 고객의 기대를 충족시키지 못하는가에 대한 연구의 일환으로, 우리는 어떻게 해서 디자인 에이전시들이 점점 상투적인 작품을 만들어내게 됐는지, 그리고 기업은 왜 스스로 사이트를 만들지 않고 외부 웹사이트 디자인 회사를 고용했는지에 큰 관심을 갖게 됐다.

이 의문들에 대한 해답을 찾기 위해 우리는 웹 디자이너와 클라이언트에게 연구원을 보냈고, 기업이 특정 디자인 에이전시를 고용하는 이유가 이전 작품에서 성공적인 브랜드를 구축했기 때문이었다는 사실을 알게 됐다.

그 당시 웹 디자이너는 고객의 실질적인 성공으로 평가받는 게 아니라 상패와 시상식 등을 통해 유명해졌다. 대다수 웹 디자이너가 편집 디자인이나 영화, TV 등 인터랙션이 없는 매체에서 일하다가 웹 디자인 업계에 입문했다는 사실을 알게 된 후에야 이러한 패턴이 이해가 됐다. 그 당시에는 디자이너가 웹에서의 고객 경험을 이해하도록 도와줄 만한 도구가 거의 없었다. 사실 우리가 새로 맡은 클라이언트의 사이트를 조사했을 때 그 사업은 고전을 면치 못하고 있었다. 이유인 즉, 처음 디자인을 맡은 디자이너가 인터랙션 디자인의 특징을 전혀 몰랐고, 기능보다 형태를 중요하게 여기던 전통 때문이었다.

우리가 일을 해나가면서 이 시나리오는 명확해졌다. 우리는 사이트 디자인의 까다로운 문제점을 평가하고 개선하는 일을 맡았다. 필요한 모든 것이 제자리에 있는데도 불구하고 실패의 길을 걷는 사이트 디자인을 들고 줄줄이 고객들이 찾아왔다. 그런 프로젝트 가운데 하나로 우리는 클라이언트의 대규모 전자상거래 사이트를 테스트하던 도중, 사이트의 일반 방문객에게 특정한 제품을 찾아보라고 요청했다. 클라이언트는 사이트 구축을 회사 내부에서 진행했고, 디자이너들은 어떤 제품이라도 다 찾아낼 수 있었으므로 고객 역시 그럴 거라고 확신했다. 그러나 테스트를 받는 사람에게는 제품 설명이 암호와도 같았고, 내비게이션을 어떻게 써야 하는지가 불명확했으며, 제품 하나를 찾기 위해 몇 페이지에 걸친 선택을 해야만 했다. 테스트 완료 시 대다수 참가자가 성공했다고 보고했지만 사실 정확한 제품을 찾아낸 경우는 몇 되지 않았다. 디자이너에게는 명확해 보인 사이트 디자인이 고객에게는 실패했다는 사실조차 알 수 없을 정도로 혼란스러웠던 것이다. 우리 노력의 결과로 클라이언트는 사이트가 아무것도 없는 상태에서 디자인됐다는 사실을 알 수 있었다. 반복적인 디자인과 엄격한 테스트를 거쳐야만 매력적이면서도 쓰기 편리한 사이트를 만들 수 있다.

음, 그 초기 시절 이후에 재미있는 일이 하나 있었다. 고객 중심 디자인이 사이트 개발 분야에서 주목 받기 시작하던 때였다. 그때 우리는 직접 개발한 조사 도구와 방법론을 써서 전 세계에서 가장 유명하고 관리가 잘된 몇몇 기업의 사이트를 반복적으로 디자인하는 중이었다. 각자만의 방식으로 우리는 초기의 비전을 추구해왔다. 사업가이자 소프트웨어 디자이너인 더글러스 K. 밴 듀인은 웹 리서치와 디자인 회사인 내비슨트(Naviscent)의 설립자이자 사장이다. 제임스 A. 랜데이는 워싱턴 대학의 컴퓨터과학과 교수이며, 유비쿼터스 컴퓨팅의 신세계에 초점을 두고 있는 인텔 리서치 시애틀(Intel Research Seattle)에서 한때 디렉터로 근무했다. 제이슨 I. 홍은 카네기 멜론 대학의 인간-컴퓨터 인터랙션 연구소(Human-Computer Interaction Institute)의 컴퓨터과학과 교수다.

이런 역할들 속에서 우리는 개인적으로 수백 명의 경영진을 만나 그들의 비즈니스 모델이나 시장 전략, 그리고 웹사이트 개발 계획에 대해 이야기를 나누었다. 웹 비즈니스가 성숙하면서 조직은 고객 경험 향상에 집중해야 할 필요성을 깨닫고 있었다. 더 높은 직위에 있는 경영진일수록 고객 중심의 디자인 접근법에 대한 필요를 더 절실히 느낀다는 사실을 발견했다.

이렇게 고객 중심 디자인에 중점을 두는 것이 우리의 경험에만 국한된 건 아니다. 최근 e-비즈니스 분석가들 역시 디자인 회사를 평가할 때 브랜드 디자인 작업보다는 웹에서의 고객 경험에 끼친 효과에 좀 더 중점을 두기 시작했다. 그렇지만 새로운 기준에도 불구하고 상위권 디자인 회사에 대한 검토 결과는 놀랍다. 대규모 웹 에이전시들이 사이트 디자인 서비스의 한 부분으로 고객 테스트를 포함한다고 약속하지만, 분석에 의하면 그들의 디자인이 더 나은 고객 경험을 일관성 있게 제공하지 못한다. 개선할 점이 여전히 많다.

오늘날 기업은 고객 중심 디자인의 경험, 전문 지식, 방법론, 그리고 실무에 대해 끊임없는 갈증에 시달리는 것 같다. 이 책의 목적은 내비슨트, UC 버클리, 워싱턴 대학, 카네기 멜론, 그리고 300명이 넘는 클라이언트를 위한 웹 리서치와 디자인 프로젝트 작업에서 얻은 수년간의 경험을 살려 그러한 요구를 어느 정도 충족시키고자 하는 것이다. 오늘날 존재하는 고객 중심 웹 디자인 상황에 맞게 이 책을 개정함으로써 이 매체의 지속적인 진화에 일조하는 것이 우리의 바람이다.

제2판에서 추가된 내용

초판 발행 이후 우리는 수많은 독자와 강사를 만나 이 책의 쓰임에 대한 이야기를 나누었다. 한두 가지 일관된 주제로 대화가 이어진 끝에 이렇게 제2판에 착수하게 됐다. 초판에서 사람들이 높이 평가한 점들 중 하나는 한 책에서 광범위한 주제를 다뤘다는 것이었다. 하지만 여기저기서 중요한 패턴을 놓쳤던 듯싶다. 독자들은 단계 표시(H13) 등 초판에 넣지 못한 패턴들을 제안함으로써 우리를 도와줬다.

개정판의 내용에 영향을 준 또 하나의 중요한 요인은 두 가지 중요한 새 웹 기술, AJAX 기반의 인터페이스와 모바일 웹의 발전이었다. AJAX(Asynchronous JavaScript And XML)를 사용해, 이전에는 데스크탑 애플리케이션에서만 가능했던 바로 적용하는 인터페이스(direct manipulation) 같은 인터랙션 기법이 이제는 진보된 웹사이트와 애플리케이션에 쓰일 수 있게 됐고, 디자이너의 선택 폭을 넓혀주고 있다. 휴대폰 사용이 지속적으로 늘어나면서 폰 브라우저 기술이 향상됐다. 모바일 웹은 새로운 사업 기회와 새로운 디자인적 문제를 안겨줬다. 제2판에 새로 추가된 몇몇 패턴에서는 모바일 웹 분야를 다룬다.

개정판에서 추가된 많은 패턴 외에도 우리는 앞에 서술한 기술 변화를 반영하고 그간에 추가적으로 파악한 것들을 제시하기 위해 기존 패턴들을 업데이트했다. 사실 제2판의 내용 중 3분의 1 이상이 새로 쓰였거나 업데이트됐다.

옮긴이의 말
이 책을 처음 봤을 때는 지금으로부터 4년여 전이었습니다. 처음 출간된 시기만 놓고 보면 꽤나 오래된 낡은 책이라고 생각할 수 있습니다. 하지만 이 책이 출간되는 현재에도 책에 담긴 핵심 내용은 변하지 않았습니다. 웹사이트를 만들 때 사용하는 기술은 발전하고 변할 수 있어도 그것을 사용하는 사람들 그리고 사람들이 필요로 하는 내용 혹은 인지하는 방식에는 큰 변화가 없습니다.

웹사이트 그리고 그것을 만드는 과정은 사용자가 편하게 원하는 목적을 이룰 수 있게 해주는 서비스라고 생각합니다. 어떻게 하면 더 편리하고 쉽게 사용할 수 있게 할 것인가가 웹사이트의 경쟁력이 됩니다. 기술은 시간이 지남에 따라 다양하게 변하고 웹사이트를 만드는 사람이라면 당연히 공부를 게을리하지 않아야 합니다. 하지만 기술의 기반에는 항상 변하지 않는 사용자 경험 설계(user experience design)가 있어야 기술이 제대로 빛을 발할 수 있습니다.

인터넷과 웹사이트 그 자체는 더 이상 신기술이 아니라 우리 주변에 항상 있는 익숙한 수단이 되었습니다. 웹사이트 안에서 사용자에게 더 가치 있는 것을 제공하기 위해서 수많은 노력이 있었고 그런 과정을 통해 현재 일반적으로 통용되는 여러 가지 패턴이 나왔습니다. 지금과 같이 정형화된 모습이 당연하게 받아들여지기 이전에 웹사이트를 만들 때 사람들이 더 편하게 사용할 수 있도록 연구하고 고민하면서 하나하나의 기능을 설계, 디자인했습니다. 그런 내용이 이 책에 들어 있다고 보면 됩니다.

요즘 웹사이트를 만들 때는 '어느 사이트에 이렇게 구성되어 있으니까'라든지 '다들 그렇게 하니까' 등의 기준으로 만드는 경향이 있는 것 같습니다. 물론 '사용자 경험'이라는 용어 자체에 들어 있듯이 사용자에게 익숙한 경험을 기반으로 하는 것이 좋은 웹사이트입니다. 하지만 왜 그러한 패턴이 나왔는지를 알지 못하거나 고민하지 않는다면 더 좋은 웹사이트를 만들 수 없다고 생각합니다. 인터넷과 웹사이트가 현재에 이르기까지 많은 발전이 있었듯이 앞으로 그만큼의 시간이 흘렀을 때도 더 좋은 사용자 경험을 제공할 수 있도록 더 발전하려는 노력이 필요합니다. 그러기 위해서는 최적의 사용자 경험을 제공하는 데 기초가 되는 패턴을 공부하면서 그것이 왜 나왔으며 왜 유용한지를 알아야 합니다.

이 책을 보면서 너무 뻔한 이야기가 들어 있는 두껍기만 한 책이라고 생각할 수도 있습니다. 그만큼 인터넷과 웹사이트가 일반화됐다는 반증이겠죠. 매일 쓰는 웹사이트이기 때문에 누구나 정의하고 설계할 수 있을 것처럼 보지만 기초가 튼튼하지 않으면 그냥 유행을 따라 하는 흉내 내기에 불과합니다. 웹사이트를 만드는 사람이라면 내가 새롭게 디자인하는 내용이 사용자 경험을 해치지 않는지 스스로 검토해보는 역할을 하도록 이 책을 항상 곁에 둬야 합니다. 또 웹사이트를 직접 디자인하지 않더라도 웹사이트를 만드는 과정에 의사결정을 하거나 웹사이트를 사용해서 서비스/비즈니스를 하는 사람이라면 자신의 사이트를 객관적으로 판단하는 데 도움이 되는 참고서가 될 것입니다.

책의 두께만큼이나 이 책은 초기 번역부터 편집 퇴고까지 몇 년에 걸쳐 이뤄졌습니다. 해가 지나면서 기술은 발전하고 다양해지지만 항상 핵심이 되는 기본 내용은 변하지 않는다는 사실을 몇 년에 걸쳐 느꼈습니다. 앞으로 또 몇 년이 지나더라도 이 책을 읽으시는 분들은 계속해서 필요한 내용을 찾아볼 수 있는, 그래서 항상 책장에 꽂혀 있는 필독서가 될 것이라고 생각합니다.

1부 웹사이트 디자인의 기초
고객 중심의 웹 디자인:좋은 아이디어를 넘어
웹 디자인 패턴 최대로 활용하기
고객을 알기: 원칙과 기법
고객과 함께하는 반복 디자인
고객 중심 사이트의 개발 프로세스

2부 패턴
A 사이트 장르
___A1 개인 전자상거래
___A2 뉴스 포탈
___A3 커뮤니티 사이트
___A4 전자정부 사이트
___A5 지원 네트워크로서의 비영리 사이트
___A6 개인 기반 정보 사이트
___A7 기업 사이트
___A8 교육 포럼
___A9 멀티미디어 사이트
___A10 기능성 웹 애플리케이션
___A11 인트라넷
___A12 블로그

B 내비게이션 구조 만들기
___B1 다중 내비게이션 경로
___B2 둘러보기 쉬운 컨텐츠
___B3 계층적 구성
___B4 과업 기반의 구성
___B5 알파벳순 구성
___B6 시간순 구성
___B7 인기도 기반의 구성
___B8 카테고리 페이지
___B9 사이트 접근성

C 강력한 메인 페이지 만들기
___C1 메인 페이지
___C2핵심 제공 가치

D 컨텐츠 제작과 관리
___D1 페이지 템플릿
___D2 컨텐츠 모듈
___D3 표제와 요약문
___D4 개인화 컨텐츠
___D5 게시판
___D6 검색 엔진 최적화
___D7 역삼각형 글쓰기
___D8 인쇄용 페이지
___D9 HTML 타이틀
___D10 글로벌 사이트와 현지화 컨텐츠
___D11 스타일 시트

E 사이트 보안과 신뢰
___E1 사이트 브랜드
___E2 뉴스레터
___E3 개인정보 관리 및 활용
___E4 개인정보 보호 정책
___E5 회사 소개
___E6 보안 접속
___E7 이메일 공지사항
___E8 개인정보 권한 설정
___E9 개인정보 사기범죄 예방

F 기본 전자상거래
___F1 빠른 주문 완료
___F2 제품 상세 페이지
___F3 장바구니
___F4 빠른 주소 선택
___F5 빠른 배송 방법 선택
___F6 결제 방법
___F7 주문 요약
___F8 주문 확인 및 감사 페이지
___F9 쉬운 반품

G 고급 전자상거래
___G1 대표 상품
___G2 관련 상품과 유사 상품
___G3 개인화 제품 추천
___G4 사용자 리뷰
___G5 복수 배송지
___G6 선물하기
___G7 배송 추적

H 고객의 과업 완수를 도와주는 도구
___H1 프로세스 파이프라인
___H2 로그인/회원가입
___H3 비회원 로그인
___H4 계정 관리
___H5 고객 세션 연결
___H6 레이어 창
___H7 자주 하는 질문
___H8 관련 도움말
___H9 바로 적용하는 인터페이스
___H10 명확한 입력폼
___H11 입력폼 자동완성
___H12 드릴다운 옵션
___H13 단계 표시

I 효과적인 페이지 레이아웃
___I1 그리드 레이아웃
___I2 화면 가시 영역
___I3 메인 영역
___I4 가변폭 레이아웃
___I5 고정폭 레이아웃
___I6 일관성 있는 사이드바

J 빠르고 정확한 사이트 검색
___J1 검색부
___J2 직접 검색 기능
___J3 검색 결과 분류

K 쉬운 내비게이션
___K1 통합 링크부
___K2 내비게이션 바
___K3 브라우징 탭
___K4 액션 버튼
___K5 가시성 높은 액션 버튼
___K6 현재 위치 표시 링크
___K7 컨텐츠 링크
___K8 외부 링크
___K9 설명형 링크
___K10 기본 링크
___K11 익숙한 용어
___K12 오류 예방
___K13 의미 있는 오류 메시지
___K14 존재하지 않는 페이지
___K15 퍼머링크
___K16 빠른 이동 메뉴
___K17 사이트맵

L 더 빠른 사이트
___L1 파일 수 최소화
___L2 빠른 이미지 로딩
___L3 독립 테이블
___L4 HTML 기능
___L5 이미지 재사용
___L6 빠른 컨텐츠 로딩

M 모바일 웹
___M1 모바일 화면 해상도
___M2 모바일 인터페이스
___M3 위치 기반 서비스

3부 부록
A 사용성 평가
B 웹사이트 평가 계획 사례
C 동의서 사례
D 관찰자 양식 예시
E 온라인 리서치