구글의 두들 효과를 내볼까요?

구글은 역사적인 기념일 등에 자신의 구글 로고에다 그래픽적인 요소를 더하여 재미난 퍼포먼스를 보여주고 있는데, 이를 두들(Doodle)이라고 하죠.

구글 두들에 대해 아시나요?

구글 두들에 대한 보다 자세한 샘플들은 아래에서 보실 수 있습니다. 

구글 두들 페이지: http://www.google.com/doodles/finder

오늘 소개해드릴 [인터랙티브 웹 콘텐츠 제작 프로젝트]는 이러한 두들 콘텐츠의 기술을 분석한 내용을 바탕으로 기획하고 집필되었습니다. 구글 두들에는 다양한 기술들이 사용되고 있는데, 이 책에는 기술적 중복을 제거한 7개의 샘플에 핵심 기술을 담아 실제 프로젝트로 보여주고 있습니다. 그 핵심 기술이란 것은 바로 HTML5와 CSS3 그리고 JavaScript이고요. 

춤추는 꽃, 중력 브라우저, 비디오 크로마키, 우쿠렐레, 코믹 스타일, 팝업북, 춤추는 꽃-모바일편, 이렇게 7가지 프로젝트를 통해 이에 적용된 HTML5와 CSS3, 그리고 JavaScript의 활용법을 보여주고 있어서 정말 재미있게 공부하실 수 있게 구성하였답니다. 실제 완성된 프로젝트를 한번 보실까요? (브라우저에 따라 일부 콘텐츠가 보이지 않을 수도 있습니다. 구글 크롬에서는 모두 보실 수 있고요)

완성된 프로젝트: http://www.happpylee.com/book2/

이번 책에는 또 다른 볼 거리(?)가 있는데요, 바로 이 책에 사용된 이미지의 원작자입니다. 이 원작자는 다름 아닌 저자 이명희 님의 초등학생 딸인 하은이가 직접 그린 그림들입니다. 아버지가 집필하는 책에 초등학생 딸이 참여하여 책을 함께 만드는 모습은 상상만 해도 흐믓합니다. 그리고 그 딸은 어떤 기억을 지니고 자랄지 궁금하기도 하고, 기대가 되기도 하네요. 

7가지 프로젝트에서는 어떤 내용을 배울지 간단히 정리해드립니다. 

• PROJECT 1 _ 춤추는 꽃

HTML5에서 새롭게 선보이는 캔버스(Canvas) 기술을 설명하고 있습니다. 캔버스에 이미지를 출력하고 애

니메이션을 구현하는 방법을 이해하고 학습합니다.

• PROJECT 2 _ 중력 브라우저

Box2dWeb 물리 라이브러리와 다음(Daum)의 오픈 API를 캔버스 기술에 접목하여 한동안 회자되었던

‘google gravity’와 비슷한 콘텐츠를 만들어 봅니다.

• PROJECT 3 _ 비디오 크로마키

HTML5에서 비디오를 사용하는 방법을 익혀 봅니다. 또한 비디오를 캔버스와 접목하여 픽셀을 조작하는

방법 또한 익혀 봅니다.

• PROJECT 4 _ 우쿨렐레

HTML5에서 오디오를 사용하는 방법을 익혀 봅니다. 또한 비동기 리소스 로더인 yepnope.js의 사용법을

익히며 왜 비동기적인 리소스 로더가 필요한지 살펴 봅니다.

• PROJECT 5 _ 코믹 스타일

CSS3를 사용하여 카툰 스타일의 콘텐츠를 제작해 봅니다. 이때 2D 변형에 대해 이해해 봅니다.

• PROJECT 6 _ 팝업북

CSS3에서 사용하는 3D 변형을 이해하고 간단한 팝업북을 제작해 봅니다.

• PROJECT 7 _ 춤추는 꽃, 모바일 편

1장에서 만든 PC 기반의 캔버스 콘텐츠를 모바일에 최적화된 콘텐츠로 변경해 봅니다. 이때 모바일에서만

사용할 수 있는 터치 이벤트를 학습하며, 더불어 미디어 쿼리를 통한 다양한 분기 처리를 이해해 봅니다.

아, 그리고 빠뜨릴 뻔했는데요, 이 책을 소개하는 짤막한 동영상을 저자께서 직접 제작하여 유투브에 올리셨답니다. 한번 살펴보시고요. 

아래는 책의 일부를 미리 보실 수 있도록 PDF 파일을 올려두었습니다.(차례, 이 책에 대하여, 감사의 말, 1장 춤추는 꽃의 이론학습)

인터랙티브웹콘텐츠제작프로젝트_sample.pdf

출간 후 자세한 내용으로 다시 포스팅해드리겠습니다. 그러고 보니 출간이 며칠 남지 않았네요. ㅠㅠ

예약판매 사이트(가나다순)

[강컴]   [교보문고]   [도서11번가]   [반디앤루니스]   [알라딘]   [예스이십사]   [인터파크]