웹디자이너를 위한 HTML5(개정판)(아름다운 웹사이트 만들기 시리즈 1)

[웹디자이너를 위한 HTML5]가 출간된 지 5년 만에 새롭게 업데이트되서 나왔다. 이 책은 초판 때 단독 저자였던 웹 개발자이자 저술가로 알려진 제레미 키스Jeremy Keith와 이번에 참여한 레이철 앤드루Rachel Andrew의 공저로 [HTML5 FOR WEB DESIGNERS, second edition]을 번역한 개정판이다. 이 두 저자는 우리가 웹 디자인 역사의 어떤 순간에 있는지 단 한 순간도 잊지 않고, 다양한 환경의 사용자를 고려하는 일이 웹을 얼마나 풍요롭게 하는지 이 책을 통해 말하고 있다. 이 책이 이렇게 강력해질 수 있었던 것은 바로 이들이 가진 HTML과 사람을 배려하는 마음에 있을 것이다.



HTML5는 HTML 중에서도 가장 긴 스펙을 자랑한다. 기능은 탁월하지만 복잡하기도 하다. 그런 이유도 한몫하여 2011년에 웹액츄얼리코리아가 이 책의 초판을 발행한 이후 수 많은 HTML5 도서들이 출간되어 왔다. 상세한 기술적인 내용들이 서술되어 있고, 보고 베끼면 당장이라도 웹사이트 하나가 뚝딱하고 만들어질 것 같은 예제들로 가득 차 있다. 이런 책들을 보다가 이 책을 접하게 되면 '이건 ?미? 이 크기에 이 두께는? HTML5 책 맞아?' 라는 의문이 들 것이다.



그렇다. [웹디자이너를 위한 HTML5 (개정판)]은 얇고, 작은 책이다. 하지만, 그 안에서 다른 책들에서는 찾을 수 없었던 '왜?'라는 근본적인 질문에 대한 답을 얻을 수 있다. 지금까지 웹액츄얼리코리아에서 출간해 왔던 모든 서적들을 관통하는, 단순히 '기술을 위한 기술'이 아닌 '사람에 대한 고민을 하는 기술'이라는 큰 흐름이 살아있기에 이 책의 출간을 망설이지 않고 강행할 수 있었다.

이 질문의 중요성은 많은 사연과 굴곡을 딛고 세상에 나온 HTML5의 설계 원칙 "충돌이 발생할 경우, 이론적인 순수성보다는 기술 명세를, 기술 명세보다는 구현하는 사람을, 그리고 구현하는 사람 보다는 개발자를, 또한 개발자보다는 사용자를 고려하라"는 의미의 "사용 기반 우선권"에서 다시 한 번 확인된다.



HTML5의 압도적인 기술 명세를 앞에 둔 개발자, 디자이너들의 대부분은 어려운 수학 문제를 풀어야 할 때와 비슷한 느낌을 받을 것이다. 사람들이 수학을 어려워하는 가장 큰 이유는 그 기본 원리에 대한 충분한 이해가 부족하기 때문이다. 기본 원리를 깨닫게 되는 순간, 어려운 수학 문제는 재미있는 퍼즐 게임으로 변할 수도 있다.

이 책을 통해서 여러분들은 HTML5의 그 기본 원리와 기초 문법을 일목요연하게 배울 수 있을 것이다. HTML5가 생각하는 것보다 훨씬 간결하고, 단순하게 설계되어 있음을 알 수 있고, 그에 대한 이해를 바탕으로 여러분이 상상할 수 있는 강력하고 다양한 응용프로그램과 웹사이트를 만드는데 한 걸음 더 나아갈 수 있을 것이다.

이 책은 탄탄한 디자인 원칙을 기반으로 만들어졌고, 최근 가장 핫한 기술로 쓰이는 반응형 디자인과 개발의 선두를 목표로 다듬어져 있다. 또한 접근성과 콘텐츠 중심의 웹 표준에 입각하여 웹디자이너와 개발자들의 의문과 오류를 해결해준다. 그렇기 때문에 디자이너, 개발자 모두는 HTML5를 어떻게 사용하여 어떤 기술들과 접근법을 통하여 원하는 결과물을 만들어 낼 수 있을지 배울 수 있을 것이다. 또한 서로를 좀 더 이해할 수 있는 계기가 되어, HTML5가 남겨준 '문법에서 정해주지 않은 문제는 스스로, 팀과 개인의 몫으로'라는 퀘스트를 함께 풀어나갈 큰 원동력을 얻게 될 것이다.



이 책은 웹 산업에 뛰어든 지 얼마 안 된 혹은 목표로 삼고 있는 새내기들과 웹 산업의 풍파로 망망대해를 떠도느라 한 번도 '왜?' 질문을 스스로 던져 보지 못했던 이들에게는 HTML5가 무엇인지, 왜 HTML5를 사용해야 하는지를 알려줌과 동시에 앞으로 헤쳐나가야 할 웹 산업이라는 태풍 속에서도 흔들리지 않을 단단한 뿌리를 만들 수 있도록 해줄 것이다.

이런 이유로 단언컨대 [웹디자이너를 위한 HTML5 (개정판)]은 제목과는 달리 웹디자이너만을 위한 책이 아니라, 웹 산업에서 고군분투하고 있는 모든 이들을 위한 책이다.



책 속으로



1장. 마크업 언어의 간략한 역사

명심보감에서 이르길 "미래를 알려거든 먼지 지나간 일을 살피라" 했습니다. 최초의 공식적인 표준 HTML 2.0에서 시작된 HTML의 탄생과 이어지는 분열과 혼란, 그리고 XML의 공식적인 죽음. 그 과정들 속에서 우리가 배워야 할 교훈과 HTML5의 현재를 바라봅니다.



2장. HTML5의 설계

"충돌이 발생하는 경우, 이론적인 순수성보다는 기술 명세를, 기술 명세보다는 구현하는 사람을, 그리고 구현하는 사람보다는 개발자를, 또한 개발자보다는 사용자를 고려하라"는 "사용자 기반 우선권"이라는 HTML5의 설계 원칙을 가지고, 어떻게 현실과 동떨어지지 않게 단순함을 유지하여 설계되어 있는지, 그리고 사라진 것들과 새로운 변화는 무엇인지를 알아봅니다.



3장. 리치 미디어

날로 늘어가는 사용자들의 리치 미디어에 대한 요구에 부응하여 HTML5는 리치 미디어 요소로 플러그인의 요청 없이 브라우저에서 기본적으로 기능을 지원하는 대안을 마련했습니다. 반응형 이미지, 동적인 이미지를 만드는 방법과 오디오, 비디오를 간단하게 삽입 미디어로 만들 수 있는 방법을 알아봅니다.



4장. WEB FORMS 2.0

HTML5가 현재 진행형 마크업(markup) 언어이기에 CSS도 그에 발맞추어 자바스크립트 방식을 선언적인 방식으로 진화시키고 있지만, CSS를 이용하여 form을 향상시키는 데에는 아무래도 한계가 있습니다. 이에 HTML5는 새롭게 향상된 form들을 도입하고 있습니다. 웹사이트에서 필수불가결한 폼 요소들 각각을 살펴보고, 앞으로의 전망도 함께 생각해 봅니다.



5장. HTML 의미론

윈스턴 처칠의 명언을 인용하면 "민주주의는 가장 나쁜 형태의 정부이지만 그보다 나은 것을 나는 아직 보지 못했다"고 했습니다. HTML은 최악의 마크업 언어이지만 역시 그보다 나은 것은 없다고 할 수 있습니다. 이를 극복하기 위해 어떠한 방법으로 확장성을 가질 수 있는지, 그리고 새로운 마크업 요소와 구조들, 콘텐츠 모델에 관하여 살펴봅니다.



6장. 지금 HTML5를 사용하려면

여러분이 HTML5를 사용하고자 한다면, 브라우저 지원 여부가 결정적입니다. 이를 해결하기 위해 어떻게 전략을 세워야 하는지, 어떤 기술과 접근법이 있는지, 유효성 검증은 어떻게 할지와 같은 현실적인 문제를 다뤄봅니다. 또한 HTML5에 관한 질문과 논의에 적극적으로 참여할 수 있는 멋진 곳들도 소개됩니다.



펴낸곳 소개



웹액츄얼리코리아㈜

2008년 설립된 워드프레스 전문 디자인 에이전시 겸 출판사. 워드프레스를 이용해 웹사이트를 제작, 서비스하고 있으며 해외 웹 디자인 관련 서적을 엄선하여 번역 출판을 하고 있다. 지금까지 출간한 책으로는 모던 웹 디자인 최고의 실용서인 《스매싱 북 1, 2》와 전세계에서 사랑 받고 있는 CMS 툴인 워드프레스의 한글판 가이드 《워드프레스 제대로 파기》 등이 있다. 특히 《워드프레스 제대로 파기》는 국내 최초로 발간한 워드프레스 전문 도서로 실무자들로부터 많은 사랑을 받고 있다. 이 밖에 글로벌 웹 디자인계의 또 다른 리더인 A Book Apart사의 '아름다운 웹사이트 만들기 시리즈'도 번역하여 출간하고 있다. 앞으로도 웹 디자인 업계 종사자뿐 아니라 웹사이트 제작에 관심 있는 일반인도 볼 수 있는 좋은 책을 엄선해 소개할 계획이다.

1장. 마크업 언어의 간략한 역사

IETF에서 W3C로 : HTML4까지의 여정

XHTML 1 : XML로서의 HTML

XHTML 2 : 우리 이거 안 쓸래요!

분열 : WHATWG의 출현

WEB APPS 1.0에서 HTML5로

재통합

XHTML은 죽었다 : XHTML 문법이여 영원하라!

HTML5 연표



2장. HTML5의 설계

설계 원칙

현실감 유지하기

오류 처리

간단명료한 DOCTYPE

단순함 유지

문법 : 마음대로 만드세요

우리는 그런 언어는 사용하지 않습니다

- 잘 가요, 그 동안 즐거웠어요.

낯섦과 마주하기 : 변화!

- 강화된 a 요소

- 고쳐서 더 나빠진 cite

빛나는 새 장난감 : 자바스크립트 API



3장. 리치 미디어

반응형 이미지

- picture 요소

- srcset과 sizes 속성

캔버스

- 갖고 놀기 : 코드로 그림 그리기

- Canvas? 대체 어디에 쓰라는 거야?

- 접근 거부

- 똑똑한 캔버스

오디오

- 통제불능

- 버퍼링

- 여러 상황에 대처하기

- 대체 콘텐츠Fallback content

- 웹 접근성 향상

비디오

- 자체 지원을 향하여

- WebVTT로 자막 만들기



4장. WEB FORMS 2.0

PLACEHOLDER

AUTOFOCUS

REQUIRED

AUTOCOMPLETE

DATALIST

INPUT TYPES

- 검색

- 상세 연락처

- 슬라이더

- 스피너

- 날짜와 시간

- 색상 선택기

- 테스트

- 직접 만들기

미래 전망



5장. HTML 의미론

확장성

- 마이크로포맷과 마이크로데이터

- 가열되는 논쟁

새로운 마크업 요소

- mark

- time

- meter

- progress

구조

- section

- header

- footer

- aside

- nav

- article

- div 증후군에 대한 치료약?

콘텐츠 모델

- 섹션화 콘텐츠

- 개요 알고리즘

- 섹션화 루트

- 이식성

- 영역별 스타일



6장. 지금 HTML5를 사용하려면

여러분만의 전략을 세우세요.

새로운 시맨틱 요소

- 기능 탐지

- HTML5의 구조와 제목

- 반응형 이미지

HTML5의 input 요소

ARIA

유효성 검증

참여하기

HTML5의 미래

RESOURCES

REFERENCES

INDEX

제레미 키스 저자 제레미 키스는 영국 브라이튼에 거주하는 아일랜드 국적의 웹개발자입니다. 현재 Clearleft라는 웹 컨설팅 회사에 근무하고 있으며 《DOM Scripting》과 《Bulletproof Ajax》라는 두 권의 책을 저술했습니다. 그의 홈페이지는 adactio.com이며, 최근에 수행 한 프로젝트는 검색한 음악을 팟캐스트podcast로 만들어 주는 서비스인 'Huffduffer'입니다.