추가 적립 안내

전 세계 웹 디자인 분야에서 가장 영향력 있는 스매싱 미디어의 ‘스매싱 북 시리즈’ 3권으로 코드, 디자인, 콘텐츠를 다르게 생각하는 방법에 관한 실용적인 노하우와 통찰력을 폭넓게 다룬다. 디자인 및 UX 기법, 모바일 환경, 감성 디자인 등의 특성뿐 아니라 HTML5, CSS3, 자바스크립트 기법과 반응형 워크플로에 이르기까지 웹사이트 리디자인에 필요한 모든 것을 담았다.

혁신적인 웹사이트 코딩, 디자인, 콘텐츠 등 빠르게 변화하는 웹 환경에 근본적으로 대응하기 위한 접근 방법을 배울 수 있다. 반응형 디자인에 알맞은 워크플로는 무엇인지, 모바일 사용자를 위한 디자인은 무엇을 고려해야 하는지, 사용자 경험을 높이기 위해 무엇이 필요한지, 웹사이트 리디자인에 스토리가 왜 필수 요소인지 등 웹사이트 리디자인에 필요한 실용적인 주제를 알기 쉽게 설명한다. 또한 어떻게 콘텐츠를 작업하고 개선하여 스마트한 서비스를 제공할지 다양한 예시와 함께 웹사이트 리디자인의 방향을 제시한다.

빠르게 변화하는 웹 환경에 맞추어
‘웹사이트 리디자인’을 새롭게 조명하다

이 책은 전 세계 웹 디자인 관련 분야에서 실무뿐 아니라 저술로 뛰어난 실력을 인정받으며 활동하는 개발자와 디자이너 들의 가치 있고 수준 높은 글만 엄선하여 엮은 책이다. 웹 디자인에 관한 실용적인 지식과 인문학적 지식 함양, 사용자에 관한 심층 탐구를 반영한 앞서 출간된 《스매싱 북 1, 2》와는 다르게 ‘웹사이트 리디자인’이라는 특별한 주제를 중심으로 웹사이트 리디자인에 필요한 기술과 소양을 설명한다. 혁신적인 코딩, UX 기법, 퍼소나, 반응형 디자인 등 리디자인 프로세스뿐 아니라 웹 디자인에 접근하는 방식을 급변하는 오늘날의 환경과 트렌드에 초점을 맞추어 광범위하게 다룬다.

왜 웹사이트 리디자인을 해야 하는가?

매년 빠르게 성장하고 변화하는 웹 업계에서 웹사이트 리디자인은 피할 수 없는 현실이다. 리디자인은 웹사이트가 출시되는 그 순간부터 시작된다. 완전무결하고 아름다운 웹사이트는 수많은 사람의 평가와 비평을 들으며 리디자인이 시작되는데, 이 책은 전면적인 리디자인이 꼭 필요한지, 점진적으로 필요한 부분만 개선하여 효과를 극대화하는 방법은 없는지를 통찰력 있게 풀어낸다. 또한 모든 웹사이트 리디자인의 필요성을 설명함으로써 웹사이트 리디자인의 시야를 넓혀준다.
이 책은 세련되고 아름다운 디자인에만 집중하는 시대를 지나 이미지, 타이포그래피, 레이아웃, 플랫폼, 반응형, 콘텐츠 등 사용자 경험에 중점을 둔 리디자인의 필요성을 강조함으로써 웹사이트 리디자인을 할 때 무엇을 고민해야 하는지 다시 생각하게 한다. 전하고자 하는 의미를 분명히 하면서도 살아 숨 쉬는 디자인을 위해 어떻게 끊임없이 개선하고 고민해야 하는지를 보여준다.

사용자를 위한 디자인으로
웹사이트 리디자인의 패러다임을 바꾸다

웹사이트 리디자인의 일반적인 목표는 사용자 경험을 개선하여 전환율 높이기, 브랜드 이미지 변화, 콘텐츠 관리와 업데이트, 마케팅 효과 높이기, 반응형 웹사이트 만들기 등이다. 이러한 목표를 달성하기 위해 웹사이트가 제공하는 정보와 서비스의 최종 이용자는 웹사이트를 방문하는 사용자다. 이에 초점을 맞추어 설명하는 이 책은 사용자를 위한 웹사이트 리디자인이 필요한 이유를 이해하기 쉽게 알려준다. 이 책의 부제 “기본에 충실한 웹사이트 리디자인하기”는 결국 사용자를 고려한 리디자인임을 다시 한 번 강조한다.
하지만 리디자인을 시작하기 전에 웹사이트 리디자인을 의뢰하는 고객과의 비즈니스도 생각해야 하는데, 이 책에서는 고객과 프로젝트의 범위를 정하고 고객이 유행에 휩쓸리지 않게 대처하는 법, 고객의 희망 사항을 그대로 수용하기보다는 고객의 비즈니스에 도움이 되도록 수정을 제안하는 법, 디자인에 대한 거부 반응과 비평을 효과적으로 관리하는 법에 대해 살펴본다. 또한 고객과 협업하는 데 필요한 핵심을 배우고 그로 인해 어떠한 통찰력을 배울 수 있는지에 대해서도 살펴본다.

웹사이트 리디자인은
사용자 경험에 중점을 두어야 한다

“사용자가 좋아하는 소프트웨어를 만들고 싶다면
사용자의 호감을 얻을 만한 소프트웨어를 디자인해야 한다.”

인터랙션 디자인과 소프트웨어 공학 분야의 전문가, 세계에서 가장 영향력 있는 디자이너 앨런 쿠퍼는 인간 중심의 디자인을 강조한다. 이 책은 전반에 걸쳐 기존 웹사이트의 문제점을 개선하는 것이 리디자인의 목적이라면 단순한 문제 해결은 물론 제품의 사용성과 사용자 경험에 중점을 두어야 함을 집중 조명하여 설명한다. UX는 좋은 디자인, 즉 겉만 화려한 디자인이 아니라 모든 것이 조화롭고 잘 작동하며 사용자의 기대치를 충족시키는 디자인을 말하는데, 이는 회원가입자 수를 늘리거나 사용자가 게시물을 더 많이 올리도록 유도하는 등의 문제를 해결한다. 문제가 무엇이든 궁극적인 해결책은 훌륭한 UX 제공임을 강조한다.
또한 회원가입 프로세스와 양식 개선, 실험적인 기술, 고객 서비스 향상 방법, 되도록 피해야 할 디자인 기법 등 네 부분으로 나누어 UX 디자인을 다룬다. 다양한 사례를 들어 설명하고 웹사이트 리디자인에 바로 적용할 수 있는 방법을 보여준다.

스토리를 바탕으로 웹사이트 리디자인을 하라!

오늘날의 소비자는 정보 습득만을 위해 웹사이트를 이용하지 않는다. 정보 그 이상을 요구하며 더 실체적이고 웹사이트와 연결되는 경험을 하기를 바란다. 이러한 소비자의 요구에 응하기 위해 이 책은 새롭게 웹사이트를 업데이트하고 출시하려면 어떻게 전략을 세워야 하는지 소개한다.
디자인에만 집중하면 콘텐츠에, 콘텐츠에만 집중하면 디자인이나 인터랙션에 소홀해질 수 있다. 이 두 가지에 함께 적용할 수 있는 요소가 바로 스토리다. 스토리는 강력한 의사소통의 수단일 뿐 아니라 디자인의 중요한 요소다. 사실만 가지고는 사람을 움직이게 할 수 없다. 하지만 스토리로는 가능하다. 《감성 디자인Emotional Design》의 저자 돈 노먼은 이렇게 말했다. “사용자는 미적으로 보기 좋은 제품이 더 효과적이고 유용하다고 느낀다. 그런 제품에 더 끌리기 때문이다. 이런 끌림은 그 제품과 감정적으로 연결되기 시작할 때부터 생겨난다.”
웹이라는 형식은 시각적이고 상호적인 특성 때문에 스토리텔링이 자유롭다. 하지만 웹에서 주의해야 할 사항이 있다. 웹은 순차적이지 않고 대부분 비선형이며 시각적이고 상호적이다. 이 책에서는 보유하고 있는 콘텐츠를 비선형으로 엮기 위해서는 무엇에 주의해야 하는지, 스토리와 시각 자료를 효과적으로 조합하기 위해서는 무엇을 고려해야 하는지, 사용자와 상호 교감하기 위해서는 스토리를 어떻게 디자인에 녹여내야 하는지 등 웹 디자이너뿐 아니라 콘텐츠를 다루는 이들에게 매우 유용한 내용을 집약하여 알려준다.

웹사이트 리디자인은 디자이너만의 몫이 아니다

이 책은 리디자인을 의뢰한 고객과 효과적으로 협업하는 방법에 대해 알려주고 HTML5, CSS3, 자바스크립트뿐 아니라 콘텐츠를 다루기 위한 강력한 무기인 스토리를 활용하는 방법에 대해서도 설명한다. 게다가 실제 스매싱 매거진 웹사이트의 리디자인 사례도 소개한다. 리디자인을 위해 고객을 분석하고, 레이아웃을 고민하고, 안정적인 성능과 반응 시간 단축을 위해 기술적인 부분도 고민하는 것을 엿볼 수 있다.
리디자인의 비즈니스 측면을 다룬 1장과 스매싱 매거진의 리디자인 사례를 보여주는 14장을 살펴보면 성공적인 리디자인을 위해서는 고객과 웹 디자이너 어느 한쪽의 의견만을 따라서는 안 되고, 리디자인을 위해 고군분투하는 웹 디자이너 외에도 고객, 개발자 등 모두의 의견을 듣고 협의하여 적절히 반영한 리디자인을 해야 함을 강조한다. 이 책은 웹사이트 리디자인에 관련된 개발자, 디자이너들이 경쟁 관계가 아니라 협력 관계의 파트너로서 나아갈 수 있도록 서로에 대한 이해도를 높일 수 있는 방향을 제시한다.

들어가며(엘리엇 제이 스톡스)
chapter 1 리디자인의 비즈니스 측면(폴 보아그)
chapter 2 리디자인을 위한 기술적 고찰(레이철 앤드루)
chapter 3 HTML5 속으로(벤 슈바르츠)
chapter 4 CSS3로 새롭게 거듭나기(데이비드 스토리, 리아 베루)
chapter 5 자바스크립트의 재발견: 복잡한 제이쿼리 대체 방법(크리스티안 헤일만)
chapter 6 UX 향상 기법(드미트리 파데예프)
chapter 7 개성 있는 리디자인(애런 월터)
chapter 8 모바일의 사용자 경험 디자인: 웹이냐 네이티브냐?(애럴 발칸)
chapter 9 미래지향적 워크플로 리디자인(스티븐 헤이)
chapter 10 환상적인 유연성을 위한 기본 요소 디자인(앤디 클라크)
확장판 들어가며(이리스 레슈냐닌)
chapter 11 리디자인에 필요한 요소: 스토리(데니스 제이콥스)
chapter 12 내비게이션 리디자인(크리스티안 홀스트, 제이미 애플시드)
chapter 13 맞춤형 콘텐츠 리디자인(콜린 존스)
chapter 14 사례 연구: 반응형 스매싱 리디자인(비탈리 프리드먼, 엘리엇 제이 스톡스)
찾아보기

들어가며
정교한 도구를 갖추거나 그 도구를 기술적이고 창조적으로 다룰 지식을 갖추는 것만으로는 충분치 않다. 진정한 성숙함이란 이 둘의 결합에서 나온다. 즉 무엇을 성취할 수 있는지 깊이 있는 이해가 중요하다. - p. 8

chapter 1 리디자인의 비즈니스 측면
유행에 대한 가장 강력한 대처 방안은 간단하다. ‘왜’ 그래야 하는지 물어봐야 한다. ‘멋지다’거나 ‘다들 그렇게 한다’라는 말로는 충분치 않다. 반드시 해당 아이디어가 왜 좋은지 물어봐야 하고 명백한 비즈니스 이유를 제시해야 한다. - p. 20

chapter 2 리디자인을 위한 기술적 고찰
리디자인에 착수하기 앞서 기존 웹사이트와 이를 구동하는 백엔드와 관련된 모든 사항을 파악해야 한다. 시스템을 교체할 때 기존에 있던 정보를 무시할 가능성이 높기 때문이다. - p. 44

chapter 3 HTML5 속으로
HTML, CSS, 자바스크립트에 대한 기본 지식을 탄탄하게 다지면 다른 이들과 차별화된 전문 기술을 계속 보유하고 개발할 수 있다. - p. 84

chapter 4 CSS3로 새롭게 거듭나기
CSS3로 장황한 핵hack을 대체한다면 일부 방문자는 멋진 시각적 효과를 경험하겠지만 그렇지 못한 방문자도 있을 것이다. 하지만 이는 큰 문제는 아니다. 둥근 모서리, 그림자, 그레이디언트가 없다는 이유로 브라우저가 깨졌다고 항의하는 사람은 없다. - p. 110

chapter 5 자바스크립트의 재발견: 복잡한 제이쿼리 대체 방법
지금도 제이쿼리나 자바스크립트만 고집하는 사람과 CSS만 사용하려는 사람들 사이에 논쟁이 있다. 하지만 이는 사용자에게 결코 도움되지 않으며, 간결하고 효과적인 솔루션 구현에도 방해가 된다. 훌륭한 웹 개발자는 각 기술의 장점을 활용하고 기술에 대한 유연한 태도를 견지한다. - p. 186

chapter 6 UX 향상 기법
디자인의 목적은 장식이 아니라 문제 해결이다. ······ 그 문제가 무엇이든 궁극적으로 훌륭한 UX를 제공함으로써 해결할 수 있다. - p. 190

chapter 7 개성 있는 리디자인
우리가 디자인하는 인터페이스는 사용자들이 클릭하고 터치하는 벽이 아니다. 우리가 진정 누구인지를 세상에 보여주는 창이다. - p. 228

chapter 8 모바일의 사용자 경험 디자인: 웹이냐 네이티브냐?
제품 디자인과 인터랙션 디자인의 차이를 굳이 따지자면 종이 한 장 차이라고 할 수 있다. ······ 인터랙션 디자이너는 단순히 인터랙션 요소의 미적 측면뿐 아니라 인터랙션 요소가 어떻게 동작하는지도 관심을 가져야 한다. - p. 258

chapter 9 미래지향적 워크플로 리디자인
목표를 의도적으로 무시하고 현재 어디에 있는지 그리고 어디에서 출발하고 싶은지에만 집중하면 엄청난 유연성을 얻을 수 있다. - p. 296

chapter 10 환상적인 유연성을 위한 기본 요소 디자인
무엇이든 고정되고 반응이 없다면 더 이상 웹 디자인이 아니다. 웹 특유의 유동성을 포용하지 못한다면 웹 디자이너가 아니라 다른 일을 하는 사람이다. 웹 디자인은 반응형 디자인이다. 반응형 웹 디자인은 올바른 웹 디자인을 한 것이다. - p. 325

확장판 들어가며
미래는 우리 손에 달렸다. 내일의 웹을 위해 어떤 도구와 기술을 사용할지, 어떤 식으로 접근할지 결정하는 건 우리 몫이다. - p. 358

chapter 11 리디자인에 필요한 요소: 스토리
스토리텔링은 강력한 자석처럼 ‘끌어당기는’ 전략이다. 사실만 가지고는 사람을 움직이게 할 수 없지만 스토리로는 할 수 있다. - p. 366

chapter 12 내비게이션 리디자인
내비게이션은 정적인 문서를 상호작용하는 페이지로 바꿔주며, 웹사이트 안팎의 모든 걸 연결하는 웹의 조직이라고 할 수 있다. - p. 404

chapter 13 맞춤형 콘텐츠 리디자인
디자인에 시간과 노력을 투자하느라 콘텐츠를 소홀히 한다면 굉장히 큰 위기를 초래할 수 있다. ······ 콘텐츠에 전략적으로 접근하면 된다. 웹의 신에게 기도한다고 해서 콘텐츠에 날개가 달리는 것은 아니다. 콘텐츠에 대한 지식을 완벽히 갖춰야 한다. - p. 438

chapter 14 사례 연구: 반응형 스매싱 리디자인
리디자인 작업은 사실상 기존 디자인이 출시되는 순간부터 시작된다. 완전히 발달된 흠 없는 새로운 인터페이스가 햇빛을 보는 그 순간부터, 문자 그대로 수천 명의 전문가에게서 수많은 코멘트와 가차 없는 비평을 들으면서 리디자인은 시작된다. - p. 477