프로 html5 프로그래밍 : 혁신적인 ria 개발을 위한 차세대 표준 api

프로

HTML5 프로그래밍

iv

•목 차•

01장 HTML5 소개 1지금까지의 이야기-HTML5의 역사 ................................................................1

2022년 신화와 그것이 중요하지 않은 이유 .....................................................2

누가 HTML5를 개발하는가? ............................................................................4

새로운 비전 .........................................................................................................4

호환성과 소길 내기 .....................................................................................4

유용성과 사용자 우선주의..........................................................................5

상호 호환성과 단순화 .................................................................................6

보편적인 접근성 ..........................................................................................7

플러그인이 필요없는 패러다임 .......................................................................7

무엇이 추가되고 무엇이 없어졌나? ...........................................................8

HTML5의 새로운 특징 .................................................................................. 11

새로운 DOCTYPE과 문자셋 ...................................................................11

새로운 요소와 비권장 요소.......................................................................12

의미 있는 마크업 .......................................................................................13

선택자 API로 간단히 선택하기 ................................................................21

자바스크립트 로깅과 디버깅 ....................................................................24

window.JSON ............................................................................................25

DOM 레벨 3...............................................................................................25

빠른 자바스크립트 엔진 ...........................................................................25

정리 ................................................................................................................... 27

v

02장 HTML5 캔버스 API 29HTML5 캔버스 개요 ...................................................................................... 29

역사 ...........................................................................................................29

캔버스란?...................................................................................................30

캔버스 좌표 ................................................................................................31

캔버스를 사용해서는 안 되는 경우 ..........................................................31

대체 콘텐츠 ................................................................................................32

CSS와 캔버스 .............................................................................................32

HTML5 캔버스를 지원하는 브라우저 ....................................................33

HTML5 캔버스 API 사용하기 ...................................................................... 34

브라우저 지원 여부 확인 ..........................................................................34

페이지에 캔버스 추가하기........................................................................34

그림 변환하기 ............................................................................................37

패스 다루기 ................................................................................................40

선 스타일 사용하기 ...................................................................................43

면 스타일 다루기 .......................................................................................44

사각형 콘텐츠 채우기 ...............................................................................45

곡선 그리기 ................................................................................................47

캔버스에 이미지 넣기 ...............................................................................48

그라디언트 사용하기 ................................................................................50

배경 패턴 사용하기 ...................................................................................52

캔버스 객체 크기 조절하기.......................................................................54

캔버스 변형 이용하기 ..............................................................................56

vi

캔버스 텍스트 사용하기 ...........................................................................58

그림자 적용 ................................................................................................60

픽셀 데이터 다루기 ...................................................................................61

캔버스 보안 구현 .......................................................................................63

HTML5 캔버스 애플리케이션 만들기 .......................................................... 64

기타 예제: 전체 페이지를 덮는 유리 패널 ...............................................68

정리 ................................................................................................................... 69

03장 HTML5 오디오와 비디오 71HTML5 오디오와 비디오 개요...................................................................... 71

비디오 컨테이너 ........................................................................................71

오디오 및 비디오 코덱 .............................................................................72

오디오 및 비디오의 제한사항 ...................................................................74

HTML5 오디오와 비디오를 지원하는 브라우저 ...................................74

HTML5 오디오 및 비디오 API 사용하기 ..................................................... 75

브라우저 지원 여부 확인 ..........................................................................76

미디어 요소 이해하기 ...............................................................................77

오디오 사용하기 ........................................................................................82

비디오 다루기 ............................................................................................84

기타 예제 ....................................................................................................91

정리 ................................................................................................................... 93

04장 HTML5 지오로케이션 API 95위치 정보란? .................................................................................................... 96

위도, 경도 좌표 ..........................................................................................96

위치 정보의 근원 .......................................................................................97

IP 주소 기반 지오로케이션 데이터 ..........................................................98

위성 위치 확인 시스템의 지오로케이션 데이터 .....................................98

vii

Wi-Fi 기반 지오로케이션 데이터 ............................................................99

휴대전화 지오로케이션 데이터 ................................................................99

사용자 정의 지오로케이션 데이터 ...........................................................99

HTML5 지오로케이션을 지원하는 브라우저 ............................................ 100

개인정보 ......................................................................................................... 100

개인정보 보호 메커니즘 .........................................................................102

위치 정보 사용하기 .................................................................................103

HTML5 지오로케이션 API 사용하기 ......................................................... 103

브라우저 지원 여부 확인 ........................................................................104

위치 요청 ..................................................................................................104

HTML5 지오로케이션을 이용한 실시간 애플리케이션 제작 .................. 111

HTML 화면 작업 .....................................................................................113

지오로케이션 데이터 처리......................................................................114

최종 코드 ..................................................................................................117

기타 예제 ........................................................................................................ 120

내 위치는 어디일까? ................................................................................121

구글 지도에서 내 위치 보기....................................................................123

요약 ................................................................................................................. 124

05장 커뮤니케이션 API 127다른 도메인 문서 간 메시징 ......................................................................... 127

도메인 보안의 이해 .................................................................................130

다른 도메인 간의 문서 메시징을 위한 브라우저 지원 .........................131

postMessage API 사용 ............................................................................132

postMessage API로 애플리케이션 만들기 ...........................................133

XMLHttpRequest 레벨 2 ............................................................................. 140

다른 도메인 간 XMLHttpRequest .........................................................141

단계적 응답 이벤트 .................................................................................143

HTML5 XMLHttpRequest 레벨 2를 지원하는 브라우저 ...................144

viii

XMLHttpRequest API 사용 ...................................................................144

XMLHttpRequest로 애플리케이션 만들기 ..........................................146

기타 예제 ........................................................................................................ 151

구조적 데이터 ..........................................................................................151

프레임버스팅 ...........................................................................................152

정리 ................................................................................................................. 153

06장 HTML5 웹소켓 API 155HTML5 웹소켓 개요 .................................................................................... 155

실시간과 HTTP .......................................................................................156

HTML5 소켓의 이해 ...............................................................................157

HTML5 웹소켓의 브라우저 지원 ................................................................ 164

간단한 에코 웹소켓 서버 만들기 ................................................................. 164

HTML5 웹소켓 API ..................................................................................... 173

브라우저 지원 여부 확인 ........................................................................173

기본 API 사용법 ......................................................................................174

HTML5 웹소켓으로 애플리케이션 만들기 ................................................ 178

HTML 파일 작성 .....................................................................................180

웹소켓 코드 추가 .....................................................................................182

지오로케이션 코드 추가 .........................................................................182

총정리 .......................................................................................................183

최종 코드 ........................................................................................................ 186

정리 ................................................................................................................. 189

07장 HTML5 폼 API 191HTML5 폼 개요 ............................................................................................ 191

HTML Forms vs. XForms ......................................................................192

기능적인 폼 ..............................................................................................192

ix

HTML5 폼의 브라우저 지원 ..................................................................193

Input 목록 ................................................................................................194

HTML5 폼 API의 활용 ................................................................................ 198

새로운 폼 속성과 기능 ............................................................................198

폼 유효성 검사 .........................................................................................203

유효성 피드백 ..........................................................................................208

HTML5을 이용한 애플리케이션 구축 ........................................................ 211

기타 예제 ..................................................................................................216

정리 ................................................................................................................. 217

08장 HTML5 웹워커 API 219HTML5 웹워커의 브라우저 지원 ................................................................ 220

HTML5 웹워커 API의 사용 ........................................................................ 220

브라우저 지원 여부 확인 ........................................................................221

HTML5 웹워커 생성 ...............................................................................222

추가 자바스크립트의 로딩과 실행 .........................................................222

HTML5 웹워커와의 통신 .......................................................................222

메인 페이지 코드 ........................................................................................... 223

에러 처리 ..................................................................................................224

HTML5 웹워커 중지 ...............................................................................224

HTML5 웹워커 내에서의 HTML5 웹워커 사용 ..................................225

타이머 사용 ..............................................................................................226

예제 코드 ..................................................................................................226

HTML5 웹워커를 이용한 애플리케이션 구축 ........................................... 227

blur.js 도우미 스크립트 ...........................................................................229

blur.html 애플리케이션 페이지 .............................................................230

blurWorker.js 웹워커 스크립트 .............................................................231

웹워커와의 통신 ......................................................................................232

x

애플리케이션 실행 ..................................................................................234

예제 코드 ..................................................................................................235

정리 ................................................................................................................. 241

09장 HTML5 웹스토리지 API 243HTML5 웹스토리지의 개요 ........................................................................ 243

HTML5 웹스토리지의 브라우저 지원 ........................................................ 245

HTML5 웹스토리지 API 사용 .................................................................... 245

브라우저 지원 여부 확인 ........................................................................245

값 설정과 조회 .........................................................................................247

데이터 누출 방지 .....................................................................................249

로컬 스토리지와 세션 스토리지 .............................................................251

기타 웹스토리지 API 속성과 함수 .........................................................251

웹스토리지 업데이트 ..............................................................................253

웹스토리지 살펴보기 ..............................................................................255

HTML5 웹스토리지를 이용한 애플리케이션 만들기 ............................... 256

브라우저 데이터베이스 스토리지의 미래 .................................................. 270

JSON 객체 스토리지 ...............................................................................273

윈도우 간의 공유 .....................................................................................275

정리 ................................................................................................................. 276

10장 HTML5 오프라인 웹 애플리케이션 개발 279HTML5 오프라인 웹 애플리케이션 개요 ................................................... 279

HTML5 오프라인 웹 애플리케이션의 브라우저 지원.........................282

HTML5 오프라인 웹 애플리케이션 API의 사용 ....................................... 282

브라우저 지원 여부 확인 ........................................................................282

간단한 오프라인 애플리케이션 만들기 .................................................282

오프라인 이벤트 ......................................................................................283

xi

매니페스트 파일 ......................................................................................284

애플리케이션 캐시 API ..........................................................................285

HTML5 오프라인 웹 애플리케이션 활용 ................................................... 287

애플리케이션 리소스를 위한 매니페스트 파일 만들기 .......................288

UI를 위한 HTML 구조와 CSS 만들기 .................................................289

오프라인 자바스크립트 만들기 ..............................................................290

애플리케이션 캐시 지원 여부 확인 ........................................................292

업데이트 버튼 핸들러 추가.....................................................................293

지오로케이션 추적 코드 추가 .................................................................293

스토리지 코드 추가 .................................................................................294

오프라인 이벤트 핸들러 추가 .................................................................295

정리 ................................................................................................................. 295

11장 HTML5의 미래 297HTML5의 브라우저 지원 ............................................................................ 297

HTML의 발전 ............................................................................................... 298

WebGL......................................................................................................298

기기 .........................................................................................................301

오디오 데이터 API ..................................................................................302

비디오의 발전 ..........................................................................................302

터치스크린 기기 이벤트 .........................................................................303

P2P 네트워크 ...........................................................................................306

최종 목표 ..................................................................................................306

정리 ................................................................................................................. 307

찾아보기.............................................................................309

xii

나의 아름다운 아내 빅토리아와 두 아들 션과 록키.

당신들이 자랑스럽습니다.

― 피터 러버스

존, 당신은 큰 보람을 느끼게 해줬습니다.

― 브라이언 앨버스

이 책이 필요한 분들에게

― 프랭크 살림

xiii

•옮긴이 글•

HTML5에 대한 소문과 기대가 웹상으로 퍼져나가기 시작한 지 얼마 되지도 않아 어느새

HTML5를 이용한 수많은 서비스가 속속들이 만들어지고 있습니다. 아직도 오래된 브라우저에

게 막혀서 자유롭게 진행되지 못하고 있었지만 그런 제약을 벗어날 수 있는 새로운 돌파구가 생겨

났습니다. 바로 모바일 세상입니다. HTML5를 완벽하게 지원하는 최신 브라우저를 탑재해서 새

로운 기술을 받아들일 준비를 한껏 마치고 나타난 모바일은 새로운 기술로 우리를 놀라게 합니다.

그뿐 아니라 실생활에서 비약적인 편리함을 제공하기도 합니다. 모바일 브라우저에 저장된 정보를

기반으로 간단하고 빠르게 이메일을 확인하고 교통정보를 찾아볼 수도 있으며 날씨를 알아보기

도 합니다. 또한 플래시가 없어도 동영상을 볼 수 있고, 현재 위치를 사용해서 편리하게 주변을 검

색할 수도 있습니다. 모바일은 이제 우리 생활에 떼어낼 수 없는 일부분이 되었고 가장 빠르게 발

전하고 있는 분야이기도 합니다. 그러면서 HTML5도 이제 우리의 일부가 되었습니다.

이 책이 비록 모든 부분을 시원하게 알려주지 못할 수도 있지만 길잡이가 되어 주리라는 것은 믿

어 의심치 않습니다. 근본적인 이론부터 실제 서비스에서 사용할 수 있는 기술까지 다양하게 다루

고 있기 때문에 가까이 두고 천천히 이 책과 친해진다면 개발을 하는 데 많이 도움될 것입니다. 이

책이 저에게도 많은 도움을 주었듯이 여러분에게도 많은 도움을 주었으면 하는 바람입니다. 새로

운 지식을 습득하려는 여러분의 앞길에 건투를 빕니다.

- 이준

xiv

•옮긴이 글•

HTML 4.01이 세상에 나온 지 벌써 12년이 지났습니다. 오래 전부터 웹 페이지를 개발하던 분들

에게는 올라갈 것 같지 않은 버전이었죠. 웹 애플리케이션이 주목받게 되면서 다양한 요구사항이

제기됐고, 브라우저 제작자들은 소규모 그룹을 만들어 HTML5 명세화를 시작했습니다. 2004년

에 시작된 HTML5는 이제 곧 중요한 첫 번째 마침표를 앞두고 있습니다.

HTML5에 대한 첫 느낌은 나쁘지 않았습니다. HTML5가 소개된 초기에 본 DOCTYPE 예제

가 기억납니다. 저는 DOCTYPE을 어디선가 복사해서 코드에 넣거나, IDE에 문서 기본 내용으로

입력해둡니다(워낙 길죠). 단순히 풀어낸 HTML5를 보고 고맙기까지 했습니다.

HTML5의 특징 중 하나는 “복잡할 필요가 없다, 단순하게 할 수 있는 한 무엇이든 단순하게 한

다.”는 것입니다. 웹 개발자가 가장 많이 쓰는 div 요소의 id 이름을 조사해서 그 이름으로 요소를

만들고, 플러그인 없이도 콘텐츠 소비가 가능해졌습니다. 물론 새로운 개념에 꼭 필요한 하위 호환

성도 보장합니다.

마크업 언어는 매체와 상관없이 작성된 문서가 동일하게 보이기 위해 만들어진 언어라고 알고

있습니다. 문서를 만드는 사람이나, 보여주는 브라우저나 마크업 언어가 단순하고 정확해야 가능

한 일입니다. HTML5는 최우선 순위를 사용자에게 두고 있지만 개발자와 브라우저에게도 마찬가

지라고 느꼈습니다.

아직 모든 브라우저에서 HTML5를 지원하진 않지만 이 책의 예제를 따라가다 보면 HTML5의

특징을 사용자에게 선보이고 싶을 겁니다. 책에서 다루는 예제는 HTML5의 새로운 개념과 특징

을 접하기에 아주 적절합니다. HTML5처럼 이 책은 단순하고 명료합니다.

HTML5의 명세서는 지금 이 시간에도 만들어지고 있습니다. 쉽게 시작할 수 있을뿐더러 몇 줄

되지 않는 코드로 개발한 HTML5 애플리케이션은 기대 이상일 수도 있습니다. 모든 브라우저에

서 표준을 기반으로 HTML5를 지원하기를 기대해봅니다.

- 정승희

xv

•추천사•

2004년 6월, 시맨틱 웹 커뮤니티의 대표자와 주요 브라우저 제작사 및 W3C가 새롭게 대두된 웹

애플리케이션을 위한 표준을 논의하고자 캘리포니아의 산 호세에서 만났다. 둘째 날에 마지막으

로 W3C가 웹 애플리케이션의 새로운 요구사항에 맞춰 HTML과 DOM을 확장할지 여부를 결정

하는 투표가 열렸다. 이 날의 익명 투표에서 흥미로운 결과가 나왔다. ‘8명 찬성, 14명 반대’

이러한 대립은 노력의 분산으로 이어졌다. 이틀 후, 주요 브라우저 제작사는 새롭게 등장한 문제

를 해결하기 위해 WHATWG를 만들었다. 한편, W3C는 WHATWG의 HTML5에 집중하려고 5

년 후 XHTML2 작업을 중단한다.

6년이 지난 지금, 우리는 HTML5를 설계한 열정적인 분들이 가져다 준 엄청난 혜택을 받고 있

다. HTML5의 기능들은 몇 년 동안 사용되면서 사실상의 표준으로 자리매김했으며, 차세대 웹 애

플리케이션의 기반이 됐다. HTML5는 사용자에게 더욱 매력적이고 서로 소통할 수 있는 웹 경험

을 제공한다. 때로는 아주 적은 코드로도 가능하다.

여러분은 이 책을 토대로 HTML5의 기능과 통합된 명세를 빠른 시간 안에 습득할 수 있게 될

것이다. HTML5의 기능을 제공하는지 여부를 판단하는 우수 실천법과 적절한 예제, 그리고 책에

서 다룬 내용이 명세서에서 빠진 이유를 알게 될 것이다. 예제 코드는 각 API의 단순 사용법만을

다루기보다는 실질적인 웹 애플리케이션을 만들 수 있게 이끌어 줄 것이다. 나는 이 책이 여러분에

게 도움되기를 바라며, 여러분도 나와 마찬가지로 차세대 웹에 대해 설레길 바란다.

- 폴 아이리쉬, 구글 및 jQuery 개발 홍보팀, Modernizr 선임 개발자

xvi

•지은이 소개•

피터 러버스(Peter Lubbers)

피터 러버스는 Kaazing에서 문서화 및 교육 책임자로 일하고 있다.

HTML5와 웹소켓에 관심이 많으며 국제 행사에서 자주 강연을 하고,

전 세계를 대상으로 HTML5 교육 과정을 담당하고 있다. Kaazing에 입

사하기 전에 오라클에서 약 십 년간 정보 설계를 담당했다. 오라클에 재

직할 때는 상을 받은 책을 여러 권 집필하고 출원 중인 소프트웨어 솔루

션을 개발했다. 네덜란드 태생으로 네덜란드 왕족 그린 베레 내의 특수

부대원이기도 하다. 캘리포니아의 타호 국유림가에 살고 있으며, 시간을 쪼개서 울트라 마라톤을

뛴다. 트위터 아이디는 @peterlubbers.

브라이언 앨버스(Brian Albers)

브라이언 앨버스는 Kaazing에서 연구 및 개발 조직의 부사장으로 재직

중이다. 최근의 오라클 시니어 개발 관리자 경력을 포함하면 웹 개발에

서만 경력이 15년이다. 브라이언은 웹 2.0 엑스포, AJAX월드엑스포, 자

바원과 같은 컨퍼런스에서 웹과 사용자 인터페이스 기술 분야의 고정 강

연을 맡고 있다. 텍사스주 태생으로 현재 캘리포니아에 살고 있지만 대

부분의 시간을 하와이에서 보낸다. 여가 시간에 해변에서 쉴 수 없을 땐

다양한 가상 세계에서 그를 만날 수 있다.

프랭크 살림(Frank Salim)

프랭크 살림은 Kaazing의 원년 엔지니어 가운데 한 사람으로 웹소켓 게

이트웨이와 클라이언트 전략을 수립할 때 기여한 바 있다. 샌디에고 출

신으로 캘리포니아의 마운틴 뷰에 거주하고 있다. 포모나 대학에서 컴퓨

터 과학을 전공했으며, 프로그래밍을 하지 않을 때는 독서, 그림, 인라인

스케이팅을 즐긴다.

xvii

•기술 검토자 소개•

폴 헤인(Paul Haine)

폴 헤인은 클라이언트 단 개발자로 현재 런던에 있는 가디언 신문사에 재직 중이다. ‘HTML

Mastery: Semantics, Standards, and Styling’의 저자이며 개인 웹사이트인 www.joeblade.com

를 운영하고 있다.

xviii

아내 빅토리아의 사랑과 인내에 감사하고, 뭐든 해낼 수 있는 유능한 두 아들 션과 록키에게도 감

사를 표합니다.

나의 부모님 허먼과 엘리자벳, 동생 앨리스, 항상 나를 믿어주는 나의 형제 데이빗과 네덜란드의

나치 점령기에 용기 있는 행동으로 우리 가족에게 큰 교훈을 주신 할머니에게도 감사드립니다.

한 번도 지루해하지 않았던 브라이언과 코드 만드는 기계인 프랭크와 함께 집필하게 되어 큰 영

광이었습니다.

Apress 출판사 클레이의 아낌 없는 지원에 감사드리며, “진짜” 책을 쓸 수 있게 도와주신 Kaazing

의 요나스와 존에게 감사드립니다(맹세컨대, “비공식 전자책”은 여전히 상상 속의 일입니다).

― 피터 러버스

제게 많은 기회를 주고자 희생하신 부모님 켄과 패티 앨버스께 가장 깊은 사랑과 감사를 드립니다.

당신들의 격려와 제게 심어준 긍지가 없었다면 이 책을 마칠 수도 없었고 중요한 인생의 순간들을

헤쳐나가지 못했을 겁니다. 당신들은 그 여정의 단계마다 저를 보호해주셨습니다.

잦은 초과 업무에도 인내해줬던 존에게 깊은 감사를 드립니다. 당신은 대단히 감동적인 사람입니다.

피치, 보니, 페넬로피! 자주 쓰다듬어 주고 저녁밥도 제때 주도록 할게. 함께했던 고양이들아, 아

직도 너희의 그르렁거리는 소리가 들리는 듯하다.

Kaazing의 동료들, 최고의 사람들과 일할 기회를 줘서 너무 감사합니다.

HTML5 책을 쓸 때가 됐다는 것을 처음으로 믿어주고 급변하는 주제로 글을 쓸 동안 함께 인내

해 준 Apress 편집자에게 특별한 감사를 전합니다.

― 브라이언 앨버스

부모님인 매리와 사브리에게 감사드립니다. 당신들이 없었다면 이 책도, 나도 없었을 겁니다.

―프랭크 살림

•감사의 글•

xix

HTML5는 새로운 것이다. 실제로 아직 완성되지도 않았다. 고집 센 전문가 중에는 HTML5이 완

성되려면 십 년도 넘게 걸릴 거라 말하는 분도 있다.

그렇다면 왜 다들 지금이 『프로 HTML5 프로그래밍』이라는 책이 필요한 시점이라고 할까? 대

답은 간단하다. 누구든지 더 나은 웹 애플리케이션을 원하고 지금이 바로 HTML5의 시대이기 때

문이다. 이 책의 저자들은 2년 넘게 HTML5 기술을 개발하고 가르치는 일을 하고 있으며, 새로운

표준이 하루 빨리 채택될 것으로 확신하고 있다. 이 책을 쓰는 도중에도 우리는 HTML5의 기능

을 지원하는 브라우저 현황을 꾸준히 업데이트하고 사용할 시점이 됐는지 재검토하고 있다.

대부분의 사용자는 현재 사용 중인 브라우저의 역량을 정확하게 알지 못한다. 맞는 말이다. 자

주 사용하는 브라우저가 자동으로 업데이트되면 소소한 인터페이스의 변화만 눈에 보일 것이다.

하지만 자유롭게 그림을 그릴 수 있는 캔버스, 실시간 네트워크 통신 외에도 수많은 잠재적인 업그

레이드로 무장한 새 버전의 브라우저에 대해서는 전혀 모를 것이다.

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

대상 독자

이 책은 자바스크립트 프로그래밍에 익숙한 숙련된 웹 애플리케이션 개발자를 대상으로 한다. 다

시 말해, 기초적인 웹 개발과 관련된 내용은 다루지 않는다. 웹 개발의 기초를 어느 정도의 수준으

로 끌어올리는 방법은 많다. 아래의 내용 가운데 본인에게 해당하는 내용이 있다면 이 책을 토대

로 유용한 통찰력과 찾고 있는 정보에 대해 도움을 받을 수 있을 것이다.

▶ 종종 ‘나만의 브라우저라면…’이라고 생각한 적이 있다.

▶ 어떤 인상적인 웹사이트를 분석하려고 소스를 보거나 개발 도구를 사용한 적이 있다.

▶ 최신 브라우저 업데이트의 릴리스 노트를 보고 뭐가 새로워졌는지 확인하길 좋아한다.

•들어가며•

xx

▶ 애플리케이션을 최적화하거나 유연하게 만드는 방법을 찾고 있다.

▶ 비교적 최신 브라우저에서 사용자에게 가장 좋은 경험을 제공하기 위해 웹사이트를 직접

개발하고 있다.

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

적절한 선에서 지원하는 브라우저를 제한하는 데 고심했지만 HTML5 애플리케이션을 십 년 전

에 나온 브라우저에서도 똑같이 실행할 수 있는 방법을 소개하는 것은 이 책의 목적이 아니다. 경

험상 문제를 적당히 해결하는 방법이나 기본 브라우저에 대한 지원은 발빠르게 발전했지만 이러

한 정보를 전달하기에 책은 적절한 수단이 아니다. 대신 이 책에서는 HTML5의 명세와 사용법에

주목했다. 세세한 문제 해결 방법은 인터넷에서 찾을 수 있겠지만 그러한 정보는 점점 필요가 없어

질 것이다.

이 책에서 다루는 내용

이 책은 11개의 장으로 구성돼 있으며, 널리 사용되고 유용하며 강력한 HTML5 API를 선별해서

다룬다. 경우에 따라 더 멋진 데모를 소개하고자 앞 장에서 다룬 기능을 활용했다.

1장, ‘HTML5 소개’는 HTML 명세의 현재 버전과 역사적인 배경을 설명하는 것으로 시작한다.

최근의 HTML5의 발전을 뒷받침하는 기본적인 변화와 원칙을 비롯해 고수준의 시맨틱 태그를

소개한다. 이는 HTML5에 입문할 때 알아두면 좋을 법한 내용이다.

2장, ‘HTML5 캔버스 API’와 3장, ‘HTML5 오디오/비디오’에서는 새로운 시각적인 요소와 미디

어 요소를 다룬다. 2장과 3장에서는 플러그인이나 서버 통신 없이도 사용자 인터페이스를 빠르

게 개발할 수 있는 더 단순한 방법을 찾는 데 초점을 둔다.

4장, ‘HTML5 지오로케이션 API’에서는 기존의 웹 애플리케이션에서 구현하기 어려웠던 기능

을 가능케 하는 진정한 새로운 기능을 소개한다. 바로 애플리케이션에서 사용자의 현재 위치를

식별하고 이러한 위치 정보를 개인화하는 데 사용하는 기능이다. 아울러 중요하게 대두된 개인

정보와 주의사항에 대해서도 설명한다.

이어지는 5장과 6장에서는 ‘커뮤니케이션 API’와 ‘HTML5 웹소켓 API’를 소개한다. 여기서는

HTML5를 이용해 다른 웹사이트와 통신하거나 최소한의 비용으로 간단하게 애플리케이션으

로 실시간 데이터를 전송하는 방법을 설명한다. 5장과 6장에서 다루는 기술은 지나치게 복잡한

현재의 웹 구조를 단순하게 만들 수 있다.

xxi

7장, ‘HTML5 폼 API’에서는 최소한의 수정으로 데스크톱 또는 모바일 웹 애플리케이션의 사

용성을 높이는 방법뿐 아니라 근본적인 변화로 아주 일반적인 사용 시나리오상에서 오류를 발

견하는 방법을 소개한다.

8장, ‘HTML5 웹워커 API’와 9장, ‘HTML5 스토리지 API’, 10장, ‘HTML5 오프라인 웹 애플리

케이션 개발’에서는 애플리케이션 간의 내부적인 연결을 다룬다. 여기서는 더 나은 성능과 데이

터 관리가 가능하도록 기존 기능을 최적화하는 방법을 확인할 수 있다.

마지막으로 11장, ‘HTML5의 미래’에서는 조만간 보게 될 흥미로운 기능을 소개한다.

예제 소스와 웹사이트 활용

이 책에서 소개된 예제 소스는 Apress 웹사이트의 소스 코드 영역에서 확인할 수 있다. 이 책의 소

스 코드는 www.apress.com에서 source code를 클릭한 뒤 이 책의 제목을 검색한 후 내려 받을

수 있다. 아울러 이 책의 웹사이트를 www.prohtml5.com에서 확인할 수 있다. 이곳에서 소스 코

드와 기타 예제 소스를 내려 받을 수 있다.

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

www.wikibook.co.kr

연락처

이 책을 구매해주셔서 감사드린다. 이 책을 읽고 가치를 확인할 수 있길 바란다. 오류가 없게끔 최

선을 다했지만 잘못된 부분이 있을 경우 미리 유감을 표한다. 이 책의 내용이나 소스 코드에 대한

개인적인 의견이나 질문, 비평은 언제든지 환영한다. 언제든지 [email protected]으로 메일을

보내주기 바란다.

Pro

HTM

L5Pr

ogra

mm

ing

01HTML5 소개

이 책은 HTML5 프로그래밍에 관한 책이다. 하지만 HTML5 프로그래밍을 이해하기에 앞서 한

걸음 물러서서 HTML5는 무엇이고 HTML5의 역사, 그리고 HTML4와 HTML5의 차이점을 이

해해야 한다.

이번 장에서는 모두가 궁금해하는 다음과 같은 실질적인 질문으로 바로 들어가겠다. 왜

HTML5인가? 지금 모두가 HTML5에 열광하는 이유는 무엇인가? HTML5를 진정 혁신적이면서

도 사용하기도 쉽게 만들어주는 새로운 설계 원리는 무엇인가? 플러그인이 필요없는 패러다임에

함축된 의미는 무엇인가? 무엇이 추가되고 삭제됐는가? HTML의 새로운 특징과 이러한 특징이

웹 개발자에게 어떻게 새로운 세상을 열어줄 것인가? 이제 시작해보자.

지금까지의 이야기-HTML5의 역사

HTML의 시작은 오래 전으로 거슬러 올라간다. HTML은 1993년 인터넷 초안으로 최초로 발표

됐다. 90년대 사람들은 HTML의 엄청난 변화를 목격했다. HTML 2.0, 3.2, 4.0 버전이 같은 해에

발표되더니, 결국 1999년에 4.01 버전이 발표됐다. W3C(World Wide Web Consortium)는 이러

한 HTML의 발전 과정에서 명세서 관리를 담당했다.

4개 버전의 HTML이 발빠르게 발표된 후, HTML은 사장될 거라는 의견이 지배적이었다. 웹 표

준의 초점은 XML과 XHTML로 옮겨갔고 HTML은 뒷전으로 밀려났다. 하지만 HTML은 사라지

2 l 프로 HTML 5 프로그래밍

지 않았고, 여전히 대부분의 웹 콘텐츠는 HTML로 제공됐다. 새로운 웹 애플리케이션의 등장과

HTML의 단점을 보완하기 위해 HTML에 새로운 특징과 명세가 필요해졌다.

새로운 차원의 웹 플랫폼에 대한 필요성에 따라 2004년에 WHATWG(Web Hypertext

Application Technology Working Group)라는 소규모 그룹이 만들어졌다. WHATWG는

HTML5 명세서를 만들었을 뿐 아니라 가장 취약한 부분이라고 여겨졌던 웹 애플리케이션에 특

화된 새로운 특징을 연구하기 시작했다. 이때가 바로 웹 2.0이란 용어가 퍼질 즈음이다. 웹 2.0은

정적인 웹사이트를 지양하고 더욱 역동적이고 다양한 특징이 요구되는 소셜 사이트를 추구하는

진정한 제2의 웹으로 여겨졌다.

W3C는 2006년부터 다시 HTML에 집중하기 시작해서 2008년에 HTML5의 초안을 발표했고,

2009년에는 XHTML2 워킹 그룹을 중단했다. 그리고 시간이 더 지나서 오늘에 이르렀다. 뒤에서

살펴보겠지만 HTML5은 매우 실질적인 문제들을 해결하고 있다. 이러한 이유로 브라우저 제작사

에서는 아직 미완성 상태인 명세서를 기반으로 HTML5의 새로운 특징을 발빠르게 구현하고 있

다. 구현된 특징은 브라우저에서 실험되고, 그 결과는 다시 명세서에 반영된다. HTML5는 실질적

인 개선을 통해 웹 플랫폼으로 빠르게 발전하고 있다.

2022년 신화와 그것이 중요하지 않은 이유

HTML5 명세서는 현재 초안 상태로 아직 최종본은 아니다. 언제쯤 완성될까? 중요한 날짜를 소

개하겠다. 바로, 권고 후보가 발표될 2012년, 그리고 권고 제안이 발표될 2022년이다. 잠깐! 책을

덮기엔 너무 이르다. 이 날짜가 의미하는 바를 정확히 알기 전까진 이 책을 덮어 10년 동안 구석에

방치해서는 안 된다.

권고 후보가 완성될 2012년은 HTML5이 완성되는 데 가장 중요한 시점이다. 앞으로 얼마 남지

않았다. 권고 제안(모두가 동의하는 데 시간이 필요하겠지만)의 의미는 상호 호환이 가능한 2개의

HTML이 완성된다는 것이다. 즉, 두 개의 브라우저가 전체 명세서에 대해 완벽하게 상호 호환이

가능해진다는 뜻이다. 이 부분 때문에 2022년이 야심 찬 데드라인으로 여겨지기도 한다. 이러한

상호 호환성은 HTML4에서도 이루지 못한 일이다.

지금 당장 중요한 것은 브라우저 제작사가 HTML5의 각종 새로운 특징을 활발하게 지원해 나가

고 있다는 점이다. 사용자가 누구냐에 따라 이러한 특징을 오늘부터 당장 활용할 수도 있다.

01 HTML5 소개 l 3

물론, 앞으로 소소한 변화가 필요하겠지만 앞선 기술의 혜택을 누리기에는 공짜나 다름없는 비

용이다. 인터넷 익스플로러 6.0을 사용한다면 새로운 특징들이 대부분 동작하지 않을 것이며 에

뮬레이션(emulation)이 필요할 것이다. 그렇더라도 HTML5를 버릴 만한 이유가 되지는 않는다.

결국 사용자들도 최신 버전의 브라우저를 설치하게 될 것이다. 대부분의 사용자는 인터넷 익스플

로러 9.0을 사용하게 될 테고, 마이크로소프트는 HTML5 지원을 확대하기로 약속했다. 실제로

새로운 브라우저와 개선된 에뮬레이션 기술의 조합은 현재 또는 가까운 미래에 HTML5의 여러

기능들을 사용할 수 있음을 의미한다.

HTML의 시대

브라이언 왈: 안녕하세요, 저는 브라이언입니다. HTML 전문가이기도 합니다.

저의 첫 홈페이지는 1995년에 만들어졌어요. 그 당시만 해도 ‘홈페이지’는 자신에 대해 얘기

할 수 있는 공간이었습니다. 이상하게 스캔된 사진이나 blink 요소들, 홈페이지 주인이 어디에

살고, 무엇을 읽고, 직장에서 어떤 컴퓨터 관련 프로젝트를 하고 있는지에 대한 내용으로 채워

졌죠. 저와 동료들은 ‘웹 개발자’였는데 주로 대학에 다니거나 대학에 근무하는 사람들이었습

니다.

당시 HTML은 아주 원시적인데다 개발 툴도 없었습니다. 구식 텍스트 프로세싱 스크립트를 제

외하고는 웹 애플리케이션이라고 할 만한 것도 없었죠. HTML 페이지는 각자 익숙한 텍스트

편집기로 코딩했고, 몇 주 내지는 몇 달 간격으로 업데이트되거나, 아예 업데이트되지도 않았

습니다.

이후로 15년이 지났네요.

요즘엔 사용자가 하루에도 몇 번씩 온라인 프로필을 업데이트하는 것이 놀랄 일도 아닙니다. 이

러한 상호작용은 이전 세대에 기반을 둔 온라인 도구의 혁신적인 발달이 없이는 불가능했을 겁

니다.

이 책을 읽을 때마다 마음에 새겨두세요. 지금은 단순한 예제처럼 보여도 가능성은 무한합니다.

1990년대 중반에 img 요소를 처음 사용할 때만 해도 10년 안에 사람들이 온라인에서 사진을

저장하고 편집한다는 것은 상상할 수도 없었죠. 하지만 그걸 예측했어야 했어요.

이 책에 실린 예제가 여러분에게 영감을 불어넣어 다음 세대의 웹에 새로운 토대를 쌓을 수 있

기를 바랍니다.


누가 HTML5를 개발하는가?

HTML5를 개발하는 데 어느 정도의 체계는 필요하며, 또한 누군가는 HTML5 명세서에 책임을

져야만 한다. 이 같은 일은 아래에 소개한 세 가지 중요한 조직에서 담당하고 있다.

▶ WHATWG: 브라우저 제작자인 애플(Apple), 모질라(Mozilla), 구글(Google), 오페라

(Opera)의 주도하에 2004년에 설립됐다. WHATWG는 HTML과 웹 애플리케이션 개발

에 필요한 API를 개발하고 있으며, 브라우저 제작사와 관련 단체 간의 협업을 지원한다.

▶ W3C: W3C에는 현재 HTML5 명세서의 배포를 담당하는 HTML 워킹 그룹이 속해 있다.

▶ IETF: HTTP와 같은 인터넷 프로토콜을 관장하는 그룹이 소속된 프로젝트 팀(task force)

이다. HTML5의 웹소켓 API는 IETF 워킹 그룹에서 개발한 새로운 웹소켓 프로토콜을 기

반으로 한다.

새로운 비전

HTML5는 다양한 설계 원리를 기초로 한다. 해당 내용은 새로운 비전의 가능성과 실용성을 구체

적으로 다루고 있는 WHATWG 명세서에 상세히 설명돼 있다.

▶ 호환성(Compatibility)

▶ 유용성(Utility)

▶ 상호 호환성(Interoperability)

▶ 보편적 접근성(Universal access)

호환성과 소길 내기 1

걱정할 것 없다. HTML5는 기존의 것을 뒤집어 엎는 식의 혁명이 아니다. 사실 HTML5의 중요한

원리 중 하나는 순조롭게 변화를 지속하는 것이다. HTML5의 특징이 지원되지 않을 경우 단계적

1 　 (옮긴이) 원문은 paving the cow paths로서 소길 내기, 즉 소가 자주 지나다녀서 이미 길이 난 곳을 포장한다는 의미로 쓸데없

이 비효율적인 일을 하는 것을 일컫는다.

01 HTML5 소개 l 5

기능 축소(degrade gracefully)가 되게 하면 된다. 덧붙여 20여 년 동안 생산된 HTML 콘텐츠를

지원하는 것 또한 무척이나 중요하다.

일반적인 행동을 연구하는 데는 많은 노력이 필요하다. 일례로, 구글은 div 태그의 보편적인 ID

이름을 알아내고자 100만여 페이지를 분석했고, 그 결과 엄청난 반복이 있음을 발견했다. 대다

수의 사람들이 헤더 콘텐츠(header content)의 아이디 이름으로 header를 사용한다는 것이다.

HTML5는 현실적인 문제를 해결한다. <header> 요소만 만들면 그만인 것이다.

HTML5 표준의 특징 중 일부는 상당히 혁신적이긴 하지만, 중요한 점은 혁신이 아니라 진화다.

왜 쓸데없이 비효율적인 일을 하는가? (반드시 해야만 한다면 조금이나마 낫게 만들어라!)

유용성과 사용자 우선주의

HTML5 명세서는 사용자를 최우선 순위에 두고 만들어졌다. 우선순위에 따라 “사용자가 왕이

다”. 개발자보다, 브라우저 제작자보다, W3C나 WHATWG보다도, 이론적인 순수함보다도 사용

자가 우선이다. 그 결과, HTML5는 완벽하기보다는 매우 실용적으로 설계됐다.

예제를 보자. 아래 예제는 모두 HTML5에서 유효한 코드다.

id="prohtml5"

id=prohtml5

ID="prohtml5"

물론, 누군가는 이런 느슨한 문법을 틀렸다고 할지도 모르겠다. 하지만 사용자들은 신경 쓰지

않는다. 이런 식의 코드를 권장하는 것은 아니지만 앞의 예제에서 발생한 에러 때문에 페이지를

제대로 보지 못하는 것은 결국 사용자다.

HTML5는 XML로 유효한 HTML5 코드 생성이 가능하도록 XHTML5도 만들어냈다. 일련의

HTML 또는 XHTML 버전은 별다른 차이가 없는 DOM 트리(DOM tree)를 만들어낸다. 물론,

XHTML 문법은 HTML보다 훨씬 엄격하며, XHTML 문법을 기준으로 예제 코드 중 마지막 두

문장은 유효하지 않다.

계획적인 보안

HTML5 보안은 그 출발점부터 중요시됐다. 명세서의 각 부분마다 보안과 관련된 내용이 마련돼

있으며, 보안은 매우 중요한 이슈로 전면에서 다뤄졌다. HTML5에서는 새로운 도메인 기반 보안

모델이 도입됐는데, 이것은 사용하기 쉬울 뿐 아니라 다른 API와도 일관된 형태로 사용할 수 있다.


이 보안 모델은 불가능했던 것을 할 수 있게 만들어준다. 이 보안 모델을 이용하면 안전하지 않은

방법을 쓰지 않고도 도메인 간에 안전하게 통신이 가능하다. 이제 예전 방식을 찾아 볼 필요가 없

어졌다.

표현과 내용의 분리

HTML5는 표현과 내용의 확실한 분리에서 큰 걸음을 내딛었다. HTML5는 CSS를 통해 가능한

한 모든 곳에서 이러한 표현과 내용을 분리하고자 노력한다. 사실, 이전 버전의 HTML에서 제공

했던 대부분의 표현적인 특징들은 더는 지원되지 않지만 여전히 동작은 한다. 앞서 언급한 호환성

설계 원리 덕분이다. HTML4 Transitional과 XHTML 1.1에서도 이미 표현과 내용의 분리에 대한

아이디어가 있었다. 웹 디자이너들은 오랫동안 우수 실천법을 답습하며 이 두 가지를 분리했겠지

만, 이제는 좀 더 명확하게 분리해내야만 한다. 표현적인 마크업의 문제점은 다음과 같다.

▶ 낮은 접근성

▶ 불필요한 복잡성(인라인으로 스타일을 설정하면 코드를 읽기가 어려워진다.)

▶ 스타일 콘텐츠의 반복으로 문서의 크기가 커지고, 결과적으로 페이지 로딩 속도가 느려진다.

상호 호환성과 단순화

HTML5는 불필요한 복잡성을 제거하고 단순함을 최우선으로 한다. HTML5의 기조를 떠올려보

자. “단순한 것이 더 낫다. 가능한 한 모든 것을 단순하게 하라.” 아래 예제를 살펴보자.

▶ 복잡한 자바스크립트 코드 대신 브라우저의 기본 내장 기능으로 대체

▶ 새롭고 간단한 DOCTYPE

▶ 새롭고 간단한 문자셋 선언

▶ 강력하지만 단순한 HTML5 API

이 부분에 대해서는 나중에 좀 더 살펴보겠다.

HTML5에서는 단순함의 원리를 달성하고자 명세서가 더욱 방대해졌다. 이전의 어떤 HTML 명

세서보다도 더욱 정확성이 요구됐기 때문이다. 따라서 2022년까지 진정한 브라우저 상호 호환성

을 보장하기 위한 방대한 규칙에 대한 명세 작업이 이뤄질 것이다. 이것은 모호한 단순함으로는 결

코 해낼 수 없는 일이다.

01 HTML5 소개 l 7

HTML5 명세서는 상호 배타성을 배제하고자 이전 버전보다 더욱 상세하게 만들어졌으며, 특히

웹 애플리케이션에 대한 상호 호환성을 목표로 한다. 이 작은 바람이 900페이지가 넘는 명세서로

만들어졌다.

HTML5는 에러 처리에 용이하도록 설계됐다. 사용자를 최우선순위에 두고, 심각한 오류 상황

에 대해 점진적으로 에러를 복구한다. 그리고 정말 실용적이다. 예를 들어 문서에서 발생한 오류

는 페이지가 보이지 않는 등의 심각한 형태로 사용자에게 보여지지 않는다. 대신 에러 복구를 꼼

꼼하게 정의해놓고, 표준적인 방법으로 브라우저에서 ‘깨진’ 마크업을 출력할 수 있게 했다.

보편적인 접근성

이 원리는 다음의 세 가지 개념으로 나뉜다.

▶ 접근성: 장애가 있는 사용자를 지원하는 것으로 HTML5는 관련 표준인 WAI(Web

Accessibility Initiative), ARIA(Accessible Rich Internet Applications)와 밀접한 관계를

맺고 개발 중이다. 스크린 리더에서 지원하는 WAI-ARIA 규칙들은 HTML 요소에 이미

포함돼 있다.

▶ 미디어 독립성: HTML5의 기능은 가능한 한 모든 기기와 플랫폼에서 동작해야 한다.

▶ 전 세계 언어 지원: 예를 들어, 새롭게 추가된 <ruby> 요소는 동아시아에서 사용되는 루비

(Ruby) 주석을 지원한다.

플러그인이 필요없는 패러다임

HTML5는 플러그인이나 복잡한 핵으로만 가능했던 다양한 기능(내장 드로잉 API, 내장 소켓

등)을 기본적으로 지원한다. 플러그인의 단점은 다음과 같다.

▶ 플러그인은 항상 설치돼 있지 않다.

▶ 플러그인은 끄거나 차단될 수 있다(애플 아이패드에는 플래시 플러그인이 없다.).

▶ 플러그인은 개별적인 공격 반경에 속한다.

▶ 플러그인은 HTML 문서와 조화를 이루기 어렵다(플러그인 영역의 잘림 현상이나 투명도

문제 때문).


설치 빈도가 높은 플러그인이라 하더라도 회사 내 환경 등에 따라 차단될 수 있다. 게다가 보기

싫은 광고를 차단할 목적으로 사용자가 직접 플러그인을 꺼두기도 하는데, 이때 사용자는 플러그

인의 내용을 보여 줄 프로그램 역시 꺼두는 셈이다.

플러그인은 사이트 디자인에 따라 플러그인 영역의 잘림 현상이나 투명도 문제 탓에 브라우저

의 콘텐츠와 조화를 이루기 어렵다. 플러그인은 웹 페이지와는 다른 자체 렌더링 모델을 가지고 있

으므로 웹 페이지 내에서 플러그인 영역을 가로지르는 팝업 메뉴나 그 밖의 시각적인 요소를 개발

할 때 개발자들은 어려움에 직면한다. 하지만 이제 HTML5가 내장 기능이라는 마술 지팡이를 흔

들고 미소를 띄우며 나타났다. CSS로 요소를 꾸미고, 자바스크립트로 스크립트를 짤 수 있다. 이

것은 이전 버전의 HTML이 할 수 없었던 부분에 대한 HTML5의 힘자랑이기도 하다. 이는 새로운

요소로 새로운 기능을 제공하는 데 그치지 않는다. 스크립트를 작성하거나 스타일을 지정해서 예

전에 할 수 있었던 것보다 훨씬 더 풍부하게 상호작용을 할 수 있게 된 것이다.

canvas 요소를 예로 들어보자. canvas 요소는 매우 기본적이지만 이전에 불가능했던 것들을

가능하게 한다(HTML4 페이지에서 대각선을 그려보라!). 무엇보다도 가장 흥미로운 점은 API

와 단 몇 줄의 CSS만으로 가능하다는 것이다. 잘 자란 아이들처럼 HTML5 요소는 서로 잘 어울

린다. video 요소에서 잡아낸 프레임을 canvas 요소에 뿌릴 수 있고, 사용자는 캔버스에 캡처된

비디오 프레임을 클릭해서 해당 프레임부터 비디오를 감상할 수 있다. 이러한 예제는 내장 코드

를 이용해 플러그인을 뛰어넘는 기능을 제공하는 예제 중 하나에 불과하다. 블랙박스에서 개발

할 때보다 모든 것이 개발하기 쉬워졌다. 추가된 사항들은 강력한 새로운 도구로 자리매김했고,

바로 이런 이유로 새로 추가된 요소에 대한 책이 아닌 HTML5 프로그래밍에 대한 책을 쓰게 된

것이기도 하다.

무엇이 추가되고 무엇이 없어졌나?

그럼 실제로 HTML5는 뭘로 구성돼 있을까? 명세서를 주의 깊게 읽어봤다면 이 책에서 소개

하는 특징을 전부 찾을 수 없다는 사실을 알게 될 것이다. 예를 들어, HTML5의 지오로케이션

(Geolocation)이나 웹워커(Web Worker)가 그렇다. 그럼 이것들을 우리가 지어내기라도 했다는

걸까? 아니면 그것들이 모두 거짓말일까? 아니다. 둘 다 틀렸다.

HTML5의 각 요소는 본래 HTML5 명세서의 일부였으나 각 명세서에서 다루는 특징에 집중하

고자 별도의 표준 문서로 분리됐을 뿐이다. 이렇게 하면 이것들을 공식적인 명세서로 만들기 전에

각 특징에 대해 서로 의논하거나 수정하기가 용이하다고 판단했기 때문이다. 이러한 방식 덕분에

사소한 문제로 전체 명세서 작업이 지연되는 일이 일어나지 않을 수 있었다.

01 HTML5 소개 l 9

아울러 각 명세서를 담당하는 전문가들은 이런저런 의견 조율에 지치지 않고도 메일링 리스트

를 통해 서로 의견을 나눌 수 있다. 산업계는 여전히 지오로케이션과 같은 HTML5의 기본적인 특

징에 의존하고 있다. 이렇게 생각해봤을 때 HTML5는 핵심적인 마크업뿐 아니라 새로 추가되는

다양한 API를 포괄하는 의미를 지닌다고 할 수 있다. 이 책을 쓰고 있는 지금, HTML5를 구성하

는 요소는 다음과 같다.

▶ 캔버스(Canvas 2D와 3D)

▶ 채널 메시징

▶ 다른 도메인 간 문서 메시징

▶ 지오로케이션

▶ MathML

▶ 마이크로데이터

▶ 서버 송신 이벤트

▶ SVG(Scalable Vector Graphics)

▶ 웹소켓 API와 프로토콜

▶ 웹 도메인 개념

▶ 웹스토리지

▶ 웹 SQL 데이터베이스

▶ 웹워커

▶ XMLHttpRequest 레벨 2

보다시피 이 책에서 다루는 API의 상당수가 목록에 포함돼 있다. 책에서 다룰 API는 어느 정도

안정된 API를 기준으로 선정했다. 이게 무슨 말이냐고? 책에서 다루는 API는 하나 이상의 브라우

저에서 지원 가능한 상태다. 아직 아이디어 차원에 머무는 기능은 현 시점에서 베타 버전의 브라

우저에서만 동작할지도 모른다.

이 책에서는 이 책의 집필 시점을 기준으로 브라우저에서 지원하는 HTML5의 특징을 소개할

것이다. 하지만 상황이 급변하고 있어서 이 책에서 소개한 내용이 금세 낡은 정보가 될 수도 있다.

그렇더라도 크게 걱정하지 않아도 된다. 브라우저 지원과 관련된 현황과 전망을 소개하는 온라인


페이지가 있다. www.caniuser.com은 브라우저 버전별로 HTML5 지원 여부를 총망라하고 있

고, www.html5test.com에서는 여러분이 사용 중인 브라우저의 HTML5 지원 여부를 체크할 수

있다.

이 책은 여러분이 만든 HTML5 애플리케이션을 아주 오래된 브라우저에서 실행하는 방법을 설

명하는 데 초점을 맞추지 않는다. 대신 우선 HTML5 명세서를 살펴보고, 어떻게 활용하는지를 설

명할 것이다. 책에 실린 예제 코드는 API의 기능을 이해하는 데 도움될 것이다. 신뢰도가 떨어지

는 사용자 에이전트(user agent) 체크 대신 HTML5의 특징을 지원하는지 여부를 체크할 것이다.

이때 HTML5와 CSS3의 지원 여부를 체크하는 데 특화된 Modernizr라는 자바스크립트 라이브

러리를 추천한다. Modernizr는 이러한 용도로 안성맞춤이다.

발전된 HTML의 시대

프랭크 왈: 안녕하세요? 저는 프랭크예요. 종종 그림을 그린답니다.

HTML 캔버스 예제로 처음 본 것은 마이크로소프트의 그림판과 사용자 인터페이스가 아주 유

사한, 기초적인 그림 그리기 애플리케이션이었습니다. 물론 최신 디지털 회화에 비해서는 한참

뒤떨어진데다 일부 브라우저에서만 실행됐지만 저는 다른 가능성에 대한 영감을 받았죠.

저는 디지털 방식으로 그림을 그릴 때 보통 데스크톱 소프트웨어를 사용합니다. 이러한 소프트

웨어도 훌륭하지만 웹 애플리케이션을 만들기에는 부족한 면이 있습니다. 한마디로 말해서 서

로 단절돼 있다는 겁니다. 디지털 방식으로 그린 그림을 공유하려면 애플리케이션에서 이미지

를 웹으로 올릴 수 있어야 합니다. 이미지 공유가 불가능하다면 협업이라든가 함께 논평한다는

건 꿈도 못 꿀 일이죠. HTML5 애플리케이션은 완성된 이미지를 공유하고 협업할 수 있는 단순

한 순환 구조를 만들 수 있을 뿐 아니라 온라인 세상에 알맞는 창의적인 프로세스를 만들 수 있

습니다.

HTML5로 구현하지 못할 애플리케이션의 수는 점점 줄어들 것입니다. 텍스트의 경우 웹은 이

미 상호 소통할 수 있는 가장 좋은 수단이죠. 모든 텍스트 기반 애플리케이션은 웹 기반 폼에서

도 사용할 수 있습니다. 같은 맥락으로 그림, 비디오 편집, 3D 모델링 소프트웨어도 HTML5 애

플리케이션으로 구현되기 시작했습니다.

이제 우리는 소프트웨어를 통해 그림, 음악, 영화 등을 즐길 수 있게 될 겁니다. 더 좋은 점은

어디에나 존재하며 강력한 온라인 플랫폼이 웹상에 언제나 소프트웨어가 존재하리라는 것입

니다.

01 HTML5 소개 l 11

HTML5의 새로운 특징

HTML5 프로그래밍을 시작하기 전에 HTML5의 새로운 특징을 간략하게 살펴보자.

새로운 DOCTYPE과 문자셋

세 번째 설계 원리였던 ‘단순함’에 따라 웹 페이지의 DOCTYPE 선언이 매우 단순해졌다. 다음의

HTML4 DOCTYPE 선언과 비교해보자.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

누가 이걸 기억하겠는가? DOCTYPE을 붙여넣을 때마다 제대로 찾아서 복사해서 붙여넣었는

지 항상 마음 한켠이 불편했을 것이다. HTML5는 이 문제를 다음과 같이 깔끔하게 해결했다.

<!DOCTYPE html>

이제 DOCTYPE을 외울 수 있게 됐다. 새로운 DOCTYPE과 마찬가지로 문자셋 선언 역시 짧

아졌다. 기존 방식은 다음과 같다.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

이제 이렇게 쓰면 된다.

<meta charset="utf-8">

브라우저는 새로운 DOCTYPE을 만나면 표준 호환 모드로 페이지를 출력한다. 그림 1-1은 파이

어폭스에서 HTML5 페이지를 열고, 도구 페이지 정보를 클릭한 화면이다. 이 페이지는 표준 호

환 모드로 렌더링됐다.


그림 1-1 | 표준 호환 모드로 렌더링된 페이지

새로운 HTML5 DOCTYPE을 사용하면 브라우저는 표준 호환 모드로 페이지를 렌더링한다.

이미 알고 있을지도 모르겠지만 웹 페이지에는 쿽스(quirks), 거의 표준(almost standards), 표준

(또는 비쿽스) 모드와 같은 다양한 렌더링 모드가 있다. DOCTYPE은 브라우저에게 어떤 렌더링

모드를 사용하고 페이지 유효성을 검증할 때 어떤 규칙을 사용해야 하는지 알려준다. 쿽스 모드

에서 브라우저들은 문서 전체가 문법적으로 유효하지 않더라도 페이지를 깨지지 않게 보여준다.

HTML5에는 페이지에 비권장 요소가 사용된 경우 해당 페이지가 유효하지 않게 만들어주는 새

로운 요소(그리고 다음 절에서 소개할 그 밖의 것)가 도입됐다.

새로운 요소와 비권장 요소

HTML5에는 새로운 마크업 요소가 여럿 도입됐는데, 이러한 요소는 콘텐트 타입에 따라 7가지로

나뉜다(표 1-1).


표 1-1. HTML5 콘텐트 타입

콘텐트 타입 설명

Embedded 문서 안에 다른 자원을 불러오는 콘텐트(예: audio, video, canvas, iframe)

Flow 문서 본문과 애플리케이션에 사용되는 요소(예: form, h1, small)

Heading 헤더 영역(예: h1, h2, hgroup)

Interactive 사용자와 상호 작용하는 콘텐트(예: audio/video 컨트롤, button, textarea)

Metadata 문서의 표현이나 성격을 규정하는 요소로서, 보통 head 영역에 위치함(예: script,

style, title)

Phrasing 텍스트 또는 텍스트 마크업 요소(예: mark, kbd, sub, sup)

Sectioning 문서의 각 영역을 정의하는 요소(예: article, aside, title)

표에 나열된 요소는 모두 CSS로 꾸밀 수 있다. 아울러 canvas, audio, video 요소는 프로그램

방식으로 세세한 제어를 할 수 있는 API가 제공되고 있지만 그 자체로도 얼마든지 사용할 수 있

다. 이러한 API에 대해서는 나중에 더 자세히 설명하겠다.

HTML5에서 새롭게 등장한 요소를 모두 다루는 것은 이 책의 범위를 벗어난다. 요소의 콘텐트

를 설명하는 섹션(section) 요소의 경우는 새로 추가됐기 때문에 다음 절에서 설명하겠다. canvas,

audio, video 요소 역시 HTML5에 새롭게 추가된 요소다.

마찬가지로 비권장 요소의 전체 목록도 다양한 온라인 페이지에 잘 정리돼 있다. big, center,

font, basefont와 같이 인라인 스타일 역할을 하던 많은 요소는 CSS 사용이 보편화되면서 제거

됐다.

의미 있는 마크업

섹션 콘텐트 타입에는 새롭게 추가된 HTML5 요소가 다수 포함돼 있다. HTML5에서는 요소의

콘텐트를 설명하는 새로운 의미 있는 마크업을 정의하고 있다. 의미 있는 마크업이 지금 당장 어떤

이익을 가져다주진 않지만 단순한 HTML 페이지 설계를 가능하게 하고 추후에는 검색 엔진이 페

이지를 수집하거나 인덱싱할 때 분명 도움될 것이다.

앞서 언급한 대로 HTML5는 소길 내기와 맥을 같이 한다. 구글은 백만여 페이지를 대상으로

div 태그의 가장 일반적인 id 값을 확인해 본 결과 엄청난 반복이 있다는 사실을 알게 됐다. 일례

로, 푸터 콘텐츠를 마크업할 때 많은 개발자들은 div id="footer"를 사용한다. 그래서 HTML5는

footer 요소와 같은 새로운 섹션 요소를 제공하며, 이러한 요소는 지금 당장 최신 브라우저에서

사용할 수 있다. 표 1-2는 다양한 의미를 지닌 마크업 요소의 목록이다.


표 1-2. 새로운 HTML5 섹션 요소

섹션 요소 설명

Header 페이지 또는 섹션의 헤더 콘텐트

Footer 페이지 또는 섹션의 푸터 콘텐트

Section 웹 페이지 내의 섹션

Article 독립적인 글 콘텐트

Aside 관련된 콘텐트 또는 전체 인용문

Nav 내비게이션 지원

표 1-2의 요소 또한 모두 CSS로 꾸밀 수 있다. 앞서 설명한 유용한 설계 원리에 따라 HTML5는

내용과 표현을 구분하고자 한다. 따라서 HTML5에서는 CSS로 페이지를 꾸며야만 한다. 예제 1-1

은 HTML5로 작성한 페이지의 예를 보여준다. 새로운 DOCTYPE, 문자셋, 의미 있는 마크업 요

소가 사용된 것을 확인할 수 있다. 소스 코드는 code/intro 폴더에서 내려 받을 수 있다.

예제 1-1 ㅣ 예제 HTML5 페이지

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>HTML5</title>

<link rel="stylesheet" href="html5.css">

</head>

<body>

<header>

<h1>Header</h1>

<h2>Subtitle</h2>

<h4>HTML5 Rocks!</h4>

</header>

<div id="container">

<nav>

<h3>Nav</h3>

<a href="http://www.example.com">Link 1</a>




</nav>

<section>

<article>

<header>

<h1>Article Header</h1>

</header>

<p>Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur adipiscing

elit. Vivamus at est eros, vel fringilla urna.</p>

<p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula

pellentesque, turpis lorem dictum nunc.</p>

<footer>

<h2>Article Footer</h2>

</footer>

</article>

<article>

<header>

<h1>Article Header</h1>

</header>

<p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing

elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio</p>

<footer>

<h2>Article Footer</h2>

</footer>

</article>

</section>

<aside>

<h3>Aside</h3>

<p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing

elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio rhoncus</p>

</aside>

<footer>

<h2>Footer</h2>

</footer>

</div>

</body>

</html>

페이지를 CSS로 꾸미지 않으면 모양이 너무 단조로울 것이다. 예제 1-2는 콘텐트를 꾸미는 데

사용된 CSS 코드의 일부다. 이 스타일시트는 모서리를 둥글게 한다거나(border-radius), 회전 효

과(transform:rotate();)를 주는CSS3의 기능 중 일부를 사용한다. CSS3는 HTML5처럼 현재 개

발 중이고 브라우저가 좀 더 쉽게 적용할 수 있게 명세를 쪼개서 모듈화했다(transformation,

animation, trasition은 모두 하위 명세로 분리된 영역에 해당한다).


아직 실험적인 CSS3의 특징은 명세 변경이 될 예정이고 네임스페이스 간의 충돌을 방지하고자

CSS 속성명 앞에 브라우저 벤더의 이름이 붙어 있다. 둥근 모서리나, 그라디언트, 그림자, 변형 등

을 표현할 때는 각 벤더별로 –moz-(모질라), o-(오페라), -webkit-(사파리나 크롬과 같은 웹킷 기

반 브라우저)을 사용한다.

예제 1-2 ㅣ HTML5 페이지에 사용된 CSS 파일

body {

background-color:#CCCCCC;

font-family:Geneva,Arial,Helvetica,sans-serif;

margin: 0px auto;

max-width:900px;

border:solid;

border-color:#FFFFFF;

}

header {

background-color: #F47D31;

display:block;

color:#FFFFFF;

text-align:center;

}

header h2 {

margin: 0px;

}

h1 {

font-size: 72px;

margin: 0px;

}

h2 {

font-size: 24px;

margin: 0px;

text-align:center;

color: #F47D31;

}

h3 {

font-size: 18px;

margin: 0px;


text-align:center;

color: #F47D31;

}

h4 {

color: #F47D31;

background-color: #fff;

-webkit-box-shadow: 2px 2px 20px #888;

-webkit-transform: rotate(-45deg);

-moz-box-shadow: 2px 2px 20px #888;

-moz-transform: rotate(-45deg);

position: absolute;

padding: 0px 150px;

top: 50px;

left: -120px;

text-align:center;

}

nav {

display:block;

width:25%;

float:left;

}

nav a:link, nav a:visited {

display: block;

border-bottom: 3px solid #fff;

padding: 10px;

text-decoration: none;

font-weight: bold;

margin: 5px;

}

nav a:hover {

color: white;


}

nav h3 {

margin: 15px;

color: white;

}


#container {

background-color: #888;

}

section {

display:block;

width:50%;

float:left;

}

article {

background-color: #eee;

display:block;

margin: 10px;

padding: 10px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

-webkit-box-shadow: 2px 2px 20px #888;

-webkit-transform: rotate(-10deg);

-moz-box-shadow: 2px 2px 20px #888;

-moz-transform: rotate(-10deg);

}

article header {




padding: 5px;

}

article footer {




padding: 5px;

}

article h1 {

font-size: 18px;

}


aside {

display:block;

width:25%;

float:left;

}

aside h3 {

margin: 15px;

color: white;

}

aside p {

margin: 15px;

color: white;

font-weight: bold;

font-style: italic;

}

footer {

clear: both;

display: block;


color:#FFFFFF;

text-align:center;

padding: 15px;

}

footer h2 {

font-size: 14px;

color: white;

}

/* links */

a {

color: #F47D31;

}

a:hover {

text-decoration: underline;

}


그림 1-2는 CSS(일부 CSS3)로 표현된 예제 1-1 페이지를 브라우저에서 확인한 결과다. 하지만

이만큼 전형적인 HTML5 페이지는 없을 것이다. 이 페이지에서는 HTML5의 새 요소를 설명할

목적으로 다양한 새로운 요소를 사용했다.

<section> 요소

CSS3 회전 변환

<nab> 요소

컨테이너<div> 요소

<article> 요소

CSS3둥근 모서리 효과

<aside> 요소

<footer> 요소

<header> 요소

그림 1-2 | 새로운 의미 있는 마크업 요소로 만든 HTML5 페이지

한 가지 마지막으로 염두에 둘 것은 브라우저는 새로운 요소를 이해할 때만 화면에 렌더링한다

는 것이다. 사실 예제에 사용된 요소의 이름이 foo나 bar로 바뀌어도 똑같이 보일 것이다(물론 검

색엔진 최적화에는 아무 도움이 안 되겠지만). 한 가지 예외로 인터넷 익스플로러의 경우 해당 요

소가 DOM에 포함돼 있어야만 한다. 따라서 인터넷 익스플로러에서 요소를 보여주고 싶다면 프

로그램을 작성해서 DOM에 해당 요소를 넣어서 블록 요소로 보이게 만들어야 한다.


선택자 API로 간단히 선택하기

HTML5는 페이지 DOM에서 요소를 찾는 새로운 간단한 방법을 소개한다. 표 1-3은 페이지 내의

특정 요소를 찾을 때 사용되던 이전 버전의 문서 객체의 메서드 목록이다.

표 1-3. 요소를 찾을 때 사용되는 이전 버전의 자바스크립트 메서드

함수 설명 예

getElementById() 특정 id 속성값에 해당하는 요

소를 반환한다.

<div id="foo">

getElementById("foo");

getElementsByName() 특정 name 속성값에 해당하는

요소를 모두 반환한다.

<input type="text" name="foo">

getElementsByName("foo");

getElementsByTagName() 특정 태그 이름과 일치하는 모

든 요소를 반환한다.

<input type="text">

getElementsByTagName("input");

새로 도입된 선택자(Selector) API는 표준 DOM을 이용해 특정 요소를 비효율적인 반복 없이 더

정확한 방법으로 찾아낸다. 선택자 API는 페이지 내의 요소를 찾을 때 CSS 선택자와 같은 규칙을

사용한다. 이를테면, 이미 CSS에는 요소를 선택할 때 중첩, 형제, 자식 패턴에 기반을 둔 규칙이 마

련돼 있다. 최신 버전의 CSS에는 더 많은 의사(pseudo) 클래스(객체가 사용 가능한지, 사용 불가

능한지, 또는 체크돼 있는지 여부)가 추가됐으며, 여러분이 상상할 수 있는 어떠한 속성과 상속의

조합도 지원한다. CSS 규칙을 이용해 DOM에서 요소를 찾으려면 표 1-4에 나열돼 있는 함수 중

하나를 골라 사용하면 된다.

표 1-4. 새로운 QuerySelector 메서드

함수 설명 예 결과

querySelector() 페이지 내에서 특정 선택

자 규칙과 일치하는 첫

번째 요소를 반환한다.

querySelector("input.error"); 클래스명이 error

인 첫 번째 input

태그를 반환한다.

querySelectorAll() 특정 선택자 규칙 또는

여러 규칙과 일치하는 모

든 요소를 반환한다.

querySelectorAll("#results

td");

id 속성값이

results인 요소 내

의 테이블 셀 요

소가 반환된다.

다음 예제처럼 하나 이상의 선택자 규칙도 사용 가능하다.

// 문서 내에서 클래스 이름이 highClass나 lowClass인 첫 번째 요소를 선택한다.

var x = document.querySelector(".highClass", ".lowClass");

querySelector()의 경우 나열된 규칙 중 가장 먼저 일치하는 첫 번째 요소를 반환하고,

querySelectorAll()은 나열된 규칙과 일치하는 모든 요소를 반환한다.

기존 방식에 비해 새로운 선택자 API를 이용하면 쉽게 문서의 특정 부분을 선택할 수 있다. 현

재 마우스 포인터가 올라가 있는 테이블 셀을 찾고 싶다고 가정해보자. 예제 1-3은 선택자 API가

얼마나 사용하기 쉬운지 보여준다. 소스 파일은 code/intro 폴더에서 내려 받을 수 있다.

예제 1-3 ㅣ 선택자 API 사용하기

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>선택자 API 예제</title>

<style type="text/css">

td {

border-style: solid;

border-width: 1px;

font-size: 300%;

}

td:hover {

background-color: cyan;

}

#hoverResult {

color: green;

font-size: 200%;

}

</style>

</head>

<body>

<section>



<table>

<tr>

<td>A1</td> <td>A2</td> <td>A3</td>

</tr>

<tr>

<td>B1</td> <td>B2</td> <td>B3</td>


</tr>

<tr>

<td>C1</td> <td>C2</td> <td>C3</td>

</tr>

</table>

<div>버튼에 포커스를 두고, 테이블 셀에 마우스를 올린 다음 엔터를 누르면

querySelector('td:hover')가 마우스가 올려진 셀을 찾아줍니다.</div>

<button type="button" id="findHover" autofocus>마우스가 올라간 테이블 셀 찾기</button>

<div id="hoverResult"></div>

<script type="text/javascript">

document.getElementById("findHover").onclick = function() {

// 현재 마우스가 올라간 테이블 셀을 찾는다.

var hovered = document.querySelector("td:hover");

if (hovered)

document.getElementById("hoverResult").innerHTML = hovered.innerHTML;

}

</script>

</section>

</body>

</html>

이 예제에서 볼 수 있듯이 마우스가 올라간 요소를 찾을 때는 아래의 한 줄이면 된다.

var hovered = document.querySelector("td:hover");

알아두기

선택자 API는 사용하기 쉬울 뿐 아니라 기존의 DOM API보다 더 빠른 성능을 보여준다. 이것

은 브라우저가 빠른 스타일시트를 구현할 목적으로 선택자 매칭에 매우 최적화되어 있기 때문

이다.

이제 W3C의 CSS 명세에서 선택자 부분이 따로 분리돼 있는 것이 이해될 것이다. 선택자는 스

타일시트 외에도 유용하게 사용된다. 새로운 선택자에 대한 설명은 이 책의 범위를 벗어나지만

DOM을 조작하는 데 적합한 방법을 찾는 개발자라면 애플리케이션 내의 요소를 탐색할 때 새로

운 선택자 API를 사용해보길 권장한다.


자바스크립트 로깅과 디버깅

HTML5의 특징에 포함되진 않지만 자바스크립트 로깅 및 브라우저에 내장된 디버깅 도구는 지난

몇 년 사이에 상당히 발전했다. 웹 페이지 분석 및 코드 실행에 사용되는 가장 좋은 도구로는 파이

어폭스 애드온 프로그램인 파이어버그(Firebug)를 들 수 있다.

이제 다른 브라우저의 내장 개발자 도구도 비슷한 기능을 제공하는데, 사파리의 웹 인스펙터

(Web Inspector), 구글의 크롬 개발자 도구, 인터넷 익스플로러의 개발자 도구, 오페라의 드래곤플

라이(Dragon¬y)가 여기에 해당한다. 그림 1-3은 구글 크롬의 개발자 도구(단축키 Ctrl + Shift + J)

에서 페이지 정보를 확인하는 모습이다. 디버깅 콘솔, 리소스 뷰, 스토리지 뷰라는 이름의 메뉴를

볼 수 있다.

그림 1-3 | 크롬의 내장 개발자 도구

대다수의 디버깅 도구는 중단점을 설정해서 코드 실행을 중단하고 프로그램의 상태를 분석하

며 현재 변수의 값 상태를 확인할 수 있는 기능을 제공한다. console.log API는 자바스크립트 개

발자에게 로그를 남기는 방법으로는 사실상의 표준으로 자리매김했다. 각종 브라우저에서는 콘

솔에 로깅되는 메시지를 볼 수 있는 별도의 뷰를 제공한다. console.log는 alert()처럼 프로그램 실

행을 중단시키지 않으므로 훨씬 더 쓰기 좋다.


window.JSON

JSON은 비교적 오래된 개념은 아니며, 데이터 표현 도구로 점차 대중적으로 사용되고 있다. JSON

은 자바스크립트의 객체 리터럴을 사용해서 데이터를 표현한다. JSON은 간단하고 자바스크립트

에서 이해할 수 있기 때문에 HTML5 애플리케이션의 데이터 교환 형식으로서 사실상의 표준으

로 자리잡았다. JSON과 관련된 API로는 parse(), stringify() 함수(직렬화하거나 문자열로 변경

하는 함수)가 있다.

오래된 브라우저에서 JSON을 사용하려면 자바스크립트 라이브러리가 필요하다(http://json.

org에서 찾을 수 있다). 자바스크립트에서는 파싱과 직렬화가 그다지 빠르지 않아 이 속도를 개선

하고자 최근에 출시된 브라우저에서는 자바스크립트에서 호출할 수 있는 내장 JSON 객체를 지원

한다. 내장 JSON 객체는 차세대 자바스크립트 언어를 아우르는 ECMAScript 5 표준의 일부로 구

체화돼 있다. JSON은 ECMAScript 5의 일부로서는 가장 대중적으로 구현된 사례다. 모든 최신 브

라우저에서 window.JSON 객체를 제공하고 있는 만큼 HTML5 애플리케이션에서도 JSON을 많

이 사용할 것으로 예상할 수 있다.

DOM 레벨 3

웹 애플리케이션을 개발할 때 가장 난해한 부분이라면 바로 이벤트 처리를 들 수 있다. 인터

넷 익스플로러를 제외한 대부분의 브라우저는 이벤트와 요소에 대해 표준 API를 제공한다.

초창기에는 인터넷 익스플로러에서 표준과 다른 이벤트 모델을 구현했다. 인터넷 익스플로러

9(IE9)은 DOM 레벨 2와 3을 지원하게 될 텐데, 이렇게 되면 결국 모든 HTML5 브라우저에

서 DOM 조작 및 이벤트 처리를 하나의 코드로 대응할 수 있게 된다. 이와 관련한 메서드로는

addEventListener()와 dispatchEvent()가 있다

빠른 자바스크립트 엔진

브라우저 혁신의 마지막 단계가 새로운 요소나 API 지원만을 의미하지는 않는다. 최근의 가장 중

요한 변화 중 하나는 주요 브라우저에 탑재된 자바스크립트/ECMAScript 엔진의 발빠른 발전이

다. 새로운 API는 기존 브라우저에서 불가능했던 것을 가능하게 한 것에 불과하다. 자바스크립트

실행 속도의 발전은 기존 웹 애플리케이션이나 HTML5의 최신 기능으로 구현된 웹 애플리케이션

에 모두 좋은 일이다. 현재 사용 중인 브라우저가 복잡한 이미지나 데이터를 처리하지 못하거나 긴

글을 편집할 수 없는가? 그렇다면 브라우저를 바꿔보면 어떨까?


지난 몇 년 동안, 브라우저 제작사에서는 가장 빠른 자바스크립트 엔진 개발에 열을 올렸다. 초

기에 자바스크립트가 단순히 인터프리트 방식이었던 것에 비해 최신 엔진은 스크립트 코드를 내

장 기계 코드로 바로 컴파일해서 2000년대 중반의 브라우저보다 성능이 약 10배 정도 빨라졌다.

2006년에 어도비에서 JIT(just-in-time) 컴파일 엔진과 모질라 프로젝트였던 ECMAScript 가상

기계(코드명 타마린)가 공개되면서 엔진 개발에 박차가 가해졌다. 비록 타마린은 모질라의 최신 버

전에만 남아 있지만 타마린의 공개 자체는 다른 브라우저 제작자에게 새로운 스크립팅 엔진 개발

을 북돋는 계기가 된 것은 틀림없다.

표 1-5. 웹 브라우저별 자바스크립트 엔진

브라우저 엔진명 참고사항

애플 사파리 5 Nitro(SquirrelFish

Extreme으로도 알

려짐)

사파리 4에 출시됐고 5 버전에서 더욱 개선됐

다. 바이트 코드 옵티마이저와 컨텍스트 스레디드

(context-threaded)* 내장 컴파일러를 도입했다.

구글 크롬 5 V8 크롬 2부터 사용됐다. 효율적인 메모리 확장성을 위해

인터럽트 없는 진일보한 가비지 컬렉션을 사용한다.

마이크로소프트

인터넷 익스플로러 9

Chakra 백그라운드 컴파일과 효율적인 타입 시스템에 초점

을 맞추고 있으며, IE8에 비해 10배 정도 개선됐다고

한다.

모질라 파이어폭스 4 JägerMonkey 3.5 버전부터 더욱 정교해졌으며 트레이스 트리를 이

용한 내장 컴파일과 빠른 인터프리트를 지원한다.

오페라 10.60 Carakan 레지스터 기반 바이트 코드와 선택적인 내장 컴파일을

사용해 10.50 버전에서 약 75% 개선됐다.

* (옮긴이) 동시에 하나의 명령어 코드를 바이트 코드에서 네이티브 코드로 변환하는 개념을 말한다(http://www.webkit.org/

blog/214/introducing-squirrelfish-extreme/ 참고).

이러한 브라우저 제작사 간의 선의의 경쟁을 통해 자바스크립트의 성능을 데스크톱 애플리케이

션 코드와 비슷한 수준으로 끌어올릴 수 있을 것이다.


실용적인 HTML의 시대

피터 왈: 경쟁이랑 빠른 자바스크립트 엔진에 대한 얘기가 나와서 말인데, 제 이름은 피터이고

달리기가 제 전부죠.

장거리 달리기를 하다 보면 다양한 사람들을 볼 수 있는데, 골인 지점까지 얼마 남지 않은 상황

일 때 사람들에게서 흥미로운 점을 확인할 수 있습니다. 선수로서의 본질을 떠나 강한 동지애가

발현되는 것이죠. 경쟁은 여전히 존재합니다만 대부분 선수들 사이에서 깊은 동지애가 생깁니

다. 얘기가 빗나갔군요.

친구의 경기 상황을 모니터링하려면 전 제 일을 못하게 됩니다(이를테면, 지금은 HTML5 책을

쓰고 있죠). 보통 웹사이트에서 현재 경기 상황을 보곤 합니다만 ‘실황 중계’라고는 볼 수 없습

니다.

몇 년 전에 유럽 경기에서 좋은 아이디어가 나온 적이 있습니다. 선수들에게 GPS를 나눠주고,

선수들의 위치를 지도에 보여주는 겁니다(이 책에서 지오로케이션과 웹소켓을 이용한 예제를

만들게 될 겁니다). 사실, 원시적인 방법입니다만(업데이트된 내용을 보려면 ‘페이지 새로고침’

을 눌러야 했죠!) 전 거기서 큰 가능성을 확인할 수 있었습니다.

그로부터 몇 년이 지나서 지금은 HTML5의 지오로케이션과 웹소켓 API를 이용해 현재 위치를

실시간으로 보여주는 실황 중계가 가능해졌습니다. 우승자가 결승선을 통과했다고 HTML5가

알려주면 이제 전 의심하지 않습니다.

정리

이번 장에서는 HTML5의 핵심적인 부분을 개괄적으로 살펴봤다.

HTML5의 개발 과정과 앞으로 다가올 중요한 날들의 의미를 설명했다. 호환성, 유용성, 상호 호

환성 그리고 접근성이라는 HTML5의 설계 원리를 살펴봤다. 각 원리는 가능성의 문을 열었고, 오

래된 관례나 관습은 거부했다. 플러그인에서 해방될 수 있는 HTML5의 패러다임과 모두가 궁금

해하는 무엇이 추가되고 없어졌는지에 대해서도 살펴봤다. DOCTYPE, 문자 셋, 다양한 새로운

마크업 요소를 통해 HTML5의 새로운 특징을 설명하고 자바스크립트의 패권을 잡기 위한 경쟁

에 대해서도 소개했다.

다음 장에서는 HTML5 프로그래밍으로 들어가는 첫 단계인 캔버스 API를 살펴보겠다.

Pro

HTM

L5Pr

ogra

mm

ing

02HTML5 캔버스 API

이번 장에서는 HTML5 캔버스(Canvas) API를 살펴보겠다. 캔버스 API를 이용하면 그래픽, 차트

(chart), 그림, 애니메이션을 동적으로 생성하고 렌더링할 수 있다. 아울러 기본적인 렌더링 API

를 사용해 브라우저 환경에 맞게 그림을 그려내거나, 사용자 입력에 따라 히트맵 화면(heatmap

display)에서 동적으로 그림을 그리는 방법을 알아본다. 물론 HTML5를 사용할 때 주의할 점과 그

것의 해결책도 소개하겠다.

이번 장을 이해하는 데 전문적인 그래픽 지식은 필요하지 않다. 겁먹지 말고 HTML의 여러 강

력한 특징 중 하나에 도전해보자.

HTML5 캔버스 개요

HTML5 캔버스 API의 사용법에 대해서만 쓰더라도 이 책 전체를 채울 수 있다(그리고 분량이 과

히 적지 않을 것이다). 하지만 내게 할당된 분량은 한 장(chapter)밖에 없으니 이 방대한 API에서

(우리가 생각하기에) 가장 일반적으로 사용되는 기능을 주로 다루겠다.

역사

캔버스는 본래 애플 맥 OS X 웹킷에서 대시보드 위젯을 만들 때 도입된 개념이다. 캔버스가 등장

하기 전에는 어도비에서 브라우저 플러그인으로 제공하는 플래시의 드로잉 API나 SVG(Scalable

Vector Graphics), 인터넷 익스플로러에서만 실행되는 VML(Vector Markup Language) 또는 자바스

크립트밖에 이용할 수 없었다.


canvas 요소를 사용하지 않고 대각선을 그려보라. 언뜻 간단하게 들려도 여러분이 눈감고도 쓸

수 있는 단순한 2차원 드로잉 API가 없다면 꽤나 복잡한 작업일 것이다. HTML5의 캔버스를 이

용하면 이러한 작업이 가능하다. HTML5 명세에 캔버스가 추가된 이유는 이처럼 브라우저에서

매우 유용하기 때문이다.

초기에 애플은 WHATWG의 canvas 명세서 초안에 대해 지적 재산권을 보유하려 해서 일부

웹 표준 추종자들의 우려를 낳았지만 결국 W3C 특허 공개 정책에 따라 이를 공개했다.

SVG vs. CANVAS

피터 왈: 캔버스는 본래 비트맵 캔버스입니다. 그래서 캔버스에 그려진 이미지는 SVG(Scalable

Vector Graphic) 이미지처럼 크기를 변경할 수 없습니다. 게다가 캔버스에 그린 객체는 페이

지의 DOM이나 어떠한 네임스페이스에도 포함되지 않습니다. 이건 단점으로 여겨지곤 합니다.

SVG 이미지는 다른 해상도에서도 한결같이 보이는데다, 그린 객체들을 잡아낼 수 있습니다(이

미지의 어느 부분을 클릭했는지 알 수 있습니다).

그런데 왜 WHATWG HTML5 명세서는 SVG를 단독으로 차용하지 않았을까요? HTML5 캔버

스 API는 뻔히 보이는 단점에도 불구하고 다음의 두 가지 이유 때문에 채택됐습니다. 우선, 그

려지는 모든 원형 객체를 저장하지 않기 때문에 성능이 좋습니다. 그리고 다른 프로그래밍 언어

의 2차원 드로잉 API에 비해 쉽게 구현할 수 있습니다. 결국, 숲 속에 있는 두 마리 새보다는 수

중에 있는 한 마리 새가 더 낫다는 것이죠.

캔버스란?

canvas 요소를 웹 페이지에 넣으면 페이지 내에 사각 영역이 만들어진다. 이 사각 영역의 크기는

기본적으로 가로 300픽셀, 세로 150픽셀이지만 크기를 명시하거나 다른 속성을 설정할 수 있다.

예제 2-1은 HTML 페이지에 canvas 요소를 삽입하는 방법을 보여준다.

예제 2-1 ㅣ 기본적인 canvas 요소

<canvas></canvas>

페이지에 삽입된 canvas 요소는 자바스크립트를 이용해 원하는 대로 조작할 수 있다. 그래픽,

선, 텍스트를 추가할 수도 있고, 그림을 그리거나 고급 애니메이션을 만들 수도 있다.

HTML5 캔버스 API는 대부분의 최신 운영체제와 프레임워크에서 지원하는 2차원 드로잉 연

산을 똑같이 지원한다. HTML5 캔버스 API는 기존 시스템과 비슷하게 설계됐기 때문에 몇 년 동

02 HTML5 캔버스 API l 31

안 2차원 그래픽 프로그래밍을 해보지 않았더라도 낯설지 않을 것이다. 캔버스 API를 사용해보면

HTML5 캔버스가 수년간 웹 그래픽을 만들어내기 위해 개발자들이 사용했던 기존의 이미지 및

CSS 트릭에 비해 얼마나 굉장한 렌더링 시스템인지 알 수 있을 것이다.

캔버스를 사용하려면 우선 컨텍스트를 얻어야 한다. 그러고 나면 컨텍스트를 통해 액션을 실행

하고 적용할 수 있다. 데이터베이스 트랜잭션이 트랜잭션을 시작하고 어떤 행위를 취한 뒤 트랜잭

션을 커밋하는 것처럼 캔버스를 수정하는 것도 이와 비슷하다.

캔버스 좌표

그림 2-1과 같이 캔버스의 좌표는 좌상단의 원점을 기준으로 x=0, y=0에서 시작해서 수평 방향으

로는 x축, 수직 방향으로는 y축으로 픽셀 단위로 증가한다.

Y축

X축

그림 2-1 | 캔버스의 x, y 좌표

캔버스를 사용해서는 안 되는 경우

canvas 요소가 유용하긴 하지만 다른 요소로 대체 가능한 경우에는 사용해서는 안 된다. 예를 들

어, HTML 문서의 다양한 헤딩을 캔버스에 동적으로 그리는 것은 좋은 생각이 아니다. 대신 목적

에 맞게 헤딩 스타일(h1, h2 등)을 사용해야 한다.


대체 콘텐츠

canvas 요소 또는 HTML5 캔버스 API 중 일부를 지원하지 않는 브라우저에서 캔버스를 사용하

는 페이지에 접근할 경우 대체 자원을 제공하는 것이 좋다(표 2-1의 ‘HTML5 캔버스를 지원하는

브라우저’를 참고). 사용자에게 최신 브라우저를 사용하면 어떤 점이 좋은지를 설명하는 대체 이

미지나 짧은 텍스트를 제공할 수 있다. 예제 2-2는 canvas 요소 내부에 대체 텍스트를 명시하는 방

법을 보여준다. canvas 요소를 지원하지 않는 브라우저는 대체 콘텐츠를 보여줄 것이다.

예제 2-2 ㅣ canvas 요소 내부에 대체 텍스트 사용하기

<canvas>

캔버스를 즐기시려면 브라우저를 업데이트하세요!

</canvas>

브라우저가 canvas 요소를 지원하지 않을 경우 위 예제처럼 텍스트로 표현하는 대신 이미지로

대체할 수 있다.

캔버스의 접근성은 어떤가요?

피터 왈: 대체 이미지나 텍스트를 제공하는 것은 접근성에 초점을 맞춘 것이죠. 아쉽게도

HTML5 캔버스 명세서에는 여전히 이 부분에 대해 부족해보이지만요. 이를테면, 캔버스에 삽입

된 이미지의 대체 텍스트를 넣는 내장 메서드나, 캔버스 텍스트 API로 작성된 텍스트와 일치하

는 대체 텍스트를 생성하는 내장 메서드는 없습니다. 이 책을 쓰고 있는 지금 캔버스에서 동적으

로 생성되는 콘텐츠의 접근성에 대해서는 고려된 바가 없습니다. 하지만 위원회(task force)에

서 접근성에 관한 설계 작업을 진행 중이니 시간이 지나면서 나아지기를 기대해봅시다.

CSS와 캔버스

대부분의 HTML 요소처럼 canvas 요소는 외곽선, 안쪽 여백, 바깥쪽 여백 등을 CSS로 꾸밀 수

있다. 아울러 일부 CSS 값은 캔버스의 콘텐츠에 의해 상속된다. 폰트를 예로 들자면 캔버스 안에

그려진 폰트는 기본적으로 canvas 요소의 기본 속성을 상속받는다.

캔버스 연산에 사용되는 컨텍스트에 설정된 속성은 이미 잘 알고 있는 CSS 문법을 따른다. 예를

들어, 색깔과 폰트는 여느 HTML, CSS 문서와 같은 방식으로 사용하면 된다.

HTML5 캔버스를 지원하는 브라우저

인터넷 익스플로러를 제외하고, 현재 모든 브라우저가 HTML5 캔버스를 지원한다. 캔버스 텍스

트 API처럼 최근에 명세서에 추가된 부분은 범용적으로 지원되지는 않는다. 하지만 명세서는 거

의 최종 단계이며 거의 변경되지 않을 것이다. 표 2-1과 같이 이 책을 쓰고 있는 지금, 이미 많은 브

라우저에서 HTML5 캔버스를 지원하고 있다.

표 2-1. HTML5 캔버스를 지원하는 브라우저

브라우저 세부 내역

크롬 1.0 버전 이후부터 지원

파이어폭스 1.5 버전 이후부터 지원

인터넷 익스플로러 지원하지 않음

오페라 9.0 버전 이후부터 지원

사파리 1.3 버전 이후부터 지원

인터넷 익스플로러를 제외한 모든 브라우저가 HTML5 캔버스를 지원한다. 인터넷 익스플로

러에서 캔버스를 사용하려면 오픈소스 프로젝트인 explorercanvas(http://code.google.com/p/

explorercanvas)를 이용하면 된다. 아래 예제 코드처럼 현재 브라우저가 인터넷 익스플로러인지 체

크한 뒤, explorercanvas를 실행하는 스크립트 태그를 추가하면 된다.

<head>



</head>

캔버스의 범용적인 지원은 개발자들이 매우 바라던 일이고, 새로운 프로젝트는 오래되거나 표

준을 지키지 않는 브라우저 환경에서 캔버스를 지원할 수 있게 노력하고 있다. 마이크로소프트는

인터넷 익스플로러 9에서 캔버스를 지원하겠다고 발표했다. 따라서 모든 주요 브라우저가 기본적

으로 캔버스를 지원할 날이 멀지 않았다.

캔버스를 지원하는 정도는 브라우저마다 제각각이라서 API를 사용하기 전에 먼저 HTML5 캔

버스 지원 여부를 테스트하는 것이 좋다. 이 장 후반부의 ‘브라우저 지원 여부 확인’에서 브라우저

지원 여부를 코드로 체크하는 방법을 소개하겠다.


HTML5 캔버스 API 사용하기

이번 절에서는 HTML5 캔버스 API에 대해 좀 더 자세히 알아보자. 이해를 돕고자 다양한 HTML5

캔버스 API를 사용해서 장거리 여행에 어울릴 만한 나무와 아름다운 오솔길이 나 있는 숲의 로

고를 만들어 보겠다. 사용될 예제가 여느 그래픽 디자인 시상식에서 상을 받지는 못하겠지만

HTML5 캔버스의 다양한 특징을 설명하기에는 부족함이 없을 것이다.

브라우저 지원 여부 확인

HTML5 canvas 요소를 사용하기 전에 브라우저의 지원 여부 확인을 통해 canvas 요소를 지원하

지 않는 오래된 브라우저인 경우 대체 텍스트를 제공할 수 있다. 예제 2-3은 브라우저 지원 여부를

테스트하는 방법 중 하나를 보여준다.

예제 2-3 ㅣ 브라우저 지원 여부 확인

try {

document.createElement("canvas").getContext("2d");

document.getElementById("support").innerHTML = "HTML5 캔버스를 지원하는 브라우저입니다.";

} catch (e) {

document.getElementById("support").innerHTML = "HTML5 캔버스를 지원하지 않는 브라우저입니다.";

}

이 예제에서는 캔버스 객체를 만들고 나서 캔버스 객체의 컨텍스트에 접근하고 있다. 에러가 발

생하면 캔버스를 지원하지 않는 것이다. 페이지 내의 support 요소는 브라우저의 캔버스 지원 여

부에 따라 적절한 메시지로 업데이트될 것이다.

이 테스트는 canvas 요소 자체로 브라우저 지원 여부를 확인할 수 있음을 보여준다. 캔버스의

어떤 기능을 지원하는지는 알 수 없다. 이 책을 쓰고 있는 지금, API는 안정된 상태이고 잘 지원되

고 있기 때문에 별달리 걱정할 부분은 없다.

아울러 예제 2-3과 같이 canvas 요소에 대체 콘텐츠를 제공하는 것도 좋은 생각이다.

페이지에 캔버스 추가하기

HTML 페이지에 canvas 요소를 추가하는 것은 매우 간단하다. 예제 2-4는 HTML 페이지에 삽입

된 canvas 요소를 보여준다.


예제 2-4 ㅣ canvas 요소

<canvas height="200" width="200"></canvas>

이 코드가 실행되면 200×200픽셀의 ‘보이지 않는’ 사각 영역이 페이지에 생성된다. 캔버스 주위

로 테두리를 넣고 싶다면 예제 2-5처럼 style 속성에 CSS border를 선언하면 된다.

예제 2-5 ㅣ 단선 테두리로 꾸민 canvas 요소

<canvas id="diagonal" style="border: 1px solid;" width="200" height="200">

</canvas>

프로그램 방식으로 canvas 요소에 쉽게 접근하고자 diagonal이라는 ID를 추가한 것을 눈여겨

보자. canvas 요소의 모든 유용한 연산은 스크립트를 통해 실행되므로 canvas 요소의 ID 속성은

매우 중요하다. ID 속성이 없으면 다른 요소와의 상호작용을 위해 캔버스에 접근하기가 쉽지 않을

것이다.

그림 2-2는 예제 2-5가 브라우저에서 실행된 결과를 보여준다.

그림 2-2 | HTML 페이지에 삽입된 단순한 HTML5 canvas 요소

그리 흥미롭진 않지만 무한한 가능성으로 충만하다. 이제 이 원시적인 캔버스에 뭔가를 해보자.

앞에서 HTML5 캔버스를 사용하지 않고는 웹 페이지에 대각선을 그리기가 쉽지 않다고 했는데

캔버스를 사용하면 얼마나 쉬워지는지 확인해보자. 예제 2-6의 몇 줄 되지 않는 코드로 방금 만들

어 놓은 캔버스 위에 대각선을 그릴 수 있다.


예제 2-6 ㅣ 캔버스에 대각선 그리기

<script>

function drawDiagonal() {

// canvas 요소와 드로잉 컨텍스트를 가져온다.

var canvas = document.getElementById('diagonal');

var context = canvas.getContext('2d');

// 절대 좌표로 패스를 생성한다

context.beginPath();

context.moveTo(70, 140);

context.lineTo(140, 70);

// 캔버스에 선을 그린다

context.stroke();

}

window.addEventListener("load", drawDiagonal, true);

</script>

자바스크립트 코드가 대각선을 그리는지 실행해보자. 간단한 예제지만 HTML 캔버스 API를

사용하기 위한 필수적인 작업 흐름을 보여준다.

우선 canvas 요소의 ID 값을 통해 캔버스 객체를 얻었다. 이 예제에서 ID 값은 diagonal이다.

다음으로 context 변수를 만들고 찾고자 하는 캔버스 타입을 매개변수로 넘겨 캔버스 객체의

getContext() 메서드를 호출했다. 2차원 컨텍스트를 얻고자 ‘2d’라는 문자열을 매개 변수로 전달

했다. 현재 사용 가능한 유일한 컨텍스트 형태는 ‘2d’다.

알아두기

3차원 컨텍스트는 차후 버전의 명세서에서 지원될 예정이다.

이제 컨텍스트를 사용해서 드로잉 연산을 실행하면 된다. 이 경우, 선의 시작 좌표와 끝 좌표를

매개변수로 세 개의 메서드 beginPath(), moveTo(), lineTo()를 호출해서 대각선을 그렸다.

드로잉 메서드인 moveTo(), lineTo()는 정확히 말하면 선을 만들어내지 않는다. context.

stroke(); 메서드가 실행될 때 선을 그리고 캔버스 연산이 끝난다. 그림 2-3은 예제 코드로 그린 대

각선을 보여준다.


그림 2-3 | 캔버스에 그린 대각선

성공했다! 이런 단순한 선이 혁신의 시작처럼 보이진 않겠지만 기존의 HTML을 이용해 임의의

두 점을 잇는 대각선을 그리는 것이 얼마나 복잡했는지 마음에 새기길 바란다. 했던 말을 또 하게

만들지 말자!

예제 코드에서 보다시피 캔버스의 모든 연산은 컨텍스트 객체를 통해 실행된다. 시각적으로 나

타나는 중요한 기능들은 캔버스 객체가 아닌 컨텍스트와 상호작용한다. 캔버스에서 얻어낸 컨텍

스트의 유형을 기반으로 하는 이러한 유연성 덕분에 캔버스는 훗날 다른 유형의 드로잉 모델을 지

원할 수 있다. 이번 장에서는 캔버스를 자주 참조하겠지만 정확하게는 캔버스가 제공하는 컨텍스

트 객체와 연동한다는 사실을 기억하자.

이전 예제에서 보여준 것처럼 컨텍스트를 조작한 결과는 바로 적용되지 않는다. beginPath(),

moveTo(), lineTo()와 같은 함수는 캔버스의 모습을 바로 바꾸지 않는다. 캔버스의 스타일이나 우

선순위를 설정하는 다른 여러 함수도 마찬가지다. 경로가 그려지거나 색이 칠해졌을 때 비로소 보

여진다. 그렇지 않으면 이미지나 텍스트가 표시되거나, 사각형을 그리고, 색을 채우고, 지울 때마다

캔버스를 업데이트해야 할 것이다.

그림 변환하기

변환을 이용해 캔버스에 그림을 그리는 방법을 살펴보자. 다음 예제는 앞선 예제와 결과는 같지만

대각선을 그리는 코드는 다르다. 이 단순한 예제를 보고 나면 변환 때문에 쓸데없이 복잡해졌다고

할 수도 있겠지만 이후 예제를 보고 나면 복잡한 캔버스 연산에는 변환이 제격이라고 생각하게 될


것이다. HTML5 캔버스 API의 복잡한 특징을 이해하는 것 역시 매우 중요하다.

변환 시스템을 가장 쉽게 설명하자면 여러분이 내리는 명령과 캔버스에 보이는 결과 사이에 위치

하는 변경 레이어로 볼 수 있다. 변경 레이어와 상호작용하지 않더라도 이 레이어는 항상 존재한다.

드로잉 시스템에서 말하는 변경 또는 변환(tramsformation)은 연속적이고 복합적으로 적용할

수 있고, 원하는 대로 수정할 수 있다. 모든 드로잉 연산은 캔버스에 나타나기 전에 변경 레이어를

거친다. 레이어 때문에 더 복잡해졌지만 대신 드로잉 시스템은 더 강력해진다. 변경 레이어는 최신

이미지 편집 도구에서 실시간으로 지원하는 강력한 수정 권한을 부여해주며, API는 절대적으로

필요한 만큼만 복잡할 뿐이다.

코드에서 변환을 호출하지 않는다고 해서 성능이 최적화되지는 않는다. 캔버스는 변환을 호출하

건 호출하지 않건 간에 렌더링 엔진에 포함된 변환을 사용하고 적용한다. 가장 기초적인 드로잉 연

산을 익히고 나면 시스템을 이해하기가 어려워지므로 미리 시스템을 이해하는 편이 더 현명하다.

재사용 가능한 코드를 위한 권장 사항은 다음과 같다. 바로 그림 2-4에 나온 것처럼 원점(좌표

0, 0)에서 그린 다음, scale, translate, rotate등의 변환을 적용해 최종 결과물에 맞게 드로잉 코드

를 수정하는 것이다.

원점

원점에서의드로잉연산

브라우저의변환구현

변환된 새로운좌표

변환과정을거친최종 그림

그림 2-4 | 원점을 기준으로 한 변환과 드로잉


예제 2-7은 가장 단순한 변환의 모범 사례를 보여준다.

예제 2-7 ㅣ 변환을 이용해 캔버스에 대각선 그리기

<script>

function drawDiagonal() {

var canvas = document.getElementById('diagonal');


// 현재 드로잉 상태의 복사본을 저장한다.

context.save();

// 드로잉 컨텍스트를 오른쪽으로 70, 아래쪽으로 140픽셀만큼 이동한다.

context.translate(70, 140);

// 이전 예제처럼 선을 그린다. 하지만 원점에서 시작한다.



context.lineTo(70, -70);

context.stroke();

// 마지막으로 저장된 캔버스 컨텍스트를 복원한다.

context.restore();

}

window.addEventListener("load", drawDiagonal, true);

</script>

변환을 통해 대각선을 그리는 자바스크립트 코드를 분석해보자.

1. 우선, canvas 요소의 ID 값(예제에서는 diagonal)을 참조해 캔버스 객체에 접근한다.

2. 캔버스 객체의 getContext() 함수를 호출해 context 변수를 획득한다.

3. 원본을 복구할 수 있게 수정되지 않은 상태의 컨텍스트를 저장한다. 현재 상태를 저장하지

않으면 수정하기 위해 실행한 연산(translate, scale 등…)이 추후 연산에도 컨텍스트에 계

속해서 적용될 것이다. 이렇게 하는 것은 바람직하지 않다. 변환하기 전에 컨텍스트 상태를

저장하면 나중에 다시 사용할 수 있다.

4. 다음 단계는 컨텍스트에 변환 메서드를 적용하는 것이다. 이 연산을 통해 지정한 변환 좌

표는 어떤 그림이든 그려지는 시점에 최종 그림 좌표(대각선)에 추가될 것이다. 이렇게 선

은 최종 위치로 옮겨진다. 하지만 드로잉 연산이 완료된 다음에 옮겨진다.


5. 변환이 적용되고 나면 대각선을 만드는 드로잉 연산을 실행할 수 있다. 이 경우 beginPath(),

moveTo(), lineTo()를 호출해서 대각선을 만들었다. 이번에는 원점(0, 0)이 아닌 70, 140 좌

표에서 대각선이 시작된다.

6. 현재 컨텍스트를 마지막 저장된 상태로 복원한다. 이후의 캔버스 연산은 이번 연산에 적용

했던 변환을 배제한 채로 실행된다. 그림 2-5는 예제 코드로 그린 대각선을 보여준다.

그림 2-5 | 캔버스에서 변환된 대각선

앞 절에서 그린 대각선과 별로 달라보이지 않겠지만 변환을 활용해서 그렸다는 것이 중요하다.

이번 장의 나머지 부분을 살펴보다 보면 변환의 위력이 점차 분명하게 드러날 것이다.

패스 다루기

선을 그리는 재밌는 예제를 좀 더 보여줄 수도 있지만 이제 더 복잡한 패스에 대해 알아보자.

HTML5 캔버스 API의 패스는 그리고자 하는 대상의 모양을 표현한다. 눈치가 빠른 독자라면 앞

서 선을 그리는 예제에서 beginPath()를 호출해서 패스를 사용한 것을 알아차렸을 것이다. 하지만

패스는 여러 개의 선과 곡선의 단편, 서브패스로 원하는 만큼 복잡해질 수 있다. 캔버스에 도형을

그리는 방법을 찾고 있다면 패스 API를 집중적으로 살펴봐야 할 것이다.

도형이나 패스를 그리기 시작할 때는 beginPath()를 호출한다. beginPath()는 매개변수도 없는

단순한 함수지만 여러분이 새로운 도형을 그릴 준비가 됐다는 것을 캔버스에 알려주고, 나중에 색

을 채우거나 선을 그리려고 만든 도형의 안팍을 계산할 수 있다.


패스는 현재 위치를 추적할 때 항상 원점을 기준으로 한다. 캔버스는 내부적으로 현재 위치를

추적하지만 드로잉 루틴에 의해 변경할 수 있다.

도형이 시작되면 컨텍스트의 다양한 함수를 이용해 도형의 레이아웃을 구분할 수 있다. 우리는

이미 컨텍스트를 이용한 가장 단순한 선 그리기 함수를 살펴봤다.

▶ moveTo(x, y): 그림은 그리지 않은 채로 현재의 위치를 목적 좌표(x, y)로 이동한다.

▶ lineTo(x, y): 현재 위치에서 목적 좌표(x, y)까지 직선으로 이동한다.

두 함수의 차이를 예를 들어 설명하겠다. moveTo()는 펜을 들어서 새로운 위치로 옮기는 것이

고, lineTo()는 종이 위에 펜을 올려 둔 채로 새로운 위치로 직선을 그리면서 이동시키는 것과 같

다. 하지만 선을 긋거나 패스를 채우기 전까지는 실제 아무것도 그려지지 않는다는 점을 떠올려 보

자. 지금 우리는 단순히 패스의 위치를 정한 것이지 그림을 그린 것은 아니다.

다음 함수는 closePath()다. closePath() 함수는 lineTo() 함수와 많이 비슷한데, 차이점이라면

목적 좌표가 자동으로 패스의 시작 좌표가 된다는 것이다. 또한 현재 도형이 닫혔거나 완전히 영

역을 감싸게 됐다는 것을 캔버스에 알려준다. 이는 나중에 색을 채우거나 선을 그을 때 유용하게

활용될 것이다.

이제 서브패스를 추가로 생성해서 패스를 조각낼 수도 있고, beginPath()로 다시 패스를 시작하

거나 패스 목록을 완전히 없앨 수도 있다.

복잡한 시스템일수록 직접 실행해보는 것이 도움이 된다. 이제 선 위주의 예제에서 벗어나 오솔

길이 나 있는 숲을 그려보자. 이 그림은 경주 대회의 로고로 사용될 것이다. 소나무 캐노피로 그림

을 시작해보자. 예제 2-8은 소나무 캐노피를 그리는 예제다.

예제 2-8 ㅣ 나무 캐노피 패스를 생성하는 함수

function createCanopyPath(context) {

// 나무 캐노피를 그린다.


context.moveTo(-25, -50);

context.lineTo(-10, -80);





// 나무의 꼭대기







// 시작점으로 돌아가 패스를 닫는다.

context.closePath();

}

코드를 보면 알겠지만 앞의 예제에서처럼 moveTo(), lineTo() 명령을 사용했다(몇 번 더 사용하

긴 했지만). 단순한 나무 모양의 가지에서 선을 그리고 마지막에는 패스를 닫았다. 바닥에서 떨어

져 있는 나무 그림은 다음 절에서 줄기를 그릴 때 사용될 것이다. 예제 2-9는 캔버스에 단순한 나

무 모양을 그릴 때 캐노피를 그리는 함수가 어떻게 사용되는지 보여준다.

예제 2-9 ㅣ 캔버스에 나무를 그리는 함수

function drawTrails() {

var canvas = document.getElementById('trails');


context.save();


// 캐노피 패스의 모양을 만든다.

createCanopyPath(context);

// 현재 패스를 그린다.

context.stroke();

context.restore();

}

앞에서 본 예제와 흐름이 크게 다르지 않다. 나중에 참조하기 위해 일단 캔버스 컨텍스트를 저

장하고, 현재 위치를 새로운 위치로 옮기고, 캐노피를 그린 뒤에 캔버스에 실제로 그리고, 마지막

으로 저장된 캔버스 컨텍스트를 복원했다. 그림 2-6은 나무 캐노피가 단순한 선으로 표현된 결과

를 보여준다. 앞으로 계속 확장해 나가겠지만 처음 치고 이 정도면 나쁘지 않다.


그림 2-6 | 나무 캐노피의 단순한 패스

선 스타일 사용하기

개발자들이 단순한 막대기 선이나 검은색 선을 그리는 것조차 어려웠다면 HTML5 캔버스 API가

이렇게 강력해지거나 대중적으로 사용되지는 않았을 것이다. 선 스타일을 사용해서 캐노피를 좀

더 나무 같이 꾸며보자. 예제 2-10은 좀 더 그럴듯하게 보이게끔 컨텍스트의 속성을 수정하는 기

본적인 명령을 보여준다.

예제 2-10 ㅣ 선 스타일 사용하기

// 선의 너비를 늘린다.

context.lineWidth = 4;

// 패스가 만나는 부분을 둥글게 설정한다.

context.lineJoin = 'round';

// 색깔을 갈색으로 변경한다.

context.strokeStyle = '#663300';

// 마지막으로 캐노피를 그린다.

context.stroke();

선을 긋기 전에 속성을 추가해서 앞으로 그려질 모양의 외양을 바꿨다(적어도 컨텍스트를 예전

상태로 돌리기 전까지는).


우선, 선의 너비를 4px로 늘렸다.

다음으로 lineJoin 속성을 round로 설정해서 도형의 단편이 만나는 지점을 둥글게 설정했다.

lineJoin은 bevel이나 miter로 설정할 수 있다(context.miterLimit 값으로도 같은 효과를 줄 수

있다).

마지막으로 strokeStyle 속성을 이용해 선의 색상을 바꿨다. 색상값은 CSS 값으로 지정했는데,

이는 다음 절에서 다시 다루겠다. 색상값 대신 이미지 패턴이나 그라디언트를 설정할 수도 있다.

여기서는 사용하지 않았지만 lineCap 속성은 선의 끝 지점 모양을 화살이나 사각형 또는 원형

으로 지정한다. 아쉽게도 예제에는 선의 끝에 매달려 있는 것들은 없다. 그림 2-7은 그전의 단순한

검정색 선 대신 좀 더 넓고 부드러운 갈색 선으로 그려진 나무 캐노피를 보여준다.

그림 2-7 | 선 스타일이 적용된 나무 캐노피

면 스타일 다루기

캔버스 모양의 외양을 바꾸는 방법은 stroke 말고도 더 있다. 패스와 서브패스를 채우는 방법을

지정해서 캔버스 모양을 변경할 수도 있다. 예제 2-11은 초록색으로 캐노피를 채우는 간단한 방

법을 보여준다.

예제 2-11 ㅣ 면 스타일 사용하기

// 색상을 초록색으로 설정하고 캐노피에 채우기

context.fillStyle = '#339900';

context.fill();


우선 ®llStyle 속성에 표현할 색상을 설정한다. 뒤에서 다시 보겠지만 그라디언트나 이미지 패턴

도 가능하다. 색상을 설정하고 나서 ®ll() 함수를 실행하기만 하면 된다. 그림 2-8에 나온 것과 같

이 현재 도형의 닫힌 패스 내의 픽셀이 모두 지정된 색상으로 채워진다.

그림 2-8 | 색상을 입힌 나무 캐노피

캐노피에 색상을 채우기 전에 선을 그었으므로 선으로 그어진 패스 부분에도 색상이 채워졌다.

예제에서 선을 그릴 때 4px만큼 넓게 그린 이유는 선이 캐노피의 외곽선의 중간에 걸쳐 그려지기

때문이다. 도형 내부의 전체 픽셀에 색이 채워지기 때문에 그어진 선을 구성하는 픽셀의 절반이

초록색으로 채워질 것이다. 선까지 모두 색으로 채우고 싶다면 패스에 선을 긋기 전에 ®ll을 실행

하면 된다.

사각형 콘텐츠 채우기

모든 나무에는 단단한 줄기가 있다. 다행히도 나무 줄기를 그릴 공간을 남겨뒀다. 예제 2-12는

®llRect() 함수를 사용해서 나무 줄기를 추가하는 것을 보여준다.

예제 2-12 ㅣ fillRect() 함수 사용하기

// 색상을 갈색으로 변경한다.


// 나무 줄기로 사용할 사각형에 색상을 채운다.

context.fillRect(-5, -50, 10, 50);


예제에서 갈색으로 ®ll 스타일을 다시 설정했다. lineTo() 함수를 사용하지 않고 ®llRect() 함수

로 한 번에 줄기 전체를 그릴 것이다. ®llRect() 함수는 x, y 좌표를 비롯해 너비와 높이값을 매개변

수로 받아 현재 ®ll 스타일 대로 색상을 채운다.

여기서 사용하지는 않았지만 비슷한 역할을 하는 strokeRect()와 clearRect() 함수가 있다.

strokeRect() 함수는 지정한 위치와 크기에 따라 사각형의 외곽선을 그리고, clearRect() 함수는

사각형 영역의 모든 내용물을 지우고 투명색으로 초기화한다.

캔버스 애니메이션

브라이언 왈: clearRect() 함수는 HTML5 캔버스 API를 이용해 애니메이션이나 게임을 만드는

데 핵심적인 역할을 합니다. 웹에서 찾을 수 있는 많은 예제처럼 캔버스 섹션을 반복적으로 그

리고 지움으로써 애니메이션을 표현할 수 있습니다. 하지만 부드럽게 움직이는 애니메이션을

만드려면 클리핑(clipping)을 활용해야 합니다. 또한 캔버스를 자주 지우기 때문에 발생하는

깜박거림에 대응하려면 캔버스를 버퍼에 따로 유지해야 합니다. 애니메이션은 이 책의 범위를

벗어나지만 열심히 연구해보세요!

그림 2-9는 앞에서 만든 캐노피 패스에 나무 줄기가 더해진 결과를 보여준다.

그림 2-9 | 사각형 줄기가 더해진 나무


곡선 그리기

세상은 직선과 사각형으로만 채워져 있지 않다. 다행히 캔버스는 패스에 곡선을 만들 수 있는 다

양한 함수를 제공한다. 여기서는 간단한 2차 곡선을 그려 숲 속에 길을 내보겠다. 예제 2-13은 두

개의 2차 곡선을 그리는 예제다.

예제 2-13 ㅣ 곡선 그리기

// 캔버스의 상태를 저장하고 패스를 그린다.

context.save();

context.translate(-10, 350);


// 첫 번째 곡선은 오른쪽으로 구부러진다.


context.quadraticCurveTo(170, -50, 260, -190);

// 두 번째 곡선은 오른쪽 아래로 계속해서 구부러진다.

context.quadraticCurveTo(310, -250, 410,-250);

// 넓은 갈색 선으로 패스를 그린다.



context.stroke();

// 마지막으로 저장된 캔버스 컨텍스트를 복원한다.

context.restore();

변환 및 선의 옵션을 변경하기 전에 이전 예제와 마찬가지로 우선 캔버스의 컨텍스트를 저장한

다. 숲길을 내기 위해 다시 원점으로 이동해서 오른쪽으로 구부러진 2차 곡선을 그린다.

그림 2-10과 같이 quardraticCurveTo() 함수는 현재 그리는 위치에서 시작하며 두 개의 x, y 좌

표를 매개변수로 받는다. 두 번째 좌표값은 곡선의 끝에 해당한다. 첫 번째 좌표는 조절점이다. 조

절점은 곡선의 바깥쪽에 위치하며 곡선의 개별 점에 중력처럼 작용한다. 조절점의 위치를 변경하

려면 그리고 있는 곡선의 곡률을 조정하면 된다. 두 번째 2차 곡선을 그려서 패스가 완성되면 앞에

서 했던 것처럼 stroke()를 실행한다.


조절점

시작점

끝점

그림 2-10 | 2차 곡선의 시작점, 끝점, 조절점

이 밖에도 HTML5 캔버스 API에는 bezierCurveTo(), arcTo(), arc() 함수와 같은 곡선을 그릴

수 있는 함수가 제공된다. 이런 곡선들은 추가적인 조절점과 반지름, 각도로 제각기 특징이 다르

다. 그림 2-11은 두 개의 2차 곡선으로 숲를 가로지르는 길을 캔버스에 그린 결과를 보여준다.

그림 2-11 | 2차 곡선으로 그린 길

캔버스에 이미지 넣기

이미지는 캔버스와 죽이 잘 맞는다. 찍어낼 수도 있고, 늘릴 수도 있고, 변환을 통해 수정할 수도

있으며 때로는 캔버스 전체의 중심이 되기도 한다. 다행히도 HTML5 캔버스 API는 캔버스에 이


미지를 추가하는 간단한 방법을 제공한다.

하지만 이미지는 캔버스 연산을 복잡하게 한다. 우선 이미지가 로드되기를 기다려야 한다. 브라

우저는 스크립트를 부르는 것처럼 비동기적으로 이미지를 로드한다. 이미지가 완전히 로드되기 전

까지는 캔버스에 이미지를 그릴 수 없다. 따라서 캔버스에 이미지를 그리기 전에 완전히 로드됐는

지 반드시 체크해야 한다.

오솔길 예제에서는 이 문제를 해결하고자 캔버스에서 사용할 나무 껍질 패턴 이미지를 로드할

것이다. 캔버스에 이미지를 그리기 전에 이미지 로드가 끝났는지 확인하기 위해 예제 2-14처럼 이

미지 로드가 끝난 뒤 콜백이 실행되도록 코드를 수정할 것이다.

예제 2-14 ㅣ 이미지 로드하기

// 나무 껍질 패턴 이미지를 로드한다.

var bark = new Image();

bark.src = "bark.jpg";

// 이미지가 로드되면 캔버스에 그린다.

bark.onload = function () {

drawTrails();

}

bark.jpg 이미지가 로드된 후에만 drawTrails() 함수가 실행되도록 bark.jpg 이미지에 onload

핸들러를 추가했다. 예제 2-15에 나온 것처럼 이것은 한 번 로드된 이미지는 다음에 drawTrails()

함수를 호출해서 캔버스에 추가할 수 있음을 보장해준다.

예제 2-15 ㅣ 캔버스에 이미지 그리기

// 이전에 그려둔 사각형에 나무 껍질 패턴 이미지를 그린다.

context.drawImage(bark, -5, -50, 10, 50);

®llRect() 함수 대신 나무 껍질 이미지로 나무의 줄기를 그렸다. drawImage() 함수는 이미지가

추가될 x, y 좌표와 넓이, 높이를 매개변수로 받아 줄기와 같은 크기인 10×50픽셀에 맞게 나무 껍

질 이미지를 늘려서 채운다. 넘겨받은 이미지가 보여질 영역을 조절하고자 이미지의 크기를 매개

변수로 받을 수도 있다.

그림 2-12는 줄기 부분을 이미지로 바꾼 결과다. 앞 예제와 크게 달라 보이지는 않는다.


그림 2-12 | 이미지로 그린 나무 줄기

그라디언트 사용하기

아직도 줄기 부분이 마음에 들지 않는가? 우리도 마찬가지다. 그라디언트를 이용해서 나무 줄기

부분을 개선해보자. 이전 절에서 패턴을 적용했던 것처럼 그라디언트는 선이나 면에 색을 채울 때

색상의 점진적인 알고리즘 샘플링을 적용한다. 그라디언트를 적용하려면 다음과 같이 세 단계가

필요하다.

1. 그라디언트 객체를 만든다.

2. 그라디언트 객체에 색상 변환을 멈출 수 있게 정지점 색상을 적용한다.

3. 컨텍스트의 ®llStyle이나 strokeStyle을 그라디언트에 설정한다.

선을 따라 색상이 부드럽게 변하는 것을 그라디언트라고 이해하면 쉽다. 예를 들어, 매개변수로

A 지점과 B 지점을 전달해서 그라디언트를 생성한 경우 A에서 B지점의 방향으로 색이 변하면서

선을 긋거나 색을 채우게 된다.

그라디언트 객체에 addColorStop() 함수를 사용하면 출력될 색상을 지정할 수 있다. 이 함수는

오프셋과 색상을 매개변수로 받고 오프셋 위치까지 지정한 색상으로 선을 긋거나 색을 채운다. 오

프셋 위치는 0.0과 1.0 사이의 값으로 지정하며, 그라디언트 효과가 적용될 범위를 나타낸다.


(0, 0) 지점에서 (0, 100) 지점까지 그라디언트를 만들고, 오프셋 0.0에 흰색, 오프셋 1.0에 검정

색을 지정한 뒤 stroke이나 ®ll을 실행하면 (0, 0) 지점에서 (0, 100) 지점까지 흰색에서 검정색으로

색상이 부드럽게 변하는 효과를 볼 수 있다.

색상 값에 알파값(예를 들면 투명으로)을 지정할 수 있는데, 알파 컴포넌트를 가지는 CSS의

rgba() 함수처럼 다른 방식으로 색상 값을 표현해야 한다.

예제 2-16은 ®llRect()와 두 번의 그라디언트를 적용해 더 섬세하게 나무 줄기를 표현한 예제다.

예제 2-16 ㅣ 그라디언트 사용하기

// 나무줄기를 가로지르는 3단계 그라디언트를 생성한다.

var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);

// 줄기의 시작 부분은 중간 채도의 갈색이다.

trunkGradient.addColorStop(0, '#663300');

// 줄기의 좌측은 좀 더 밝은 색상으로 설정한다.

trunkGradient.addColorStop(0.4, '#996600');

// 줄기의 오른쪽 끝 부분은 어둡게 설정한다.


// 컨텍스트의 fillStyle 속성에 그라이언트를 적용해 줄기를 그린다

context.fillStyle = trunkGradient;


// 다음으로 나무 그림자에 사용할 세로 방향의 그라디언트를 생성한다.

var canopyShadow = context.createLinearGradient(0, -50, 0, 0);

// 그림자의 시작 부분은 50%의 알파값이 적용된 검정색으로 설정한다.

canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');

// 조금 아랫부분에는 아예 투명 값으로 설정한다. 나머지 부분은 그림자가 생기지 않게 설정한다.

canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');

// 줄기 그라디언트의 윗 부분에 그림자 그라디언트를 그린다.

context.fillStyle = canopyShadow;


그림 2-13을 보면 두 개의 그라디언트가 잘 적용된 것을 확인할 수 있다. 굴곡도 생겼고 살짝 그

림자도 보인다.


그라디언트가 적용된 부분

그림 2-13 | 줄기에 그라디언트가 적용된 나무

예제에서 사용한 선형 그라디언트 외에도 HTML5 캔버스 API는 방사형 그라디언트 옵션도 지

원한다. 두 원 사이의 원뿔에 적용할 색상 단계를 지정하면 된다. 방사형 그라디언트는 선형 그라

디언트처럼 정지점 색상이 사용되지만 예제 2-17과 같은 매개변수가 필요하다.

예제 2-17 ㅣ 방사형 그라디언트를 적용한 예제

createRadialGradient(x0, y0, r0, x1, y1, r1)

이 예제에서 처음 세 개의 인자는 원의 중심 좌표(x0, y0)와 반지름(r0)을 뜻하며, 나머지 세 개

의 인자는 두 번째 원의 원점(x1, y1)과 반지름(r1)을 나타낸다. 그라디언트는 두 원 사이의 영역을

가로질러 적용된다.

배경 패턴 사용하기

이미지를 직접 렌더링하는 것도 유용하지만 CSS처럼 이미지를 배경 패턴으로 사용하면 적합한

경우가 있다. 앞에서는 단색으로 선을 그리거나 색을 채우는 방법을 살펴봤다. HTML5 캔버스

API는 패스에 선을 그리거나 색을 채울 때 이미지를 반복 패턴으로 사용할 수 있는 방법을 제공

한다.


곡선으로 표현했던 오솔길에 배경 이미지를 채워 좀 더 세련되게 만들어보자. 여기서는 나무 껍

질 이미지 대신 자갈 이미지를 사용하겠다. 예제 2-18은 drawImage() 대신 createPattern() 함수

를 호출한다.

예제 2-18 ㅣ 배경 패턴 사용하기

// 오솔길의 배경 이미지를 자갈 이미지로 대체한다.

var gravel = new Image();

gravel.src = "gravel.jpg";

gravel.onload = function () {

drawTrails();

}

// 직선을 그리던 부분을 배경 패턴을 반복하는 것으로 대체한다.

context.strokeStyle = context.createPattern(gravel, 'repeat');


context.stroke();

보다시피 패스를 그릴 때는 여전히 stroke()를 호출한다. 하지만 컨텍스트에 맨 처음 strokeStyle

속성을 설정할 때 context.createPattern()의 실행 결과를 할당했다. 첫 번째 매개변수로 사용되는

이미지는 캔버스에서 사용되기 전에 로드가 끝난 상태여야 한다. 두 번째 매개변수는 반복 패턴을

설정한 값으로 아래 표 2-2에 속성값의 종류를 표시했다.

표 2-2. 반복 패턴

반복 패턴 값

repeat (기본값) 양방향으로 이미지가 반복된다.

repeat-x 가로 방향으로 이미지가 반복된다

repeat-y 세로 방향으로 이미지가 반복된다

no-repeat 이미지가 반복되지 않는다

그림 2-14는 오솔길에 배경 이미지를 사용한 결과를 보여준다.


그림 2-14 | 배경 패턴을 반복해서 표현한 숲길

캔버스 객체 크기 조절하기

숲이라면 여러 그루의 나무가 있을 것이다. 이번에는 여러 그루의 나무를 좀더 쉽게 만들기 위해

나무를 그리는 부분을 drawTree()라는 하나의 루틴으로 따로 떼어보자. 예제 2-19를 보자.

예제 2-19 ㅣ 나무 객체를 그리는 함수

// 재사용을 위해 나무를 그리는 부분을 별도의 함수로 옮긴다

function drawTree(context) {

var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);


trunkGradient.addColorStop(0.4, '#996600');


context.fillStyle = trunkGradient;


var canopyShadow = context.createLinearGradient(0, -50, 0, 0);

canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');

canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');

context.fillStyle = canopyShadow;





context.lineJoin = 'round';


context.stroke();


context.fill();

}

보다시피 drawTree() 함수에는 캐노피, 나무 줄기 및 그라디언트를 그리는 코드가 모두 포함돼

있다. 이제 예제 2-20처럼 context.scale() 같은 변환 루틴을 사용해서 두 번째 나무를 다른 곳에

더 크게 그리겠다.

예제 2-20 ㅣ 나무 객체 그리기

// (130, 250) 위치에 첫 번째 나무를 그린다

context.save();


drawTree(context);

context.restore();

// (260, 500) 위치에 두 번째 나무를 그린다.

context.save();


// 나무 크기를 두 배로 늘인다

context.scale(2, 2);

drawTree(context);

context.restore();

scale 함수는 변경할 크기의 x, y 값을 매개변수로 받는다. 각 매개변수는 원래 크기에서 얼마나

더 크거나 작게 바꿀지를 의미한다. 매개변수 x가 2이면 가로로 2배 커지고, 매개변수 y가 0.5이면

절반 크기로 줄어든다. 이 루틴을 사용해서 두 번째 나무가 그려진 결과를 그림 2-15에서 확인할

수 있다.


그림 2-15 | 더 크게 그려진 나무

SHAPE과 PATH 루틴은 항상 원본에서 실행할 것!

브라이언 왈: 이 예제는 shape과 path를 왜 원본에서 실행해야 하는지 보여줍니다. 예제 코드

에서처럼 원하는 대로 모두 바꾼 후에 변환하세요. scale()과 rotate()와 같은 변형은 원본을 변

경하기 때문입니다.

원본을 모양을 바꾸려고 rotate()를 실행했다면 rotate()는 원본 자체가 아닌 원본이 놓인 판

을 돌립니다. 같은 이치로, 특정 위치에 원본을 옮겨놓기 전에 크기를 바꾸면 변경된 크기에

비례해 모든 위치가 곱절이 될 것입니다. 그래서 scale()을 실행하고 나면 아예 캔버스에서 사

라지는 경우도 있어서 scale() 연산을 했는데 왜 이미지가 지워졌는지 의아해 하실 수도 있을

겁니다.

캔버스 변형 이용하기

변형(transform) 연산은 scale과 translate에 국한되지 않는다. context.rotate(angle) 함수를 실행

해서 컨텍스트를 돌릴 수도 있고, 렌더링 패스를 자르는 것과 같은 고급 연산을 변형하면서 바로

수정할 수도 있다. 표시된 이미지를 돌리고 싶으면 예제 2-21처럼 단순히 몇 가지 함수만 호출하면

된다.


예제 2-21 ㅣ 이미지 회전

context.save();

// 회전 각도를 라디안으로 지정

context.rotate(1.57);

context.drawImage(myImage, 0, 0, 100, 100);

context.restore();

하지만 예제 2-22에서는 그림자 효과를 만들기 위해 패스 좌표를 임의로 변경할 수 있음을 보여

준다.

예제 2-22 ㅣ 변환 사용하기

// 나무 줄기를 가로지르는 3단계 그라디언트를 생성한다.

// 나중을 위해 현재 캔버스의 상태를 저장한다.

context.save();

// 그림자로 사용될 비스듬한 나무를 생성하기 위해 Y값 만큼 X값을 늘려 잘라낸다.

context.transform(1, 0,-0.5, 1, 0, 0);

// 그림자로 사용될 나무의 크기를 높이 기준으로 60%로 줄인다.

context.scale(1, 0.6);

// 그림자로 사용될 나무에 20% 알파값을 적용하고 검정색을 채운다.

context.fillStyle = 'rgba(0, 0, 0, 0.2)';


// 그림자 효과가 적용된 나무를 다시 그린다.


context.fill();

// 마지막으로 저장된 상태로 캔버스를 복원한다.

context.restore();

2차원 드로잉 시스템의 기초가 되는 행렬 수학에 익숙한 경우에만 위 예제에서처럼 직접 컨텍

스트 변환을 수정하기 바란다. 변환에 적용된 수학을 보면 그림자로 사용할 회색 나무를 자르기

위해 Y값 만큼 X값을 바꿨다. 그리고 크기를 줄이기 위해 60%를 매개변수로 설정했다.

잘려진 나무 그림자가 가장 먼저 그려진 데 주목하자. 나무 그림자보다 나무의 Z-순서(캔버스 객

체를 덮는 순서)가 앞선다. 물론 RGBA 값을 설정해서 그림자는 20%의 알파값이 설정된 상태다.


이렇게 하면 밝은 반투명의 그림자가 만들어진다. 그림 2-16에서 결과를 확인할 수 있다.

그림 2-16 | 변형된 그림자가 적용된 나무

캔버스 텍스트 사용하기

HTML5 캔버스 API의 텍스트 함수로 화면 상단에 멋진 제목을 추가해보자. 캔버스에 텍스트를

그리는 것은 패스 객체를 그리는 것과 크게 다르지 않다. 텍스트는 선이나 색으로 채울 수 있고 변

환과 스타일을 적용할 수 있다.

텍스트는 컨텍스트 객체에서 제공하는 아래의 두 가지 함수로 그릴 수 있다.

▶ fillText(text, x, y, maxwidth)

▶ strokeText(text, x, y, maxwidth)

두 함수 모두 그리고자 하는 곳에 텍스트를 그릴 수 있다. maxwidth 매개변수를 전달하면 해당

크기에 맞게 폰트의 크기가 자동으로 조절된다. measureText 함수는 현재 컨텍스트 설정을 토대

로 텍스트를 그렸을 때의 너비 값이 담긴 매트릭스 객체를 반환한다.

브라우저가 텍스트를 그릴 때와 같이 표 2-3과 같은 CSS와 거의 흡사한 컨텍스트 속성을 이용

하면 다양한 텍스트를 그릴 수 있다.


표 2-3. 배경 패턴 반복에 적용 가능한 설정

속성 값 설명

Font CSS 폰트명 예: italic Arial, sans-serif

textAlign start, end, left, right, center 기본값은 start

textBaseline top, hanging, middle, alphabetic,

ideographic, bottom

기본값은 alphabetic

모든 컨텍스트 속성은 새로운 값으로 설정되거나 현재 값을 얻어와서 설정된다. 예제 2-23은 나

무 껍질 이미지로 배경 패턴을 채운, 커다란 Impact체의 텍스트 메시지를 생성한다. 캔버스 상단

중앙에 텍스트를 보이게끔 최대 너비와 가운데 정렬을 선언했다.

예제 2-23 ㅣ 캔버스 텍스트 사용하기

// 캔버스에 타이틀 텍스트 그리기

context.save();

// 폰트는60 픽셀 크기의 Impact체

context.font = "60px impact";

// 텍스트를 갈색으로 채운다


// 텍스트를 가운데로 정렬한다

context.textAlign = 'center';

// 텍스트를 중앙에 표시하기 위해 최대 너비를 설정한다

context.fillText('Happy Trails!', 200, 60, 400);

context.restore();

그림 2-17에서 결과를 확인할 수 있다.

그림 2-17 | 배경 패턴으로 채운 텍스트


그림자 적용

마지막으로 캔버스에 내장된 그림자 API를 이용해 텍스트에 번진 그림자 효과를 만들어보자. 앞

서 HTML5 캔버스 API에서도 간단한 그림자를 만들 수 있기는 하지만, 다른 여러 그래픽 효과처

럼 그림자 효과를 사용하면 더 좋은 결과를 보여준다.

표 2-4에 나온 것처럼 그림자는 몇 개의 전역 컨텍스트 속성으로 조정할 수 있다.

표 2-4. 그림자 속성

속성 값 설명

shadowColor CSS 색상 값 알파 컴포넌트도 사용할 수 있다.

shadowOffsetX 픽셀 값 양수, 음수 값에 따라 각각 그림자를 오른쪽, 왼쪽으로 움직인다.

shadowOffsetY 픽셀 값 양수, 음수 값에 따라 그림자를 아래, 위쪽으로 움직인다.

shadowBlur 가우시안 블러 값이 클수록 그림자 경계가 흐릿해진다.

shadowColor 또는 나머지 속성 가운데 하나라도 기본값이 아닌 값으로 설정하면 어떠한 패스,

텍스트, 이미지에서도 그림자 효과를 줄 수 있다. 예제 2-24는 타이틀 텍스트에 그림자를 적용하

는 방법을 보여준다.

예제 2-24 ㅣ 그림자 적용하기

// 20%의 알파값이 설정된 검정색으로 텍스트의 그림자를 설정한다

context.shadowColor = 'rgba(0, 0, 0, 0.2)';

// 그림자를 오른쪽으로 15픽셀, 위로 10픽셀 옮긴다

context.shadowOffsetX = 15;

context.shadowOffsetY = -10;

// 그림자를 약간 번지게 한다

context.shadowBlur = 2;

캔버스의 상태를 복원하거나, 그림자 속성값을 초기화하지 않고도 코드를 몇 줄만 추가해서 그

림자를 그릴 수 있다. 그림 2-18을 보자.


그림 2-18 | 그림자 효과가 적용된 타이틀 텍스트

이처럼 CSS로 만든 그림자는 위치 값만 가지고 있고, transform을 사용해서 만든 그림자와 연

관돼 있지 않다. 일관성을 유지하려면 한 가지 방법으로 그림자를 적용하는 편이 좋다.

픽셀 데이터 다루기

눈에 보이지는 않는 캔버스 API의 가장 유용한 측면 중 하나는 개발자가 캔버스의 근본에 해당하

는 픽셀을 다룰 수 있다는 것이다. 픽셀을 다룰 수 있다는 것은 두 가지 작업이 가능하다는 의미

다. 먼저 픽셀 값을 숫자 배열로 다룰 수 있는 것은 기본이고, 그 값을 수정하고 캔버스에 적용하는

방법도 매우 간단하다. 실제로 이번 장에서 다룬 렌더링 명령은 전부 무시하고 픽셀 값만을 변경

해서 완벽하게 캔버스를 다룰 수 있다. context API의 세 가지 함수를 이용하면 이렇게 할 수 있다.

그 첫 번째는 context.getImageData(sx, sy, sw, sh)다. 이 함수는 정수로 구성된 캔버스 디스플

레이의 현재 상태를 표현하는 값을 반환한다. 반환된 객체의 세 가지 속성은 다음과 같다.

▶ width: 픽셀 데이터의 각 행을 구성하는 픽셀의 개수

▶ height: 픽셀 데이터의 각 열을 구성하는 픽셀의 개수

▶ data: 캔버스의 각 픽셀의 실제 RGBA 값으로 구성된 일차원 배열. 각 픽셀은 0에서 255 사

이의 red, green, blue, 알파 컴포넌트에 해당하는 값을 가진다. 따라서 각 픽셀은 데이터 배


열에 담긴 네 개의 정수 값에 해당한다. 그림 2-19처럼 데이터 배열은 왼쪽에서 오른쪽으

로, 위에서 아래 방향으로 픽셀 정보로 채워진다(예를 들어 첫 번째 행, 그 다음 두 번째 행

과 같은 순서로)

1픽셀 크기의 검정색을 포함한 10x10 픽셀 크기의

캔버스

(2, 2) 좌표에 위치한 검정색 픽셀의 RGBA 값

캔버스 이미지 픽셀 데이터의

내부 자료 구조

이미지 연산

그림 2-19 | 픽셀 데이터의 내부 자료 구조

getImateData()를 호출해서 반환된 데이터는 네 개의 매개변수로 정의된 영역으로 제한되는데,

x, y 좌표에 width, height 크기만큼의 사각형으로 둘러싸인 캔버스 픽셀이 구해진다. 캔버스 전체

픽셀의 데이터를 접근하고 싶다면 getImageData(0, 0, canvas.width, canvas.height)를 실행하면

된다.

각 픽셀은 네 개의 이미지 데이터 값으로 표현되므로 특정 픽셀의 인덱스 값을 정확히 구하는

것이 다소 어려울 수 있다. 공식은 다음과 같다.

특정 너비와 높이를 지닌 캔버스에서 (x, y) 좌표에 위치한 임의 픽셀의 구성값은 다음과 같은

공식으로 알아낼 수 있다.


▶ Red component: ((width * y) + x) * 4

▶ Green component: ((width * y) + x) * 4 + 1

▶ Blue component: ((width * y) + x) * 4 + 2

▶ Alpha component: ((width * y) + x) * 4 + 3

이미지 데이터 객체에 접근하고 나면 각 값이 0에서 255사이의 정수값을 가지기 때문에 픽셀 값

을 수정하기가 매우 쉽다. context.putImageData(imagedata, dx, dy) 함수를 이용하면 하나 또는

여러 픽셀의 red, green, blue, 알파 값을 변경해서 캔버스를 쉽게 업데이트할 수 있다.

putImageData() 함수는 이미지 데이터를 그대로 넘겨서 캔버스를 수정할 수도, 원본으로 되돌

릴 수도 있게 해준다. 함수가 실행되면 이미지 데이터 가운데 매개변수로 지정한 픽셀의 새로운 값

이 반영되어 바로 업데이트된다. dx와 dy 매개변수는 데이터 배열의 시작부터 업데이트하고자 하

는 위치까지의 차이를 지정한다.

마지막으로 빈 캔버스 데이터로 작업을 시작하고 싶다면 context.createImagedata(sw, sh)를 실

행해서 캔버스 객체와 연동된 새로운 이미지 데이터를 생성할 수 있다. 이 데이터는 요청할 당시에

현재 캔버스 상태를 표현하지 않더라도 코드를 통해 전과 같이 변경될 수 있다.

캔버스 보안 구현

이전 절에서 설명한 픽셀 조작을 이용할 때 유념해야 할 것이 있다. 대부분의 개발자는 정당한 방

법으로 픽셀을 조작하겠지만 경우에 따라 이를 악용할 수도 있다. 이러한 이유로 origin-clean 1

캔버스라는 개념이 명세에 포함되어 해당 페이지에 포함된 소스를 제외하고 손상된 이미지 캔버

스는 데이터에 접근할 수 없다.

그림 2-20과 같이 http://www.example.com에서 제공된 페이지가 canvas 요소를 가지고 있다

면 http://www.remote.com에 있는 캔버스의 이미지를 가져와서 그릴 수도 있을 것이다. 결국 어

떤 웹 페이지 안의 이미지이건 캔버스에 그릴 수 있는 것이다.

1 　 (옮긴이) 다른 도메인의 이미지나 비디오를 사용할 경우 해당 캔버스의 origin-clean 플래그는 false로 설정된다.


캔버스

웹 페이지

인터넷

손상된 캔버스

그림 2-20 | 로컬 및 외부 이미지 소스

그러나 캔버스 API가 등장하기 전까지는 다운로드한 이미지의 픽셀 값을 프로그램을 사용해서

가져오는 것이 불가능했다. 다른 사이트의 이미지를 페이지에 보여줄 수는 있지만 읽거나 복사는

할 수 없었다. 스크립트를 통해 다른 도메인의 이미지 데이터를 읽을 수 있다면 사용자의 사진이나

웹상에 널린 민감한 온라인 이미지 파일이 사실상 공유될 것이다.

이를 방지하고자 원격에서 가져온 이미지가 포함된 캔버스는 getImageData() 함수가 실행될 때

보안 예외를 발생시킨다. 이미지에 수정을 가한 후에 캔버스에서 이미지 데이터에 접근하지 않는

다면 캔버스에 다른 도메인의 이미지를 그리는 데는 문제가 없다. 이러한 제약사항을 이해하고 안

전하게 이미지를 다뤄야 한다.

HTML5 캔버스 애플리케이션 만들기

그래프, 차트, 이미지 편집 등 캔버스 API로 만들 수 있는 애플리케이션은 매우 다양하다. 하지만

이러한 애플리케이션 가운데 가장 흥미로운 것은 기존 콘텐츠를 수정하거나 가공하는 것이다. 콘

텐츠를 가공하는 방식 가운데 가장 잘 알려진 것이 바로 히트맵(heatmap)이다. 이름만 보면 온도

측정과 관련 있는 듯 하지만 여기서 의미하는 히트(heat)는 측정 가능한 모든 활동을 의미한다. 활

동성이 높은 영역은 지도에 따뜻한 색상(빨강, 노랑, 흰색)으로 표시되고, 활동성이 떨어지는 영역

은 아예 색상이 변하지 않거나 단순히 검정 또는 회색으로 색상이 변한다.

예를 들어 히트맵은 도시의 교통량이나 지구상의 태풍 활동을 나타내는 데 사용된다. 이러한

데이터는 지도 위에 캔버스를 올려서 HTML5로 쉽게 구현할 수 있다. 지도상의 캔버스에는 활동


데이터를 기반으로 히트 레벨이 그려진다.

지금까지 배운 캔버스 API를 이용해 간단한 히트맵을 만들어보자. 여기서는 맵상의 마우스 움

직임을 히트 데이터로 사용하겠다. 맵상에서 마우스를 움직이면 히트가 증가하고, 특정 지점에 마

우스를 올려두면 온도가 최대 수치로 급격히 증가한다. 그림 2-21과 같이 샘플 케이스를 이용해 히

트맵 디스플레이를 표현할 수 있다.

초기화

히트맵

그림 2-21 | 히트맵 애플리케이션

히트맵 애플리케이션의 결과 화면을 확인했으니, 이제 코드 예제를 살펴보자. 코드 예제는 온라

인에서 내려 받을 수 있다.

HTML 요소부터 시작하자. 이 화면에서 HTML은 타이틀과 캔버스, 그리고 히트맵을 초기화하

는 버튼으로 구성된다. 캔버스의 배경에는 예제 2-25와 같이 CSS를 이용해 mapbg.jpg를 적용했다.

예제 2-25 ㅣ 히트맵의 canvas 요소

<style type="text/css">

#heatmap {

background-image: url("mapbg.jpg");

}

</style>

<h2>Heatmap</h2>

<canvas id="heatmap" class="clear" style="border: 1px solid ; " height="300"

width="300"> </canvas>

<button id="resetButton">초기화</button>


예제에서 나중에 사용할 변수도 선언한다.

var points = {};

var SCALE = 3;

var x = -1;

var y = -1;

다음으로 전역 드로잉 연산을 위해 캔버스의 투명도를 높게 설정하고, 이전에 그린 픽셀보다 밝

게 그려지도록 합성 모드로 설정한다.

그러고 나서 예제 2-26과 같이 마우스가 움직이거나 0.1초마다 화면을 업데이트하는 addToPoint

핸들러를 설정한다.

예제 2-26 ㅣ loadDemo() 함수

function loadDemo() {

document.getElementById("resetButton").onclick = reset;

canvas = document.getElementById("heatmap");

context = canvas.getContext('2d');

context.globalAlpha = 0.2;

context.globalCompositeOperation = "lighter";

function sample() {

if (x != -1) {

addToPoint(x,y);

}

setTimeout(sample, 100);

}

canvas.onmousemove = function(e) {

x = e.clientX - e.target.offsetLeft;

y = e.clientY - e.target.offsetTop;

addToPoint(x,y);

}

sample();

}

사용자가 초기화 버튼을 클릭하면 예제 2-27과 같이 clearRect() 함수를 이용해 canvas 영역 전

체가 원래 상태로 초기화된다.


예제 2-27 ㅣ reset() 함수

function reset() {

points = {};

context.clearRect(0,0,300,300);

x = -1;

y = -1;

}

다음으로 캔버스에 히트를 그릴 때 쓸 색상 참조 테이블을 만든다. 예제 2-28은 가장 어두운 색

부터 밝은 색까지 밝기에 따른 색상 범위를 보여준다. 이러한 색상은 화면상의 히트 레벨을 다르게

표현하는 데 사용된다. 강도가 클 수로 더 밝은 색상이 반환된다.

예제 2-28 ㅣ getColor() 함수

function getColor(intensity) {

var colors = ["#072933", "#2E4045", "#8C593B", "#B2814E", "#FAC268", "#FAD237"];

return colors[Math.floor(intensity/2)];

}

마우스가 움직이거나, 마우스가 캔버스 위에 올라가면 점이 그려진다. 점은 마우스가 한 곳에

오래 머물수록 더 커지고 밝아진다. 예제 2-29를 살펴보자. 주어진 반지름으로 context.arc() 함수

를 사용해서 원을 그리는데, getColor() 함수에 반지름을 보내면 그 크기가 클수록 더 밝고, 따뜻

한 색상으로 채워진다.

예제 2-29 ㅣ drawPoint 함수

function drawPoint(x, y, radius) {

context.fillStyle = getColor(radius);

radius = Math.sqrt(radius)*6;


context.arc(x, y, radius, 0, Math.PI*2, true);

context.closePath();

context.fill();

}


addToPoint() 함수(마우스가 움직이거나 그려진 점 위에 위치할 때마다 호출되는 함수)에서 히

트 값은 증가되고 캔버스의 특정 지점에 저장된다. 예제 2-30과 같이 점의 최댓값은 10이다. 특정

픽셀의 현재 히트 값을 알고 나면 해당 픽셀의 히트/반지름 값이 drawPoint() 함수에 전달된다.

예제 2-30 ㅣ addToPoint() 함수

function addToPoint(x, y) {

x = Math.floor(x/SCALE);

y = Math.floor(y/SCALE);

if (!points[[x,y]]) {

points[[x,y]] = 1;

} else if (points[[x,y]]==10) {

return;

} else {

points[[x,y]]++;

}

drawPoint(x*SCALE,y*SCALE, points[[x,y]]);

}

마지막으로 loadDemo() 함수가 윈도우가 완전히 로드된 뒤에 호출되게끔 아래와 같이 선언

한다.

window.addEventListener("load", loadDemo, true);

백 줄 남짓한 코드로 짧은 시간 동안 플러그인이나 외부 렌더링 기술 없이도 HTML5 캔버스

API를 이용해 얼마나 많은 것을 할 수 있는지 살펴봤다. 아울러 무한한 데이터 소스를 아주 쉽게

단순하고도 효과적으로 시각화할 수 있음을 확인했다.

기타 예제: 전체 페이지를 덮는 유리 패널

예제 애플리케이션에서 그래픽의 맨 위에 캔버스를 적용하는 방법을 살펴봤다. 브라우저의 전체

또는 일부 영역에도 캔버스를 덮을 수 있다. 이런 기법을 보통 유리 패널(glass pane)이라고 한다.

유리 패널 캔버스를 웹 페이지 맨 위에 올리고 나면 근사하고 편리한 시도를 해볼 수 있다.

예를 들어, 페이지 내의 모든 DOM 요소의 절대 위치를 알아내는 루틴을 이용해 웹 애플리케이

션 사용자에게 단계적인 사용법을 알려줄 수도 있다.


또는 임의의 웹 페이지에서 마우스 이벤트를 이용해 사용자의 피드백을 받을 수도 있다. 유리 패

널 캔버스를 사용할 때는 다음 사항에 주의한다.

▶ 캔버스를 절대 위치로 설정하고 위치, 너비, 높이값을 명시한다. 너비와 높이값을 지정하지

않으면 캔버스의 크기는 0px이 될 것이다.

▶ 캔버스에 z-index 값을 높게 설정해서 눈에 보이는 모든 콘텐츠보다 위에 떠 있게 해야 한

다. 캔버스가 맨 위에 그려져야 진가를 발휘할 수 있다.

▶ 유리 패널 캔버스는 그 아래에 위치한 콘텐츠에서 일어나는 이벤트를 막을 수 있으므로 필

요할 때만 사용하고, 필요하지 않을 경우 삭제해야 한다.

정리

앞서 살펴본 바와 같이 HTML5 캔버스 API는 도큐먼트 핵을 쓰지 않고도 웹 애플리케이션의 외

관을 수정하는 매우 강력한 방법을 제공한다. 이미지, 그라디언트, 복잡한 패스는 표현하고자 하

는 대로 그려지고 조합된다. 원본 이미지를 수정하려면 먼저 이미지를 로딩해야 한다는 점을 기억

하고, 외부 이미지 소스를 캔버스에 사용할 때 보안에 관한 제약사항을 유념해야 한다. 하지만 캔

버스의 강력한 위력을 이해했다면 기존 웹 페이지에서 불가능했던 애플리케이션을 만들 수 있을

것이다.

프로 html5 프로그래밍 : 혁신적인 ria 개발을 위한 차세대 표준 api

Documents