6 장 애니메이션

1. 6장 애니메이션

2. 6.1 애니메이션의 개요 (1) 애니메이션의 정의 • 애니메이션은 생명이 없는 사물에 영혼이나 정신을 부여하는 행위로 정의 할 수 있다. 즉, 애니메이션은 생명을 지니지 않은 것이 작자의 의도에 따라 의인화되어 필름이나 VTR등의 영상매체를 통하여 창조되는 기술이나 기법을일컫는다. • 또한 애니메이션은 낱장의 그림또는 사물의 이동을 한 프레임(frame)식 촬영하여 마치 살아 있는 것과 같은 효과를 보여주는 영화를 말하기도 하며 더 나아가서 시간, 운동, 빛에 대한 모든 영상언어와 영상기술을 총칭한다. • 현재 우리들이 접할 수 있는 대부분의 TV만화 시리즈, 단편 만화영화, 극장판 장편 만화영화등의 애니메이션이 이 정의에 포함된다.

3. (2) 애니메이션의 원리 • 애니메이션은 일련의 정지 이미지(still image)를 연속적으로 보여주어 그 이미지을 보는 사람으로 하여금 이미지들을 연속된 동작으로 착각하도록 한다. • 이러한 현상은 잔상효과(persistence of vision)에 의한 것으로 잔상효과란 이미지가 이미 사라졌음에도 불구하고 사람의 눈이나 뇌에 계속 남아 있으려는 경향을 일컫는다. • 일반적으로 초당 15장 이상의 그림이 보여지면 자연스러운 움직임을 얻을 수 있다. 텔레비젼, 영사기, 비디오 플레이어는 각각이 표시하는 초당 프레임율이 다르지만 모두 잔상효과를 이용하고 있다.

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

5. (3) 애니메이션의 종류 • 애니메이션은 컴퓨터가 등작하기 이전의 2차원을 기반으로 하는 전통적인 애니메이션과 컴퓨터에 의해서 만들어지는 애니메이션 그리고 특수효과로 나뉠 수 있다. • 2차원 기반의 전통적인 애니메이션 • 플립북 애니메이션 (Flip-book animation) • 셀 애니메이션 (Cel animation) • 키프레이밍과 인비트윈 (Keyframing and In-between)

6. 컴퓨터 애니메이션 (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)

7. 6.2 애니메이션 종류 6.2.1 전통적인 애니메이션 (1) 플립북 애니메이션 (Flip-book Animation) • 플립북 애니메이션은 가장 기본이 되는 애니메이션으로 프레임(Frame-based) 애니메이션이라고도 한다. • 애니메이션 내에 존재하는 모든 프레임을 한장 한장 그려나가는 것으로 어렸을 때 책의 가장 자리에 그림을 그려 빠르게 넘기면 나타나는 효과를 떠올리면 된다(오른쪽 그림 참조). • 플립북 애니메이션은 파일의 크기가 크기 때문에 인터넷과 같이 제한된 데이터 전송 환경에서는 사용하기 힘들다는 단점이 있다.

8. (2) 셀 애니메이션 (Cel Animation) • 1913년 존 랜돌프가 개발하여 지금에 이르는 모든 전통적 애니메이션은 이 방법으로 만들어졌다. • 셀 애니메이션의 "CEL"이란 단어는 투명한 종이를 뜻하는 Celluloid의 "CEL"을 의미한다. • 애니메이션을 만들기 위해서는 하나의 배경 cel과 여러장의 전경 cel이 필요하고, 일반적으로 이러한 cel들이 여러 개의 층을 이루어 하나의 프레임을 만들어 낸다.

9. 6.2.2 컴퓨터 애니메이션 (1) 스프라이트 애니메이션 (Sprite-based Animation) • 스프라이트(Sprite)는 애니메이션에서 독립적으로 움직이는 개체를 말한다. • 아케이드 게임 속에 등장하는 캐릭터들의 애니메이션이 이 항목에 속한다. • 스프라이트 애니메이션은 플립북 애니메이션과는 달리 스프라이트 만을 다시 그려주면 되므로, 파일의 크기나 요구되는 데이터 전송 대여폭도 플립북 애니메이션보다 적다.

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

11. 6.2.3 특수효과 • 모핑 (Morphing) • 2개의 서로다른 이미지나 3차원 모델 사이의 변화하는 과정을 서서히 나타내는 것을 모핑이라 한다. • 3차원 모핑은 마이클 잭슨의 뮤직 비디오 "Dangerous"와 영화 "터미네이터 2", 우리나라의 영화 "구미호", "은행나무 침대"등를 통해서 세상에 알려지기 시작했다. • 모핑의 원리는 의외로 간단하다. 처음 프레임과 마지막 프레임을 지정해 주고 나머지는 컴퓨터가 생성하도록 한다. 이러한 과정을 인터폴레이션(Interpolation)이라 한다.

12. (2) 로토스코핑 (Rotoscoping) • 로토스코핑은 Betty Boop과 뽀빠이에게 생명을 불어넣기 위해서 1915년 경 Max Fleischer이 개발 • 로토스코핑은 크게 2가지 의미로 쓰이는데 하나는 실제 영화의 한 장면에 애니메이션을 삽입하는 것이고, 다른 하나는 사진속에 있는 특정 인물이나 사물을 투명종이 위에 그려 넣는 작업을 말한다. 대개 로토스코핑은 전자보다는 후자를 일컫는다. (3) 미립자 시스템 (Particle System) • 비, 불, 연기, 폭발등의 자연 현상들을 시뮬레이션 하기에 좋은 컴퓨터 애니메이션 • Particle System에서는 분자들의 다발에 대해 그 행동과 특성을 하나하나 부여해 비디오나 영화에서 폭발등의 특수효과에 사용한다.영화 Twister는 Tornado를 시뮬레이션 하기 위해 미립자 시스템을 사용하였다.

13. 6.3 애니메이션 기법 6.3.1 전통적인 기법 (1) 양파껍질 효과 (Onion-skinning) • Onion-skinning은 부드러운 동작을 만들어내기 위해 셀 애니메이션에서 사용되었던 방법을 빌려 온 것으로, 양파 껍질이 투명하다는 사실에서 이같은 용어가 사용된 것이다. • 셀 애니메이션에서 셀이 가지는 의미는 애니메이터들이 어느 한 프레임에 대한 작업을 진행하는 동안 그 전후 프레임을 볼 수가 있다는 것이다. • 셀과 유사한 개념인 Onion-skinning을 사용하면, 한 눈으로 프레임의 처음부터 끝까지 볼 수 있어, 프레임이 어떤 식으로 흘러 가는지 쉽게 알아 볼 수 있다.

14. Macromedia Director, Fractal Design Painter, FutureWave CelAnimator등과 같은 2차원 애니메이션 프로그램들이 Onion-skinning을 지원한다. Flash에서의 양파껍질 효과

15. (2) 도려내기 효과 (Cut-out) • Cut-outs 역시 셀 애니메이션에서 사용되었던 방법으로, 손을 흔드는 등과 같이 캐릭터의 동작이 정해져 있을 경우에 캐릭터의 몸 전체를 다시 그리는 것보다는 손만을 다시 그리는 것이 효과적이다. 따라서 캐릭터의 몸은 한 번만 그려서 백그라운드로 사용하고, 분리되어 있는 손과 합성되어 동작을 만들어 낸다. • Macromedia FreeHand에서는 이러한 Cut-out를 쉽게 생성할 수 있도록 지원한다.

16. (3) 가감속 (Ease-out/Ease-in) • 실세계에서 사물들은 항상 같은 속도로 움직이는 것은 아니다. 예들 들어, 차가 출발할 때 서서히 가속이 되고, 커브를 돌 때는 속도가 준다. • 애니메이션에서 출발이나 정지, 회전과 같이 하나의 동작에서 다른 동작으로의 이동은 전형적으로 키 프레임(Key frame)을 사용한다. 한 물체가 키 프레임으로 다가가거나 멀어질 때, 점차 느려지는 것을 ease-in, 점차 빨라지는 것을 ease-out이라고 한다. (4) 반복 (Cycling) • 많은 동작들은 반복적이어서 여러 개의 프레임을 하나의 cycle이나 loop로 만들 수 있다. • 가장 기본적인 cycle은 걷기 동작이다. • 한 번 cycle를 만들면 그 cycle을 반복하면서 무한정으로 움직이게 할 수 있다.

17. 6.3.2 효과적인 애니메이션을 위한 기법 (1) 찌그러짐과 늘어남 (Squash and Stretch) • 찌그러짐과 늘어남은 물체가 유연성이나 탄성을 갖도록 하여 고무와 같이 부드럽고 물컹거리는 느낌을 갖도록 한다는 것이다. 따라서 물체가 멈추거나 방향을 바꿀 때 또는 딱딱한 물체에 부딪혔을 때 움직이는 방향으로 물체가 압축되어 눌린다. • 찌그러지거나 늘어나는 효과는 움직이는 물체가 무게가 있다는 것을 느끼도록 하거나, 짓눌리고 잡아 당겨지는 동작을 강조하기 위해 사용되는 방법이다.

18. (2) 보조 액션과 중첩 액션 (Secondary Action/Overlapping Action) • 보조 액션(Secondary Action)은 주액션(Main Action)에 더해지는 간단한 동작을 말한다. • 이렇게 만들어진 보조 액션을 주 액션에 더하여 애니메이션을 완성하여 나가는 것을 중첩 액션(Overlapping Action)이라 한다. 찌그러짐과 늘어남의 예

19. (3) 과장 (Exaggeration) • 과장(Exaggeration) 역시 애니메이션에 강한 인상을 심어 줄 수 있는 좋은 방법이다. • 특히, 웹에서의 애니메이션은 데이터 전송의 한계성을 가지므로 애니메이션의 크기가 작고, 따라서 경우에 따라 색깔과 동작을 과장(Exaggeration)을 통하여 이용자의 눈에 띄도록 해야 한다.

20. 6.3.3 3차원 컴퓨터 애니메이션 (1) 키프레임 애니메이션 (Key-frame animation) • 키 프레임 애니메이션은 2차원 애니메이션 뿐만 아니라 3차원 애니메이션에서도 가장 널리 사용되는 기법으로 스토리보드의 작성, 물체의 표현, 키 프레임의 설정, 그리고 인비틴(In-between) 프레임의 생성 과정을 거친다. • 제작자는 애니메이션 소프트웨어를 이용하여 단지 키 프레임만을 생성하고 중간에 속해있는 프레임(인비틴 프레임)들은 컴퓨터에 의해 자동으로 생성된다.

21. (2) 역운동학 (Inverse Kinematics) • 역운동학은 3차원 모델의 각 부분들을 하나의 모델로 연결하는 방법으로 인간이나 로보트와 같이 계층적으로 구성된 구조체를 표현하기에 적절한 방법이다. • 역운동학을 사용하면 물체의 한 부분이 움직였을 때 연결된 부분들이 자연스럽게 그 부분을 따라가도록 할 수 있다. 운동학(좌)과 역운동학(우)

22. (3) 모션 캡쳐 (Motion Capture) • 모션 캡쳐는 인간의 움직임을 만들어내는 가장 자연스러운 방법으로 3차원 컴퓨터 애니메이션의 생성을 위해 가장 많이 사용되는 기술이다. • 인간의 움직임을 손으로 그리는 것이 아니라 직접 캡쳐(Capture)하여 움직임의 정보를 3차원으로 저장하며, 움직임을 추적하기 위해 마커(Marker) 또는 트랙커(Tracker)라 불리는 센서를 사용한다. (4) 절차적 애니메이션 (Procedural Animation) • 특정 물체에 대한 알고리즘을 만들어 움직임을 생성하는 기술을 '절차적 방식에 의한 애니메이션'이라고 한다. • 절차적 방식은 미립자 시스템(Particle system)이나 유동 표면(Flexible surface)과 같은 자연 현상이나 사람이 직접 제어하기에는 복잡한 시스템에 적용될 수 있다.

23. 6.4 웹 애니메이션 웹은 네트웍을 사용하는 특성 때문에 웹페이지에 용랑이 큰 애니메이션 파일을 삽입하는 것은 그 웹페이지를 사용하는 사람들에게 부담으로 작용할 수 있다. 스트리밍(streaming)과 플러그인(plug-in)은 적은 용량으로도 효과적인 애니메이션을 지원하는 기술이다. 6.4.1 기본적인 웹 애니메이션 (1) 애니메이션 GIF (Animation GIF) • 앞서 설명한 바와 같이, GIF 파일에 기반한 애니메이션으로 HTML문서에 삽입된 이미지 정보로 사용된다. • GIF 애니메이션은 일반적으로 광고에 많이 쓰이며, 그 외에 강조할 부분 앞에 위치시켜 이용자의 관심을 끈다. • 파일의 크기가 작은 것에도 불구하고 좋은 질을 제공하기 때문에 현재 인터넷에서 가장 많이 사용되는 애니메이션이다.

24. (2) 자바 (Java) • GIF 애니메이션은 단순히 연속된 그림들의 나열인데 비해서 Java는 프로그래밍 언어이기 때문에 단순한 그림의 나열 이외에 여러 가지 효과를 만들어 낼 수 있다. • 그러나, Java로 만들어진 Applet들은 실행 속도가 느리고 직접 프로그램을 해야 하는 단점이 있다.

25. 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로 수정 보안되었다.

26. (2) AVI (Audio Video Interleaved) • AVI 파일과 그 파일 포맷은 윈도우용 비디오(Video for Windows)의 핵심 부분이다. 윈도우용 비디오는 윈도우즈에서 비디오를 다루기 위한 전체 시스템을 일컫는 말이다. • 현재 AVI는 MPEG 파일, QuickTime MOV 파일과 더불어 가장 대표적인 비디오 파일 중의 하나이다. • 윈도우에서 멀티미디어 프리젠테이션을 포함하는 애니메이션을 재생하기 위해 사용되었지만, 웹에서도 플러그인만 있으면 재생이 가능하다.

27. 6.4.3 스트리밍 기술을 이용한 애니메이션 (1) Shockwave • 일반적으로 애니메이션의 결과(영화같이)는 압축되지 않은 상태에서 사용되지만, 인테넷에서 데이터의 전송은 제약이 있으므로 압축된 데이터, 즉 압축되어 있는 애니메이션을 요구하게 된다. • Shockwave는 압축된 애니메이션임과 동시에 데이터의 일부만이 도착하여도 애니메이션을 가능케하는 기술이다. • Shockwave를 제작하기 위한 툴로는 Macromedia의 Flash(.swf)와 Director(.dcr)가 있다. (2) QuickTime • QuickTime은 초기에 매킨토시에서 동화상을 보이기 위한 재생기(Player)였으나 현재는 거의 모든 운영체제에서 수행되는 동화상 재생기이자 웹에서 동화상이나 애니메이션을 재생하기 위한 플러그인이기도 하다. • 버전이 4.0으로 되면서 QuickTime은 애니메이션의 단순한 재생에서부터 게임과 같은 효과를 지니는 파일이나 Shockwave와 같이 뛰어난 상호작용을 가지고 있는 파일을 재생할 수 있게 되었고 스트리밍 기술도 포함하게 되었다.