★ 저자 서문 ★

HTML5는 기존 마크업 언어의 새로운 버전이 아니라(‘예전’ 기술의 개선이 아니라) 모바일 기기와 클라우드 컴퓨팅과 네트워킹 시대에 웹사이트와 애플리케이션 제작을 위한 새로운 개념이다.

이 모든 것은 오래 전에 웹 페이지의 기본적인 구조를 만들고 해당 콘텐츠를 구성하고 정보를 공유하기 위해 개발된 HTML의 간단한 버전으로 시작했다. 언어와 웹 자체는 주로 텍스트를 통한 정보 통신의 목적으로 탄생했다.

하지만 HTML의 협소한 활용 범위로 인해, 각 기업들은 예전에 없던 새로운 언어와 소프트웨어를 개발하고 웹에 기능을 추가하기 시작했다. 당시 초기에 개발된 언어와 소프트웨어 들은 강력하고 유명한 플러그인으로 성장했다. 간단한 게임과 재미있는 애니메이션은 곧 정교한 애플리케이션으로 변했고 웹의 개념을 완전히 바꿔놓는 새로운 경험을 제공했다.

새롭게 개발된 것들 중에서는 자바와 플래시가 가장 성공적이었다. 자바와 플래시는 폭넓게 채택되었으며 인터넷의 미래로 여겨졌다. 하지만 사용자 수가 점점 증가하고, 인터넷 비즈니스와 사회적 소통을 위한 주요 분야에서 컴퓨터 사용자 간 상호 연결하는 방법이 차차 변화하게 되면서, 자바와 플래시에 존재하던 제약사항은 사형 선고를 받게 됐다.

자바와 플래시의 주된 불편함은 통합(integration)의 결핍이라 할 수 있다. 자바와 플래시 모두 처음부터 플러그인으로 출발했으며, 구조에 삽입되지만 기본적으로 단지 화면의 일부 영역에 해당하는 구조하고만 공유한다. 애플리케이션과 문서 사이의 통신과 통합은 없었다.

통합의 미진함은 매우 심각한 문제가 됐으며 HTML 문서에서 영역을 공유하고 플러그인의 제약사항에 영향을 받지 않는 언어 개발을 위한 길을 마련하게 됐다. 자바스크립트는 브라우저에 내장된 해석형 언어(interpreted language)로서, 분명히 사용자의 경험을 향상시키고 웹에 기능을 제공하는 방법이었다. 하지만 몇 년간 보급 시도의 실패와 오남용으로 인해 시장에서 온전히 채택되지 않았으며 인기도 감소했다. 자바스크립트를 폄하하는 사람들에게는 채택을 반대하는 좋은 이유가 됐으며, 또한 당시 자바스크립트는 플래시와 자바의 기능을 대체할 능력조차 없었다. 그리고 분명히 자바와 플래시가 웹 애플리케이션의 범위를 제한하고 웹의 콘텐츠를 고립시키는 시기였음에도, 비디오 스트리밍 같은 인기 있는 기능은 웹의 큰 비중을 차지하게 됐고 이는 자바나 플래시 기술을 통해서만 효과적으로 제공될 수 있었다.

이와 같은 성공에도 불구하고 웹 영역에서 자바는 쇠퇴했다. 언어 본래의 복잡성, 지지부진한 발전과 통합의 미진함으로 인해 오늘날 자바는 주류 웹 애플리케이션에 더 이상 사용되지 않을 정도로 그 중요도가 줄어들게 됐다. 자바가 사라지자 웹 시장은 플래시를 주목했다. 하지만 플래시가 웹에서 경쟁자와 기본적인 특성을 공유해야 한다는 사실은 플래시도 자바와 동일한 운명에 처하게 될 것으로 보였다.

한편, 웹에 접근하는 소프트웨어는 계속 발전했다. 새로운 기능을 비롯해 더 빨라진 인터넷 접속 기술과 함께 브라우저 역시 자바스크립트 엔진을 향상시켰다. 더 강력해질수록 더 많은 기회가 생겼으며 자바스크립트 언어는 이 모든 것을 받아들일 준비를 갖췄다.

이러한 과정에서 개발자들은 자바와 플래시 모두 사용자의 증가로 인해 요구되는 애플리케이션을 제작하는 데 필요한 도구를 제공하기에는 충분하지 않다고 확신하기에 이르렀다. 결국 개발자들은 이전에 본 적이 없던 방식으로 자바스크립트를 애플리케이션에 적용하기 시작했다. 혁신과 놀라운 결과가 더 많은 프로그래머들의 눈길을 끌었다. 곧 ‘웹 2.0’이 탄생했고 개발자의 커뮤니티에서 자바스크립트에 대한 인식도 급격히 변했다.

자바스크립트는 예전에 어느 누구도 웹에서 이뤄내지 못한 작업의 수행과 혁신을 가능하게 한 언어임에 분명하다. 지난 몇 년간 전세계 프로그래머들과 웹 디자이너들은 이 기술의 한계와 이식성의 초기 결함을 극복하기 위해 매우 놀라운 방안을 내놓았다. 자바스크립트는 HTML과 CSS와 함께 웹의 발전에 절실히 필요한 가장 완벽한 조합이 됐다.

HTML5는 실제로 이러한 조합을 개선시킨, 모든 내용을 한데 결합하는 접착제와도 같다. HTML5는 웹의 모든 측면에 대한 표준을 제안했으며 포함된 각각의 기술에 대한 목적도 분명히 했다. 지금부터 HTML은 구조적인 요소를 제공하며, CSS는 해당 구조를 시각적으로 매력적이고 유용하게 변환하는 방법에 집중하며, 자바스크립트는 기능을 제공하고 전체 웹 애플리케이션을 구축하는 데 필요한 모든 능력을 제공한다.

웹사이트와 애플리케이션의 경계는 마침내 사라졌다. 그리고 필요한 기술은 준비됐다. 웹의 미래는 유망하며 HTML, CSS 그리고 자바스크립트라는 세 가지 기술의 조합과 발전은 하나의 강력한 명세가 됐으며 인터넷을 선도적인 개발용 플랫폼으로 변화시키고 있다. HTML5는 분명히 이러한 방식을 이끌고 있다.---저자 서문 중에서

★ 옮긴이의 말 ★

HTML5는 W3C에서 만든 차세대 웹 표준으로 애플, 구글, 모질라, 오페라 그리고 마이크로소프트 등의 모든 벤더가 참여하고 있습니다. HTML5에 이와 같은 주요 선도기업들이 앞다퉈 참여하는 이유는 분명 HTML5에 그 무엇인가 ‘매력’이 있어서일 겁니다.

예전에 안철수 교수님이 ‘무릎팍도사’라는 TV 프로그램에 출연해 자신의 성공 요인은 ‘운이란 기회가 준비를 만난 것’이라고 이야기했습니다. 아마도 준비된 HTML5가 모바일이라는 기회를 만나 ‘운’ 좋은 성공을 거둔 스토리가 이와 비슷하지 않을까요?

HTML5는 더 이상 화면만 표현하는 ‘수단’이 아닙니다. HTML5는 이전 버전의 개선이 아니라 새로운 ‘플랫폼’입니다. 기존의 HTML이 ‘표현’에 집중한 ‘수동적인 수단’이었다면 HTML5는 웹의 ‘기반’이 되는 ‘능동적인 도구’입니다. HTML5가 각광받는 이유도 과거의 한계를 뛰어넘은 이와 같은 ‘혁신’에 있다고 생각됩니다.

이 책은 HTML5와 관련된 주요 핵심 주제를 총 16장으로 구성했으며 각 장은 거의 독립적입니다. 처음에는 간단한 기본내용으로 시작해 그 예제를 점진적으로 완성해 나가는 방식이며 각 장이 끝나면 전체적인 내용을 한눈에 파악할 수 있게 구성했습니다. 결국 각 장은 기승전결의 스토리가 있는 단편 드라마와 같습니다. 따라서 처음에는 이 책을 가벼운 마음으로 읽으면서 전체 윤곽을 파악하면 됩니다. 그런 다음 각 예제를 자세히 살펴보고 실행해보면 ‘감’을 잡게 될 겁니다.

이 책과 더불어 이 책에 대한 홈페이지(www.minkbooks.com)도 매우 알차게 구성돼 있습니다. 홈페이지를 보면 저자의 섬세함과 전문적인 지식이 이 책이 탄생한 원동력이라 확신하게 됩니다. 이제 전체 ‘숲’을 보았고, 코드라는 ‘나무’도 살펴봤다면 한 단계 더 나아가 이 책의 홈페이지를 꼭 방문해 보시기 바랍니다. 홈페이지(그림 1 참조)의 우측 상단에 있는 ‘Links’ 메뉴를 클릭하시면 각 장과 관련 있는 주요 사이트의 링크가 보입니다(그림 2 참조). 이 링크의 내용을 확인하고 이해하게 되면 드디어 그 ‘숲’에 있는 ‘나무’ 외에도 아름다운 ‘꽃’도 보일 겁니다.

이 책의 소스코드는 총 세 가지 형태로 제공합니다. 첫 번째는 txt 파일 형태로 책에 있는 모든 코드를 각각의 텍스트 파일로 제공합니다. 예컨대 책의 코드 1-1의 텍스트 파일은 code1-1.txt입니다. 두 번째는 html 파일 형태입니다. txt 파일과 마찬가지로 책의 모든 코드를 제공합니다. 하지만 html 파일을 브라우저에서 열면, 결과가 아니라 해당 코드가 브라우저에 직접 나타납니다. 마지막으로 세 번째는 책의 본문에 있는 화면 캡처를 위해 작성한 html 파일입니다. 앞서 설명했듯이 이 책의 구성이 점진적 구성으로 되어있어 이전 css 파일이나 js 파일을 덮어쓰게 되는 경우가 있습니다. 따라서 화면 캡처 시 사용한 코드의 경우는 독립적으로 작성해 해당 코드만 실행하면 결과를 바로 확인해 볼 수 있도록 html, css, js 파일을 모두 합쳐서 하나의 html 파일로 작성했습니다. 그리고 이와 같은 통합 html 파일의 명명 규칙은 html+css+js 순으로 부여했습니다. 예컨대 code5-4+5+6~10.html 파일의 경우는 ‘코드 5-4의 html 파일+코드 5-5의 css 파일+코드 5-6에서 코드 5~10까지의 js파일’을 모두 합쳐서 하나로 작성한 html 파일입니다. 참고로 두 개의 파일을 합친 경우에 첫 번째는 html 파일이고 두 번째는 css나 js 파일입니다. 전체 소스코드는 에이콘 출판사의 도서정보 페이지인 http://acornpub.co.kr/book/html5-css-javascript에서 zip 파일로 제공합니다.

HTML5는 현재도 진화 중인 웹 표준입니다. 따라서 크로스 브라우징(cross browsing)을 가능하게 하려면 각 브라우저에서 HTML5의 지원 여부를 반드시 확인해 봐야 합니다. 이를 확인해 볼 수 있는 가장 좋은 사이트는 www.htlm5test.com입니다. 이 사이트가 의미 있는 것은 HTML5의 요소나 폼 등의 기능에 대한 지원 여부를 한눈에 파악하고 확인해 볼 수 있다는 점입니다. 참고로 이 책의 소스코드에 대한 화면 캡처는 맥 OS X 10.7.4의 사파리 5.1.7을 기준으로 작업했으며 사파리가 지원하지 않는 일부 기능에 대해선 크롬이나 파이어폭스의 최신 버전 중에 지원하는 브라우저에서 작업했습니다.

HTML5의 세계로 뛰어든 독자 여러분의 열정과 도전에 경의를 표합니다. 이 책이 독자 여러분의 노력에 좋은 길라잡이가 되길 바라며, 감사의 말과 함께 건승을 빕니다

우리는 혁명에 직면해 있다. 웹은 메인 개발 플랫폼인 동시에 정보와 소프트웨어에 대한 주요 기반이 되고 있다. 최근 몇 년 동안 모바일 기기는 인터넷 애플리케이션을 가능한 수단에서 필수 요소로 바꿔 놓았다. 현재 웹에서 독립적으로 동작하는 컴퓨터가 개발 중이며 출시도 목전에 두고 있다. 웹에서 동작하는 소프트웨어는 그 어느 때보다 더 정교해지고 있으며, 최종적으로 데스크톱 애플리케이션을 대체하고 있다. 변화의 수준은 실험적이고 급진적이며 HTML5가 이러한 변화의 중심에 서 있다.<br/><br/>『HTML5+CSS3+자바스크립트의 정석』은 필수 지식의 습득에서 HTML5 명세에 포함된 복잡한 주제의 마스터까지 단계별로 독자를 안내한다. 이 책을 읽고 나면 HTML5를 이용해 문서를 구조화하는 방법, CSS3를 이용해 스타일을 적용하는 방법, 가장 강력한 자바스크립트 API를 이용해 작업하는 방법을 알게 된다. <br/><br/>이 책은 단순한 HTML5의 안내서가 아니다. 이 책은 돋보이는 웹사이트와 놀라운 웹 애플리케이션의 구축을 기본부터 설명하는 전체 과정이다. 각 장에서는 HTML5, CSS3, 자바스크립트의 복잡한 문제뿐만 아니라 기본 개념을 살펴본다. 실용적인 전체 코드를 통해 초보자는 개념을 파악할 수 있으며 전문가는 각각의 태그, 스타일 또는 명세에 포함된 함수의 실제 사용 방식을 확인할 수 있다. 코드는 독자들이 복잡한 주제를 점진적으로 이해할 수 있도록 책 전반에 걸쳐 특정한 순서로 배치돼 있다. <br/><br/>『HTML5+CSS3+자바스크립트의 정석』은 독자들이 최신 웹 기술에 익숙해질 수 있게 하는 데 목표를 뒀다. 이러한 기술은 미래를 준비하기 위해 개발됐으며, 이 책은 여러분의 잠재력을 일깨우기 위해 쓰여졌다. 이제 마스터가 되어보자!