웹 표준이니 웹 2.0이니 하던 때가 엊그제 같은데 이제는 굳이 그런 표현을 사용하는 것이 촌스러워졌을 정도로 이미 기본 중의 기본이 되었습니다. 이제 HTML5와 CSS3 없이는 효율적인 웹 디자인을 말하기 힘들고 자바스크립트를 모르고서는 역동적인 웹사이트나 웹 앱을 개발할 수 없습니다. 모바일 영역이 발전할수록 HTML5는 아마도 모든 개발의 중심에 있게 될 것입니다. 기기나 플랫폼에 구애받지 않고 어디서든 돌아가는 사이트와 앱을 만들고자 하는 것이 작업 효율을 위해 모든 개발자의 목적이 될 수밖에 없고 현재로서 대안은 HTML5가 거의 유일하기 때문에 다른 모든 기술은 궁극적으로 HTML5를 중심으로 공전하게 될 것입니다.

이 책은 지닌 마이어 교수의 이전 저서인 『한 번에 배우는 HTML5+자바스크립트』(한빛미디어, 2011)에 이어 비슷한 구성과 실습 위주의 이해하기 쉬운 설명을 특징으로 합니다. 다만, 이전 책이 입문자 대상이었다면 이 책은 좀 더 기본 지식을 갖춘 중급 대상입니다. 그러므로 이 책의 구성이나 실습 예제가 마음에 들지만, 스스로 기초가 부족하다고 느낀다면 『한 번에 배우는 HTML5+자바스크립트』(한빛미디어, 2011)를 보고 나서 이 책을 보면 도움이 됩니다. 이전 책과 마찬가지로 이 책도 HTML5를 토대로 하여 각 장에서 다루는 프로젝트에 필요한 자바스크립트 기술도 함께 설명합니다. 수록된 각 장은 캔버스, 비디오, 지오로케이션, 데이터베이스 질의 등 HTML5의 주요 기능을 실제 프로젝트에 이용하는 방법을 알려주며 이를 바탕으로 창작 프로젝트를 만들기 위한 아이디어 힌트도 수록해 응용력도 키울 수 있습니다. 웹 기반의 앱 제작이 시대적 흐름으로 자리잡은 이때, 창의성 높은 웹 앱 개발을 위해서는 그에 필요한 HTML5, CSS3, 자바스크립트 등의 기술을 어려움 없이 다룰 수 있어야 합니다. 각 장마다 하나의 실습 목표를 정해 놓고 그것을 구현하기 위해 기술적으로 준비해야 할 부분을 상세히 설명하고 이를 하나로 취합해 완성된 코드와 주석까지 친절히 설명해주는 책은 흔치 않습니다. 특히 수록된 실습 코드는 어느 한 부분 버릴 것이 없고 실제 개발에 있어 활용도가 높다는 점이 이 책의 가장 큰 장점입니다.
제가 처음 홈페이지를 만들던 때가 생각납니다. 그때 만약 내 홈페이지를 만들어야 한다는 강력한 목표의식과 하나씩 알아낸 태그와 명령을 적용하며 직접 만들어가는 재미가 없었다면, 과연 HTML 태그와 기초적인 CSS 속성을 단 일주일 만에 자유롭게 사용할 수 있었을지 의문이 듭니다. 이론을 순차적으로 완벽히 마스터하는 방법도 좋겠지만 무엇보다 가장 빠른 습득은 실습에서 나옵니다. 흥미나 필요에 의한 실습이라면 더할 나위가 없겠지요. 이 책의 장점이 바로 그것입니다. 이론 설명을 보지 않고도 각 프로젝트에 수록한 응용성 높은 여러 기술과 기법만 자신의 것으로 소화하면, 원하는 웹사이트나 웹 앱을 자유자재로 만들 수 있을 것입니다.

이 책이 나오기까지 늘 격려해 주시고 좋은 책 만들기에 여념 없으신 한빛미디어 가족 분들께 감사합니다. 물심양면으로 번역 작업에 몰입할 수 있게 도움 주시고 쾌적한 번역 환경을 마련해주시며 언제나 마음에 드는 구성의 좋은 책 번역을 맡겨주시는 배용석 부장님, 송성근 팀장님, 최현우 과장님, 조희진 과장님을 비롯해 부족한 역자를 좋게 봐주시고 만나면 반갑게 맞아주시는 전문서 팀 모든 분들과 한빛미디어 분들께도 항상 마음 속으로 감사합니다. ---옮긴이 글 중에서

지은이 글_ 지닌 마이어
이 책은 저의 HTML5 연구의 연장선 상에 있습니다. 저는 캔버스나 비디오 같은 기능을 연동하고, 수학 계산을 통해 객체지향이나 내용물과 로직 분리 같은 일반적인 프로그래밍 기법을 사용하는 방식으로 프로젝트를 개발했습니다. HTML5와 자바스크립트를 구글 맵, 지오로케이션, 서버 측 프로그래밍 등의 다른 기술과 연동해서 프로그램을 제작하는 데에도 관심을 가졌습니다.
각 장은 하나의 프로그램과 그에 연관된 일련의 프로그램에 대해 설명합니다. 이렇게 구성한 이유는 저의 강의 경험상 개념과 방법을 가장 쉽게 이해할 수 있는 방법이 바로 실습이기 때문입니다. 우선 맨 처음 실습할 프로그램은 1장의 HTML5 공식 로고 그리기입니다. 1장에서 보겠지만, 이 프로그램을 개발하는 방식은 좌표 변환을 이용해야 합니다. 가족사진 콜라주를 다루는 2장의 프로젝트는 필자의 늘어나는 가족과 객체지향 프로그래밍에 대해 가르치고자 하는 저의 욕심에서 탄생했으며, 자신의 사진과 객체를 사용해서 자신만의 프로그램을 만들기 위한 뼈대로 사용하기에 적당합니다. 공 튕기는 비디오 제작 방법을 설명한 3장은 제가 기존에 제작했던 양방향 프로그램을 토대로 제작한 것으로, 캔버스와 비디오를 두 가지 방식으로 연동하는 것이 특징입니다.
4장, 5장, 6장에서는 구글 맵 API(애플리케이션 프로그래밍 인터페이스) 사용법을 설명합니다. 구글 맵 API를 이용하면 프로그래머는 구글 맵으로의 접근 기능을 자신의 프로젝트에 손쉽게 포함시킬 수 있습니다. 4장은 맵과 캔버스를 연결하는 사용자 인터페이스와 더불어, 사용자가 직접 디자인한 커서와 알파 값(투명도)을 그리기 패스에 사용하는 방법도 설명합니다. 5장에서 다루는 세 가지 프로그램은 내용물과 로직을 분리함으로써 한 지역 탐색이나 여러 위치가 있는 지형 퀴즈 같은 다양한 프로그램으로 확장하는 방법을 설명하기 위한 것입니다. 6장에서 다루는 지오로케이션은 사용자의 위치를 알아내는 기술입니다. 이 기술을 PHP를 통해 서버 측 프로그래밍과 연동하면 선택한 사람에게 자신의 현재 위치를 이메일로 보낼 수 있습니다.
7장에서는 종이 접기 강좌 제작을 통해 수식, 비디오, 사진을 주로 사용하여 선 그리기 연동 방법을 설명합니다. 이 예제를 모델로 삼아 그림, 비디오, 이미지를 이용하여 자신의 강좌를 만들 수도 있고, 내용을 읽고 대수학과 기하학 분야의 주제를 상기할 수도 있습니다. 8장에서 다루는 프로그램은 어도비 플래시를 이용해 제작했던 프로젝트에서 힌트를 얻은 것으로, 그림 맞추기 퍼즐이 비디오로 전환됩니다. 8장에서는 손가락 터치 이벤트 처리 기능을 포함시키는 방법과 아이팟과 아이패드에서 작업하는 방법에 대해서도 설명합니다. 9장에서 다루는 프로그램은 필자가 기존에 플래시를 이용해 만들었던 '주(state) 구별하고 이름 맞추기' 게임에서 힌트를 얻어 응용한 것입니다. 9장에서는 그림 맞추기 퍼즐 형태로 미국의 50개 주를 뒤섞는 방법과 진행 중인 퍼즐을 localStorage를 통해 저장하는 방법을 설명합니다. 결과로 완성되는 이 교육용 게임에는 각종 플레이어 동작을 처리하는 기능의 사용자 인터페이스가 표시됩니다. 마지막 10장에서는 데이터베이스 사용법을 설명합니다. 10장에서는 HTML5와 자바스크립트가 PHP와 SQL(구조 질의 언어)을 통해 연결됩니다. SQL은 대부분의 데이터베이스에 사용되는 표준 질의 언어입니다. 10장에서 다루는 데이터베이스는 MySQL입니다. localStorage 기능과 HTML5의 폼 유효성 검사 기능을 사용해보면 많은 데이터베이스 프로그램의 공통적인 요건을 알 수 있습니다. 또한, 이 데이터베이스 프로그램을 살펴보면 사용자 비밀번호의 단방향 암호화 방법과 클라이언트 측 및 서버 측의 폼 유효성 검사 방법도 알 수 있습니다.

지오로케이션, 웹 저장소, PHP, MySQL 등을 활용해서 웹사이트, 웹 애플리케이션을 제작해보자.<br/><br/> -. 자습서를 닮은, 혼자서 공부하기에 편한 구성<br/>프로젝트별로 필요한 사전 지식부터 주요 코드의 구현 방법, 요점정리까지 총 6개 절로 일목요연하게 정리되어 있다. <br/> -. 코드별 색상으로 쉽게 구분<br/>예약어/변수명/요소/속성명 등을 색으로 구분지어 눈으로도 더 쉽게 코드를 분석할 수 있게 도와준다.<br/> -. 원서와는 차별화된 화려한 컬러 구성<br/>그리기와 색칠하기를 비롯한 지도 이용, 사진 구성 등의 프로젝트 학습에 도움을 주고자 도서 전체를 컬러로 구성한 개발서다.<br/><br/>어떤 독자를 위한 책인가?<br/>-. HTML5와 자바스크립트는 익히 들어왔지만, 실전 경험이 없는 사람<br/>-. 웹 지식과 다른 기술을 연동해서 좀 더 실속있는 웹 애플리케이션을 개발하고 싶은 사람<br/>-. HTML5의 새 기능이나 웹 애플리케이션에 필요한 아이디어를 얻고 싶거나 컨닝 페이퍼가 필요한 사람