Top

웹 2.0을 이끄는 방탄웹 [크리에이티브한 웹 표준 기법과 제작 사례]

  • 원서명Bulletproof Web Design (ISBN 9780321346933)
  • 지은이Dan Cederholm
  • 옮긴이박수만
  • ISBN : 8989975891
  • 22,000원
  • 2006년 03월 10일 펴냄
  • 페이퍼백 | 384쪽 | 190*235mm
  • 시리즈 : 웹 프로페셔널

판매처

개정판
파일다운로드

책 소개

아무리 멋진 모양과 좋은 내용으로 가득찬 웹사이트를 만들었더라도 다양한 상황과 폭넓은 사용자층을 고려하지 않았다면 그것은 반쪽의 성공이라고 말할 수 있습니다. 댄 씨더홈의 『웹 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이 될지 모르겠지만 그에 관계없이 웹 표준은 모든 웹사이트가 갖춰야 할 기초이며, 입어야 할 옷입니다.

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

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

- 박수만

목차

목차
  • 1장. 글꼴 크기를 내 맘대로
  • 흔해 빠진 구축방식
    • 방탄웹이 아닌 이유
  • 최적의 방법 선택하기
    • 길이 단위
    • 상대크기 키워드
    • 퍼센트값
    • 퍼센트값
  • 방탄웹으로 만들려면
    • 키워드 설명
    • 픽셀 고정은 이제 그만
    • 두 가지 장애물
    • 단순화한 박스 모델 핵
  • 왜 방탄웹인가
  • 다음단계
    • 기본 글꼴 크기 지정하기
    • 퍼센트 값을 이용해서 기본 글꼴과 다른 크기 지정하기
  • 키워드 값과 퍼센트 값을 사용하기
    • 기본 글씨 크기값을 정확하게 잡아가기
    • 퍼센트값을 겹쳐 쓸때 유의할 점
    • 퍼센트 값을 이용해 일관성 유지하기
  • 요약
  • 2장. 자유롭게 크기가 조절되는 내비게이션 메뉴바
  • 흔해 빠진 구축 방식
    • 탭 구현방식
    • 롤오버 효과
  • 방탄웹이 아닌 이유
    • 용량 크기 문제
    • 접근성 문제
    • 크기 조절 문제
    • 유지보수 문제
  • 방탄웹으로 만들려면?
    • 스타일 미적용시 모습
    • 작은 이미지 두 개면 오케이
    • 스타일 적용
    • float을 추가로 지정해 문제 해결하기(float-to-fix 방법)
    • 탭 모양 꾸미기
    • 배경 이미지 지정
    • 바닥 테두리선 추가
    • 마우스 오버 효과 주기
    • 선택된 상태 표현하기
  • 방탄웹이 좋은 이유
  • 그 밖의 사례 소개
    • 모질라
    • 슬랜츠
    • ESPN 검색
  • 요약
  • 3장. 자유자재로 높낮이가 조절되는 행 만들기
  • 흔해 빠진 구축 방식
  • 방탄웹이 아닌 이유
    • 불필요한 그래픽 사용
    • 고정된 높이값
    • 복잡한 코드
  • 방탄웹으로 만들려면?
    • 마크업 구조
    • 각 요소에 id 부여하기
    • 스타일 미적용시 모습
    • 배경 지정
    • 위치 지정
    • 사라진 배경색
    • 디테일한 디자인 요소 추가
    • 4개의 둥근 모서리
    • 텍스트와 링크 모양
    • 마지막 단계
  • 방탄웹이 좋은 이유
    • 구조와 디자인의 분리
    • 고정되지 않은 높이
  • 세로 확장 사례 하나 더
    • 마크업
    • 이미지 2개 준비하기
    • CSS 적용
    • 자동 확장 기능
  • 요약
  • 4장. 나만의 Float 활용 비법
  • 흔해 빠진 구축 방식
    • 방탄웹이 아닌 이유
  • 방탄웹으로 만들려면?
    • 최적의 구조를 결정해 보자
    • 정의 리스트 사용
    • 마크업 구조
    • 스타일 미적용시 모습
    • 외곽 영역 꾸미기
    • 사진 이미지를 마크업하자
    • 기본 스타일 적용하기
    • 이미지 위치 지정
    • 양쪽 끝에 띄우기
    • 설명문의 길이가 짧아도 깨지지 않는 레이아웃
    • 멋지게 꾸미는 마무리
    • 이미지 정렬 방식
    • 그리드 효과
    • 배경 이미지 꾸미기
  • 방탄웹이 좋은 이유
  • 요약
  • 5장. 깨지지 않는 상자 만들기
  • 흔해 빠진 구축 방식
  • 방탄웹이 아닌 이유
  • 방탄웹으로 만들려면?
    • 마크업 구조
    • 이미지 준비 전략
    • 스타일 입히기
  • 방탄웹이 좋은 이유
  • 그 밖의 둥근 모서리 기법 소개
    • 브라우즈 해피 사례
  • 요약
  • 6장. 이미지나 CSS가 없이도 볼 수 있게 하기
  • 흔해 빠진 구축 방식
  • 방탄웹이 아닌 이유
  • 방탄웹으로 만들려면?
  • 방탄웹이 좋은 이유
  • 스타일 유무 여부에 관계없는 디자인
    • 10초만에 하는 사용성 검사
    • 흔해 빠진 구축 방식
    • 방탄웹으로 만들려면?
  • 방탄웹을 만들기 위한 도구 소개
    • 패블릿
    • 웹 개발 확장 기능
    • 웹 접근성 툴바
    • 유효성 검사도 하나의 도구
  • 요약
  • 7장. 쉽게 변환할 수 있는 테이블 만들기
  • 흔해 빠진 구축 방식
  • 방탄웹이 아닌 이유
  • 방탄웹으로 만들려면?
    • 마크업 구조
    • 스타일 적용하기
  • 방탄웹이 좋은 이유
  • 요약
  • 8장. 유동적인 레이아웃 만들기
  • 흔해 빠진 구축 방식
  • 방탄웹이 아닌 이유
    • 남용되는 코드
    • 끔찍한 유지보수
    • 컨텐트 표시 순서 문제
  • 방탄웹으로 만들려면?
    • 마크업 구조
    • 다단 레이아웃 만들기
    • 스타일 적용하기
    • 단 간격 지정
    • 단 여백 지정
    • 최소/최대 너비값 지정
    • 이동하는 가짜 단 만들기
    • 3단 레이아웃 만들기
  • 방탄웹이 좋은 이유
  • 요약
  • 9장. 방탄웹 구축 완결종합편
  • 목표 설정
  • 흔해 빠진 구축 방식
    • 유동적인 레이아웃
    • 글꼴 크기를 맘대로
    • 이미지나 CSS 없이도 볼 수 있는 페이지
  • 기초 공사
    • 마크업 구조화
    • 기본 스타일 지정
    • 레이아웃 구조 지정
    • 사이드바 메뉴 배경 만들기
    • 헤더 영역
    • 이벤트 공지사항 영역 꾸미기
    • 단 간격 조정
    • 컨텐트 영역 꾸미기
    • 사이드바 메뉴 영역 꾸미기
    • 푸터 영역 꾸미기
  • 인터넷 익스플로러를 위한 CSS 문제 해결
    • 핵 관리 방법
    • 푸터 문제 해결 방법
    • 자체 float 해제 문제 해결 방법

관련 블로그 글

우수학술도서 금딱지 붙은 『웹 2.0을 이끄는 방탄웹』
지난 8월 18일에 알려드렸던 뉴스가 하나 있었죠.『웹 2.0을 이끄는 방탄웹: 크리에이티브한 웹 표준 기법과 제작 사례』가  대한민국 학술원에서 선정하는 기초학문 육성 2008년도 우수학술도서에 뽑혔다는 소식이요.

오늘 드디어 방탄웹 책에 금딱지가 붙었습니다.

사용자 삽입 이미지

대한민국학술원에서 구입한 책은 주로 대학교, 공공도서관, 연구기관 등에 배포할 예정이라고 합니다. 하지만 금딱지 스티커가 붙은 책이 앞으로 서점을 통해 독자 여러분께도 찾아갈 수 있으니, 서점에서 금딱지 본을 찾으시면 크게 "빙고!"를 외쳐주세요. :)

사용자 삽입 이미지

앞으로 나올 책 표지 디자인할 땐 금딱지 붙을 자리를 염두에 두고 비워야 할지도. --a 여튼, 좋은 책 열심히 만들겠습니다. 지켜봐 주세요. 이번 주에 선보인 『실전 윈도우 디버깅』과『엔터프라이즈급 애자일 방법론』에 이어 여러분이 기다리시는 멋진 신간이 이 달에도 엄청 쏟아질 테니까요.

모두, 즐겁고 행복한 주말 보내세요!
CC

크리에이티브 커먼즈 라이센스 이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

자축!『웹 2.0을 이끄는 방탄웹』우수학술도서 선정!

여러부운~~~~ 대한민국 학술원에서 선정하는 기초학문 육성 2008년도 우수학술도서에 저희 에이콘출판사의 『웹 2.0을 이끄는 방탄웹: 크리에이티브한 웹 표준 기법과 제작 사례』가 뽑혔습니다! 우와~ 모두 축하해주세요. ^^/

사용자 삽입 이미지
2008 우수학술도서는 2006년 1월부터 2007년 12월까지 국내에서 초판 간행된 기초학술도서 중 인문학, 사회과학, 한국학, 자연과학 등 4개분야를 나눠 선정했습니다. 선정된 자연과학 분야 책은 총 55종으로서 수학, 물리학, 화학, 생물학, 지구과학, 기초의학 등의 책으로서 IT관련 책은 너댓권 정도 밖에는 눈에 띄지 않네요.

대부분 대학 교재이거나 기초학술 관련 책인 반면 저희 책은 일반 독자분들께도 큰 사랑을 받았던 책이라 그 의미가 더욱 크다고 하겠습니다. 2005년 여름, 웹 표준에 대한 바람몰이를 시작한 『실용예제로 배우는 웹 표준』을 첫 시작으로 웹 표준의 대중화를 이끈 『웹 2.0을 이끄는 방탄웹』, 『CSS 마스터 전략』, 『웹 디자인 2.0 고급 CSS』까지 그리고 앞으로 출간할 많은 웹 표준 책을 대표해 방탄웹 책이 상을 탐으로서, 그저 좋은 책으로 인정을 받았다는 사실을 넘어 학술적으로도 이젠 웹 표준 분야가 자리매김을 한 것 같아 더욱 기쁩니다. 2005년 봄 역자이신 미투데이의 만박 박수만님을 소개 받고, 그 이후 만박님이 웹 표준 책을 내보자며 그 절박한 필요성에 대해 달변을 쏟아내실 때만 해도 우리나라 웹 표준 분야는 황무지와 다름 없었습니다. 이 자리를 빌려 그간 웹 표준 보급에 애쓰신 여러 개발자와 디자이너, 기획자 분들께도 감사드립니다.

그리고 무엇보다도 좋은 책 소개해주시고 훌륭히 번역해주신 역자 박수만님께 감사드립니다. 예비군 훈련을 가셨다가 방탄모를 쓰고 그당시 막 출간된 방탄웹 책이 떠올랐다며 보낸 사진을 다시 꺼내봅니다. 이 사진은 이후 방탄웹 책 역자 소개란에도 실렸었죠. 지금도 재미있는 책 번역하고 계시는 만박님! 2006년 겨울 이후로 1년 반 동안 이어지고 있는 공백기를 깨고 컴백하셔서, 수많은 추종자들께 얼른 재미있는 신간 선보여주시길! :) 만박님의 요새 모습을 보고싶은 분은 여기를. 저도 좀전에 직원이 보여줘서 봤는데... 와하하. 재밌어요~ㅋㅋㅋ 늘 즐거운 짤방으로 즐겁게 해주시는 융님. 그림 너무 멋져요. ㅎㅎ

사용자 삽입 이미지

상이라는 건 크든 작든 받는 이에게는 큰 기쁨과 힘을 주는군요. 갑자기 에너지가 팍팍 솟구치는 기분입니다. 에이콘이 엔돌핀이 넘치면? 기분이 좋아 더 좋은 책 더 많이 나오지 않으니 독자분들은 더 좋으시겠어요. ㅎㅎ 흠좀무 에이콘! 자, 여러분들도 가까운 분들께 상은 아니더라도 용기와 힘을 북돋워주는 따뜻한 말 한 마디쯤 건네봐주세요. 여하튼 기분 좋은 저녁입니다~ ^^/

CC

크리에이티브 커먼즈 라이센스 이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

도서 오류 신고

도서 오류 신고

에이콘출판사에 관심을 가져 주셔서 고맙습니다. 도서의 오탈자 정보를 알려주시면 다음 개정판 인쇄 시 반영하겠습니다.

오탈자 정보는 다음과 같이 입력해 주시면 됩니다.

(예시) p.100 아래에서 3행 : '몇일'동안 -> 며칠동안

정오표

[ 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>