애니메이션: 키프레임과 인비트윈

움직이는 그림의 비밀, 키프레임과 인비트윈

여러분이 좋아하는 만화 영화를 떠올려 보세요. 캐릭터가 뛰고, 웃고, 춤을 춥니다. 그런데 사실 만화 영화는 움직이지 않아요. 그냥 그림을 아주 빠르게 넘겨서 보여 주는 것이랍니다. 마치 공책 귀퉁이에 그림을 그리고 촤르륵 넘기는 것과 같아요.

그림책을 빠르게 넘기면 그림이 살아 움직이는 것처럼 보이죠? 애니메이션도 똑같아요. 1초에 그림을 12장에서 24장씩 보여 줍니다. 그러면 우리 눈은 "우와, 움직인다!" 하고 착각하게 돼요.

그런데 그 많은 그림을 어떻게 다 그릴까요? 여기에 아주 똑똑한 방법이 숨어 있어요. 바로 키프레임과 인비트윈이랍니다. 오늘은 이 두 친구를 차근차근 알아볼 거예요.

키프레임: 가장 중요한 순간의 그림

공을 던지는 장면을 만든다고 상상해 보세요. 가장 중요한 순간은 무엇일까요?

첫째, 공을 손에 쥐고 팔을 뒤로 뺀 순간. 둘째, 공이 손에서 떠나는 순간. 셋째, 공이 저 멀리 떨어지는 순간. 이렇게 이야기의 뼈대가 되는 중요한 순간의 그림을 키프레임(열쇠 그림)이라고 불러요.

키프레임은 '열쇠'라는 뜻의 '키(key)'가 붙어 있어요. 열쇠가 문을 열듯이, 이 그림들이 움직임 전체를 결정하는 열쇠이기 때문이에요. 실력이 뛰어난 애니메이터, 그러니까 그림 실력이 가장 좋은 선생님이 이 키프레임을 그린답니다.

키프레임은 징검다리의 큰 돌과 같아요. 강을 건널 때 큰 돌이 먼저 놓여 있어야 어디로 갈지 알 수 있잖아요? 애니메이션도 키프레임이 먼저 있어야 움직임의 방향이 정해져요.

인비트윈: 사이를 채우는 그림

그런데 키프레임만 있으면 어떻게 될까요? 공이 손에 있다가 갑자기 뿅! 하고 멀리 떨어져 있을 거예요. 순간이동을 한 것처럼 뚝뚝 끊겨 보이겠죠.

그래서 키프레임과 키프레임 사이를 채우는 그림이 필요해요. 이 그림들을 인비트윈이라고 불러요. 영어로 '인비트윈(in-between)'은 '사이에 있는 것'이라는 뜻이에요. 그리고 이렇게 사이 그림을 그리는 일을 인비트위닝 또는 트위닝이라고 한답니다.

징검다리로 다시 생각해 볼까요? 큰 돌(키프레임) 사이에 작은 돌(인비트윈)을 촘촘히 놓으면, 폴짝폴짝 끊기지 않고 부드럽게 강을 건널 수 있어요. 인비트윈이 많을수록 움직임은 더 매끄러워져요.

아래 그림을 보면 한눈에 이해될 거예요. 공이 왼쪽에서 오른쪽으로 굴러가는 장면이에요.

옛날 애니메이션은 손으로 다 그렸어요

컴퓨터가 없던 시절에는 이 모든 그림을 사람이 손으로 그렸어요. 경험이 많은 선배 애니메이터가 키프레임을 그리면, 조수인 후배 애니메이터가 사이 그림인 인비트윈을 그렸답니다. 마치 요리사 선생님이 요리의 중요한 순서를 정하면, 조수가 채소를 썰고 재료를 준비하는 것과 비슷해요.

재미있는 사실이 하나 있어요. 손으로 그리는 애니메이션은 1초에 24장을 모두 다르게 그리지 않는 경우가 많아요. 그림 한 장을 두 번씩 보여 주는 방법을 쓰거든요. 이걸 "2장씩 찍기(on twos)"라고 해요. 그러면 1초에 12장만 그려도 충분히 자연스럽게 보여요. 이 방법은 무려 100년도 더 전인 1908년, 세계 최초의 애니메이션 영화라고 불리는 '판타스마고리'에서도 쓰였답니다.

요즘은 컴퓨터가 사이 그림을 그려요

지금은 컴퓨터가 인비트윈 그리기를 도와줘요. 사람이 시작 그림과 끝 그림, 그러니까 키프레임 두 개만 정해 주면 컴퓨터가 그 사이를 자동으로 계산해서 채워 준답니다. 이것을 트위닝이라고 불러요.

컴퓨터 트위닝에는 여러 종류가 있어요. 동그라미가 네모로 서서히 변하는 모양 트위닝, 물체가 이쪽에서 저쪽으로 이동하는 움직임 트위닝, 빨간색이 파란색으로 서서히 바뀌는 색깔 트위닝이 있지요.

예를 들어 볼까요? 여러분이 "공아, 처음엔 왼쪽에 있다가 1초 뒤에 오른쪽으로 가 있어!"라고 명령하면, 컴퓨터는 그 사이의 모든 위치를 스스로 계산해서 공을 부드럽게 움직여 줘요. 사람이 그림을 수십 장 그릴 필요가 없으니 정말 편리하죠.

우리 주변 어디에나 있어요

키프레임과 인비트윈은 만화 영화에만 있는 게 아니에요. 우리 주변 곳곳에 숨어 있답니다.

스마트폰에서 앱을 누르면 화면이 스르륵 커지죠? 그것도 트위닝이에요. 게임 캐릭터가 점프하는 것도, 유튜브에서 자막이 부드럽게 나타나는 것도 모두 키프레임과 인비트윈으로 만들어져요. 웹사이트의 버튼이 마우스를 올렸을 때 살짝 커지는 것도 마찬가지랍니다.

여러분도 직접 해 볼 수 있어요. 공책 귀퉁이에 첫 장에는 막대 사람이 서 있는 그림, 마지막 장에는 팔을 번쩍 든 그림을 그려 보세요. 이게 바로 키프레임이에요. 그다음 그 사이 장들에 팔이 조금씩 올라가는 그림을 그려 넣으면? 그게 인비트윈이죠. 이제 촤르륵 넘겨 보세요. 여러분만의 애니메이션이 완성됩니다!

정리해 볼까요?

오늘 배운 내용을 한 번에 모아 볼게요.

• 애니메이션은 그림을 빠르게 넘겨서 움직이는 것처럼 보이게 하는 마법이에요.
• 키프레임은 움직임의 뼈대가 되는 가장 중요한 순간의 그림이에요. 징검다리의 큰 돌과 같아요.
• 인비트윈은 키프레임 사이를 채우는 그림이에요. 큰 돌 사이의 작은 돌처럼 움직임을 부드럽게 만들어 줘요.
• 옛날에는 사람이 손으로 인비트윈을 그렸지만, 지금은 컴퓨터가 자동으로 계산해서 채워 줘요. 이걸 트위닝이라고 해요.

다음에 만화 영화를 볼 때는 이렇게 생각해 보세요. "저 부드러운 움직임 뒤에는 수많은 키프레임과 인비트윈이 숨어 있구나!" 그러면 애니메이션이 두 배로 재미있어질 거예요.

출처

• 키프레임과 인비트윈