6 장 애니메이션

6.1 애니메이션의 개요

(1) 애니메이션의 정의

애니메이션은 생명이 없는 사물에 영혼이나 정신을 부여하는 행위로 정의 할 수 있다 . 즉 , 애니메이션은 생명을 지니지 않은 것이 작자의 의도에 따라 의인화되어 필름이나 VTR 등의 영상매체를 통하여 창조되는 기술이나 기법을 일컫는다 .

또한 애니메이션은 낱장의 그림또는 사물의 이동을 한 프레임 (frame) 식 촬영하여 마치 살아 있는 것과 같은 효과를 보여주는 영화를 말하기도 하며 더 나아가서 시간 , 운동 , 빛에 대한 모든 영상언어와 영상기술을 총칭한다 .

현재 우리들이 접할 수 있는 대부분의 TV 만화 시리즈 , 단편 만화영화 , 극장판 장편 만화영화등의 애니메이션이 이 정의에 포함된다 .

(2) 애니메이션의 원리

애니메이션은 일련의 정지 이미지 (still image) 를 연속적으로 보여주어 그 이미지을 보는 사람으로 하여금 이미지들을 연속된 동작으로 착각하도록 한다 .

이러한 현상은 잔상효과 (persistence of vision) 에 의한 것으로 잔상효과란 이미지가 이미 사라졌음에도 불구하고 사람의 눈이나 뇌에 계속 남아 있으려는 경향을 일컫는다 .

일반적으로 초당 15 장 이상의 그림이 보여지면 자연스러운 움직임을 얻을 수 있다 . 텔레비젼 , 영사기 , 비디오 플레이어는 각각이 표시하는 초당 프레임율이 다르지만 모두 잔상효과를 이용하고 있다 .

원본 애니메이션 ( 상 ) 과 각 프레임 ( 하 )

(3) 애니메이션의 종류

애니메이션은 컴퓨터가 등작하기 이전의 2 차원을 기반으로 하는 전통적인 애니메이션과 컴퓨터에 의해서 만들어지는 애니메이션 그리고 특수효과로 나뉠 수 있다 .

2 차원 기반의 전통적인 애니메이션 • 플립북 애니메이션 (Flip-book animation)• 셀 애니메이션 (Cel animation)• 키프레이밍과 인비트윈 (Keyframing and In-between)

컴퓨터 애니메이션 (Computer animation) • 트위닝 (Tweening)• 스프라이트 애니메이션 (Sprite animation)• 벡터 애니메이션 (Vector animation)• 스크립트 애니메이션 (Script animation)• 3 차원 컴퓨터 애니메이션 (3D computer animation)• 키프레이밍 애니메이션 (Keyframing animation)• 역운동학 (Inverse kinematics)

특수 효과 (Special effect) • 로토스코핑 (Rotoscoping)• 모핑 (Morphing)• 절차적 방법 (Procedual method)• 미립자 시스템 (Particle system)

6.2 애니메이션 종류6.2.1 전통적인 애니메이션

(1) 플립북 애니메이션 (Flip-book Animation) 플립북 애니메이션은 가장 기본이 되는

애니메이션으로 프레임 (Frame-based) 애니메이션이라고도 한다 .

애니메이션 내에 존재하는 모든 프레임을 한장 한장 그려나가는 것으로 어렸을 때 책의 가장 자리에 그림을 그려 빠르게 넘기면 나타나는 효과를 떠올리면 된다 ( 오른쪽 그림 참조 ).

플립북 애니메이션은 파일의 크기가 크기 때문에 인터넷과 같이 제한된 데이터 전송 환경에서는 사용하기 힘들다는 단점이 있다 .

(2) 셀 애니메이션 (Cel Animation)

1913 년 존 랜돌프가 개발하여 지금에 이르는 모든 전통적 애니메이션은 이 방법으로 만들어졌다 .

셀 애니메이션의 "CEL" 이란 단어는 투명한 종이를 뜻하는 Celluloid 의 "CEL" 을 의미한다 .

애니메이션을 만들기 위해서는 하나의 배경 cel 과 여러장의 전경 cel 이 필요하고 , 일반적으로 이러한 cel 들이 여러 개의 층을 이루어 하나의 프레임을 만들어 낸다 .

6.2.2 컴퓨터 애니메이션

(1) 스프라이트 애니메이션 (Sprite-based Animation) 스프라이트 (Sprite) 는 애니메이션에서 독립적으로 움직이는 개체를

말한다 . 아케이드 게임 속에 등장하는 캐릭터들의 애니메이션이 이 항목에

속한다 . 스프라이트 애니메이션은 플립북 애니메이션과는 달리 스프라이트

만을 다시 그려주면 되므로 , 파일의 크기나 요구되는 데이터 전송 대여폭도 플립북 애니메이션보다 적다 .

(2) 벡터 애니메이션 (Vector Animaton) 이 방식은 스프라이트가 Bitmap 이 아닌 수학적인 공식으로 이루어진

것을 제외하면 스프라이트 애니메이션과 같다 . 인터넷에서 사용되는 쇽웨이브 (Shockwave) 파일 포맷이 이 방법을

사용한다 . 스프라이트를 수식으로 표현하므로 파일의 크기는 스프라이트

애니메이션 보다 작다는 장점이 있다 . 벡터 애니메이션의 또 하나의 장점은 크기에 상관 없이 깨끗하게

보여진다는 것이다 . 이러한 성질을 Scalable 하다고 한다 .

(3) 키 프레임과 트위닝 (Key-frame and Tweening) 일반적인 만화영화 제작에서 , 숙련된 애니메이터는 키 프레임 (Key fra

me) 이라는 중요한 장면만을 그리고 그 나머지는 값싼 애니메이터를 이용해 애니메이션을 완성해 나간다 .

트위닝은 이러한 키 프레임 사이 (Between) 를 채우면서 애니메이션을 만든다는 의미의 IN-BETWEENING에서 유래되었다 .

6.2.3 특수효과

(1) 모핑 (Morphing) 2 개의 서로다른 이미지나 3 차원 모델 사이의 변화하는 과정을

서서히 나타내는 것을 모핑이라 한다 . 3 차원 모핑은 마이클 잭슨의 뮤직 비디오 "Dangerous" 와 영화

" 터미네이터 2", 우리나라의 영화 " 구미호 ", " 은행나무 침대 " 등를 통해서 세상에 알려지기 시작했다 .

모핑의 원리는 의외로 간단하다 . 처음 프레임과 마지막 프레임을 지정해 주고 나머지는 컴퓨터가 생성하도록 한다 . 이러한 과정을 인터폴레이션 (Interpolation) 이라 한다 .

(2) 로토스코핑 (Rotoscoping) 로토스코핑은 Betty Boop 과 뽀빠이에게 생명을 불어넣기

위해서 1915년 경 Max Fleischer 이 개발 로토스코핑은 크게 2 가지 의미로 쓰이는데 하나는 실제 영화의

한 장면에 애니메이션을 삽입하는 것이고 , 다른 하나는 사진속에 있는 특정 인물이나 사물을 투명종이 위에 그려 넣는 작업을 말한다 . 대개 로토스코핑은 전자보다는 후자를 일컫는다 .

(3) 미립자 시스템 (Particle System) 비 , 불 , 연기 , 폭발등의 자연 현상들을 시뮬레이션 하기에 좋은 컴퓨터 애니메이션

Particle System 에서는 분자들의 다발에 대해 그 행동과 특성을 하나하나 부여해 비디오나 영화에서 폭발등의 특수효과에 사용한다 . 영화 Twister 는 Tornado 를 시뮬레이션 하기 위해 미립자 시스템을 사용하였다 .

6.3 애니메이션 기법

6.3.1 전통적인 기법

(1) 양파껍질 효과 (Onion-skinning) Onion-skinning 은 부드러운 동작을 만들어내기 위해 셀

애니메이션에서 사용되었던 방법을 빌려 온 것으로 , 양파 껍질이 투명하다는 사실에서 이같은 용어가 사용된 것이다 .

셀 애니메이션에서 셀이 가지는 의미는 애니메이터들이 어느 한 프레임에 대한 작업을 진행하는 동안 그 전후 프레임을 볼 수가 있다는 것이다 .

셀과 유사한 개념인 Onion-skinning 을 사용하면 , 한 눈으로 프레임의 처음부터 끝까지 볼 수 있어 , 프레임이 어떤 식으로 흘러 가는지 쉽게 알아 볼 수 있다 .

Macromedia Director, Fractal Design Painter, FutureWave CelAnimator 등과 같은 2 차원 애니메이션 프로그램들이 Onion-skinning 을 지원한다 .

Flash 에서의 양파껍질 효과

(2) 도려내기 효과 (Cut-out) Cut-outs 역시 셀 애니메이션에서 사용되었던 방법으로 , 손을

흔드는 등과 같이 캐릭터의 동작이 정해져 있을 경우에 캐릭터의 몸 전체를 다시 그리는 것보다는 손만을 다시 그리는 것이 효과적이다 . 따라서 캐릭터의 몸은 한 번만 그려서 백그라운드로 사용하고 , 분리되어 있는 손과 합성되어 동작을 만들어 낸다 .

Macromedia FreeHand 에서는 이러한 Cut-out 를 쉽게 생성할 수 있도록 지원한다 .

(3) 가감속 (Ease-out/Ease-in) 실세계에서 사물들은 항상 같은 속도로 움직이는 것은 아니다 . 예들

들어 , 차가 출발할 때 서서히 가속이 되고 , 커브를 돌 때는 속도가 준다 .

애니메이션에서 출발이나 정지 , 회전과 같이 하나의 동작에서 다른 동작으로의 이동은 전형적으로 키 프레임 (Key frame) 을 사용한다 . 한 물체가 키 프레임으로 다가가거나 멀어질 때 , 점차 느려지는 것을 ease-in, 점차 빨라지는 것을 ease-out 이라고 한다 .

(4) 반복 (Cycling) 많은 동작들은 반복적이어서 여러 개의 프레임을 하나의 cycle 이나 loo

p 로 만들 수 있다 . 가장 기본적인 cycle 은 걷기 동작이다 . 한 번 cycle 를 만들면 그 cycle 을 반복하면서 무한정으로 움직이게 할

수 있다 .

6.3.2 효과적인 애니메이션을 위한 기법

(1) 찌그러짐과 늘어남 (Squash and Stretch) 찌그러짐과 늘어남은 물체가 유연성이나 탄성을 갖도록 하여 고무와

같이 부드럽고 물컹거리는 느낌을 갖도록 한다는 것이다 . 따라서 물체가 멈추거나 방향을 바꿀 때 또는 딱딱한 물체에 부딪혔을 때 움직이는 방향으로 물체가 압축되어 눌린다 .  

찌그러지거나 늘어나는 효과는 움직이는 물체가 무게가 있다는 것을 느끼도록 하거나 , 짓눌리고 잡아 당겨지는 동작을 강조하기 위해 사용되는 방법이다 .

(2) 보조 액션과 중첩 액션 (Secondary Action/Overlapping Action) 보조 액션 (Secondary Action) 은 주액션 (Main Action) 에 더해지는

간단한 동작을 말한다 . 이렇게 만들어진 보조 액션을 주 액션에 더하여 애니메이션을 완성하여

나가는 것을 중첩 액션 (Overlapping Action) 이라 한다 .

찌그러짐과 늘어남의 예

(3) 과장 (Exaggeration) 과장 (Exaggeration) 역시 애니메이션에 강한 인상을 심어 줄 수

있는 좋은 방법이다 . 특히 , 웹에서의 애니메이션은 데이터 전송의 한계성을 가지므로

애니메이션의 크기가 작고 , 따라서 경우에 따라 색깔과 동작을 과장(Exaggeration) 을 통하여 이용자의 눈에 띄도록 해야 한다 .

6.3.3 3 차원 컴퓨터 애니메이션

(1) 키프레임 애니메이션 (Key-frame animation) 키 프레임 애니메이션은 2 차원 애니메이션 뿐만 아니라 3 차원

애니메이션에서도 가장 널리 사용되는 기법으로 스토리보드의 작성 , 물체의 표현 , 키 프레임의 설정 , 그리고 인비틴 (In-between) 프레임의 생성 과정을 거친다 .

제작자는 애니메이션 소프트웨어를 이용하여 단지 키 프레임만을 생성하고 중간에 속해있는 프레임 ( 인비틴 프레임 )들은 컴퓨터에 의해 자동으로 생성된다 .

(2) 역운동학 (Inverse Kinematics) 역운동학은 3 차원 모델의 각 부분들을 하나의 모델로 연결하는

방법으로 인간이나 로보트와 같이 계층적으로 구성된 구조체를 표현하기에 적절한 방법이다 .

역운동학을 사용하면 물체의 한 부분이 움직였을 때 연결된 부분들이 자연스럽게 그 부분을 따라가도록 할 수 있다 .

운동학 (좌 ) 과 역운동학 ( 우 )

(3) 모션 캡쳐 (Motion Capture) 모션 캡쳐는 인간의 움직임을 만들어내는 가장 자연스러운

방법으로 3 차원 컴퓨터 애니메이션의 생성을 위해 가장 많이 사용되는 기술이다 .

인간의 움직임을 손으로 그리는 것이 아니라 직접 캡쳐 (Capture)하여 움직임의 정보를 3 차원으로 저장하며 , 움직임을 추적하기 위해 마커 (Marker) 또는 트랙커 (Tracker) 라 불리는 센서를 사용한다 .

(4) 절차적 애니메이션 (Procedural Animation) 특정 물체에 대한 알고리즘을 만들어 움직임을 생성하는 기술

을 '절차적 방식에 의한 애니메이션 '이라고 한다 . 절차적 방식은 미립자 시스템 (Particle system) 이나 유동 표면 (Fl

exible surface) 과 같은 자연 현상이나 사람이 직접 제어하기에는 복잡한 시스템에 적용될 수 있다 .

6.4 웹 애니메이션

웹은 네트웍을 사용하는 특성 때문에 웹페이지에 용랑이 큰 애니메이션 파일을 삽입하는 것은 그 웹페이지를 사용하는 사람들에게 부담으로 작용할 수 있다 . 스트리밍 (streaming) 과 플러그인 (plug-in) 은 적은 용량으로도 효과적인 애니메이션을 지원하는 기술이다 .

6.4.1 기본적인 웹 애니메이션 (1) 애니메이션 GIF (Animation GIF)

앞서 설명한 바와 같이 , GIF 파일에 기반한 애니메이션으로 HTML 문서에 삽입된 이미지 정보로 사용된다 .

GIF 애니메이션은 일반적으로 광고에 많이 쓰이며 , 그 외에 강조할 부분 앞에 위치시켜 이용자의 관심을 끈다 .

파일의 크기가 작은 것에도 불구하고 좋은 질을 제공하기 때문에 현재 인터넷에서 가장 많이 사용되는 애니메이션이다 .

(2) 자바 (Java) GIF 애니메이션은 단순히 연속된 그림들의 나열인데 비해서 Java 는

프로그래밍 언어이기 때문에 단순한 그림의 나열 이외에 여러 가지 효과를 만들어 낼 수 있다 .

그러나 , Java 로 만들어진 Applet 들은 실행 속도가 느리고 직접 프로그램을 해야 하는 단점이 있다 .

6.4.2 Embed 방식의 플러그인 애니메이션플러그인 애니메이션은 <embed ...> 태그를 사용하여 웹이지에 삽입되는 애니메이션을 말한다 . Java, VRML, Quicktime, Real movie, shockwave 등과 같은 플러그인 애니메이션은 적절한 플러그인이 설치되어야만 애니메이션이 가능하다 .

(1) VRML (Virtual Reality Modeling Language) VRML 은 Virtual Reality Modeling Language 의 약자 인터넷에서 상호작용이 가능한 3 차원 세계를 구축하기 위해 생겨난

언어이다 . 1994년 5월 제 1 차 WWW Conference 에서 Tim Berners-Lee, Mark Pe

sce 등이 모여 웹상에서 3 차원 세계를 만드는 언어를 Virtual Reality Markup Language 라고 명명하고 VRML 명세 작업을 시작 . ('Markup'은 후에 Graphic 적인 특성을 감안하여 'Modeling'으로 교체 )

현재 VRML 2.0이 나와 있는 상태이며 , VRML 97로 수정 보안되었다 .

(2) AVI (Audio Video Interleaved) AVI 파일과 그 파일 포맷은 윈도우용 비디오 (Video for Windows)

의 핵심 부분이다 . 윈도우용 비디오는 윈도우즈에서 비디오를 다루기 위한 전체 시스템을 일컫는 말이다 .

현재 AVI 는 MPEG 파일 , QuickTime MOV 파일과 더불어 가장 대표적인 비디오 파일 중의 하나이다 .

윈도우에서 멀티미디어 프리젠테이션을 포함하는 애니메이션을 재생하기 위해 사용되었지만 , 웹에서도 플러그인만 있으면 재생이 가능하다 .

6.4.3 스트리밍 기술을 이용한 애니메이션(1) Shockwave

일반적으로 애니메이션의 결과 ( 영화같이 ) 는 압축되지 않은 상태에서 사용되지만 , 인테넷에서 데이터의 전송은 제약이 있으므로 압축된 데이터 , 즉 압축되어 있는 애니메이션을 요구하게 된다 .

Shockwave 는 압축된 애니메이션임과 동시에 데이터의 일부만이 도착하여도 애니메이션을 가능케하는 기술이다 .

Shockwave 를 제작하기 위한 툴로는 Macromedia 의 Flash(.swf) 와 Director(.dcr) 가 있다 .

(2) QuickTime QuickTime 은 초기에 매킨토시에서 동화상을 보이기 위한 재생기 (Playe

r)였으나 현재는 거의 모든 운영체제에서 수행되는 동화상 재생기이자 웹에서 동화상이나 애니메이션을 재생하기 위한 플러그인이기도 하다 .

버전이 4.0으로 되면서 QuickTime 은 애니메이션의 단순한 재생에서부터 게임과 같은 효과를 지니는 파일이나 Shockwave 와 같이 뛰어난 상호작용을 가지고 있는 파일을 재생할 수 있게 되었고 스트리밍 기술도 포함하게 되었다 .