블렌드 트리와 애니메이션 블렌딩: 움직임을 부드럽게 섞는 마법

게임 속 캐릭터를 떠올려 보세요. 가만히 서 있다가, 천천히 걷다가, 갑자기 뛰어갑니다. 그런데 이상하지 않나요? 서 있는 동작과 걷는 동작은 서로 다른 애니메이션인데, 왜 뚝뚝 끊기지 않고 물 흐르듯 이어질까요?

비밀은 블렌딩(blending)에 있습니다. 우리말로 하면 "섞기"입니다. 오늘은 이 섞기의 세계로 들어가 봅시다.

1. 애니메이션은 사진첩이다

먼저 애니메이션이 무엇인지부터 짚고 갑시다.

공책 귀퉁이에 그림을 조금씩 다르게 그려서 빠르게 넘겨 본 적 있나요? 그러면 그림이 살아 움직입니다. 이걸 플립북이라고 부릅니다. 애니메이션의 원리가 딱 이겁니다.

게임 캐릭터의 "걷기 애니메이션"도 마찬가지입니다. 여러 장의 자세 사진을 순서대로 보여주는 것입니다. 왼발 앞으로, 오른발 앞으로, 다시 왼발… 이 사진 한 장 한 장을 프레임(frame)이라고 합니다.

그런데 사진이 너무 적으면 어떻게 될까요? 뚝뚝 끊겨 보입니다. 로봇처럼요.

2. 사이를 채우는 기술, 보간

여기서 등장하는 것이 보간(interpolation)입니다. 이름은 어렵지만 뜻은 아주 쉽습니다. "사이를 채운다"는 말입니다.

비유를 들어볼게요. 친구가 여러분에게 이렇게 말합니다.

"나 아침에는 집에 있었고, 저녁에는 학교에 있었어."

그럼 낮에는 어디 있었을까요? 아마 집과 학교 사이 어딘가겠죠. 이렇게 앞과 뒤를 알면 중간을 짐작할 수 있습니다. 이게 보간입니다.

캐릭터의 팔이 프레임 1에서는 아래에 있고, 프레임 2에서는 위에 있다면? 그 중간은 팔이 비스듬히 있는 상태입니다. 컴퓨터가 이 중간 자세를 자동으로 계산해서 만들어 줍니다.

3. 블렌딩은 물감 섞기

블렌딩은 보간을 한 단계 더 밀고 나간 것입니다.

미술 시간을 떠올려 보세요. 파란 물감과 빨간 물감을 섞으면 보라색이 나옵니다. 파랑을 많이 넣으면 파란 보라, 빨강을 많이 넣으면 붉은 보라가 됩니다.

애니메이션 블렌딩도 똑같습니다. 걷기 애니메이션과 달리기 애니메이션을 섞으면, 그 중간인 "빠른 걸음"이 나옵니다.

• 걷기 100% + 달리기 0% → 그냥 걷기
• 걷기 50% + 달리기 50% → 빠른 걸음
• 걷기 0% + 달리기 100% → 전력 질주

이 "몇 퍼센트 섞을지"를 정하는 숫자를 가중치(weight)라고 부릅니다. 물감을 얼마나 짤지 정하는 것과 같습니다.

4. 블렌드 트리: 섞기 규칙을 담은 나무

그런데 애니메이션이 두 개뿐이면 쉽습니다. 문제는 애니메이션이 열 개, 스무 개일 때입니다.

가만히 서 있기, 살금살금 걷기, 보통 걷기, 뛰기, 전력 질주하기… 게다가 왼쪽으로 꺾기, 오른쪽으로 꺾기까지. 이걸 전부 손으로 관리하면 머리가 터집니다.

그래서 만든 것이 블렌드 트리(Blend Tree)입니다.

블렌드 트리는 "이 숫자가 이만큼일 때는 이 애니메이션들을 이 비율로 섞어라"라는 규칙을 나무 모양으로 정리해 놓은 표입니다.

자동판매기 비유

블렌드 트리는 자동판매기와 비슷합니다.

1. 여러분이 숫자를 하나 넣습니다. (예: 속도 = 3)
2. 기계가 그 숫자를 보고 어떤 애니메이션을 얼마나 섞을지 계산합니다.
3. 완성된 자세 하나가 툭 나옵니다.

여기서 넣는 숫자를 언리얼 엔진에서는 파라미터라고 부릅니다. 속도, 방향, 기울기 같은 것들이죠.

5. 왜 이렇게까지 하나요?

"그냥 걷기용 애니메이션, 뛰기용 애니메이션 따로 만들어서 딱딱 바꿔주면 안 되나요?"

좋은 질문입니다. 그런데 그렇게 하면 세 가지 문제가 생깁니다.

문제 1: 뚝 끊깁니다

걷다가 갑자기 뛰기로 확 바뀌면, 캐릭터의 다리가 순간이동을 합니다. 보는 사람 눈에는 "버그처럼" 보입니다. 블렌딩은 이 사이를 부드럽게 이어줍니다.

문제 2: 애니메이션을 무한히 만들 수 없습니다

속도가 1일 때, 1.1일 때, 1.2일 때… 이렇게 다 만들면 애니메이터가 쓰러집니다. 대신 서 있기 · 걷기 · 달리기 세 개만 만들고, 중간은 블렌드 트리가 만들어 냅니다. 세 개로 무한한 속도를 표현하는 셈입니다.

문제 3: 용량이 커집니다

애니메이션 파일은 생각보다 무겁습니다. 몇 개만 저장하고 나머지는 계산으로 만들면, 게임이 훨씬 가벼워집니다.

6. 프레임 사이를 채우는 또 다른 기술

재미있는 것은, 이 "사이 채우기" 아이디어가 게임 밖에서도 쓰인다는 점입니다.

영상 기술에는 모션 인터폴레이션이라는 것이 있습니다. 원래 영상에 없던 프레임을 컴퓨터가 만들어서 끼워 넣는 기술입니다. 우리말로는 "프레임 생성"이라고도 합니다.

이걸 쓰면 이런 효과가 납니다.

• 더 부드러워집니다. 1초에 30장이던 영상이 60장이 되면 훨씬 매끄럽습니다.
• 흐릿함이 줄어듭니다. 화면이 빠르게 움직일 때 생기는 번짐을 줄여줍니다.
• 느린 화면을 만들 수 있습니다. 없던 프레임을 만들어 넣으니, 천천히 재생해도 뚝뚝 끊기지 않습니다.

원리는 똑같습니다. 앞 장면과 뒤 장면을 보고, 그 사이를 짐작해서 그린다. 애니메이션 블렌딩과 한 형제입니다.

7. 언리얼에서는 어떻게 생겼나요?

언리얼 엔진에는 애님 블루프린트(Animation Blueprint)라는 도구가 있습니다. 캐릭터가 어떤 애니메이션을 언제 재생할지 정하는 설계도입니다.

이 설계도 안에 블렌드 트리가 들어갑니다. 언리얼에서는 블렌드 스페이스(Blend Space)라는 이름으로도 부릅니다.

사용법은 놀랍도록 단순합니다.

1. 가로축에 속도를 놓습니다. (0 ~ 600)
2. 축 위 여기저기에 애니메이션을 점처럼 찍어 둡니다.
   • 속도 0 자리에 → 서 있기
   • 속도 200 자리에 → 걷기
   • 속도 600 자리에 → 달리기
3. 게임 중에 캐릭터 속도가 350이 되면? 언리얼이 알아서 걷기와 달리기를 적당한 비율로 섞습니다.

축을 두 개로 늘릴 수도 있습니다. 가로축은 속도, 세로축은 방향. 그러면 "오른쪽으로 빠르게 달리기" 같은 것도 자동으로 만들어집니다. 지도 위에 점을 찍는 것과 비슷합니다.

8. 함께 알아두면 좋은 친구, 컨트롤 릭

블렌드 트리가 미리 만든 애니메이션을 섞는 도구라면, 컨트롤 릭(Control Rig)은 뼈를 직접 움직이는 도구입니다.

예를 들어 캐릭터가 계단을 오를 때, 미리 만든 걷기 애니메이션만으로는 발이 계단에 정확히 닿지 않습니다. 발이 공중에 뜨거나 계단에 파묻힙니다.

이때 컨트롤 릭이 나섭니다. "발이 계단 위에 닿도록 다리를 살짝 굽혀라." 이렇게 블렌딩이 끝난 결과를 마지막에 한 번 더 손보는 역할입니다.

순서로 정리하면 이렇습니다.

9. 블렌딩이 실패할 때

블렌딩이 항상 예쁜 결과를 주는 것은 아닙니다. 물감도 아무거나 섞으면 탁한 갈색이 되잖아요.

애니메이션도 그렇습니다. 너무 다른 두 동작을 섞으면 이상해집니다.

• "누워 있기"와 "점프하기"를 반반 섞으면? 공중에 누운 유령 같은 자세가 나옵니다.
• 왼발이 앞으로 나간 걷기와, 오른발이 앞으로 나간 걷기를 반반 섞으면? 두 발이 나란히 붙어서 어색해집니다.

그래서 좋은 블렌드 트리를 만들려면 비슷한 성격의 애니메이션끼리 묶어야 합니다. 그리고 걷기와 달리기는 발이 땅에 닿는 순간을 맞춰줘야 합니다. 이걸 싱크(sync), 즉 "박자 맞추기"라고 합니다. 두 사람이 손잡고 걸을 때 발을 맞추는 것과 같습니다.

10. 정리

오늘 배운 것을 한 문장씩 정리해 봅시다.

• 애니메이션은 자세 사진을 빠르게 넘기는 플립북이다.
• 보간은 앞과 뒤를 보고 사이를 채우는 것이다.
• 블렌딩은 두 애니메이션을 물감처럼 비율대로 섞는 것이다.
• 가중치는 얼마나 섞을지 정하는 숫자다.
• 블렌드 트리는 그 섞기 규칙을 정리한 자동판매기다.
• 컨트롤 릭은 섞은 결과를 마지막에 손보는 도구다.
• 너무 다른 동작을 섞으면 이상한 자세가 나온다.

게임 속 캐릭터가 자연스럽게 움직이는 것은 우연이 아닙니다. 몇 개의 애니메이션과, 그것을 똑똑하게 섞는 규칙 덕분입니다.

다음에 게임을 할 때 캐릭터를 천천히 걷게 했다가 점점 빠르게 만들어 보세요. 그 부드러운 변화 뒤에서 블렌드 트리가 쉬지 않고 계산하고 있을 겁니다.