• 제프리 젤드만의 웹표준 가이드
  • 웹 디자이너와 개발자, 그리고 사용자를 위한 올바른 선택

  • 제프리 젤드만 지음
  • 이준, 남덕현 옮김

  • 오픈소스 & 웹 시리즈 _ 005
  • ISBN: 9788992939119
  • 32,000원 | 2008년 01월 9일 발행 | 432쪽



명실상부한 웹표준의 최고 권위자 제프리 젤드만(Jeffrey Zeldman)의 최고 베스트 셀러. 웹표준으로 만들고 접근성이 높은 웹사이트만이 살아남는 Web2.0 시대를 대비하는 필수도서를 만나보자.

베스트셀러 작가이자 디자이너, 웹표준의 전도사인 제프리 젤드만이 업계를 뒤흔들었던 그의 가이드북을 새로이 펴냈다. 책 전체를 보기 편하고 이해하기 쉽게 컬러로 인쇄하였으며, 초판이 출시되어 표준 기반의 웹디자인을 세상에 알린 이후, 더욱 발전된 웹 디자인 방법들과 새롭게 변화된 브라우저를 전부 다루고 있다. 매력적이고 재치 넘치는 방식으로 복잡한 내용을 이해하기 쉽게 다루어, 더 빠르게 많은 사람들에게 다가갈 수 있으면서 만들고 유지하는데 더 쉬운 사이트를 만드는 핵심적인 방법을 알려준다.

웹표준이 검색엔진을 얼마나 친숙하게 만드는지(파인더빌리티, findability)를 보여준 제프리 젤드만(Jeffrey Zeldman)의 통찰력과, 매체와 온라인 시장을 되살려준 웹2.0 어플리케이션을 배워보자. CSS 레이아웃이 모든 브라우저에서 더 잘 작동하고 웹 컨텐츠를 더 접근성있게 만드는 새로운 기술을 찾아내보자.

독자 추천의 글

“제프리 젤드만(Jeffrey Zeldman)과 그의 웹 표준 공모자들은 모든 웹사이트에서 오래된 적들을-디자인과 사용성, 접근성-멋지게 어울리게 만들었다.” -루이스 로젠필드(Louis Rosenfeld), 출판업자, Rosenfeld Media-

“가끔(매우 가끔), ‘와 이사람 정말 똑똑하다! 덕분에 이걸 이해하고 나까지 똑똑해지는 것 같군!’하는 생각을 하게 만드는 작가가 있다.” -스티브 크룩(Steve Krug), Don’t Make Me Think의 저자-

“제프리 젤드만(Jeffrey Zeldman)은 복잡한 전문기술을 디자이너가 이해하고 재미를 느낄 수 있게 설명해준다. 웹디자인을 정말 소중하게 생각한다면 당신은 이 책이 필요하다.” “제프리 젤드만(Jeffrey Zeldman)은 이 업계에서 도사와 신의 경계쯤에 있다-그리고 그 지혜와 재치를 모아서 웹표준이 무엇이며, 표준기반의 코딩작업을 어떻게 하며, 어째서 관심을 가져야 하는지에 대한 이야기를 만들었다.” -켈리 고토(Kelly Goto), Web ReDesign 2.0: Workfow that Works의 저자-

“이 책의 초판은 표준의 대혁명을 시작시켰다. 완전히 개정된 이 두 번째 책은 분명히 모든 신세대 개발자들이 웹표준의 장점을 알 수 있게 해줄 것이다.” -앤디 버드(Andy Budd), CSS Mastery: Advanced Web Standard Solution의 저자-

제프리 젤드만(Jeffrey Zeldman)

제프리 젤드만은 최초의 웹 디자이너 중 한 명이고 전문가들 사이에서 강력한 영향력을 지녔다. 1995년 전 아트 디렉터이자 카피라이터인 그는 최초로 가장 영향력 있는 개인 웹 사이트 중의 하나(www.zeldman.com)를 만들었고 웹 디자인의 방법과 원칙에 대한 유명한 튜토리얼을 쓰기 시작했다.

1998년 Microsoft와 Netscape에서 각각 자기들의 브라우저에서 같은 기술을 지원하도록 설득한 기초 연합인 The Web Standards Project(www.webstandards.org)를 공동 설립했다. 같은 해 A List Apart(www.alistapart.com) “for people who make websites”(웹 사이트를 만드는 사람들을 위하여)를 만들기 시작했다. 그리고 이 분야에서 가장 존중 받고 영향력 있는 잡지가 되었다.

Jeffrey Zeldman은 웹 디자인 에이전시인 Happy Cog(www.happycog.com)의 설립자이고 제작 감독이며 사용자 경험 전문가이다. 그는 많은 논설과 Designing With Web Standards를 포함한 두 개의 책을 썼고 전세계적으로 가장 사랑 받는 강사이다. 2005년 Jeffrey Zeldman과 Eric Meyer는 디자인과 코드에 관한 순회 컨퍼런스인 An Event Apart (www.aneventapart.com)를 공동 주최했다.

이준

2000년 처음으로 웹에 몸을 담은 이후로 잠시 캐나다와 미국에서 보내고 2004년 봄에 다시 웹으로 돌아왔다. 현재는 Daum 커뮤니케이션에서 UI개발을 하고 있다.

남덕현(감수)

웹개발 업체인 IDEAPOOL에서 UI팀 퍼블리셔로 근무하고 있다. 의미있는 마크업을 중요하게 생각하며, CSS와 웹표준, 접근성에 대한 관심이 많다. 현재 포탈 사이트의 웹표준화 작업을 진행중이다. 블로그 htp://dstyle.org/ 를 운영중이다.

역자 서문

무질서한 웹에 질서를 부여하다

벌써 ‘웹’이라는 분야에 몸 담은 지가 7년이 되어가고 있는데도 모르는 것들과 배워야 할 것들은 점점 더 많아지는 것처럼 느껴지고, 실제로도 더 많아지고 있다. 웹은 항상 우리보다 한발 먼저 앞서나가며 우리가 알고 있는 것보다 항상 더 많은 것을 요구한다. 하지만 이제 더 많은 것을 알아가기 위해 허덕이면서 따라가는 것에만 급급했던 시절은 지나고, 웹이 안정되어 가고 있다는 말을 하면서 (혹은 어떤 이들은 쇠약해지고 있다는 말을 하기도 한다) 다시 한번 우리가 지나온 길을 돌아봐야 할 시점이 되지 않았나 생각해 본다.

이에 웹표준은 바로 과거를 되짚어보는 계기가 될 수 있을 것이다. 우리가 그 동안 지키지 않았던 것들과 그로 인해서 생겨난 문제점, 우리가 대충 미봉책으로 사용하던 방법들이 우리를 옭아매고 있다. 그리고 그 올가미가 우리를 점점 더 조여오기 전에 다시 이전으로 돌아가서 매듭을 풀어야 할 때가 온 것이다.

웹표준의 대가인 제프리 젤드만(Jeffrey Zeldman)은 웹표준을 만들어서 전세계에 널리 알리고 브라우저를 만드는 기업들을 설득하여 웹표준을 지키도록 하는데 가장 큰 공헌을 한 사람이다. 우연찮게도 이 책을 번역하고 있는 시기에 BusinessWeek에서 Jeffrey Zeldman: King of Web Standards라는 2007년 8월자 기사를 게재했다. 그의 업적 중에서 가장 손꼽을 수 있는 것은 무질서한 웹에 질서를 가져다 준 것이 아닌가 생각한다. 이제 웹표준은 기준이 되고 규정이 되고 나아가서는 법률이 되고 있다. 처음에 웹이 만들어진 목적으로 다시 돌아가서 웹은 이제 서로 가지고 있던 장벽을 깨고 좀 더 많은 사람들을 위해서 좀 더 편리하게 만들어지는 도구를 얻게 되었다. 그것이 웹표준이다.

이 책은 제프리 젤드맨(Jeffrey Zeldman)이 집필한 두 권의 가장 유명한 책 중에서 2003년에 써서 베스트 셀러가 된 Designing With Web Standards의 초판을 완전히 새롭게 다시 펴낸 책이다.

이 책을 읽고 나면 이제 웹표준은 지켜야 하는 것만이 아니라 지키고 싶은 것으로 바뀌게 될 것이다. 처음에 웹표준을 접하는 사람들은 그 규칙이라는 말에서 위압감을 가지고 거부감을 가지게 된다. 하지만 웹표준은 절대적인 규범이 아니다. 웹표준은 내가 지키고 싶은 만큼 또는 지킬 수 있는 만큼, 지킬 수 있는 것부터 하나씩 지키는 것이다. 웹표준은 일하는 사람을 귀찮게 하는 것이 아니고 일하는 사람이 더 편하고 빠르게 일을 할 수 있도록 도와준다. 이 한 권의 책으로 누군가가 웹표준의 대가가 되기를 바라는 것은 아니다. 하지만 이 책은 당신이 웹표준이 무엇인지 알게 되고 호감을 가지게 되기만 한다고 해도 충분히 읽을 만한 가치가 있을 것이다.

  • 서문
    • 하나의 방법으로 모든 문제를 해결할 수 없다
      • 이론과 실제
    • 유연성 없는 규칙이 아닌 하나의 연속체
      • 팔려고 하지 말고 보여주라
      • 결과물 자체로 사업이 되게 하라
      • 내부 작업에서의 사용
    • 변화의 움직임
  •  
  • 1부: 이미 문제는 발생해 버렸다
  • 시작하기 전에
    • 증가하는 비용, 줄어드는 효과
    • 구식화의 악순환 끝내기
    • 호환성이란 무엇인가?
    • 규정도 없고 정석도 없다
    • 이론이 아닌 실행
    • 꼭 이 책을 읽어야 할까?
  •  
  • 1장 웹사이트의 99.9퍼센트는 시대에 뒤떨어진다
    • 최신 브라우저들과 웹표준
      • 새로운 작업을 위한 새로운 코드
    • 버전 문제
    • 이전 버전에 대한 고려
      • 구식 마크업: 비용의 증가
      • 하위 호환성
      • 사용자를 막는 것은 사업에서는 최악이다
      • 삼천포로 빠지기
    • 나쁜 마크업에 좋은 일이 생길 때
    • 해결책
  •  
  • 2장 표준에 맞춰 디자인하고 제작하기
    • 고생담
    • 표준화가 도입되기 이전의 디자인 비용
    • 구시대적인 방법으로 만든 현대적인 웹사이트
    • 비참한 왕국
    • 웹표준의 세 가지 요소
      • 구조
      • 표현
      • 동작
    • 실행
    • 절충법의 이점
    • 웹표준 프로젝트: 이식성
      • 문서 하나로 모든 서비스를 한다
    • A List Apart: 하나의 페이지, 다양한 디자인
      • 디자인, 화면 밖으로
      • 시간과 비용의 절약, 방문자수 증가
    • 앞으로의 발전방향
      • 절충적(transitional) 상위 호환법(혼합형 디자인)
      • 엄격한(Strict) 상위 호환성
  •  
  • 3장 표준화가 어려운 이유
    • 보기에는 좋지만 실행하기는 끔찍하다
      • 공동의 목표, 공동의 방법
      • 실제와 대비되는 인식
    • 2000년: 브라우저가 완성된 해
      • 맥용 인터넷 익스플로러 5: DOCTYPE 변경과 확대축소 기능
      • 넷스케이프의 대담한 변화
      • 브라우저들의 홍수
    • 너무 적다? 너무 늦었다?
      • CSS: 처음에는 쓸모 없었다
    • 나쁜 브라우저가 나쁜 습관을 만든다
      • 넷스케이프 4의 표현의 상속 문제
      • 상속을 사용하자
      • 잘못된 방식
      • 오래 유지되는 표준화 기반 스크립트
    • 혼동되는 사이트와 갈피를 잡을 수 없는 명칭들
      • 학문이냐 이익이냐
      • 협회에서 제안하고, 업체에서 판매
      • 제품의 인지도와 표준의 인지도
    • 플래시
      • 플래시의 가치
      • 플래시의 문제점
      • 플래시의 또 다른 문제점
    • 호환은 나쁜 것이다
      • 인지도를 만드는 언어의 힘
      • 느낌의 문제
      • 다른 문제들
  •  
  • 4장 파인더빌러티(findability), 조직, 블로그, 팟캐스트(Podcast), 롱테일, Ajax(그리고 표준화가 대세가 되는 다른 여러 가지 이유들)
    • 범용언어 (XML)
      • XML과 HTML의 비교
      • 한 부모, 여러 자손들
      • 전문 소프트웨어나 일반 사용자용 소프트웨어의 필수 요소
      • 가수보다 유명하다
      • 강력한 데이터를 만드는 5가지 방법
      • 발명의 모체
      • 웹 저작툴
      • 사용자가 원하는 대로
    • XML 애플리케이션과 웹 사이트
    • 호환성
    • 새로운 협력의 시대
      • 기준 모음과 상세내역
      • 얼마나 잘 맞는가
      • WHAT Working Group
      • 인터넷 익스플로러 7과 웹 표준화 프로젝트
    • 웹표준과 저작 프로그램
      • The Dreamweaver Task Force
      • 위지위그 편집 프로그램의 발달 (셋 중에 둘은 쓸만하다)
      • 프론트페이지에서부터 익스프레션 웹 디자이너(Expression Web Designer)까지
    • CSS 레이아웃의 출현
      • 브라우저 업그레이드 캠페인
      • 홍수의 시작
      • 수많은 변경한 사이트와 도움이 되는 사이트
      • 최대의 CSS 지식 창고
    • 목적 있는 유행 따라가기
    • 웹표준의 주류
      • 상업적인 사이트들의 진입
      • Wired Digital의 전환
      • 디자이너의 관심 끌기
      • 충격은 계속된다
      • 유효성 검사로 포장된 행복으로 가는 길
  •  
  • 2부 Designing and Building
  • 5장 최신 마크업
    • 낡은 마크업의 숨겨진 오점
    • 재구성
    • 주요 요약
    • 어느 XHTML이 더 우리에게 맞을까?
      • 누구를 위한 것인가?
      • XHTML로 바꿔야 하는 이유 Top 10
      • XHTML로 바꾸지 말아야 하는 이유 Top 5
  •  
  • 6장 XHTML: 웹의 재구성
    • XHTML로의 전환: 간단한 규칙과 손쉬운 가이드라인
      • 적절한 DOCTYPE과 네임스페이스로 시작하라
      • 컨텐트 타입 선언
      • 태그는 전부 소문자로 적는다
      • 모든 속성값에 인용부호를 사용한다
      • 모든 속성에는 값이 있어야 한다
      • 모든 태그는 닫아야 한다
      • ‘내용 없는’ 태그도 닫아준다
      • 주석 안에 더블대쉬 사용금지
      • 모든 < 와 &는 변환해 준다
    • 실행 요약: XHTML 규칙
      • 캐릭터 인코딩: 따분하고 더 따분하고 최고로 따분한
      • 구조적인 변화
      • 스타일보다는 감각적인 마크업을 하자
    • 비주얼 요소와 구조
  •  
  • 7장 확실한 페이지를 더 빈틈없고 견고하게: 엄격한(Strict) 마크업에서의 구조와 메타 구조
    • 모든 요소를 구조적으로 사용해야 할까?
      • div와 id 그리고 다른 여러 보조요소들
      • 시멘틱 마크업과 재사용성
    • 혼합형 레이아웃과 간결한 마크업: 해야 할 것과 하지 말아야 할 것들
      • 안 좋은 방법들에 이름 짓기
      • 혼합형 마크업에서의 자주 발견되는 실수들
      • div가 문제가 아니다
      • id를 사용하라
      • 지나친 테이블 셀의 제거
    • 구식 방법들
      • MAP의 시대
      • 맵과 그 단점
      • 접근성이 없으면 구조도 필요 없다
      • 자르고 나누기
      • 이미지 자르기의 유행
      • 지나치게 장황한 테이블
      • 잘못 사용한 CSS의 등장
      • 지속적인 발전
  •  
  • 8장 XHTML 예제: 혼합형 레이아웃(1부)
    • 전환형 방법의 장점
      • 자바스크립트를 대신하는 스타일시트
    • 기본 접근법(개요)
      • 분리된 테이블: CSS와 접근성 면에서의 장점
      • 넘어가기(skip) 메뉴와 사용하는 이유
      • 추가 id
    • 초기 마크업: 최종 마크업과 같다
      • 네비게이션 마크업: 첫 번째 테이블
      • 표현, 시멘틱, 순수성 그리고 잘못
      • 컨텐츠 마크업: 두 번째 테이블
  •  
  • 9장 CSS 기본
    • CSS 간략하게 살펴보기
      • CSS의 장점
    • 스타일 분석
      • 선택자, 선언, 속성 그리고 값
      • 다중 선언
      • 여백과 대소문자의 구분
      • 대체가능하고 포괄적인 값
      • 선택자들의 묶음
      • 상속과 불만
      • 자손 선택자
      • id 선택자와 자손 선택자
      • class 선택자
      • 선택자들을 결합하여 세련된 디자인 효과 만들기
    • 외부, 내부, inline 스타일
      • 외부 스타일시트
      • ilnine 스타일
    • ‘최고 브라우저 테스트’ 방식
      • 내부 스타일에서 외부 스타일까지: 이중 스타일시트 방식
      • 상대 경로, 절대 경로
      • 최고 브라우저 테스트 방식과 이중 스타일시트 방식의 이점
  •  
  • 10장 CSS 활용: 혼합형 레이아웃(2부)
    • 이미지 준비
    • 기본 요소 설정하기
      • 전체쓰기와 줄여쓰기, 그리고 margin
      • 숨김과 블록지정
      • 링크에 색상 주기(가상 클래스)
      • 기타 요소 설정
      • 폰트사이즈에 관한 그 외의 것들
    • 페이지에 div 배열하기
    • 네비게이션 요소 : 첫 번째 단계
    • 네비게이션바 CSS: 두 번째 단계의 첫 번째 시도
    • 네비게이션바 CSS: 마지막 단계
    • 마지막 단계: 외부 스타일과 ‘현재위치’ 나타내기
  •  
  • 11장 브라우저 다루기 1부: DOCTYPE 전환과 표준 모드
    • DOCTYPE 전환의 전설
      • 브라우저 성능 제어하기: DOCTYPE 전환
      • 완전한 XHTML DOCTYPE의 전체 목록
    • 브라우저 다양성에 축배를!
  •  
  • 12장 브라우저 다루기 2부: Box Model, 버그, 차선책
    • Box Model과 이에 대한 불만들
      • Box Model은 어떻게 작동하는가
      • Box Model은 어떻게 망가지는가
      • Box Model Hack: Making CSS Safe for Democra cy
    • 윈도용 인터넷 익스플로러의 공백 버그
    • 윈도용 인터넷 익스플로러 ‘Float’ 버그
      • Float, Peek-a-Boo 그리고 다른 버그들
    • Flash와 QuickTime: 고객의 요구에 의한 Object?
      • Embed가 가능한 객체: 오만과 복수에 관한 전설
      • 이중방식: 멀티미디어파일의 표준 지원
      • 추가 문제: Object 로딩 실패 현상
      • 회피법
  •  
  • 13장 브라우저 다루기 3부: 타이포그라피
    • 사이즈 문제
    • 사용자 조절
    • 구시대 사람들의 공포
      • 단위의 차이
    • 드디어 등장한 표준 사이즈
      • 클릭 한번으로 되돌려지다
      • 브라우저 판별: 브라우저의 변화에 대한 잘못된 반응
      • 표준 사이즈와 최선의 방법
    • em 단위의 사용: 웃음과 눈물
      • 사용자 선택과 em 단위
    • 픽셀에 대한 열정
      • 최소 단위: 절대적으로 상대적인 단위
      • 픽셀의 문제점
    • 폰트 사이즈 키워드 방법
      • 키워드가 em이나 퍼센트보다 좋은 이유
      • 키워드를 적용했던 초기의 문제들
      • 최고의 시기
  •  
  • 14장 접근성의 기본
    • 책에서의 접근
    • 일반적인 혼란
      • 천재들도 실수를 한다
    • 규정과 레이아웃
      • Section 508 설명
    • 접근성에 관한 소문들의 진상
      • 소문: 접근성을 지키기 위해서는 사이트를 두 개의 버전으로 만들어야 한다
      • 소문: 동일하거나 상응하는 접근성을 지키기 위해서는 텍스트만으로 만들어진 버전이 필요하다
      • 소문: 접근성에는 비용이 너무 많이 든다
      • 소문: 접근성은 유치하고 싸구려 디자인밖에 나오지 않게 한다
      • 소문: Section 508에 따라서 만들면 사이트는 모든 브라우저와 사용자 환경에서 똑같이 보여야 한다
      • 소문: 접근성은 ‘장애인을 위한 것’이다
      • 소문: 드림위버 MX/Cynthia의 툴로 여기 나온 모든 접근성 문제를 해결할 수 있다
      • 소문: 고객이 원하지 않으면 접근성은 무시해도 된다
    • 요소별 접근성 팁
      • Image
      • 애플 사의 퀵타임과 다른 동영상 미디어
      • 매크로미디어 플래시 4/5
      • Macromedia Flash MX와 Flash 8
      • 색상
      • CSS
      • 롤오버와 다른 스크립트 동작들
      • Form
      • 이미지 맵
      • 테이블 레이아웃
      • 프레임, 애플릿
      • 번쩍거리고 깜빡이는 요소
    • 접근성에 도움이 되는 툴과 플러그인
    • Loving Cynthia
      • Tab의 연결: 우리의 친구, tabindex 속성
    • 접근성 계획: 어떤 장점이 있을까
      • 접근성은 우리한테도 도움이 된다
  •  
  • 15장 DOM 기반의 스크립트로 작업하기
    • DOM 관련 서적
    • DOM이란 무엇인가?
      • 웹 페이지를 애플리케이션처럼 작동하게 만드는 표준 방식
      • 그럼 사용 가능한 환경은?
      • DOM을 지원하지 않는 경우
      • 스타일 변경: 접근성 지원, 선택의 폭
  •  
  • 16장 CSS로 디자인하기
    • 조건의 정의
      • 필수 조건 10가지
      • 가상 레이아웃 설정
      • 배너
      • 마무리하기
  • 찾아보기
  • 18쪽 5행

    하지면 -> 하지만

  • 18쪽 7행

    선택은의 몫이다 -> 선택은 여러분의 몫이다

도서 소개자료

관련 글