한빛출판네트워크

웹 페이지 제작과정을 처음부터 완성될 때까지 체계적으로 체험해 볼 수 있으며, 사용자 경험(UX) 입장에 기반하여 웹 페이지의 문제점을 찾아내어 수정하는 방법을 안내하는 실용적인 웹 디자인 지침서다.

『Head First Web Design』은 『Head First HTML with CSS & XHTML : 웹2.0 시대의 웹 표준 학습법』를 마친 후에 읽어야 할 책이다. 전자가 웹 디자인에 대한 기초적인 이론, 즉 HTML, CSS, XHTML에 대한 학습서라고 하면, 이 책은 이러한 기술을 바탕으로 실제 웹 페이지를 만드는 과정을 담고 있다.

이 책의 특징과 장점

• 사용자 경험(UX)에서 바라본 웹 페이지 제작
  이 책은 HTML, CSS, XHTML 기술을 바탕으로 실제 상용적인 웹 페이지를 만드는 과정을 담은 책이다. 디자이너 입장에서 단순히 화려하고, 현란한 웹 페이지를 만드는 것이 아니라 웹 페이지를 방문하는 사용자 경험(UX) 관점에서 바라봤을 때 실용적이며 깔끔한 웹 페이지를 만들 수 있도록 안내한다.
   
• 스토리보드를 이용한 체계적인 웹 페이지를 제작할 수 있도록 안내
  독자는 이 책을 통해 현장에서 일하는 웹 디자이너가 되어 실제로 웹 디자인 프로젝트를 수행하는 과정을 체험할 수 있다. 특히, 이미 만들어진 웹 페이지에 대한 문제점이 무엇인지 파악하는 방법, 그리고 이를 수정하는 방법을 Head First 시리즈 독특한 화법과 구성으로 설명하고 있다.

어떤 독자를 위한 책인가?

• 1차 : 웹 디자인 입문자
  이 책은 HTML, CSS, XHTML 과 같은 기본적인 웹 기술을 익힌 다음, 실제 웹 디자인을 구현하는 내용을 담고 있다. 웹 사이트를 직접 방문하는 사용자 입장에서 바라보는 디자인 관점에 대해 배울 수 있고, 실제로 구현하기 위한 스킬도 함께 익힐 수 있다.
   
• 2차 : 기존 웹 디자이너
  기존 웹 디자이너에게는 학습서는 아니지만 새로운 시각에서 바라본 체계적인 웹 디자인에 대한 내용을 경험할 좋은 기회가 될 것이다.

서문 - Web Design에 대해 생각해 봅시다.
Web Design에 대해 생각해 봅시다. 지금 여러분은 뭔가를 배우려 하고 있습니다.
하지만 여러분의 두뇌를 배우는 일에만 집중시키는 것은 쉽지 않습니다. 여러분의 두뇌는 '밖으로 나가면 어떤 들짐승을 주의해야 하는지, 아무것도 걸치지 않고 스노보드를 타는 것은 안 좋은 일이라든지...'라는 쓸데없는 생각을 하고 있을지 모르니까요. 그렇다면 여러분의 두뇌로 하여금 Web Design을 배우는 것이 살아가는 데 매우 중요한 일이라고 느끼게 하려면 어떻게 해야 할까요?

1장 - 아름다운 웹 페이지 만들기
세계는 넓은데... 도대체 그곳에는 어떤 사람들이 살고 있을까요? 여러분은 빛나는 XHTML과 CSS 졸업장을 사무실 벽에 걸어놓고 있고, 잠재적인 고객들은 여러분이 가게 문을 열기를 기다리고 있습니다. 정말 근사하죠? 좋지 않은 레이아웃이나 로고로 인해 첫 번째 불만 사항이 접수되기 전까지는(바로 1998년도) 이렇게 좋은 시절도 있었죠. 그렇다면 정말 아름다운 웹 사이트를 만들어서 사용자를 만족시키려면 어떻게 해야 할까요? 좋은 계획이 첫 번째 열쇠입니다. 그리고 나서 방문자에 대해 파악하고 웹에서 뭔가를 작성하세요. 무엇보다도 중요한 점은 자신이 아닌 사용자를 위한 디자인을 해야 한다는 것입니다.

2장 - 사전 제작
까다로운 고객 때문에 골치 아픈 정도는 지금쯤 이력이 났죠? 최신 디자인 아이디어를 까다로운 고객에게 보여줄 때마다 그들은 또 다른 형태, 또 다른 색 배합, 또 다른 웹 사이트를 요구합니다. 그렇다면 변덕스러운 고객들과 그들의 까다롭고 파악하기 힘든 웹 사이트를 어떻게 다뤄야 할까요? 일단 종이와 연필, 커다란 지우개를 준비하세요. 이 장에서 여러분은 HTML 편집기를 파고들기 전에 현명하게 일하는 방법부터 배우게 될 것입니다. 사이트를 위한 주제와 시각적 은유를 찾아내고, 연필로 밑그림을 그리고, 스토리보드를 사용해서 영리하고 유연한 웹 디자이너가 되어보세요. 자, 스케치 패드를 가지고 사전 제작을 해 봅시다.

3장. 사이트 구조화
사이트 내에서 길을 찾는 데 좀 불안한가요? 사이트 방문자들은 인내심이 그리 많지 않습니다. 예를 들어 버튼을 찾는 데 시간을 보내거나 자바스크립트로 만든 풀다운 메뉴가 3단계까지 펼쳐지는 것을 좋아하지 않습니다. 바로 이런 이유 때문에 웹 사이트를 설계하고 제작하기 전에 먼저 체계적으로 구성하는 데 심혈을 기울여야 하죠. 지난 장에서 여러분은 훌륭한 주제를 물색하고 찾아내는 데 집중했습니다. 이번 장에서는 사이트를 훨씬 깔끔하고 명료하게 구성하는 방법을 배울 것입니다. 이 장을 마칠 때쯤이면 방문자들이 사이트 내에서 허둥대지 않도록 올바르게 길을 안내할 수 있을 거예요.

4장 - 레이아웃과 디자인
남의 말에 귀를 기울이고, 항상 휴대용 계산기를 갖고 다니세요. 지난 몇 장에서 사용자 중심 디자인에 관해 얘기해 왔는데, 지금부터는 여러분의 경청 기술을 테스트하게 될 것입니다. 이번 장에서는 사용자들의 피드백을 받고 그들의 요구에 맞는 사이트를 구축하는 법을 배우게 될 거예요. 브라우저에서 화면상의 작업 공간까지, 사용자들이 실제로 원하는 것을 제공하게 될 것입니다. 또한 2/3 법칙의 비밀도 알게 될 거예요. 계산기와 자 그리고 격자선을 이용해서 투박한 웹 페이지를 아름답게 변화시키는 몇 가지 간편한 방법을 찾아봅시다.

5장 - 색상을 가미한 디자인
색은 웹 디자인 세계에서 숨겨진 영웅입니다. 좋은 색은 방문자들을 사이트로 유인해서 강력한 흡인력으로 또 다시 방문하게 하죠. 색과 웹 디자인의 관계는 단순히 좋은 색을 고르는 것이 아닌 좋은 색을 어떤 식으로 적용하는가 하는 문제입니다. 좋은 색은 많기는 하지만 신중하게 사용하지 않으면 사람들은 여러분의 사이트를 마치 전염병의 온상지인양 피하려 들 것입니다. 이 장을 마칠 때쯤이면 여러분은 색이 웹 사용자들에게 미치는 영향과 친해질 뿐만 아니라 사용자 중심의 웹 사이트에 맞게 아름답고 훌륭해 보이는 색을 선택할 수 있게 될 거예요.

6장 - 똑똑한 내비게이션
내비게이션이 없는 웹을 상상할 수 있겠어요? 내비게이션은 웹에서 강력한 정보 매개체 역할을 하는데, 단순히 몇 가지 버튼을 만들어 디자인에 끼워 넣는 것 이상의 기능을 수행합니다. 똑똑한 내비게이션 제작은 정보 전달 체계의 구성부터 설계 과정 전반에 걸쳐 진행됩니다. 그런데 내비게이션은 어떤 식으로 작동될까요? 방문자들이 사이트 내에서 길을 잃지 않게 하려면 어떻게 해야 할까요? 이번 장에서는 여러 종류의 내비게이션을 살펴보고 IA가 페이지 링크를 어떤 식으로 인도하는지 그리고 아이콘이 단순한 아이콘 이상의 의미를 갖는 이유를 알아볼 것입니다.

7장 - 웹을 위한 글쓰기
웹에서 글을 쓰는 것은 일반적인 글쓰기와는 매우 다릅니다. 실제로 웹에서 글을 쓰는 것은 종이에 글을 쓰는 것과는 완전히 다릅니다. 사람들은 활자로 인쇄된 글을 읽는 것과는 다른 방식으로 웹에 있는 글을 읽죠. 즉, 왼쪽에서 오른쪽으로 읽는 대신 위에서 아래로 쭉 훑어봅니다. 사이트에 있는 모든 텍스트는 방문자에 의해 빨리 보고 쉽게 파악될 수 있어야 합니다. 그렇지 않다면 방문자들은 여러분의 사이트를 보는 것이 시간 낭비라 생각하고 다른 곳으로 떠나버릴 거예요. 이번 장에서는 읽기 쉽고 빨리 파악할 수 있는 글을 쓰는 몇 가지 요령과 기존의 글을 쉽게 만드는 방법에 대해 배우게 될 거예요.

8장 - 접근성
여러분의 웹 사이트를 이용할 수 없는 사람은 누구일까요? 여러분은 찾기 쉽고 아름다우며 멋진 레이아웃을 가진 사이트를 만들었을 것입니다. 하지만 이렇게 만들었다 하더라도 모든 사람들이 여러분이 구축한 사이트를 자유자재로 사용할 수 있는 것은 아닙니다. 시각장애인이나 색맹인 사람들이 쉽게 접근할 수 있는 사이트를 만들어야 합니다. 그렇지 않으면 많은 고객을 잃을 수 있고 사업에 심각한 타격을 입을 거예요. 하지만 걱정하지 마세요. 접근성을 좋게 하는 것은 어렵지 않습니다. 마크업의 순서를 잘 설계하고 ALT 속성과 LONGDESC 태그를 사용하고 색 사용을 고려한다면 더욱 많은 사람들이 방문할 수 있는 사이트를 만들 수 있을 거예요. 더불어 WCAG 인증도 받을 수 있습니다. 그런데 WCAG 인증이 무엇일까요? 페이지를 넘겨 알아보도록 하죠...

9장 - 방문자들의 소리에 귀 기울이기
방문자들이 정말 원하는 것은 좋은 디자인뿐입니다. 방문자들은 사이트에서 무엇이 잘되었고 잘못되었는지 그리고 문제점을 어떻게 수정하고 개선해야 하는지 얘기해 줄 수 있습니다. 이러한 방문자들의 의견을 수렴하기 위한 여러 가지 방법이 있습니다. 사용자 그룹(설문 조사를 통해)으로부터 들을 수도 있고, 개별 방문자(사용성 테스트와 같은 도구를 이용해서)로부터 들을 수도 있죠. 또한 방문자들이 사이트에서 행하는 집단적 행동에 대한 정보(사이트 통계 등을 이용해서)도 모을 수 있죠. 방법이야 어떻든 방문자들의 의견을 듣는 것이 중요합니다. 그렇게 한다면 여러분의 사이트는 청중들의 요구 사항을 만족시켜 한층 더 향상된 사이트가 될 것입니다.

10장 - 진화하는 디자인
지금까지 여러분은 아주 멋진 웹 사이트를 여러 개 만들었습니다. 이제 의자에 편안히 앉아 쉬면서 방문객 수가 증가하는 것을 지켜볼 때가 된 것 같군요. 정말 그럴까요? 너무 앞서 가지 마세요. 웹은 끊임없이 진화하고 있으며, 여러분이 만든 사이트도 이러한 흐름을 따라야 합니다. 새로운 특성을 추가하고 디자인 일부를 조정하거나 심지어는 디자인 전체를 바꿀 수도 있습니다. 계속 진화하면서 살아남는 사이트는 여러분의 기술이 향상되고 있음을 알려주는 지표라고 할 수 있죠. 여러분이 제작한 사이트야말로 자신을 홍보하는 최적의 수단입니다.

11장 - 웹 디자인 사업
웹 디자인 책으로 장사한다고요? 지금 놀리는 거죠? 여러분은 사전 제작, 정보 전달 체계, 내비게이션, 색, 그리고 접근 용이성까지 모두 섭렵했습니다. 웹 디자인 업계의 강자로 우뚝 서기 위해 남은 것은 무엇일까요? 바로 웹 디자인 사업을 하기 위해 필요한 몇 가지 관문이 남아 있습니다. 그렇다고 하버드의 MBA 졸업장이 필요한 것은 아닙니다. 물론 은행 잔고에 충분한 돈이 있는지, 발행한 수표가 부도가 나지 않았는지 확인할 필요는 있겠죠. 지금부터 좋은 고객들과 관계를 정립하고 여러분의 지적 자산을 올바르게 사용하는 법을 살펴보도록 하죠. 제대로만 된다면 여러분의 노고에 대한 적절한 보상과 수익이 늘어나는 것을 확인할 수 있을 거예요.