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) 아케이드 게임 속에 등장하는 캐릭터들의 애니메이션이 이 항목에 속한다. 스프라이트 애니메이션은 플립북 애니메이션과는 달리 스프라이트 만을 다시 그려주면 되므로, 파일의 크기나 요구되는 데이터 전송 대여폭도 플립북 애니메이션보다 적다.

(2) 벡터 애니메이션 (Vector Animaton) 이 방식은 스프라이트가 Bitmap이 아닌 수학적인 공식으로 이루어진 것을 제외하면 스프라이트 애니메이션과 같다. 인터넷에서 사용되는 쇽웨이브(Shockwave) 파일 포맷이 이 방법을 사용한다. 스프라이트를 수식으로 표현하므로 파일의 크기는 스프라이트 애니메이션 보다 작다는 장점이 있다. 벡터 애니메이션의 또 하나의 장점은 크기에 상관 없이 깨끗하게 보여진다는 것이다. 이러한 성질을 Scalable하다고 한다. (3) 키 프레임과 트위닝 (Key-frame and Tweening) 일반적인 만화영화 제작에서, 숙련된 애니메이터는 키 프레임(Key frame)이라는 중요한 장면만을 그리고 그 나머지는 값싼 애니메이터를 이용해 애니메이션을 완성해 나간다. 트위닝은 이러한 키 프레임 사이(Between)를 채우면서 애니메이션을 만든다는 의미의 IN-BETWEENING에서 유래되었다.

6.2.3 특수효과 모핑 (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을 사용하면, 한 눈으로 프레임의 처음부터 끝까지 볼 수 있어, 프레임이 어떤 식으로 흘러 가는지 쉽게 알아 볼 수 있다.

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이나 loop로 만들 수 있다. 가장 기본적인 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) 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)이나 유동 표면(Flexible surface)과 같은 자연 현상이나 사람이 직접 제어하기에는 복잡한 시스템에 적용될 수 있다.

6.4 웹 애니메이션 6.4.1 기본적인 웹 애니메이션 (1) 애니메이션 GIF (Animation GIF) 웹은 네트웍을 사용하는 특성 때문에 웹페이지에 용랑이 큰 애니메이션 파일을 삽입하는 것은 그 웹페이지를 사용하는 사람들에게 부담으로 작용할 수 있다. 스트리밍(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 Pesce등이 모여 웹상에서 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은 초기에 매킨토시에서 동화상을 보이기 위한 재생기(Player)였으나 현재는 거의 모든 운영체제에서 수행되는 동화상 재생기이자 웹에서 동화상이나 애니메이션을 재생하기 위한 플러그인이기도 하다. 버전이 4.0으로 되면서 QuickTime은 애니메이션의 단순한 재생에서부터 게임과 같은 효과를 지니는 파일이나 Shockwave와 같이 뛰어난 상호작용을 가지고 있는 파일을 재생할 수 있게 되었고 스트리밍 기술도 포함하게 되었다.