제제 장 애니메이션장 애니메이션 66

제 제 6 6 장 애니메이션 장 애니메이션

멀티미디어의 이해

2

6.1 애니메이션의 개요



애니메이션의 원리

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

 잔상 효과 (persistence of vision) 이용

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

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

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

애니메이션의 발전



애니메이션 영화의 역사

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

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

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

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

6.1 애니메이션의 개요



CG 활용 애니메이션 영화

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

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

6.1 애니메이션의 개요



Full CG 애니메이션 영화

 1995, 픽사 ‘ 토이스토리’ : full 3 차원 CG 애니메이션

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

6.1 애니메이션의 개요

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

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

6.1 애니메이션의 개요



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

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

 1989, ‘ 터미네이터 2’

6.1 애니메이션의 개요

 1993, ‘ 주라기 공원’

 2002, ‘ 반지의 제왕’

6.1 애니메이션의 개요



한국 영화

 1994 구미호

 2005 웰컴 투 동막골

 2006 괴물

 2007 D-War

6.2 애니메이션의 종류



전통적인 애니메이션



컴퓨터 애니메이션



특수 효과

전통적인 애니메이션

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

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

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

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

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

 파일의 크기가 크다

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

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

 [ 플립북 시연 ] (Web)

6.2 애니메이션의 종류

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

 1913 년 존 랜돌프가 개발

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

 초기에는 수작업

 1960 년 Xerox 시스템을 사용하여 기계화

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

 "CEL"

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

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

 이러한 Cel 들이 여러 개의 층을 이루어 하나의 프레임 구성

 [20 세기 폭스사 "Lion King" 의 제작과정 ] (Web)

6.2 애니메이션의 종류

컴퓨터 애니메이션



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

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

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

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

6.2 애니메이션의 종류

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

 스프라이트 (Sprite)

 애니메이션에서 독립적으로 움직이는 개체

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

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

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

6.2 애니메이션의 종류

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

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

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

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

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

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

6.2 애니메이션의 종류

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

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

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

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

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

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

 컴퓨터 환경에서도 유사

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

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

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

 Frame Rate: 초당 프레임 수

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

6.2 애니메이션의 종류

특수효과

(1) 모핑 (Morphing)

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

 3 차원 모핑 사용 예 : 마이클 잭슨의 뮤직 비디오 "Dangerous“, 영 화 " 터미네이터 2", 우리나라의 영화 " 구미호 ", " 은행나무 침대 " 등

 모핑의 원리

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

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

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

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

 [ 예제 ] [ 시연 ] (Web)

6.2 애니메이션의 종류

(2) 로토스코핑 (Rotoscoping)

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

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

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

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

6.2 애니메이션의 종류

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

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

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

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

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

6.2 애니메이션의 종류

6.3 애니메이션 기법



전통적인 기법



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



3 차원 컴퓨터 애니메이션

전통적인 기법



양파껍질 효과 (Onion-skinning)

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

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

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

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



도려내기 효과 (Cut-out)

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

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

 [ 시연 ] (Web)



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

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

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



반복 (Cycling)

 여러 개의 프레임을 하나의 cycle 이나 loop 로 만들 수 있음 .

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

6.3 애니메이션 기법

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



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

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

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



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

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



과장 (Exaggeration)

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

3 차원 컴퓨터 애니메이션



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

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

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

6.3 애니메이션 기법



역운동학 (Inverse Kinematics)

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

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

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

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

6.3 애니메이션 기법



모션 캡쳐 (Motion Capture)

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

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

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

 마커 (Marker) 또는 트랙커 (Tracker) 센서 사용 [ 시연 ] (Web)

6.3 애니메이션 기법



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

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

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

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

6.3 애니메이션 기법

6.4 웹 애니메이션



기본적인 웹 애니메이션



Embed 방식의 플러그인 애니메이션



스트리밍 기술을 이용한 애니메이션

기본적인 웹 애니메이션



애니메이션 GIF (Animated GIF)

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

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

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

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

<img

src=“animationGIF.gif”>



자바 애플릿 (Java Applet)

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

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

[ 시연 : Web]



ActiveX

 <Object> 태그를 사용하여 프로그램을 웹페이지에 포함

 인터넷 익스플로러에서 동작

 Visual Basic 이나 C++ 등의 프로그래밍 언어를 사용하여 제작

<applet

code="java.class">

</applet>

6.4 웹 애니메이션



SVG(Scalable Vector Graphics)

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

 XML 언어를 기반

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

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

6.4 웹 애니메이션

Embed 방식의 플러그인 애니메이션

 <embed> 태그를 사용하여 웹이지에 삽입되는 애니메이션

 적절한 플러그인이 설치되어야만 애니메이션이 가능



VRML (Virtual Reality Modeling Language)

 웹에서 상호작용이 가능한 3D 세계를 구축하기 위해 제정된 언어

 1994 년 VRML 1.0, VRML 97 을 거쳐 현재 X3D 로 수정 보안



AVI (Audio Video Interleaved)

 Microsoft 사에 의해 정의

 현재 가장 대표적인 비디오 파일 : AVI, MPEG, QuickTime MOV

[시연 : Web]

6.4 웹 애니메이션

<embed

src=“vrml.wrl”>



Shockwave Flash

 Macromedia 사에서 개발한 애니메이션 기술

 웹에서 상호작용을 할 수 있고 텍스트 , 이미지 , 사운드 , 비디오 등이 통합된 멀티미디어 콘텐츠를 포함



QuickTime

 초기에는 매킨토시에서 동영상을 보이기 위한 Player 에서 사용

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

[ 시연 : Web]

6.4 웹 애니메이션

<embed

src=“dilbert.swf”>

<embed

src=“quicktime.mov”>

6.5 애니메이션의 활용



만화영화



영화



광고



게임



사이버 캐릭터

6.6 애니메이션 저작도구



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



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



웹 애니메이션 저작도구

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



Animo

 Cambridge Animation Systems 사의 만화영화 제작 소프트웨어

 캐릭터 애니메이션은 벡터 포맷 (vector format) 이나 해상도 독립적 인 포맷 (resolution-independent format) 으로 작성

 애니메이션은 캐릭터에 독립적으로 저장되기 때문에 다른 캐릭터에 도 적용 가능

6.6 애니메이션 저작도구



TOONZ

 초기에 캐나다의 소프트이미지 (SoftImage) 사에서 개발

 주로 애니메이션의 후반 작업 프로그램을 지원

 전통적인 애니메이션 제작 방법에서와 같은 작업 구성이지만 비능률적이 고 시간 소모적인 작업을 향상시키는 강력한 기능을 갖추고 있음 .

6.6 애니메이션 저작도구

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



SoftImage XSI

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

 Matrix, 쥬라기 공원 , 마스크에서의 짐캐리의 얼굴 변화 , 토이스토 리에서의 병사들의 행진 , 타이타닉의 스턴트 배우 추락 등에 사용

6.6 애니메이션 저작도구



MAYA

 NURBS 를 이용하여 모델링 된 캐릭터를 애니메이션 시켰을 때 이음 새가 보이지 않고 자연스럽게 움직일 수 있음

 MEL 이라는 스크립트 언어 제공

 C++ API 를 사용하여 플러그인으로 제작 가능

 3 차원 소프트웨어 중에서 가장 뛰어나다고 평가 받고 있으나 고가로 인해 대형 프로젝트에서만 주로 사용

6.6 애니메이션 저작도구



3D Studio MAX

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

 일반 PC 에서도 사용 가능하다는 점 때문에 3 차원 그래픽스와 애니 메이션 분야에서 가장 많은 사용자를 확보

 대형 프로젝트보다는 주로 중소 CG 프로덕션에서 게임 및 멀티미디 어 타이틀을 제작할 때 사용됨 .

6.6 애니메이션 저작도구

웹 애니메이션 저작도구



Flash

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

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

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

 트위닝 기법을 사용하며 , 간단한 형태에 대한 모핑을 제공



Director

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

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

 제작한 내용을 자바 (Java) 애플릿으로도 저장 가능

6.6 애니메이션 저작도구