웹 2.0을 이끄는 방탄웹

아무리 멋진 모양과 좋은 내용으로 가득찬 웹사이트를 만들었더라도 다양한 상황과 폭넓은 사용자층을 고려하지 않았다면 그것은 반쪽의 성공이라고 말할 수 있습니다. 댄 씨더홈의 『웹 2.0을 이끄는 방탄웹』은 유연성, 가독성, 사용자 편의성 등 성공적인 웹사이트가 갖춰야 할 핵심사항인 웹 표준 전략을 모두 갖춘 방탄웹을 구축하는 과정을 설명하는 책입니다. 각 장마다 기존의 흔해 빠진 방식으로 제작한 웹사이트를 사례로 들어 문제점을 분석하고 어떤 한계점을 갖고 있는지, 왜 방탄웹이 아닌지를 설명합니다. 그리고 이 사이트를 XHTML과 CSS로 재구축하여 엄청난 양의 코드를 깔끔한 마크업으로 정리하고 CSS를 통해 빠르게 로딩되면서 접근성이 높은 방탄웹으로 변신시키는 방법을 안내합니다. 특히 마지막 장에서는 이 책에서 다룬 기법을 종합해 진정한 방탄웹을 만들어 보게 됩니다.


█ 웹 2.0을 이끄는 방탄웹 █

링크를 클릭하시면 책에 실린 예제 화면을 볼 수 있습니다. 기존에 우리가 어떻게 하고 있었는지, 왜 그게 잘못됐는지, 이를 방지하려면 어떻게 해야 하는지에 대한 자세한 내용은 책에서 살펴 보시기 바랍니다.

1장. 자유로운 글꼴 크기 (영문 / 한글 )
2장. 크기조절이 되는 내비게이션 메뉴바 (영문 / 한글 )
3장. 높낮이가 조절되는 행 만들기 (영문 / 한글 )
4장. 나만의 float 활용비법 (영문 / 한글 )
5장. 깨지지 않는 상자 만들기 (영문 / 한글 )
6장. 이미지, CSS 없이도 볼 수 있게 만들기 (영문 / 한글 )
7장. 쉽게 변환할 수 있는 테이블 만들기 (영문 / 한글 )
8장. 유동적인 레이아웃 만들기 2단(영문 / 한글 ) 3단 (영문 / 한글 )
9장. 종합완결편 (영문 / 한글 )


[ 이 책의 주요 내용 ]

♣ 사용자가 직접 글꼴 크기를 조절할 수 있도록 키워드와 퍼센트값을 사용하는 방법
♣ 텍스트 분량과 글꼴 크기에 따라 늘어나는 내비게이션 메뉴바를 만드는 방법
♣ 가로형 디자인 요소가 세로방향으로 확장될 수 있게 하는 방법
♣ 격자형 디자인을 만들기 위해 float을 활용하는 방법
♣ 예상치 못한 상황까지 대비할 수 있는 박스 형태 디자인 방법
♣ 이미지나 CSS가 없을 경우에도 내용을 무리 없이 읽을 수 있는 페이지 제작 방법
♣ 데이터 테이블 안에 있는 모양 꾸미기용 코드를 걷어내고 CSS로 대치하는 방법
♣ 자유자재로 늘어났다 줄어들었다 하는 다양한 페이지 레이아웃을 만드는 방법


[ 방탄웹이란 ]

완벽한 방탄이 되는 방탄조끼를 만들기 위해서 지속적으로 노력하지만, 방탄조끼가 100퍼센트 완벽하게 신변보호를 보장해 주지는 않습니다. 하지만 방탄조끼를 입는 것과 입지 않는 것을 비교할 수는 없을 겁니다. 웹 사이트 구축 관련 기법에서도 이 규칙은 그대로 적용됩니다. 최대한 다양한 조건에서도 잘 보이는 유연한 웹 페이지를 만들기 위해 필요한 단계를 제대로 밟아나갈 때 정말 확연히 다른 결과물을 만들 수 있습니다. 즉 지속적인 과정이라는 것입니다. 이를 통해 의미를 살린 XHTML과 CSS 같은 웹 표준을 활용한 멋진 디자인을 좀 더 쉽게 할 수 있습니다.

최근 몇 년간 CSS으로 레이아웃을 만든 사이트가 많아지면서 CSS를 제대로 활용하는 방법에 대한 관심도 높아지고 있습니다. 이렇게 CSS 기반의 디자인을 하는 목적은 적은 코드양, 높은 접근성과 유지보수성 등 디자인 관점에서 취할 수 있는 기술적인 장점을 얻고자 하는 데 있습니다. 하지만 단지 CSS와 XHTML을 사용한다고 해서 저절로 모든 것이 좋아지지는 않습니다. 핵심 내용과 디자인을 분리하여 높은 유연성을 추구할 때, 웹을 이용하는 모든 사람들에게 좀더 나은 디자인을 제공할 수 있습니다.


[ 왜 중요한가 ]

이 책을 처음 구상할 즈음 훌륭한 웹 디자인은 두 가지 요소를 갖춰야 한다는 생각이 들었습니다. 한 가지 요소는 완성된 페이지를 통해서 방문자들이 보게 될 비주얼한 구성요소입니다. 이는 디자이너가 조화롭게 만든 그래픽 이미지, 색상, 타이포그래피로 구성됩니다. CSS 젠 가든(www.csszengarden.com)에 방문해보시면 XHTML과 CSS를 이용해서 얼마나 멋진 비주얼 디자인을 갖출 수 있는지 쉽게 알 수 있을 것입니다.

훌륭한 웹 디자인을 구성하는 두번째 요소는 방탄웹 특성을 갖도록 구축하는 것입니다. 바로 이 점이 이 책에서 중점적으로 다루고자 하는 요소이기도 합니다. XHTML과 CSS를 쓰면 이런 장점을 쉽게 얻을 수 있습니다. 또한 유연하면서도 쉽게 주변환경에 적응가능하고 접근성이 높으면서도 멋진 모양을 갖는 웹 디자인을 하기 위해 웹 표준의 장점을 이용할 수 있습니다.

XHTML과 CSS 같은 웹 표준 도입이 빠르게 확산되면서 표준의 올바른 활용법과, 가장 적합한 구현 방법에 대해서 설명하는 자료에 대한 필요성도 점점 더 높아지고 있습니다.


[ 이 책의 구성 ]

이 책은 각 장마다 방탄웹을 만드는 방법에 대해서 소개합니다. 현재 존재하고 있는 웹 사이트의 디자인을 살펴보고, 기존 방식의 문제점에 대해서 먼저 살펴봅니다. 그러고나서 XHTML과 CSS를 활용해 유연성이 높으면서도 적은 양의 코드를 작성합니다.

대부분의 예제들은 페이지에 들어가는 디자인 구성요소들입니다. 각 구성요소들이 어떻게 방탄웹을 구성해가는지 쉽게 볼 수 있을 것입니다. 마지막 장은 앞서 살펴본 개별 예제들을 이용해서 완벽한 한 페이지를 구성해볼 것입니다. 각 예제의 기법들을 다시 한번 복습하면서 각각을 한데 모은 페이지를 만들어 보겠습니다.

각 예제들은 단계별로 구성되어 있어서 XHTML과 CSS 초보자라도 쉽게 따라할 수 있을 것입니다. 이런 과정을 통해서 웹 표준이 가져다 주는 이점과 각 지침들을 준수할 때 좀 더 견고한 방탄웹이 되는 이유에 대해서 설명하겠습니다.

[ 저자 소개 ]

댄 씨더홈 www.simplebits.com

댄 씨더홈은 여러 차례 수상 경력이 있는 웹 디자이너이자 작가입니다. 현재 메사추세츠주의 살렘에 살고 있으며, 디자인 및 웹 개발 컨설팅 회사인 심플비츠(SimpleBits)의 창업자이기도 합니다. 저자는 웹 표준 기반의 사이트 디자인과 구축에 다년간의 경험을 쌓아왔습니다. 이 분야에 관련된 전문성이 널리 인정받아 다양한 컨퍼런스에서 강의한 바 있으며 웹표준 기반의 디자인을 도입하려는 기업에 자문을 많이 하고 있습니다. 많은 관심을 받은 바 있는 『실용 예제로 배우는 웹 표준』의 저자이면서, “어 리스트 어파트(A List Apart)”에 여러 기사를 기고했습니다. 웹, 기술, 그리고 인생 전반에 대한 글을 올리는 유명 블로그인 심플비츠(SimpleBits)를 운영하고 있습니다.


[ 역자 소개 ]

박수만

엔비닷컴(www.enbee.com) 대표이사. 2002년부터 운영하고 있는 개인 블로그인 suman’s shallow thoughts(www.sumanpark.com)는 블로그계에 널리 알려져 있다. 그의 블로그에서는 웹 표준 외에도 웹사이트 기획 및 개발에 관련된 트렌드는 물론이고 그의 잔잔한 일상도 엿볼 수 있다. 명지대학교 컴퓨터공학과 학부와 대학원(소프트웨어 공학 전공)을 졸업했으며, 『실용 예제로 배우는 웹 표준』(에이콘출판, 2005)을 번역했다.


[ 역자 서문 ]

개념이 있다/없다
수익모델이 있다/없다
거품이다/아니다

웹2.0으로 업계가 시끌시끌합니다. 그러면서도 모두들 미국 사례만 얘기합니다. 사례로 드는 미국 기업 중에 웹 표준과 거리가 먼 회사가 몇 개나 될까요. 웹2.0이 이 책이 나온 시점에서 1년이 지나 3.0이 될지 모르겠지만 그에 관계없이 웹 표준은 모든 웹사이트가 갖춰야 할 기초이며, 입어야 할 옷입니다.

웹 사이트와 블로그에 새로운 기법과 팁이 계속 소개되지만 대부분 업계 종사자들이 따라다니면서 읽기엔 역부족이고, 웹 표준을 하려고 해도 자료가 태부족이니 국내에 정착하지 못하는 걸 업계 종사자 탓만 할 수는 없습니다.

우연인지 필연인지 국내 최초 웹 표준 도서에 이어 두 번째 책도 제가 번역해 펴내게 되어 매우 기쁩니다. 이 책으로 국내에서도 멋진 방탄웹이 끊임없이 등장하길 바랍니다.

[ 추천의 글 ]

국내에도 웹 표준 준수에 대한 관심이 뜨거워 지고 있습니다. 우리가 “웹 표준을 준수한다”라고 하면 그냥 일반적인 표준 스펙을 잘 지키는 것뿐만 아니라 구조적 마크업(XHTML)과 표현 및 레이아웃(CSS) 및 사용자 행위 제어(DOMScripting)를 잘 분리하는 고급 홈페이지 구축 방식을 의미합니다.
이제 웹 2.0 Startup 회사들 백이면 백 모두 XHTML+CSS 레이아웃을 사용하고 있을 정도로 고급 웹 구축 방법론이 보편화 되고 있습니다. 하지만 많은 분들이 이러한 구축 방법에 익숙해 지기 위해 자료가 절대적으로 부족하다고 이야기 하고 있습니다. 사실 웹이 처음 도입 되기 시작하면서 홈페이지 제작이 Copy & Paste 형식으로 배워 왔던 입장에서는 당연한 이야기라고 생각됩니다. 이제 워드 프레스, 태터툴즈 등 웹 표준을 지원하는 대중적인 블로그 도구가 나오면서 이들 블로그를 쓰는 사람들은 글 쓸 때 마크업만 약간 신경 쓰면 훌륭한 웹 표준 사이트가 됩니다. 이러한 케이스 스터디로부터 사람들을 배웁니다. 그럼에도 불구하고 책을 통한 학습은 매우 중요한 요소 입니다. 다행히 작년에 웹 표준 관련 최초 번역서가 나온 이후로 준비되고 있는 책들이 독자의 수준에 맞추고 있습니다.
무엇보다도 작년에 출간된 『실용 예제로 배우는 웹 표준』은 국내 최초의 웹 표준 책인 만큼 기대만큼이나 효과도 높았던 책입니다. 제가 추천사를 써줄 때만 해도 책이 잘 팔릴지 걱정이 많이 됐지만 이 책에 대한 호응도가 얼마나 좋은지 어느덧 2쇄가 발행되었다고 합니다. 이 책이 준 긍정적인 영향이 계속 나타날 것이라고 생각됩니다.
또다시 『실용 예제로 배우는 웹 표준』의 저자인 댄 씨더홈의 두번째 책인 『Bulletproof Web Design』을 번역한 수만님의 두 번째 책인 『웹 2.0을 이끄는 방탄 웹』이 곧 출간된다고 하니 기쁘기 그지 없습니다. 이 책은 많은 예제를 담고 있으며 실전 내용들이 많습니다. 기존에 어떻게 하고 있었는지, 왜 그게 잘못됐는지, 이를 방지하려면 어떻게 해야 하는지 알려 주고 있습니다. 앞으로도 이처럼 좋은 책들이 더 많이 나와주길 바랍니다.



대개 외국 책의 번역서를 접할 때면 옮긴이가 엉뚱하게 옮기지 않을까 하는 걱정이 항상 앞선다. 많은 IT서적이 생뚱맞은 번역으로 지탄의 화살을 받았고, 차라리 원서가 낫다는 이야기를 듣는 판국이 아닌가. 하지만 『실용 예제로 배우는 웹 표준』에 이어 이번의 『웹 2.0을 이끄는 방탄웹』도 엔비닷컴의 박수만님이 번역해 펴낸다니 글의 품질에 대한 걱정은 안 해도 되겠다.
안타까운 점은 이렇게 좋은 책들이 수많은 국내 개발자, 기획자, 디자이너, CEO의 손에 들어가지 못 하고 있는 점이다. 1편에 해당하는 『실용 예제로 배우는 웹 표준』이 최근에야 2쇄를 찍었다는 소식은 한편으로 기쁘면서도(꾸준하게 잘 팔리고 있어서) 한편으로는 아쉬운(이제 겨우 2쇄라는 점에서) 소식이다. 『실용 예제로 배우는 웹 표준』을 아직 읽어보지 않았다면 2편인 방탄웹이 나오기 전에 읽어보기를 권한다. CSS를 활용한 웹 표준 준수가 왜 기업의 경쟁력에 도움이 되고, 자신의 홈페이지 관리에 유용한지 알 수 있을 것이다.
한 기업의 대표로 바쁜 와중에도 좋은 책을 번역한 박수만님에게도 감사를 전한다. 방탄웹 때문에 설날 연휴 때도 쉬지 못 했다는데, 많은 사람의 감사 표시로 노고의 대가를 받을 것이라 생각한다.

[ p70 본문 두 번째 문단 2행 ]
에 패딩값을 지정하고,
→ 에 마진값을 지정하고,

[ p217 본문 2행 ]
http://chirispederick.com/work/webdeveloper/
→ http://chrispederick.com/work/webdeveloper/

[ p222 3행 ]
http://validator.w3c.org
→ http://validator.w3.org

[ p286 두 번째 코드 ]
<div id="sidebar">
  <div>
    ... 사이드바 영역 ...
  </div>
</div>
→ <div id="content">
  <div>
    ... 컨텐트 영역 ...
  </div>
</div>