HTML5의 열풍을 선도한 구글(Google)의 개발자 애드버킷(advocate)인 마크 필그림(Mark Pilgrim)이 직접 HTML5의 새 엘리먼트와 기능을 다룬 책이다. 캔버스를 활용한 그리기와 비디오 재생, 위치정보나 오프라인과 로컬 저장소 같은 흥미로운 기능뿐만 아니라 특정 브라우저에서 HTML5를 사용할 수 있는지 여부를 감지하는 방법까지 다룬다. 또한 실전에 적용할 수 있는 라이브러리와 코드를 소개하고 일부 모바일 기기에 HTML5 기능이 어떻게 구현되어 있는지와 기존 웹페이지에 어떻게 시맨틱을 추가할지에 대한 내용도 별도로 기술했기에 웹에 관심이 많거나 관련 개발 업무를 담당하고 있다면 꼭 읽어봐야 할 책이다.

예제코드 다운로드 안내
현재 저자가 관리하는 사이트인 http://diveintohtml5.org가 운영이 중단됐습니다.
예제코드는 아래 미러링 사이트에서 다운로드하실 수 있습니다.
https://github.com/diveintomark/diveintohtml5


[ 소개 ]

권위있는 HTML5 책이면서 실용적이고 아름답기까지 하다. 나는 이 책에 담긴 내용을 현재 실제로 사용 중이며 앞으로도 적극 활용하게 될 것이다.
- 팀 브레이 / 구글 개발자 애드버킷

이 책은 초보자와 구루가 모두 좋아할 만한 HTML5의 결정판이다.
- 브래드 누버그 / 구글 소프트웨어 엔지니어

아직도 HTML5의 새 기능을 잘 모른다면 지금이야말로 공부를 시작할 절호의 기회다. 여러분은 이 책을 통해 최신 버전의 마크업 언어가 웹 개발 방식을 어떻게 바꾸려 하는지, 왜 바꾸는지에 대한 실전 내용을 확인할 수 있다.

HTML5는 계속 진화하는 중이다. 이미 사파리나 모질라, 오페라, 크롬뿐만 아니라 모바일 브라우저에서도 많은 새 기능을 지원하고 있다. 『구글 개발자가 들려주는 HTML5 활용』은 마크업과 그래픽, 스크린샷 등 다양한 예제를 통해 새 버전의 주요 변경 사항을 한눈에 파악할 수 있다. HTML5 마크업으로 비디오를 추가하거나 오프라인 동작을 비롯한 많은 기능을 바로 익혀 직접 개발 업무에 적용할 수도 있다.


[ 이 책에서 다루는 내용 ]

■ < header >, < footer >, < section > 같은 새로운 시맨틱 엘리먼트
■ 자바스크립트로 만드는 2차원 드로잉 공간 캔버스
■ 써드파티 플러그인 없이 직접 웹페이지에 삽입하는 비디오
■ 웹 애플리케이션 사용자 간에 위치를 공유할 수 있는 위치정보 식별 기능
■ 쿠키보다 훨씬 뛰어난 로컬 저장소 활용
■ 네트워크가 끊겨도 동작하는 오프라인 웹 애플리케이션 개발
■ 웹 폼의 새로 추가된 입력 타입
■ 사용자 지정 마이크로데이터 목록 생성

[ 저자 서문 ]

HTML5는 뭘까? HTML5는 HTML 4.01과 XHTML 1.0, XHTML 1.1를 잇는 차세대 HTML이다. HTML5는 오늘날 웹 애플리케이션에 필요한 새로운 기능을 제공한다. 뿐만 아니라 웹 개발자들이 수년 동안 사용했지만 표준 기구의 심의나 문서화를 거치지 않은 웹 플랫폼의 많은 기능을 표준화했다(윈도우 객체에 대한 정식 문서가 없다는 사실이 놀랍지 않은가? HTML5는 새로운 기능추가 외에도 브라우저에서 통상적으로 사용하던 많은 부분을 표준화하려는 첫 시도였기에 그 의미가 크다).

기존처럼 HTML5 역시 크로스 플랫폼으로 설계돼 모든 운영체제에서 동작한다. HTML5를 사용하기 위해 윈도우나 맥 OS X, 리눅스, 멀틱스나 기타 특정 운영체제에 의존할 필요가 없다. 최신 웹 브라우저 딱 하나만 있으면 된다. 거의 모든 운영체제에서 대부분의 브라우저가 무료로 제공된다. 어쩌면 벌써 HTML5를 지원하는 웹 브라우저를 사용하고 있을지도 모른다. 애플의 사파리와 구글의 크롬, 모질라 파이어폭스, 오페라의 최신 버전은 모두 HTML5 기능을 지원한다(구체적인 브라우저별 호환성 표가 이 책 전반에 걸쳐 등장한다). 특별히 아이폰과 아이패드, 안드로이드에 설치된 채로 제공되는 모바일 웹 브라우저는 HTML5를 깔끔하게 잘 지원한다. 그리고 마이크로소프트 역시 인터넷 익스플로러 버전 9부터는 일부 HTML5 기능을 지원하기로 발표했다.

HTML5는 기존 웹 브라우저와의 하위 호환성을 최대한 고려해 설계됐다. 이미 있던 기능에 새 기능이 추가됐고 구식 브라우저를 위한 대체 컨텐트를 제공할 수도 있다. 그리고 섬세한 제어를 원한다면 자바스크립트로 HTML5 기능별 지원 여부를 감지할 수도 있으니(2장), HTML5 지원 여부를 파악하기 위해 브라우저 종류나 버전을 세세히 체크하는 과정 따위는 잊어라. 사용할 HTML5 기능이 지원되는지 직접 테스트하자.


[ 저자 소개 ]

마크 필그림(Mark Pilgrim)
구글의 선임 개발자 애드버킷이며 오픈 소스와 오픈 표준 전문가다. 『Dive Into Python』(Apress)과 『Dive Into Accessibility』의 저자이기도 하며 웹 접근성에 대한 무료 온라인 튜토리얼도 제공하고 있다. 아내와 두 아들, 침흘리개 강아지와 함께 노스캐롤라이나에서 살고 있다.


[ 옮긴이의 말 ]

현동석
HTML5가 한참 화젯거리입니다. 하지만 막상 서점에 가보면 이와 관련된 국내 서적은 많지 않습니다. 이런 상황에 오라일리 출판사의 『구글 개발자가 들려주는 HTML5 활용』 한국어판 작업을 진행하게 돼 뿌듯하기 그지 없습니다. 저자가 설명하듯 HTML5는 기존 HTML에 새로 추가된 기능의 집합이기 때문에 잘 정리된 정보를 얻기 위해 웹을 찾아봐도 엘리먼트 사용법이나 특정 기능에 국한된 스크립트 소개 정도가 전부입니다. 관련 기술 종사자가 아닌 이상 어떻게 보면 뜬구름 잡는 것 같은 HTML5의 개념을 캔버스 같은 몇 가지 기능만 봐서는 도저히 감이 잡히지 않아 답답한 마음에 서점에서 이 책을 들었다면 한번 읽어보시길 추천합니다.

숲 속에서 나무만 보고 길을 찾는 사람에게 지도를 넌지시 건네주듯이 이 책은 HTML5로 불리는 여러 기능을 소개하는 동시에 웹이 어떠한 길을 걸어왔으며 어떻게 발전했는지 알려주고, 그렇게 발전된 기능 중 어떤 부분이 모여 HTML5를 이루는지 이해하기 쉽게 설명합니다. 단순히 서버로부터 데이터를 받아 문서로 보여주던 웹은 스크립트 언어를 통해 사용자의 행동에 반응하게 됐고 Ajax를 통해 애플리케이션으로의 발전 가능성을 보여줬습니다. 이제 그 가능성은 HTML5 같은 추가된 기능을 통해 한 걸음씩 우리 앞에 현실로 펼쳐지고 있습니다. 많은 사람들이 이미 브라우저 안에서 워드프로세서나 스프레드시트 작업을 하기 시작했고, 모든 것을 브라우저로 처리하려는 다양한 시도가 여러 분야에서 이뤄지고 있습니다. 이런 흐름을 가속할 HTML5에 대한 좋은 서적이 한국어로 출간돼 참 다행이라 생각합니다.

이번 번역은 얇은 두께에도 불구하고 강유훈님과 공동으로 진행했습니다. 조금이라도 빨리 많은 독자들이 읽을 수 있기를 바라는 마음이었습니다. 다행히 이 책의 원서인 『HTML5 Up and Runing』의 내용은 http://diveintohtml5.org 사이트를 통해 이미 온라인으로 공개된 상태였고 덕분에 원서가 출간되기 전부터 일부 내용을 파악할 수 있었습니다. 원문의 용어나 표현은 나름의 고민과 논의를 거쳐 선택했고, 내용 역시 여러 번의 리뷰를 거처 수정했습니다만 부적절한 부분이 있다면 조언 주시길 부탁합니다.


강유훈
저자인 마크 필그림은 『HTML5 활용』에서 HTML5의 새로운 기능 설명을 뼈대로 삼아 HTML5를 둘러싼 각종 이야깃거리를 읽기 쉽게 풀어 놓았습니다. 특히 자세한 자료조사를 바탕으로 길지 않은 분량의 책에 담을 내용을 선별하는 데 많은 고민을 했음을 느낄 수 있었습니다. 또한 아이폰을 비롯한 최신 플랫폼을 통한 실용적인 예제 설명으로 인해 끝까지 아주 흥미롭게 읽어 내려갈 수 있었습니다. HTML5를 처음 접하시는 분에게는 훌륭한 입문서가 될 것이고, 이미 충분히 알고 계시는 분에게도 좋은 참고자료가 되리라 생각합니다. HTML5의 경우 높은 관심도에 비해 좋은 참고 서적이 부족한 실정인데 『HTML5 활용』 한국어판이 많은 도움이 됐으면 좋겠습니다.

Enjoy hacking!


[ 옮긴이 소개 ]

현동석
서울대학교 컴퓨터공학부를 졸업하고 보안 업체와 스마트폰 개발 업체를 거쳐 현재는 NHN에서 검색서버와 관련된 기술을 연구하고 있다. 네이버 통합검색 결과의 HTML 렌더링 코드를 개발하고 운영했으며, OpenAPI의 개발과 운영도 담당하며 매시업 컨퍼런스에서 강연도 진행했다. 현재는 HTML5를 사용해 검색서버 성능 모니터링 시스템을 개발하고 있다. 하드웨어부터 소프트웨어까지 다양한 개발 경험이 있으며 최근에는 오픈소스에 관심을 보인다는 소문이 있다. 옮긴 책으로 『버그 없는 안전한 소프트웨어를 위한 CERT C 프로그래밍』(에이콘출판, 2010)이 있다.

강유훈
서울대학교 컴퓨터공학부를 졸업했으며 동대학원 소프트웨어 공학 연구실에서 석사/박사학위를 취득했다. 현재는 NHN에서 검색서버 관련 기술을 연구하고 있다. 분산처리 시스템, 성능 분석, 리눅스 커널, HTML, 자바스크립트, 파이썬, 객체지향 설계 등 다양한 분야에 관심을 갖고 있다.

목차

• 1장 HTML이 지나온 길
  • MIME 타입
  • 표준 제정에 관한 여담
  • 명맥을 유지해온 HTML 발전사
  • 1997년부터 2004년까지의 HTML5 개발과정
  • 모두가 잘못 알고 있는 XHTML
  • 웹의 미래, 동상이몽
  • WHAT 워킹그룹이란?
  • 다시 W3C로
  • W3C의 보충설명
  • 추천 자료
    
• 2장 HTML5 지원 여부 감지
  • 감지 방법
  • Modernizr: HTML5 감지 라이브러리
  • 캔버스
  • 캔버스 텍스트
  • 비디오
  • 비디오 포맷
  • 로컬 저장소
  • 웹 워커
  • 오프라인 웹 애플리케이션
  • 위치정보
  • 입력 타입
  • 플레이스홀더 텍스트
  • 폼 오토포커스
  • 마이크로데이터
  • 추천 자료
    
• 3장 시맨틱 엘리먼트
  • 문서타입
  • 루트 엘리먼트
  • <head> 엘리먼트
    • 문자 인코딩
    • 친구 페이지와 링크 관계
  • HTML5의 새로운 시맨틱 엘리먼트
  • 알 수 없는 엘리먼트를 브라우저가 처리하는 방법
  • 헤더
  • 본문
  • 날짜와 시간
  • 내비게이션
  • 푸터
  • 추천 자료
    
• 4장 캔버스로 그려보자
  • 단순한 도형
  • 캔버스 좌표
  • 경로
  • 텍스트
  • 그라디언트
  • 이미지
  • IE는 어때?
  • 완전한 예제
  • 추천 자료
    
• 5장 웹 비디오의 모든 것
  • 비디오 컨테이너
  • 비디오 코덱
    • H.264
    • 테오라
    • VP8
  • 오디오 코덱
    • MP3
    • AAC
    • 보비스
  • 웹에서의 동작 방식
  • H.264 비디오를 둘러싼 라이선싱 이슈
  • 파이어포그를 이용한 오그 비디오 인코딩
  • ffmpeg2theora를 이용한 오그 비디오 배치 인코딩
  • HandBrake를 이용한 H.264 비디오 인코딩
  • HandBrake를 이용한 H.264 비디오 배치 인코딩
  • ffmpeg을 이용한 웹엠 비디오 인코딩
  • 드디어 마크업
    • MIME 타입이 또 다시 문제를 일으키다
  • IE는 어때?
  • 최종 예제
  • 추천 자료
    
• 6장 사용자 위치정보
  • 위치정보 API
  • 코드로 이해하기
  • 에러 처리
  • 선택! 선택을 하라구!
  • IE는 어때?
  • 구원 투수 geo.js
  • 최종 예제
  • 추천 자료
    
• 7장 웹 애플리케이션 로컬 저장소
  • HTML5 이전의 로컬 저장소 역사
  • HTML5 저장소
  • HTML5 저장소 사용하기
    • HTML5 저장소의 변경사항 따라잡기
    • 최신 브라우저의 한계
  • HTML5 저장소의 동작
  • 키/값 쌍을 넘어서: 비전 경쟁
  • 추천 자료
    
• 8장 오프라인 웹 애플리케이션
  • 캐시 매니페스트
    • 네트워크 섹션
    • fallback섹션
  • 이벤트 플로우
  • 디버깅의 예술
  • 게임을 하나 만들어 보자구!
  • 추천 자료
    
• 9장 더욱 강력해진 웹 폼
  • 플레이스홀더 텍스트
  • 오토포커스 필드
  • 이메일 주소
  • 인터넷 주소
  • 스핀박스로 나타낸 숫자
  • 슬라이더로 나타낸 숫자
  • 날짜 선택기
  • 검색창
  • 색상 선택기
  • 자동 입력 검증
  • 추천 자료
    
• 10장 마이크로데이터로 시맨틱 부여하기
  • 마이크로데이터는 뭔가요?
  • 마이크로데이터 모델
  • 인물정보 마크업
    • 구글의 리치 스니펫
  • 조직정보 마크업
  • 이벤트 마크업
    • 다시 구글 리치 스니펫으로
  • 리뷰 마크업
  • 추천 자료
    
• 부록 HTML5 기능 감지 방법
  • 엘리먼트