55 장 애니메이션 장 애니메이션

(1)

5 5 장 애니메이션 장 애니메이션

멀티미디어의 이해

임순범

(2)

Ⓒsblim, 2010

Ⓒsblim, 2010 ²

5.1 애니메이션의 개요



애니메이션의 원리



애니메이션의 발전

(3)

애니메이션의 원리

 애니메이션의 원리



일련의 정지 이미지 (still image) 나 그래픽으로부터 생성



잔상 효과 (persistence of vision) 이용

 이미지가 이미 사라져도 사람의 눈이나 뇌에 계속 남아 있으려는 경향



일반적으로 초당 15~20 장 이상의 그림이면 자연스러운 움직임

 텔레비젼 , 영사기 , 비디오 플레이어는 모두 잔상효과를 이용 .

5.1 애니메이션의 개요

(4)

Ⓒsblim, 2010

 애니메이션을 구성하는 프레임들

4

애니메이션은 눈의

현상을 이용한 것이다 . 애니메이션은 눈의

현상을 이용한 것이다 .

(5)

애니메이션의 구분



2 차원 기반의 전통적인 애니메이션

 플립북 애니메이션 , 셀 애니메이션



컴퓨터 애니메이션

 스프라이트 애니메이션 , 벡터 애니메이션 , 키프레임과 트위닝



3 차원 컴퓨터 애니메이션

 운동학과 역운동학 , 모션 캡쳐



특수 효과

 로토스코핑 , 모핑 , 절차적 방법 , 입자시스템

(6)

Ⓒsblim, 2010

애니메이션의 발전

 애니메이션의 발전역사



1908, 프랑스 Emil Cohl 의 ' 판타즈마고리 (Fantasmagorie)'



1913, 미국 존 랜돌프가 셀 애니메이션 기법 개발



1937, 디즈니 ' 백설공주 ' : 최초의 장편 애니메이션



1942, 디즈니 ‘ 피노키오‘ , ‘ 밤비’ : 1 초당 24 프레임

6

(7)



1961, 존 휘트니 ‘카탈로그’ : 최초의 CG 활용 애니메이션



1992, 디즈니 ‘ 미녀와 야수’ : 3D CAD 활용

(8)

Ⓒsblim, 2010



1995, 픽사 시스템 ‘ 토이스토리’ : Full 3 차원 CG 애니메이션



1998, 드림웍스 ‘ 개미’ , 픽사 시스템 ‘ 벅스라이프’

8

(9)



픽사 시스템 : 2001 ‘Monster Inc.’, 04 ‘Incredibles’, 07 ‘Ratatouille’



드림웍스 : 2001 ‘Shrek’, 05 ‘Madagascar’, 08 ‘Kung Fu Panda’

(10)

Ⓒsblim, 2010

Ⓒsblim, 2010 ¹⁰

 CG 애니메이션이 사용된 일반 영화



1977, 조지 루카스 ‘ 스타워즈’



1989, ‘ 터미네이터 2’

5.1 애니메이션의 개요 스타워즈는 을 이유

로

편부터 시작하였다 . 스타워즈는 을 이유

로

편부터 시작하였다 .

(11)



1993, ‘ 주라기 공원’



2002, ‘ 반지의 제왕’

(12)

Ⓒsblim, 2010

Ⓒsblim, 2010 ¹²

 한국 영화 ( 특수효과 )



1994 구미호



2005 웰컴 투 동막골



2006 괴물



2007 D-War

우리나라 최초의 장편

애니메이션은 이다 . 우리나라 최초의 장편

애니메이션은 이다 .

(13)

 3D Movie



Cloudy with a Chance of Meatballs (Sony Pictures)



Avatars

(14)

Ⓒsblim, 2010

Ⓒsblim, 2010 ¹⁴

5.2 전통적인 애니메이션

 전통적 애니메이션의 종류

 전통적인 기법

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

(15)

전통적인 애니메이션의 종류

(1) 플립북 애니메이션 (Flip-book Animation)



가장 기본이 되는 애니메이션



프레임 (Frame-based) 애니메이션이라고도 함 .

 모든 프레임을 한장 한장 그려나가는 것

 책의 가장 자리에 그림을 그려 빠르게 넘기면 나타나는 효과



파일의 크기가 크다

 인터넷과 같이 제한된 데이터 전송 환경에서는 사용하기 힘들다

 [ 플립북 애니메이션 시연 ]

 [ 플립북 시연 ] (Web)

5.2 전통적인 애니메이션

(16)

Ⓒsblim, 2010

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



1913 년 존 랜돌프가 개발



2 차원 애니메이션 제작 시 사용



초기에는 수작업 , 1960 년 Xerox 시스템을 사용하여 기계화



1990 년 이후 컴퓨터를 활용하여 제작 기간 크게 단축



"CEL"



투명한 종이를 뜻하는 Celluloid 의 "CEL" 을 의미



기본적으로 하나의 배경 셀과 여러 장의 전경 셀이 필요



이러한 Cel 들이 여러 개의 층을 이루어 하나의 프레임 구성 [20 세기 폭스사 "Lion King" 의 제작과정 ] (Web)

(3) Stop-motion Animation, Clay Animation

16

(17)

전통적인 기법

 양파껍질 효과 (Onion-skinning)



셀 애니메이션에서 셀을 여러 장 겹쳐도 아래의 셀이 보임

 양파 껍질은 투명해서 무언가를 덮어도 내용물이 보인다는 의미

 프레임의 처음부터 끝까지 볼 수 있어 , 프레임의 개요를 볼 수 있음



2 차원 애니메이션 프로그램들이 Onion-skinning 을 지원

(18)

Ⓒsblim, 2010

 도려내기 효과 (Cut-out)



셀 애니메이션에서 사용되었던 방법



캐릭터의 동작 일부만을 다시 그린다 .

 가감속 (Ease-out/Ease-in)



실세계에서 출발 , 정지 , 회전과 같은 동작은 같은 속도가 아니다



차가 출발할 때 서서히 가속 , 커브를 돌 때는 속도가 줄어듬

 반복 (Cycling)



여러 개의 프레임을 하나의 Cycle 이나 Loop 로 만들 수 있음 .



많은 동작들은 반복적이며 , 가장 기본적인 Cycle 은 걷기 동작

18

(19)

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

 찌그러짐과 늘어남 (Squash and Stretch)



물체의 유연성이나 탄성을 표현

 물체가 멈추거나 방향을 바꿀 때 또는 딱딱한 물체에 부딪혔을 때

 보조 액션과 중첩 액션 (Secondary /Overlapping Action)



예 ) 수퍼맨의 동작은 주액션이고 , 펄럭이는 망토는 보조액션

 과장 (Exaggeration)



애니메이션에 강한 인상을 주어 이용자의 눈에 띄도록 함 .

(20)

Ⓒsblim, 2010

Ⓒsblim, 2010 ²⁰

5.3 컴퓨터 애니메이션

 컴퓨터 애니메이션의 개념

 특수효과

 3 차원 동작의 애니메이션

(21)

컴퓨터 애니메이션

 컴퓨터는 애니메이션에 혁명적인 변화를 가져왔음



기존의 수작업을 단순히 컴퓨터로 대신하는 것부터 3 차원 애니메이 션과 특수효과까지 제작



디지털화 된 애니메이션은 수정 및 편집 , 전송과 저장이 용이



복제가 수월하여 수 백명의 군중 scene 제작에 용이

5.3 컴퓨터 애니메이션

(22)

Ⓒsblim, 2010

(1) 스프라이트 애니메이션 (Sprite-based Animation)



스프라이트 (Sprite)

 애니메이션에서 독립적으로 움직이는 래스터 객체



아케이드 게임 속에 등장하는 캐릭터들의 애니메이션



스프라이트 애니메이션은 스프라이트 만을 다시 그려주면 된다

 파일 크기나 데이터 전송 속도의 요구도 플립북 애니메이션보다 적음

22

(23)

(2) 벡터 애니메이션 (Vector Animaton)



인터넷에서 사용되는 플래쉬 (Flash) 파일 포맷이 사용하는 방법



스프라이트가 비트맵이 아닌 수학적인 공식으로 표현

 파일의 크기는 스프라이트 애니메이션 보다 작음

 크기에 상관 없이 깨끗하게 보여짐

 [ 벡터 애니메이션 시연 ] (Web)

(24)

Ⓒsblim, 2010

(3) 키 프레임과 트위닝 (Key-frame and Tweening)



기존의 애니메이션 / 만화영화 제작 시



키 프레임 (Key frame) : 숙련된 애니메이터는 중요한 장면만 작성

 가장 중요한 장면 , 중요한 액션이 등장하는 장면 , 시점이 변하는 곳 등



트위닝 : 나머지 중간 부분은 트위닝 기법으로 완성

 키 프레임 사이 (Between) 를 채운다는 의미의 IN-BETWEENING 에서 유래



컴퓨터 환경에서도 유사



애니메이터는 키프레임만 완성

 시간선 (time-line) 중간 중간에 키 애니메이션 작성

 중간 과정은 컴퓨터가 생성



Frame Rate: 초당 프레임 수

[ 키프레임과 트위닝 시연 ] (Web)

24

(25)

 키프레임 애니메이션 (Key-frame animation)



2 차원 및 3 차원 애니메이션에서 가장 널리 사용되는 기법



스토리보드의 작성 , 물체의 표현 , 키 프레임의 설정 , 그리고 인비 틴 (In-between) 프레임의 생성 과정을 거침 .

(26)

Ⓒsblim, 2010

특수효과

(1) 모핑 (Morphing)



2 개의 이미지나 3 차원 모델 사이에 서서히 변화하는 과정을 표현

 3 차원 모핑 사용 예 : 마이클 잭슨의 뮤직 비디오 "Dangerous“, 영화 "

터미네이터 2", 우리나라의 영화 " 구미호 ", " 은행나무 침대 " 등



모핑의 원리

 처음 프레임과 마지막 프레임을 지정

 각 프레임 사이에 서로 매핑되는 점들을 지정

 나머지는 컴퓨터가 생성 ,

 이 과정을 보간 (Interpolation) 이라고 함

26

(27)

(2) 로토스코핑 (Rotoscoping)



Betty Boop 과 뽀빠이에게 생명을 불어넣기 위해서 1915 년 경 Max Fleischer 가 개발



로토스코핑은 크게 2 가지 의미로 사용

 영화의 한 장면에 애니메이션을 삽입하는 셀 애니메이션

 액션 장면의 정지 프레임을 추적하여 움직임을 표현

(28)

Ⓒsblim, 2010

(3) 입자시스템 (Particle System)



비 , 불 , 연기 , 폭발 등의 자연 현상의 애니메이션을 제작

 영화에서 폭발 등의 특수효과에 사용

 영화 트위스터는 토네이도를 시뮬레이션



입자들에 대해 그 행동과 특성을 하나하나 부여

28

(29)

(4) 절차적 애니메이션 (Procedural Animation)



물체에 대한 알고리즘 / 물리공식을 만들어 움직임을 생성하는 기술



미립자 시스템 (Particle system) 이나 유동 표면 (Flexible surface) 과 같은 자연 현상이나 복잡한 시스템에 적용



물리기반 시뮬레이션 분야에서 연구 중

5.3 컴퓨터 애니메이션 최근에는 머리카락 , 물방울 등을

( 방법 ) 으로 모델링한 다 .

최근에는 머리카락 , 물방울 등을 ( 방법 ) 으로 모델링한

다 .

(30)

Ⓒsblim, 2010

3 차원 동작의 애니메이션

 역운동학 (Inverse Kinematics)



인간이나 로보트와 같이 계층적으로 구성된 구조체의 동작을 표현

 각 관절의 움직임을 말단 부분의 움직임에서부터 역으로 계산

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



단점 : 관절을 하나씩 제어하는 것이 아니므로 팔이 뒤로 꺾이는 등 의 부자연스러운 움직임이 연출 될 수 있음

30

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

(31)

 모션 캡쳐 (Motion Capture)



모션 캡쳐는 인간의 움직임을 만들어내는 가장 자연스러운 방법



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



인간의 움직임을 직접 캡쳐 (Capture) 하여 움직임의 정보를 저장

 마커 (Marker) 또는 트랙커 (Tracker) 센서 사용

(32)

Ⓒsblim, 2010

5.4 웹 애니메이션

 기본적인 웹 애니메이션

 애니메이션 파일의 Embed 방식

(33)

기본적인 웹 애니메이션

 애니메이션 GIF (Animated GIF)



GIF 포맷은 미국 CompuServe 사에서 개발



연속적인 그림으로 구성된 GIF 를 애니메이션 GIF 라 함

 GIF 에 포함된 각 그림의 순서를 정하고 각 그림의 지속 시간과 반복되는 횟수를 정의



가장 기본적인 웹 애니메이션으로 HTML 문서에 자주 사용 5.4 웹 애니메이션

(34)

Ⓒsblim, 2010

 자바 애플릿 (Java Applet)



인터넷 환경의 자바 프로그램 : 웹에서 다운로드 하여 실행



GIF 애니메이션은 단순히 연속된 그림들의 나열인데 비해 Java 는 프로그래밍 언어이기 때문에 여러 가지 효과를 만들어 낼 수 있음 .

[ 시연 : Web]

34

5.4 웹 애니메이션

(35)

 SVG(Scalable Vector Graphics)



웹컨소시엄 (W3C) 에서 정한 2 차원 벡터 그래픽스 표준 언어



XML 언어를 기반

 다른 XML 언어와 결합하여 다양한 웹 애플리케이션으로 응용 가능



모바일 환경에서도 최적화 될 수 있는 특성을 제공

(36)

Ⓒsblim, 2010

애니메이션 파일의 Embed 방식

(1) Shockwave



일반적으로 인터넷에서 데이터의 전송은 제약이 있으므로 압축된 데 이터 , 즉 압축되어 있는 애니메이션을 요구



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



Shockwave 를 제작하기 위한 도구로는 Macromedia 의 Flash(.swf) 와 Director(.dcr)

(37)

(2) AVI



Microsoft 사에서 정의한 멀티미디어 파일교환의 일반적 포맷

(3) QuickTime



초기에는 매킨토시에서 동화상을 보이기 위한 재생기 (Player)



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

[ 시연 : Web]

(38)

Ⓒsblim, 2010

5.5 애니메이션의 활용 ( 생략 )

 만화영화

 영화

 광고

 게임

(39)

5.6 애니메이션 저작도구

 2 차원 애니메이션 저작도구

 3 차원 애니메이션 저작도구

 웹 애니메이션 저작도구

(40)

Ⓒsblim, 2010

2 차원 애니메이션 저작도구

 Animo



만화영화 제작용 소프트웨어 , 키프레임에 기반하여 제작



캐릭터 애니메이션은 벡터 포맷 , 해상도 독립적인 포맷으로 작성

 TOONZ



SoftImage 사 개발 , 셀 애니메이션 제작을 위한 소프트웨어

Animo TOONZ

40

5.6 애니메이션 저작도구

(41)

3 차원 애니메이션 저작도구

 SoftImage XSI



애니메이션만을 비교해 볼 때 다른 제품에 비해 가장 우수한 성능을 지니며 모 델링은 상대적으로 미흡

 MAYA



NURBS 를 이용하여 모델링 , 3 차원 SW 중 가장 뛰어나다는 평가

 3D Studio MAX



비교적 낮은 가격에 높은 품질의 기능을 제공

(42)

Ⓒsblim, 2010

웹 애니메이션 저작도구

 Director

 셀 애니메이션과 트위닝 제작에 필요한 기능을 제공

 Lingo 라는 스크립트 언어를 제공하여 다른 미디어와의 연결 가능

 Flash

 웹에서 벡터 애니메이션을 제작하는 소프트웨어

 인터랙티브한 홈페이지를 제작할 때 필수적

 사용법이 간단하면서 출력물의 결과가 만족스러워 많은 인기

Director 작업화면 Flash 로 만든 eCard

42