섹션

[책소개] 인터렉티브한 웹 컨텐츠 제작을 위한 "엣지 애니메이트 CC 더[THE] 쉽게 배우기" 활용 가이드

-부록 DVD에 예제 파일 및 동영상 해설 파일 수록을 통해 공부의 편의성 더해

 

▲영진닷컴
▲영진닷컴

[책소개]
이 책은 인터랙션 콘텐츠를 제작하기 위해서는 HTML5, CSS3, JavaScript를 잘 다룰 수 있는 전문적인 지식이 필요 하지만, 엣지 애니메이트는 이 3가지 기술과 jQuery를 잘 다루지 못해도 다양한 애니메이션을 구현할 수 있도록 도와줍니다.

엣지 애니메이트란?

웹상에서 구현되는 다양한 모션 그래픽과 애니메이션을 제작하는 툴입니다.  

이 책에서는 엣지 애니메이트 CC의 핵심 기능들을 초보자들도 쉽게 익힐 수 있도록 구성되어 있습니다. 또한 다양한 실습을 통해 웹뿐만 아니라 모바일 분야에서도 다양한 인터랙션 제작할 수 있습니다.

또한 입문자들의 눈높이에 알맞은 설명과 자세한 따라하기로 구성하였습니다. 엣지 애니메이트 CC의 핵심 기능을 8개의 PART로 나눠 설명하고, 각각의 PART는 몇 개의 Lesson으로 이루어집니다. Lesson의 학습에 앞서 '기초 탄탄'에서는 메뉴나 대화상자 등 엣지 애니메이트 CC의 주요 기능들을 미리 알아보고, 'Step'은 따라하기 형식으로 구성하여 엣지 애니메이트 CC의 기능을 쉽게 익힐 수 있도록 하였습니다. 'Tip', '연관 검색', '문제 해결'과 같은 요소들은 엣지 애니메이트 CC를 더욱 유기적으로 학습할 수 있도록 도와줄 것입니다. 그리고 'PART SUMMARY'와 'Self Test'에서는 각 PART에서 배운 내용을 되짚어보고 동영상 해설 파일을 통해 눈과 귀가 즐거워지는 학습이 될 수 있도록 꾸몄습니다.

한편 이 책의 부록 DVD에는 각 Part별 예제 파일과 Self Test의 풀이 과정을 담은 동영상 해설 파일을 담아 제공합니다.

■이 책은 크게 여덟 부분으로 나뉜다

ㆍ엣지 애니메이트 기본기 다지기
엣지 애니메이트를 이용해 HTML5 인터랙션을 자유자재로 구현할 수 있습니다. 시작하기에 앞서 엣지 애니메이트의 등장 배경 및 특징, 구성 요소와 화면 구성, 환경설정 등 엣지 애니메이트에 대해 파악하는 기초 다지기 시간을 가져보겠습니다. 웹뿐만 아니라 모바일 분야에서 다양한 인터랙션을 구현할 수 있는 매력적인 엣지 애니메이트의 세계로 들어가 보겠습니다.

ㆍ애니메이션 기본기 다지기
엣지 애니메이트를 배우는 가장 기본 목적인 애니메이션 제작입니다. 원리는 간단하지만 매력적이고 멋진 애니메이션을 만들기 위해서는 많은 노력이 필요합니다. 애니메이션의 패턴, [Timeline] 패널, Transition, Keyframe, Toggle Pin, Easing에 대해 알아봅니다.

ㆍ엣지 애니메이트로 자유롭게 드로잉하기
애니메이션을 제작할 때는 '무엇을(What)/언제(When)/어떻게(How)' 이 3가지를 기억하면 편하게 작업할 수 있습니다. 이 파트는 무엇을(What)에 해당하는 오브젝트를 제작하는 방법을 배웁니다. 엣지 애니메이트는 도구상자와 [Properties] 패널을 중심으로 엣지 애니메이트의 기초인 각 도구의 역할과 기능을 예제를 통해 익히고 [Properties] 패널을 통해 오브젝트의 속성을 설정하는 방법을 배웁니다.

ㆍ액션과 심벌 기본기 다지기
앞에서 만든 소스를 다른 Stage에서도 사용하려면 심벌을 이용해 사용할 수 있습니다. 심벌을 이용하면 용량의 변화없이 사용할 수 있고 상황에 맞게 수정해 사용하면 멋진 애니메이션을 만들 수 있습니다. 이번 파트에서는 심벌의 활용과 심벌을 제어할 수 있는 액션을 배워보겠습니다.

ㆍ액션과 심벌 활용하기
소스 파일을 심벌로 지정해 다른 스테이션에서도 유용하게 활용할 수 있습니다. 심벌을 만들었다면 제어해야 하는데 복잡한 동작의 애니메이션은 JavaScript 및 jQuery를 활용해 제어할 수 있습니다. 이번 파트에서는 좀 더 유용하게 심벌을 활용하고 JavaScript를 사용하는 방법에 대해 배웁니다.

ㆍ고급 멀티미디어 콘텐츠 만들기
플러그인이 필요 없는 Audio, Video 태그를 이용해 콘텐츠에 오디오와 비디오 콘텐츠를 만들 수 있습니다. 각종 효과음부터 배경음악을 삽입하여 애니메이션에 활력을 불어 넣을 수 있습니다. 사운드 및 동영상을 사용하면 애니메이션만으로만 표현하기 어려웠던 내용을 좀 더 정확한 내용 전달할 수 있습니다. 이 파트에서는 사운드와 동영상을 삽입하고 활용하는 방법에 대해 학습합니다.

ㆍ반응형 웹 만들기
데스크탑, 태블릿 PC, 모바일 폰 등 다양한 크기의 디바이스 환경에 맞추어 레이아웃을 최적화하여 구성하는 콘텐츠를 만들 수 있습니다. 콘텐츠가 디바이스 환경에 맞추어 유기적으로 변하기 때문에 사용자들이 보다 편안한 환경에서 웹을 이용할 수 있습니다. 이 파트에서는 반응형 웹 콘텐츠 만드는 방법에 대해 학습합니다.

ㆍAdobe Muse를 이용한 웹사이트 제작하기
웹사이트를 제작하는 프로그램들의 어려움 점은 눈으로 보이지 않는 코드를 작성하거나, 웹 표준 방식을 지키지 않아 호환성이 떨어지는 문제점을 내포하고 있는데 그에 반해 Adobe Muse는 최신의 웹 표준 방식을 지키면서 개인 PC 및 모바일 디바이스용 웹사이트를 쉽고 간단하게 제작할 수 있습니다. Adobe Muse의 가장 편리한 점은 직접 눈으로 확인하며 레이아웃 작업이 가능하고, 마우스를 이용하여 객체를 끌어당기는 방식을 채택하고 있어 객체의 움직임에도 자유로움을 더하고 있다는 장점이 있습니다. 이 파트에서는 이러한 장점을 가진 Adobe Muse의 사용과 활용에 대해 학습합니다.

■이 책을 꼭 읽어야 하는 독자는 아래와 같다

ㆍ엣지 애니메이트 CC를 처음 배우는 초보자
ㆍ엣지 애니메이트 CC의 신기능을 이용하고 싶은 사람
ㆍ엣지 애니메이트 CC를 이용해 웹상의 다양한 애니메이션 제작을 하고자 하는 사람

저자소개

안효정
그린 아이티 강의
웹표준 & 접근성 Expert, Web Site UI&UX Expert
(주)지아이티아카데미 Objective-C, JAVA, 아이폰앱, 아이폰게임 등 강의
(주)지아이티아카데미 웹표준, Javascript, jQuery, HTML5 기업체 출강 교육
아이폰 게임 개발사 창업(PPstudio)
현재 애플 앱스토어에 3개의 게임 출시(미국앱스토어)
아이패드용 전자잡지프로젝트 기획/개발
아이패드용 멀티미디어북(3D동화책) 기획/개발
아이폰 게임 개발(프로그래밍 지원 - 인공지능/그래픽담당)
충무로 미술관용 전자 잡지 프로젝트기획/프로그래밍 지원
아이패드용 인터랙티브북 기획/프로그래밍(동화책)
아이폰/아이폰 게임 개발 인터넷 강의 자료 제작

임민재
그린 아이티 강의
웹표준 & 접근성 Expert ,Web Site UI&UX Expert
e-learning(이러닝) 시스템 프론트, 백엔드 페이지 기획/개발
e-Shop(쇼핑몰) 시스템 프론트, 백엔드 페이지 기획/개발 Web Site 구축
인트라넷 프론트,백엔드 페이지 기획/개발
모바일론 시스템 프론트,백엔드 페이지 기획/개발
Brand 및 Community Web Site 다수 구축
COUZLE-IT - 연구개발팀 근무(하이브리드 모바일 웹앱 제작)
웹표준 홈페이지 - 모바일 웹앱 제작(프리랜서)
프로그래밍 언어(C/C++, Objective-C, 아이폰앱 개발 기초/고급 강의, 하이브리드 모바일 웹앱) 출강
그래픽스 컴퓨터 학원 강의, 기업체 강의 등
웹표준, HTML5 기업체 강의 출강