모바일 게임에서 캐릭터가 숨 쉬듯 흔들리고, 스킬을 쓸 때 팔다리가 부드럽게 움직이는 장면의 상당수는 스파인 같은 2D 뼈대 애니메이션 툴로 만듭니다. 프레임마다 그림을 새로 그리는 대신, 이미지 조각에 뼈를 심어 움직이는 방식입니다. 처음 스파인을 여는 분이 알아야 할 구조와 작업 흐름을 정리합니다.

스파인은 어떤 방식으로 움직이나

전통적인 2D 애니메이션은 동작의 각 순간을 한 장씩 그리는 프레임 방식입니다. 스파인은 캐릭터를 머리, 몸통, 팔, 다리처럼 여러 조각의 이미지로 나눈 뒤, 각 조각을 뼈(본)에 연결해 뼈를 돌리고 옮기는 방식으로 움직입니다. 이런 방식을 흔히 본 애니메이션 또는 컷아웃 애니메이션이라고 부릅니다.

이 방식의 장점은 용량과 재사용성입니다. 같은 이미지 조각으로 대기, 걷기, 공격 등 여러 동작을 만들 수 있고, 엔진에서는 뼈 위치 정보만 재생하므로 프레임 이미지를 수십 장 쓰는 것보다 가볍습니다. 대신 조각의 경계가 보이지 않도록 원화 단계부터 분리를 잘 해 두어야 합니다.

꼭 알아야 할 네 가지 구성 요소

처음에는 본과 슬롯의 차이가 헷갈립니다. 본은 '어떻게 움직일지', 슬롯은 '무엇을 어떤 순서로 그릴지'를 담당한다고 기억하면 됩니다.

셋업 모드와 애니메이트 모드

스파인 화면 왼쪽 위에는 모드 전환 버튼이 있습니다. 셋업 모드는 캐릭터의 기본 자세와 뼈대를 만드는 곳이고, 애니메이트 모드는 타임라인에 키(특정 시점의 자세)를 찍어 동작을 만드는 곳입니다.

• 셋업 모드에서 바꾼 내용은 모든 애니메이션의 기준이 됩니다. 뼈 위치를 여기서 바꾸면 이미 만든 동작도 영향을 받습니다.
• 애니메이트 모드에서 바꾼 내용은 현재 애니메이션에만 키로 기록됩니다.
• 초보자가 가장 많이 하는 실수는 애니메이트 모드에서 뼈대를 고치려다 키가 잔뜩 찍히는 것입니다. 작업 전 현재 모드를 확인하는 습관을 들이세요.

작업 흐름 한 바퀴

1. 원화를 파츠별 레이어로 나눈 PSD를 준비합니다. 팔과 몸통이 겹치는 부분은 가려진 영역까지 그려 두어야 움직일 때 빈틈이 생기지 않습니다.
2. 포토샵 레이어를 스파인용 데이터로 내보내는 스크립트를 이용해 이미지와 위치 정보를 가져옵니다.
3. 셋업 모드에서 골반을 중심으로 몸통, 머리, 팔다리 순서로 본을 만들고 이미지를 연결합니다.
4. 애니메이트 모드에서 대기 동작처럼 단순한 반복 동작부터 만들어 봅니다.
5. 결과물을 JSON 또는 바이너리 데이터와 텍스처 아틀라스(여러 이미지를 한 장에 모은 파일)로 내보냅니다.
6. 엔진용 런타임(스파인 데이터를 재생하는 공식 라이브러리)을 통해 유니티 등에서 재생을 확인합니다.

처음 만들어 볼 동작 추천

대기(아이들) 동작이 가장 좋은 첫 과제입니다. 몸통이 살짝 오르내리고, 머리카락과 옷자락이 한 박자 늦게 따라오는 움직임만 만들어도 본 구조, 키 배치, 반복 재생을 모두 연습할 수 있습니다. 그다음에는 걷기, 공격, 피격 순서로 난도를 올립니다.

스파인은 에디션에 따라 메시 등 일부 기능 사용 여부가 다르므로, 연습하려는 기능이 내가 쓰는 에디션에 포함되는지 공식 안내에서 확인하세요. SBS아카데미게임학원 2D애니메이션&스파인 과정은 스파인 기본 기능과 뼈 애니메이션, 캐릭터 애니메이션에서 시작해 메시 기능과 포트폴리오까지 이어집니다.

자주 묻는 질문