서문 <br/><br/>스매싱 북 한국어판이 발행되기 까지 <br/><br/>최신 웹어플리케이션에서의 사용자 인터페이스 디자인 <br/>CSS레이아웃의 예술과 과학 <br/>타이포그래피 : 규칙, 지침, 그리고 일반적인 실수들 <br/>최신 웹사이트를 위한 사용성 원칙 <br/>컬러 사용을 위한 가이드 <br/>웹사이트 성능 최적화 <br/>판매를 위한 디자인 : 전환율 높이기 <br/>주목받는 브랜드 웹사이트로 만드는 비법 <br/>인터뷰 : 전문가에게 배우는 통찰력 <br/>무대 뒤 : 스매싱 매거진 이야기 <br/>인덱스 <br/>스매싱북의 작가들

최신 웹어플리케이션에서의 사용자 인터페이스 디자인

사용자 인터페이스 디자인이란 단순히 버튼이나 메뉴만을 말하는 것은 아니다. 이것은 사용자와 어플리케이션 또는 장치(Device)간의 상호작용(Interaction)을 의미하며, 대부분 장치를 통한 여러 사용자간의 상호작용을 뜻한다. 즉, 사용자 인터페이스 디자인은 어떻게 보이느냐가 아니라 어떻게 작동하느냐를 의미한다. 버튼과 색상을 어떻게 배치하느냐 보다 특정 작업을 하기 위해 올바른 기능을 수행할 수 있느냐의 문제인 것이다. 특정 인터페이스에 버튼이 필요한가? 그렇다면 이 버튼이 해야 할 일은 무엇일까? 사용자가 내가 만든 어플리케이션이 어떻게 동작하는지 그리고 그들이 원하는 것을 어떻게 해야 좀 더 쉽게 이룰 수 있는지 알려주기 위해 우리가 할 일은 무엇일까?

CSS 레이아웃의 예술과 과학

최신 웹 디자인에서 웹사이트 레이아웃을 개발할 때는 인내심과 더불어 정확한 CSS 지식을 요구한다. 웹사이트에서 각각의 요소는 디자인에서 흐름과 계층을 결정하고, 레이아웃은 그 요소들이 숨 쉬며 제 역할을 수행할 수 있는 공간과 구조를 제공한다. 세부 페이지를 작업할 때는 브라우저 간의 비일관적인 부분을 고려해야 하므로 많은 기교와 시간이 요구되고, 심지어 그 때문에 레이아웃의 기초까지 위태로워지기도 한다. 이때 필요한 것이 다양한 레이아웃과 스타일 사이의 타협점이다.
웹 타이포그래피 : 규칙, 지침, 그리고 일반적인 실수들
타이포그래피는 디자인의 혼이며, 시각적 문해력의 핵심이다. 타이포그래피에는 광범위한 주제와 응융기술이 연관되어 있다. 웹상의 정보들이 디지털화된 지금은 더욱 그렇다. 최고의 서체군을 선택하는 문제뿐만 아니라 의사소통과 가독성 증진, 브랜드와 기업 이미지 정의, 제품 판매를 비롯해 사용자가 정보를 더 쉽게 이해할 수 있도록 돕는다.

최신 웹사이트를 위한 사용성 원칙

사용자와 하나가 되려면 웹사이트의 외관뿐 아니라 훨씬 더 많은 것에 신경써야 한다. 설상가상으로 오늘날 웹사이트는 아주 빠르게 거대한 다중적 구조로 변하고 있다. 경쟁 웹사이트도 대부분 비슷한 기능성을 제공하지만 최상의 사용자 경험을 제공하는 단 하나의 승자만이 남는다. 바로 이것이 오늘날 웹이 나아가는 방향이며, 웹사이트 디자인의 진화라고 할 수 있다.

컬러 사용을 위한 가이드

웹사이트에 색을 사용할 때는 문화적인 의미를 고려해야 한다. 해외의 트래픽을 기대하고 있다면 더욱 그렇다. 예를 들어 녹색은 모든 사람에게 환경 친화적인 의미로 소통된다. 중국에서 초록색 모자는 바람 피우는 아내를 암시하는 반면, 이슬람 사회에서 녹색은 매우 신성한 색이다. 가톨릭에서도 중요한 의미를 지니고 있으며 일부 아프리카 국가에서 녹색은 자연의 풍요로움을 상징한다. 녹색은 돈, 질투, 성장, 아픔, 질병, 경험 부족, 악마, 생식력, 희망, 생(生)과 사(死)와도 관련 있다.

웹사이트 성능 최적화

느리고 반응 없는 웹사이트는 짜증스럽기 마련이다. 여러분의 웹사이트가 그런 사이트라면 방문자는 제품을 구매하지 않을 것이고, 다시는 웹사이트를 찾지 않을 것이다. 방문자에게 멋진 사용자 경험을 제공하기 위해서는 반드시 웹사이트 최적화가 이러어져야 한다. 야후에서 제공하는 파이어폭스 플러그인 Yslow는 웹사이트가 좀 더 잘 반응할 수 있도록 여러 가지 조언을 제공한다. 하지만 우리는 단순히 Yslow의 조언에서 멈추지 않고 MySQL 및 PHP를 최적화하는 단계까지 나아갈 것이다.
판매위한 디자인 : 전환율 높이기

웹사이트 운영자는 자신들의 웹사이트 많매율이 증가하고 회원 수와 RSS 구독자 수가 느는 등 좋은 일이 일어나길 바란다. 결국 이것은 '신규 방문자를 어떻게 충성 고객으로 바꿀 수 있느냐' 하는 질문으로 이어진다. 전환(Conversion)이란 사용자가 웹사이트에서 가치 있게 여기는 행위를 수행하는 것을 말하는 온라인 마케팅 용어이다. 예를 들어 온라인 쇼핑몰을 운영하고 있다면 제품 판매가 일종의 '전환'이라고 할 수 있다. 이 장에서는 효율적인 판매 방법에 대한 이론적인 내용을 살펴보고, 전환율(Conversion Rate)을 높이는 기법을 알아본다.

주목받는 브랜드 웹사이트로 만드는 비법

주목할만한(Remarkable)이라는 용어는 사람들 사이에서 '빈번히 언급, 추천'되는 것을 의미한다. 사람들이 여러분의 웹사이트를 신뢰하고 자발적으로 홍보해준다면, 그 사이트는 주목할 만한 브랜드로서의 가치를 지닌 것이다.
이 챕터에 소개된 핵심 기법은 여러분의 웹사이트 인지도를 높이는 데 도움이 될 것이다. 또한 여러분이 속한 산업군에서 권위자로 거듭날 수 있도록 성공적인 커뮤니티 형성을 비롯해 트래픽과 매출을 늘려줄 것쳀다.

인터뷰 : 전문가에게 배우는 통찰력

이 업계에서 가장 인지도 높고 성공한 디자이너들이 실력 향상을 원하는 이들에게 도움이 되고자 기꺼이 나섰다. 풍부한 전문 지식을 겸비한 이들은 성장하고자 하는 많은 사람에게 귀중한 통찰력을 선물해줄 것이다.

인터뷰 참여 인사 : Envato의 대표 콜리스 타이드, Headscape의 공동 설립자 폴 보그, 뉴욕타임즈의 디자인 디렉터 코이 빈, 블로그 line25.com을 운영하고 있는 프리랜서 디자이너 크리스 스푸너, 웹디자인 스튜디오 OnWired의 설립자 토니 체스터 등 유명 인사 총 24인.

무대 뒤 : 스매싱 매거진 이야기

'스매싱 매거진'은 어떻게 세상에 나오게 되었을까? '스매싱 매거진'은 어떤 두 남자가 절묘한 시기에 멋진 장소에서 획기적인 아이디어를 냈다는, 그런 드라마틱한 이야기가 아니다. 헌신, 인내, 노력…. 진정한 노력에 관한 이야기이다.
'스매싱 매거진'의 탄생 스토리에서 가장 특이한 점은 한 번도 전체적인 윤곽에 대해 논의한 적이 없다는 것이다. 사실 '스매싱 매거진'은 우연적 실험의 산물이라고 할 수 있다. 이 실험은 열정과 지식을 겸비한, 비슷한 생각을 가진 2명(스벤과 비탈리)의 웹 종사자가 시작한 것이다.

아무리 좋은 내용의 콘텐츠가 있어도 제대로 된 디자인이 뒤따라 주지 않는다면 무용지물! 이 책은 그런 면에서 디자이너들이 하나의 완성도 있는 작품을 내놓기까지의 과정과 그들이 겪는 고민, 솔직한 견해 등을 엿볼 수 있는 책입니다. 특히 Q&A 형식으로 작성된 '인터뷰 : 전문가에게 배우는 통찰력'에서는 그들 간의 격렬한 토론을 통해 디자인의 중요성을 다시 한번 느낄 수 있었습니다.
김정훈 (야후 코리아 미디어 이사)

20만명이 넘는 구독자를 가진 '스매싱 매거진'은 최신 웹 디자인/개발에 대한 내용이 가득한 매우 유용한 웹사이트입니다. 그들이 출간한 「스매싱 북」은 최근의 웹 디자인에 대한 우수 사례와 팁만을 엄선한 것으로, 흥미를 유발할 수 있도록 웹사이트를 잘 만드는 방법에 대한 다양한 내용을 담고 있습니다. 최근 웹 디자인 트렌드, 기술을 비롯해 해외 웹 전문가들이 어떤 생각을 하고 있는지 알고싶다면 이 책이 그 답이 될 것입니다. 모든 웹 기획자, 디자이너분들께 일독을 권합니다.
권정혁 (KTH 디벨로퍼 에반젤리스트)

인터넷 초창기에는 기업들이 웹사이트를 만드는 것으로 만족했지만 이제는 사용자가 방문하지 않는 웹사이트는 의미 없다는 것을 깨닫고 어떻게 잘 홍보할 것인가를 고민하게 되었습니다. 하지만 웹사이트 홍보를 열심히 한다 하더라도 사용자가 웹사이트를 방문했을 때 흥미를 갖지 못한다면 그 역시 소용 없는 일입니다. 그런 의미에서 「스매싱 북」은 근본적으로 어떻게 주목 받는 사이트를 만들 것인가에 초점을 맞추고 바람직한 내용 구성과 디자인 방법을 종합적으로 제시해 주고 있습니다.
김진수 (예스24 대표이사)

사용자 인터페이스는 사용자와 직접 교감을 나누는 부분으로 새로운 웹 서비스나 어플리케이션을 개발할 때 가장 중요한 부분 중 하나입니다.「스매싱 북」은 웹어플리케이션 및 웹사이트 디자인부터, CSS 레이아웃, 타이포그래피 그리고 최적화 등사용자 인터페이스와 관련된 원론적인 이야기부터 바로 활용할 수 있는 전문가 추천 테크닉까지 꼼꼼히 잘 정리했습니다. 만일 세계 최고의 웹애플리케이션 또는 웹사이트를 준비하신다면 「스매싱 북」을 꼭 참고하시길 …
이원석 (W3C HTML5 대한민국 관심그룹 의장)