추가 적립 안내

개발자, 기획자, 디자이너가 함께 읽고 바로 쓰는『HTML 5 첫걸음』. 이 책은 HTML5의 전반적인 내용을 소개 형식으로 다루고 있다. 책 안의 예제에는 HTML5 API를 다루는 자바스크립트 코드들이 들어가 있지만, 자세한 코드를 보지 않더라도 HTML5를 활용해 어떤 기능을 만들 수 있는지를 훑어볼 수 있다. 주요 API가 어떤 원리로 작동하는지, 그리고 어떤 개념으로 프로세스를 구성해야 하는지를 책 전반의 예제에서 익힐 수 있을 것이다.

요즘 갑자기 많은 사람들이 HTML5에 대해 이야기하기 시작했습니다. 웹과 애플리케이션을 만드는 데 있어 새롭고 강력한 변화가 될 HTML5에 대해 준비가 됐건 그렇지 않건 간에 모두가 익숙해져야 합니다. HTML5의 새로운 기능 중 상당수는 이미 기존 브라우저에서도 구현돼 있고 시간이 지날수록 더 많은 내용을 지원할 것입니다.

이 책의 저자들은 이미 현업에서 새로운 언어를 적용하고 사용하던 개발자들입니다. 이 책을 통해 오늘날 사용할 수 있는 브라우저에서 지금 당장 새로운 언어를 적용해 얻을 수 있는 효과를 잘 보여줍니다. 학술적인 이론을 다루는 것이 아니라 실질적으로 HTML5를 사용해 문제를 해결하는 방법을 제시합니다.

■ 새로운 의미 있는 구조를 통한 멋지고 접근성 높은 웹사이트 제작
■ 현재 사용 가능한 주요 자바스크립트 API의 적용 방법
■ 브라우저 플러그인 없이 만드는 비디오와 오디오 등 멀티미디어 사이트
■ 인터넷 접속이 되지 않는 오프라인 환경에서도 사용 가능한 웹 애플리케이션 제작
■ 를 사용한 선, 도형, 그라데이션, 이미지, 텍스트 그리기 기법
■ 똑똑한 웹 폼 형식 만들기
■ 새로운 스토리지 기능과 웹 데이터베이스 구현
■ 웹과 모바일 애플리케이션에서의 위치 정보와 HTML5의 작동 방법

이 책을 보려면 HTML5은 몰라도, (X)HTML을 만들 수 있고 시맨틱 마크업 개념에 익숙한 정도면 됩니다. 또한, 문서를 만들 때 doctype으로 HTML을 사용하는지 XHTML을 사용하는지 여부는 크게 중요하지 않고, 표준에 맞는 코딩 작업을 할 수 있으면 됩니다.

자바스크립트 전문가는 아니더라도 최소한 자바스크립트가 최근의 웹 개발 환경에서 점점 중요한 역할을 하고 있다는 사실을 이해하고 있는 정도면 됩니다. DOM이나 API 같은 단어들을 보고 도대체 무슨 말인지 모르겠다는 수준만 아니면 된다는 이야기죠.

[추천평]
문서뿐만 아니라 웹 애플리케이션을 만들려는 개발자들의 니즈를 반영할 수 있도록 HTML은 새롭게 태어났습니다. 두 저자 레미와 브루스는 책의 내용을 재미있게 풀어갑니다. 지금 당장 실제 작업에서 구현할 수 있는 내용들을 현재 쓰고 있는 브라우저들에서 제공하는 기술을 사용해 가르치고 보여줍니다.
- 디온 알메어(Dion Almaer)
Ajaxian.com 창립자, 팜 개발자 리레이션스의 디렉터

HTML5는 웹의 미래입니다. 많은 회사들이 지원하고 있지만 아직 개념을 잡아가는 시기입니다. 전문가인 레미와 브루스는 이 책에서 HTML5를 미리 시험해보고 이해할 수 있게 진지하게 풀어갑니다. 대충 ‘앞으로의 미래는 이렇게 된다’라는 이야기가 아니라 ‘우리가 사용할 수 있는 기술은 이런 것들이고 현재 당장 적용하려면 이렇게 해야 한다’라는 식으로 명확하게 설명합니다.
- 크리스챤 헤일만(Christian Heilmann)
야후 개발자 네트워크의 수석 개발자 에반젤리스트

[옮긴이의 말]
저는 컴퓨터공학을 전공하고 개발자가 아닌 웹 기획자로 일을 해왔습니다. 주로 기능이 많이 들어간 사이트를 만들면서 어떻게 하면 효율적인 개발을 위한 정보 설계를 할 수 있는지, 어떻게 하면 좋은 사용자 경험을 제공할 수 있는 인터랙션 디자인을 만들어낼 수 있는지를 고민합니다. 이런 맥락에서 기존에 번역했던 웹 표준 HTML과 CSS 책에 이어, 이번에는 HTML5라는 매력적인 기술 전반을 다루는 책의 번역 작업을 맡았습니다.

이 책은 HTML5의 전반적인 내용을 소개 형식으로 다루는 책입니다. 책 안의 예제에는 HTML5 API를 다루는 자바스크립트 코드들이 들어가 있지만 자세한 코드를 보지 않더라도 HTML5를 활용해 어떤 기능을 만들 수 있는지 훑어볼 수 있습니다. 개발자뿐만 아니라 기획자, 디자이너 모두가 앞으로 다가올 웹 환경에 미리 대비하기 위해 꼭 한 번은 읽어봐야 하는 책이라고 생각합니다.

의미가 잘 드러나는 정보 구조를 만들려면 기획자들은 웹 표준 HTML을 반드시 이해해야 한다고 생각합니다. 기존 HTML 버전들은 표현을 위한 부분까지도 어느 정도 포함하고 있었기에 표현을 중심으로 부가 요소처럼 의미를 살릴 수 있는 구조를 고민했었습니다. 하지만 이제 HTML5에서 새롭게 도입된 문서 구조(outline) 개념을 통해 의미에 맞는 정보 구조를 우선 생각할 수 있고 생각해야 하는 시기가 왔습니다. 이런 내용은 이 책의 1장과 2장에서 주로 다룹니다.

과거에는 “이 사이트는 ㅇㅇ브라우저에 최적화돼 있습니다” 같은 메시지만 추가해도 괜찮을 정도로 사이트를 느슨하게 만들던 시기가 있었습니다. 하지만 이제는 다양한 브라우저를 사용하고, 컴퓨터가 아닌 모바일 환경을 통해 웹에 접근하는 경우도 흔하므로, 디자인을 할 때도 여러 가지 환경을 고민해야 합니다. 대상 브라우저가 많지 않던 시기에는 입력 폼 등을 모두 원하는 대로 디자인해도 UI 개발에서 처리할 수 있었지만 앞으로 HTML5를 도입하면서는 이제 더 이상 모든 브라우저에서 동일한 모양으로 보여야 한다는 생각에 변화가 생길 것입니다. 표현 관점에서 1장과 2장의 내용은 기존과 같이 CSS를 사용하므로 큰 변화는 없습니다. HTML5를 사용해 어떤 표현을 할 수 있고, 해야 하는지는 3장과 4장, 5장에서 다룹니다.

개발자 관점에서 이 책은 어쩌면 매우 상세한 내용을 다루지 않는다고 볼지도 모릅니다. 하지만 주요 API가 어떤 원리로 작동하는지 어떤 개념으로 프로세스를 구성해야 하는지를 책 전반의 예제에서 익힐 수 있습니다. 구축을 위한 자세한 내용을 위해서는 수백 페이지나 되는 스펙 문서가 준비돼 있으니 굳이 이 책에서 전부를 다루지는 않습니다. 이 책을 통해 어떤 식으로 기존과는 다른 개념으로 웹 개발에 접근해야 하는지를 아주 가벼운 마음으로 알아가는 것이 더욱 중요하다고 생각합니다. 특히 6장, 7장, 10장의 내용은 기존과 매우 다른 방법으로 웹을 구성하는 개념이라는 점에서 찬찬히 살펴봐야 합니다.

1장 기본 구조
一 영역
一새로운 HTML5 구조 엘리먼트
一CSS를 사용한 HTML5 스타일
一HTML5 구조 엘리먼트의 사용법
一정리

2장 텍스트
一메인 컨텐츠 영역 구성
一코멘트 추가
一HTML5 문서 구조
一WAI-ARIA에 대한 이해
一더 많은 구조 엘리먼트
一재정의된 엘리먼트
一글로벌 속성
一이 책에서 다루지 않는 내용
一정리

3장 폼
一HTML의 선물
一새로운 input 형식
一새로운 속성
一통합 적용 예제
一오래된 브라우저를 위한 하위 호환성
一폼 스타일과 에러 메시지
一브라우저 오버라이딩
一자바스크립트를 사용한 DIY 유효성 검사
一유효성 검사 방지
一정리

4장 비디오와 오디오
一멀티미디어 기본 지원
一코덱 전쟁
一커스텀 컨트롤 영역
一멀티미디어 접근성
一정리

5장 캔버스
一캔버스 기초
一path 생성
一픽셀과 변형
一이미지 캡처
一픽셀 단위 작업
一캔버스 요소 애니메이션
一정리

6장 데이터 스토리지
一저장 옵션
一웹 스토리지
一웹 SQL 데이터베이스
一정리

7장 오프라인
一오프라인 환경
一cache manifest
一manifest 제공 방법
一브라우저 서버 통신 방법
一applicationCache
一manifest를 사용한 연결 확인
一캐시 제거
一정리

8장 드래그앤드롭
一드래그
一드래그 정보 상호 교환
一드래그 가능 엘리먼트
一드래그 아이콘
一접근성
一정리

9장 위치 정보
一사용자 위치 지정
一API 메소드
一마법 같은 작동 방법
一정리

10장 메시지 워커, 소켓
一메시징 API를 사용한 채팅
一웹 워커와 스레드
一웹 소켓을 사용한 스트리밍 데이터
一정리
一책을 마치며