• 프로 HTML5 프로그래밍
  • 혁신적인 RIA 개발을 위한 차세대 표준 API

  • 피터 러버스, 브라이언 앨버스, 프랭크 살림 지음
  • 이준, 정승희 옮김

  • 오픈소스 & 웹 시리즈 _ 032
  • ISBN: 9788992939799
  • 25,000원 | 2011년 07월 19일 발행 | 336쪽



그동안 웹은 PC를 지나 스마트폰으로, 또 스마트폰에서 TV로 태블릿 기기로, 나아가 우리가 알지 못하는 수많은 기기로 점차 자리를 옮겨가면서 진화를 거듭하고 있다. 이러한 웹의 진화를 따라잡고자 나온 HTML5이 세상에 알려진 지도 어느새 몇 년이 훌쩍 흘렀다. 그러나 HTML5를 사용한 애플리케이션이 속속 앞다투어 출시되고 그에 따라 개발자들이 HTML5의 새로운 기술들을 사용하려고 고민하지만 실제로 아직까지는 많은 시행착오를 겪어야 하는 것이 사실이다.

『프로 HTML5 프로그래밍』은 HTML5의 기능들을 사용하고 응용하고 그것들을 하나로 묶어서 제대로 된 웹 애플리케이션을 만드는 일련의 과정을 보여준다. 아울러 그 과정에서 개발자가 겪을 수 있는 시행착오까지 꼼꼼히 설명해준다. 이 책의 소스를 살펴보고 분석하고 예제 웹 애플리케이션을 만들어가다 보면 어느새 HTML5를 능숙하게 다루는 자신을 볼 수 있을 것이다.

 

책 속에서

HTML5는 새로운 것이다. 실제로 아직 완성되지도 않았다. 고집 센 전문가 중에는 HTML5이 완성되려면 십 년도 넘게 걸릴 거라 말하는 분도 있다.

그렇다면 왜 다들 지금이 『프로 HTML5 프로그래밍』이라는 책이 필요한 시점이라고 할까? 대답은 간단하다. 누구든지 더 나은 웹 애플리케이션을 원하고 지금이 바로 HTML5의 시대이기 때문이다. 이 책의 저자들은 2년 넘게 HTML5기술을 개발하고 가르치는 일을 하고 있으며, 새로운 표준이 하루 빨리 채택될 것으로 확신하고 있다. 이 책을 쓰는 도중에도 우리는 HTML5의 기능들을 지원하는 브라우저 현황을 꾸준히 업데이트하고 사용할 시점이 되었는지 재검토하고 있다.

대부분의 사용자들은 현재 사용 중인 브라우저의 역량을 정확하게 알지 못한다. 맞는 말이다. 자주 사용하는 브라우저가 자동으로 업데이트되면 소소한 인터페이스의 변화만 눈에 보일 것이다. 하지만 자유롭게 그림을 그릴 수 있는 캔버스, 실시간 네트워크 통신 외에도 수많은 잠재적인 업그레이드로 무장한 새 버전의 브라우저에 대해서는 전혀 모를 것이다.

이 책이 강력한 HTML5의 위력을 만끽하는 데 도움되길 바란다.

■ 대상 독자

이 책은 자바스크립트 프로그래밍에 익숙한 숙련된 웹 애플리케이션 개발자를 대상으로 한다. 다시 말해서, 기초적인 웹 개발과 관련된 내용은 다루지 않는다. 웹 개발의 기초를 어느 정도의 수준으로 끌어올리는 방법은 많다. 아래의 내용 가운데 본인에게 해당되는 내용이 있다면 이 책을 토대로 유용한 통찰력과 찾고 있는 정보에 대해 도움을 받을 수 있을 것이다.

  • 종종 “나만의 브라우저라면…”이라고 생각한 적이 있다.
  • 어떤 인상적인 웹사이트를 분석하려고 소스를 보거나 개발 도구를 사용한 적이 있다.
  • 최신 브라우저 업데이트의 릴리스 노트를 보고 뭐가 새로워졌는지 확인하길 좋아한다.
  • 애플리케이션을 최적화하거나 유연하게 만드는 방법을 찾고 있다.
  • 비교적 최신 브라우저에서 사용자에게 가장 좋은 경험을 제공하기 위해 웹 사이트를 직접 개발하고 있다.

이 중 한 가지라도 여러분에게 해당한다면 이 책이 여러분의 관심사와 잘 맞을 것이다.

적절한 선에서 지원하는 브라우저를 제한하는 데 고심했지만 HTML5 애플리케이션을 십 년 전 브라우저에서도 똑같이 실행할 수 있는 방법을 소개하는 것은 이 책의 목적이 아니다. 경험상 문제를 적당히 해결하는 방법이나 기본 브라우저에 대한 지원은 발빠르게 발전했지만 이러한 정보를 전달하기에 책은 적절한 수단이 아니다. 대신 이 책에서는 HTML5의 명세와 사용법에 주목했다. 세세한 문제 해결 방법은 인터넷에서 찾을 수 있겠지만 그러한 정보는 점점 필요가 없어질 것이다.

■ 이 책에서 다루는 내용

이 책은 열한 개의 장으로 구성돼 있으며, 널리 사용되고 유용하며 강력한 HTML5 API를 선별해서 다룬다. 경우에 따라 더 멋진 데모를 소개하기 위해 앞 장에서 다룬 기능들을 사용했다.

1장, ‘HTML5 소개’는 HTML 명세서의 현재 버전과 역사적인 배경을 설명하는 것으로 시작한다. 최근의 HTML5의 발전을 뒷받침하는 기본적인 변화와 원칙을 비롯해 고수준의 시맨틱 태그들을 소개한다. 이는 HTML5에 입문할 때 알아두면 좋을 법한 내용이다.

2장, ‘HTML5 캔버스 API 사용하기’와 3장, ‘HTML5 오디오/비디오 사용하기’에서는 새로운 시각적인 요소와 미디어 요소를 다룬다. 이 장에서는 플러그인이나 서버 통신 없이도 사용자 인터페이스를 빠르게 개발할 수 있는 더 단순한 방법을 찾는 데 초점을 둔다.

4장, ‘HTML5 지오로케이션 API 사용하기’에서는 기존의 웹 애플리케이션에서 구현하기 어려웠던 기능을 가능케 하는 진정한 새로운 기능을 소개한다. 바로 애플리케이션에서 사용자의 현재 위치를 식별하고 이러한 위치 정보들을 개인화하는 데 사용하는 기능이다. 아울러 중요하게 대두된 개인 정보와 주의 사항에 대해서도 설명한다.

이어지는 장에서는 ‘커뮤니케이션 API 사용하기’와 ‘HTML5 웹소켓 API 사용하기’를 소개한다. 여기서는 HTML5를 이용해 다른 웹 사이트와 통신하거나 최소한의 비용으로 간단하게 애플리케이션으로 실시간 데이터를 전송하는 방법을 설명한다. 이 장에서 다루는 기술들은 지나치게 복잡한 현재의 웹 구조를 단순하게 만들 수 있다.

7장, ‘HTML5 폼 API 사용하기’에서는 최소한의 수정으로 데스크톱 또는 모바일 웹 애플리케이션의 사용성을 높이는 방법뿐 아니라 근본적인 변화로 아주 일반적인 사용 시나리오상에서 오류를 발견하는 방법을 소개한다.

8장, ‘HTML5 웹워커 API 사용하기’와 9장, ‘HTML5 스토리지 API 사용하기’, 10장, ‘HTML5 오프라인 웹 애플리케이션 개발하기’에서는 애플리케이션 간의 내부적인 연결을 다룬다. 여기서는 더 나은 성능과 데이터 관리가 가능하도록 기존 기능들을 최적화하는 방법을 확인할 수 있다.

마지막으로 11장, ‘HTML5의 미래’에서는 조만간 보게 될 흥미로운 기능들을 소개한다. ■ 예제 소스와 웹 사이트 활용

이 책에서 소개된 예제 소스는 Apress 웹 사이트의 소스 코드 영역에서 확인할 수 있다. 이 책의 소스 코드는 www.apress.com에서 source code를 클릭한 뒤 이 책의 제목을 검색한 후 내려 받을 수 있다. 아울러 이 책의 웹 사이트를 www.prohtml5.com에서 확인할 수 있다. 이곳에서 소스 코드와 기타 예제 소스를 내려 받을 수 있다.

아래 위키북스 홈페이지에서도 소스 코드를 내려 받을 수 있다.

  • http://www.wikibook.co.kr

제 HTML5가 등장했고, 웹 애플리케이션에는 전에 없던 강력함과 확장성, 반응성을 보여줄 수 있게 되었습니다. 여러분은 이 책에서 이러한 강력한 능력들을 꺼내어 최첨단 HTML5 기술들을 접목해서 새롭게 등장한 브라우저들의 모든 기능을 이끌어낼 수 있는 최신 웹 애플리케이션을 만드는 법을 배우게 될 것입니다.

이 책에서는 새로운 HTML5 API를 설명합니다. HTML5의 특징들을 실용적이고도 현실적인 예제로 보여주고, 어느 브라우저에서 어떤 기능들을 지원하고 있는가를 보여줍니다. HTML5의 특징을 빠르게 익힐 수 있게끔 이 책에서는 가장 유용하고 강력한 HTML5 API들을 주로 다룹니다. 아울러 지오로케이션이나 웹스토리지, 웹소켓, 웹워커, 캔버스, 오디오, 비디오 같은 HTML5 요소들을 사용해 웹 애플리케이션을 만드는 방법도 배우게 될 것입니다. 그리고 이 같은 요소들을 조합해서 다른 표준 웹 기술과 문제없이 어우러지도록 만드는 방법도 익히게 될 것입니다.

HTML5를 사용하면 많은 양의 스크립트나 비표준 플러그인을 사용해야 했던 복잡한 기능들을 마크업 몇 줄로 해결할 수 있습니다. 자주 쓰는 편집기를 실행하고 HTML5를 지원하는 여러 브라우저 가운데 하나를 선택한 뒤 새로운 커뮤니케이션이나 상호작용에 필요한 기능을 직접 손으로 만들어서 HTML5 프로그램에 추가해볼 수 있을 것입니다.

우리는 최근에 생겨난 이러한 표준 기능을 웹 전문가인 여러분들과 공유하고 싶은 마음에 이 책을 썼습니다. 우리는 HTML5 기술을 2년이 넘게 가르쳐왔고 실제로 개발하고 작업하는 데도 사용하고 있습니다. 그리고 이 새로운 표준 기술은 엄청난 속도로 퍼지리라 장담합니다. 이 책을 보고 나서 여러분이 HTML5 API를 좀더 창의적인 방향으로 사용하고, 나아가 웹에서 여러분들의 코드를 볼 수 있기를 희망합니다.

피터 러버스(Peter Lubbers)

피터 러버스는 Kaazing에서 문서화 및 교육 책임자로 일하고 있다. HTML5와 웹소켓에 관심이 많으며 국제 행사에서 자주 강연을 하고, 전 세계를 대상으로 HTML5 교육 과정을 담당하고 있다. Kaazing에 입사하기 전에 오라클에서 약 십년간 정보 설계를 담당했다. 오라클에 재직할 때는 상을 받은 책을 여러 권 집필하고 출원 중인 소프트웨어 솔루션들을 개발했다. 네덜란드 태생으로 네덜란드 왕족 그린 베레 내의 특수 부대원이기도 하다. 캘리포니아의 타호 국유림가에 살고 있으며, 시간을 쪼개서 울트라 마라톤을 뛴다. 트위터 아이디는 @peterlubbers.

브라이언 앨버스(Brian Albers)

브라이언 앨버스는 Kaazing에서 연구 및 개발 조직의 부사장으로 재직하고 있다. 최근의 오라클 시니어 개발 관리자 경력을 포함하면 웹 개발에서만 경력이 15년이다. Brian은 웹 2.0 엑스포, AJAX월드엑스포, 자바원과 같은 컨퍼런스에서 웹과 사용자 인터페이스 기술 분야의 고정 강연을 맡고 있다. 텍사스주 태생으로 현재 캘리포니아에 살고 있지만 대부분의 시간을 하와이에서 보내고 있다. 여가 시간에 해변에서 쉴 수 없을 땐 다양한 가상 세계에서 그를 만날 수 있다.

프랭크 살림(Frank Salim)

프랭크 살림은 Kaazing의 원년 엔지니어 가운데 한 사람으로 웹소켓 게이트웨이와 클라이언트 전략을 수립할 때 기여한 바 있다. 샌디에고 출신으로 캘리포니아의 마운틴 뷰에 거주하고 있다. 포모나 대학에서 컴퓨터 과학을 전공했으며, 프로그래밍을 하지 않을 때는 독서, 그림, 인라인 스케이팅을 즐긴다.

이준

2000년 웹 세상에 입문하였고, 2004년부터 다음커뮤니케이션에서 FT(Frondend Technolgy) 개발을 담당하고 있다. <제프리 젤드만의 웹표준 가이드>(위키북스, 2007)와 <CSS완벽가이드>(위키북스, 2009)를 번역했다.

정승희

상명대학교에서 소프트웨어학을 전공하고 소프트웨어공학 석사를 수료했다. 2007년부터 다음커뮤니케이션에서 FT(Front-end Technology) 개발자로 근무하고 있으며 티스토리 서비스를 담당하고 있다.

 

옮긴이글

HTML 4.01이 세상에 나온 지 벌써 12년이 지났습니다. 오래 전부터 웹 페이지를 개발하던 분들에게는 올라갈 것 같지 않은 버전이었죠. 웹 애플리케이션이 주목 받게 되면서 다양한 요구사항들이 제기됐고, 브라우저 제작자들은 소규모 그룹을 만들어 HTML5 명세화를 시작했습니다. 2004년에 시작된 HTML5는 이제 곧 중요한 첫 번째 마침표를 앞두고 있습니다.

HTML5에 대한 첫 느낌은 나쁘지 않았습니다. HTML5가 소개된 초기에 봤던 DOCTYPE에 대한 예제가 기억납니다. 저는 DOCTYPE을 어디선가 복사해서 코드에 넣거나, IDE에 문서 기본 내용으로 입력해둡니다(워낙 길죠). 단순히 풀어낸 HTML5를 보고 고맙기까지 했습니다.

HTML5의 특징 중 하나는 “복잡할 필요가 없다, 단순하게 할 수 있는 한 무엇이든 단순하게 한다.”는 것입니다. 웹 개발자들이 가장 많이 쓰는 div 요소의 id 이름을 조사해서 그 이름으로 요소를 만들고, 플러그인 없이도 콘텐츠 소비가 가능해졌습니다. 물론 새로운 개념에 꼭 필요한 하위 호환성도 보장합니다.

마크업 언어는 매체와 상관없이 작성된 문서가 동일하게 보이기 위해 만들어진 언어라고 알고 있습니다. 문서를 만드는 사람이나, 보여주는 브라우저나 마크업 언어가 단순하고 정확해야 가능한 일입니다. HTML5는 최우선 순위를 사용자에게 두고 있지만 개발자와 브라우저에게도 마찬가지라고 느꼈습니다.

아직 모든 브라우저에서 HTML5를 지원하지 않지만, 이 책의 예제를 따라가다 보면 HTML5의 특징들을 사용자들에게 선보이고 싶을 겁니다. 책에서 다루는 예제들은 HTML5의 새로운 개념과 특징들을 접하기에 아주 적절합니다. HTML5처럼 이 책은 단순하고 명료합니다.

HTML5의 명세서는 지금 이 시간에도 만들어지고 있습니다. 쉽게 시작할 수 있을뿐더러, 몇 줄 되지 않는 코드로 개발한 HTML5 애플리케이션은 기대 이상일 수도 있습니다. 모든 브라우저에서 표준에 기반해서 HTML5를 지원이 됐으면 좋겠습니다.

  • 01장 HTML5의 개요
    • 지금까지의 이야기-HTML5의 역사
    • 2022년 신화와 그것이 중요하지 않은 이유
    • 누가 HTML5를 개발하는가?
    • 새로운 비전
      • 호환성과 소길 내기
      • 유용성과 사용자 우선 주의
      • 상호 호환성과 단순화
      • 보편적인 접근성
    • 플러그인이 필요없는 패러다임
      • 무엇이 추가되고 무엇이 없어졌나?
    • HTML5의 새로운 특징
      • 새로운 DOCTYPE과 문자셋
      • 새로운 요소와 비권장 요소
      • 의미 있는 마크업
      • 선택자 API로 간단히 선택하기
      • 자바스크립트 로깅과 디버깅
      • window.JSON
      • DOM 레벨 3
      • 빠른 자바스크립트 엔진들
      • 정리
    •  
  • 02장 HTML5 캔버스 API 사용하기
    • HTML5 캔버스 개요
      • 역사
      • 캔버스란?
      • 캔버스 좌표
      • 캔버스를 사용해서는 안 되는 경우
      • 대체 콘텐츠
      • CSS와 캔버스
      • HTML5 캔버스를 지원하는 브라우저
    • HTML5 캔버스 API 사용하기
      • 브라우저 지원 여부 확인
      • 페이지에 캔버스 추가하기
      • 그림 변환하기
      • 패스 다루기
      • 선 스타일 사용하기
      • 면 스타일 다루기
      • 사각형 콘텐츠 채우기
      • 곡선 그리기
      • 캔버스에 이미지 넣기
      • 그라디언트 사용하기
      • 배경 패턴 사용하기
      • 캔버스 객체 크기 조절하기
      • 캔버스 변형 이용하기
      • 캔버스 텍스트 사용하기
      • 그림자 적용
      • 픽셀 데이터 다루기
      • 캔버스 보안 구현하기
    • HTML5 캔버스 애플리케이션 만들기
      • 기타 예제: 전체 페이지를 덮는 유리 패널
    • 정리
    •  
  • 03장 HTML5 오디오와 비디오
    • HTML5 오디오와 비디오 개요
      • 비디오 컨테이너
      • 오디오 및 비디오 코덱
      • 오디오 및 비디오의 제한사항
      • HTML5 오디오와 비디오를 지원하는 브라우저
    • HTML5 오디오 및 비디오 API 사용하기
      • 브라우저 지원 여부 확인하기
      • 미디어 요소 이해하기
      • 오디오 사용하기
      • 비디오 다루기
      • 기타 예제
    • 정리
    •  
  • 04장 HTML5 지오로케이션 API 사용하기
    • 위치 정보란?
      • 위도, 경도 좌표
      • 위치 정보의 근원
      • IP 주소 기반 지오로케이션 데이터
      • 위성 위치 확인 시스템의 지오로케이션 데이터
      • Wi-Fi 기반 지오로케이션 데이터
      • 휴대전화 지오로케이션 데이터
      • 사용자 정의 지오로케이션 데이터
    • HTML5 지오로케이션을 지원하는 브라우저
    • 개인 정보
      • 개인 정보 보호 메커니즘
      • 위치 정보 사용하기
    • HTML5 지오로케이션 API 사용하기
      • 브라우저 지원 여부 확인하기
      • 위치 요청
    • HTML5 지오로케이션을 이용한 실시간 애플리케이션 제작
      • HTML 화면 작업
      • 지오로케이션 데이터 처리
      • 최종 코드
    • 기타 예제
      • 내 위치는 어디일까?
      • 구글 맵에서 내 위치 보기
    • 요약
    •  
  • 05장 커뮤니케이션 API 사용하기
    • 다른 도메인 문서 간 메시징
      • 도메인 보안의 이해
      • 다른 도메인 간의 문서 메시징을 위한 브라우저 지원
      • postMessage API 사용하기
      • postMessage API로 애플리케이션 만들기
    • XMLHttpRequest 레벨 2
      • 다른 도메인 간 XMLHttpRequest
      • 단계적 응답 이벤트
      • HTML5 XMLHttpRequest 레벨 2를 지원하는 브라우저
      • XMLHttpRequest API 사용하기
      • XMLHttpRequest로 애플리케이션 만들기
    • 기타 예제
      • 구조적 데이터
      • 프레임버스팅
    • 정리
    •  
  • 06장 HTML5 웹소켓 API
    • HTML5 웹소켓 개요
      • 실시간과 HTTP
      • HTML5소켓의 이해
    • HTML5 웹소켓의 브라우저 지원
    • 간단한 에코 웹소켓 서버 만들기
    • HTML5 웹소켓 API
      • 브라우저 지원 여부 확인
      • 기본 API사용법
    • HTML5 웹소켓으로 애플리케이션 만들기
      • HTML파일 작성
      • 웹소켓 코드 추가
      • 지오로케이션코드 추가
      • 총정리
    • 최종 코드
    • 정리
    •  
  • 07장 HTML5 폼 API
    • HTML5 폼의 개요
      • HTML Forms vs. XForms
      • 기능적인 폼
      • HTML5 폼의 브라우저 지원
      • Input 목록
    • HTML5 Form API의 활용
      • 새로운 폼 속성과 기능
      • 폼 유효성 검사
      • 유효성 피드백
    • HTML5 Form을 이용한 애플리케이션 구축
      • 기타 예제
    • 정리
    •  
  • 08장 HTML5 웹워커 API
    • HTML5 Web Workers의 브라우저 지원
    • HTML5 웹워커API의 사용
      • 브라우저 지원 여부 검사
      • HTML5 Web Workers 생성
      • 추가 자바스크립트의 로딩과 실행
      • HTML5 Web Workers와의 통신
    • 메인 페이지 코드
      • HTML5 Web Worker중지
      • 타이머 사용
      • 예제 코드
    • HTML5 웹워커를 이용한 애플리케이션 구축
      • blur.js 도우미 스크립트
      • blur.html 애플리케이션 페이지
      • blurWorker.js Web Worker 스크립트
      • 웹워커와의 통신
      • 애플리케이션 실행
    • 예제 코드
    • 정리
    •  
  • 09장 HTML5 웹스토리지 API
    • HTML5 웹스토리지의 개요
    • HTML5 웹스토리지의 브라우저 지원
    • HTML5 웹스토리지 API 사용
      • 브라우저 지원 여부 확인
      • 값 설정과 조회
      • 데이터 누출 방지
      • 로컬 스토리지와 세션 스토리지
      • 기타 웹스토리지 API속성과 함수
      • 웹스토리지 업데이트
      • 웹스토리지 살펴보기
    • HTML5 웹스토리지를 이용한 애플리케이션 만들기
    • 브라우저 데이터베이스 스토리지의 미래
      • JSON 객체 스토리지
      • 윈도우 간의 공유
    • 정리
    •  
  • 10장 HTML5 오프라인 웹 애플리케이션 만들기
    • HTML5 오프라인 웹 애플리케이션의 개요
      • HTML5 오프라인 웹 애플리케이션의 브라우저 지원
    • HTML5 오프라인 웹 애플리케이션 API의 사용.
      • 브라우저 지원 여부 검사
      • 간단한 오프라인 애플리케이션 만들기
      • 오프라인 이벤트
      • 매니페스트 파일
      • applicationCache API
    • HTML5 오프라인 웹 애플리케이션으로 애플리케이션 만들기
      • 애플리케이션 리소스를 위한 매니페스트 파일 만들기
      • UI를 위한 HTML 구조와 CSS 만들기
      • 오프라인 자바스크립트 만들기
      • ApplicationCache 지원 여부 확인
      • 업데이트 버튼 핸들러 추가
      • 지오로케이션 추적 코드 추가
      • 스토리지 코드 추가
      • 오프라인 이벤트 핸들러 추가
    • 정리
    •  
  • 11장 HTML5의 미래
    • HTML5의 브라우저 지원
    • HTML의 발전
      • WebGL
      • 기기
      • 오디오 데이터 API
      • 비디오의 발전
      • 터치스크린 기기 이벤트
      • P2P 네트워크
      • 최종 목표
    • 정리

예제코드 관련 GitHub 페이지

관련 글