(주)에버스톤 · 부산 해운대 BCC 613호

메쉬 정점을 손으로 찍던 시대의 끝 — 2D 애니메이션 파이프라인 자동화

스프라이트 하나에 15~60분 걸리던 메쉬 작업, 머리카락 흔들림을 키프레임으로 잡던 작업이 자동화되고 있습니다. 물리 제약·IK·성능 최적화까지 실무 관점으로 정리했습니다.

에버스톤10분 분량디자인 · UX게임 개발 · 퍼블리싱
메쉬 정점을 손으로 찍던 시대의 끝 — 2D 애니메이션 파이프라인 자동화 대표 이미지

앞서 정리한 글이 2D 애니메이션의 원칙을 다뤘다면, 이 글은 작업 시간이 실제로 어디에 쓰이고 무엇이 자동화되고 있는지를 다룹니다. 뼈대를 심는 방식으로 바뀌었어도, 그 준비 작업은 여전히 손으로 하고 있었습니다.

이 문서는 NotebookLM(노트북 LM)으로 자료를 조사해 만든 문서입니다.

  • 애니메이션은 그리는 일에서 설계하는 일로 바뀌었습니다
  • 병목은 애니메이션이 아니라 메쉬 준비였습니다. 스프라이트 하나에 15~60분
  • 머리카락·옷자락 같은 보조 움직임은 물리 파라미터로 넘깁니다
  • 잘 만든 애니메이션도 엔진에서 최적화되지 않으면 프레임이 떨어집니다
  • 애니메이터의 역할이 작업자에서 규칙을 설계하는 사람으로 이동합니다

무엇이 바뀌었나

과거와 현재 비교 슬라이드. 과거는 프레임 바이 프레임으로, 초당 12~24장의 도면을 수작업해야 해서 막대한 노동력과 수정의 어려움, 기하급수적인 리소스 용량이 문제였다. 현재는 2D 스켈레탈 애니메이션으로, 단 한 장의 이미지에 뼈대(Bone)를 심어 생명을 부여한다. 가운데 문구는 애니메이션의 패러다임이 그리는 것(Drawing)에서 설계하는 것(Rigging)으로 전환되었다는 것

전통적 프레임 애니메이션과 스켈레탈 애니메이션(Spine/Live2D) 비교표. 파일 용량은 수십~수백 장의 이미지 데이터 대 이미지 1장과 가벼운 텍스트(JSON) 데이터로 압도적 절감. 수정 편의성은 동작 수정 시 전체 프레임 재작업 대 뼈대의 키프레임 수치만 조정. 해상도는 확대 시 픽셀 깨짐 대 벡터 기반 뼈대로 부드러운 스케일링 가능. 애니메이션 블렌딩은 불가능 대 걷기와 공격 등 두 모션의 실시간 혼합 연산 가능

진짜 병목은 따로 있었다

작업 준비의 병목 현상 슬라이드. 메쉬 정점이 촘촘히 찍힌 팔 이미지와 함께, 소요 시간은 스프라이트 1개당 평균 15분에서 60분. 스켈레탈 애니메이션의 효율성을 누리려면 이미지를 조각내고 구부러질 부분에 메쉬 정점을 하나하나 찍어야 하며, 수백 개의 에셋이 필요한 게임 파이프라인에서는 치명적인 리소스 낭비가 발생한다는 설명

이 계산이 현실적입니다. 캐릭터 한 명에 파츠가 스무 개라면 준비 작업만 하루가 갑니다. 애니메이션을 만들기도 전에요.

SpriteToMesh AI 파이프라인 슬라이드. Input → Mask → Exterior → Interior → Triangulation → Result 의 6단계가 원클릭으로 자동 처리되는 도식. 수작업은 15~60분이 걸리지만 AI는 3초 미만으로 최대 1200배의 속도 향상. 10만 개 이상의 게임 에셋을 학습한 EfficientNet-B0 신경망을 도입해 외곽선 추출부터 내부 시각적 경계선(색상·형태) 인식, 들로네 삼각분할까지 자동 처리한다는 설명

AI가 정점을 찍는 원리 슬라이드. 1 Original 원본 이미지, 2 Bilateral filter 로 텍스처의 자잘한 노이즈는 무시하고 구조적 윤곽만 유지, 3 Multi-channel Canny 로 RGB 각 채널의 숨겨진 경계선을 찾아내어 자연스럽게 관절이 꺾이는 지점에 내부 정점을 자동 배치

움직임을 계산에 맡긴다

절차적 애니메이션 슬라이드. 왼쪽은 키프레임이 빽빽한 타임라인에 빨간 X 표시와 함께, 보조 움직임(머리카락, 옷자락)을 일일이 키프레임으로 잡는 시대의 종말이라는 설명. 오른쪽은 Stiffness 1.25, Damping 0.30, Gravity, Wind Force 슬라이더와 부드럽게 휘날리는 머리카락 궤적 그림으로, 알고리즘과 물리 법칙에 모션을 위임하여 자연스러움과 효율성을 동시에 확보한다는 설명

Spine 물리 제약의 4대 핵심 파라미터. 관성(Inertia) — 뼈대가 움직일 때 발생하는 지연 현상으로 무거운 물체일수록 값이 커진다. 강도(Strength) — 원래의 형태로 돌아가려는 복원력의 크기. 감쇠(Damping) — 움직임이 서서히 멈추게 만드는 저항으로 부드러운 안착을 유도한다. 마찰(Friction) — 움직임의 속도를 지속적으로 늦추는 외부 환경 변수. 추가로 중력과 바람의 X/Y 축 벡터 값을 통해 실시간 환경 변화를 적용할 수 있다

이 방식의 큰 이득은 한 번 맞춰 두면 모든 동작에 적용된다는 점입니다. 걷기·달리기·피격마다 머리카락을 따로 잡지 않아도 됩니다.

Forward Kinematics 와 Inverse Kinematics 비교 슬라이드. 왼쪽 수동 관절 회전(FK)은 엉덩이·무릎·발목을 순차적으로 회전시켜야 한다. 오른쪽 역운동학(IK)은 목표 지점만 설정하면 관절이 알아서 따라오며, 발끝의 타겟 위치만 움직이면 무릎과 골반의 꺾임 각도를 알고리즘이 역산해 자동 배치한다. 지형에 맞춘 자연스러운 걷기나 무기 조준 등 정확한 접촉이 필요한 모션 제어에 필수적이라는 설명

엔진에서 죽지 않게 하려면

게임 엔진과의 통합 및 퍼포먼스 병목 슬라이드. 수많은 에셋이 깔때기를 통해 모바일 하드웨어 제약이라는 압착기를 지나 Unity 와 Unreal 로 내려가는 도식. 모바일 환경에서 다수의 2D 애니메이션이 동시 구동될 때 발생하는 CPU/GPU 부하 해결이 필수이며, 아무리 뛰어난 애니메이션도 엔진에서 최적화되지 않으면 프레임 드랍의 원인이 된다는 설명

성능 최적화 체크리스트. 드로우 콜 관리 — 여러 에셋을 하나의 텍스처 아틀라스로 병합하여 렌더링 호출 횟수를 최소화한다. 불필요한 메쉬 정점 제거 — 클리핑 폴리곤 사용을 자제하고 시각적 변형이 없는 부위의 정점 수를 최소화한다. 렌더러의 올바른 선택(Unity 환경) — UI 환경에서는 SkeletonGraphic, 3D 공간 및 비UI 요소에는 SkeletonAnimation 을 사용한다

두 번째 항목이 특히 자주 놓치는 부분입니다. AI가 정점을 자동으로 찍어 주면 정점이 필요 이상으로 많아지기 쉽습니다. 자동화 뒤에 정리하는 단계를 두는 편이 좋습니다.

2.5D 하이브리드 워크플로우 도식. Layer 1 은 2D 스켈레탈 리그(Spine/Live2D)가 놓인 2D 평면, Layer 2 는 3D 볼류메트릭 공간(엔진 런타임), Layer 3 는 실시간 광원과 그림자(Unreal/Unity). 2D 평면 애니메이션에 실시간 조명·그림자·파티클 이펙트를 결합해 최소한의 2D 리소스로 3D급 공간감과 시각 효과를 구현한다는 설명

역할이 바뀐다

애니메이터 역할의 진화 도식. 단순 노동자(Manual Laborer)에서 AI 보조 및 물리 연산 도입을 거쳐 시스템 설계자(System Conductor)로 이동하는 화살표. AI와 절차적 물리 연산이 반복적인 프레임 생성과 세팅의 시간을 벌어 주며, 미래의 애니메이터는 손으로 그리는 작업자가 아니라 규칙을 설계하고 물리 파라미터를 조율하며 감정과 디테일을 총괄하는 크리에이티브 디렉터로 진화한다는 설명

2D 애니메이션 트렌드 세 가지. 미세 애니메이션(Micro-Animations) — UI/UX 내에서 유저의 시선을 유도하고 상호작용을 극대화하는 부드러운 모션 디자인의 필수화. VR/AR 융합 — 3D 공간 내에 배치되는 고해상도 2D 인터랙티브 에셋의 수요 급증. 완전한 절차적 생성 — 데이터 기반으로 상황에 맞게 실시간 변화하는 스마트 애니메이션 파이프라인 정착

마무리 슬라이드. 선으로 그린 골격 그림과 함께, 기술은 도구일 뿐 핵심은 변하지 않는다는 문구. 자동화와 물리 연산, 엔진 최적화는 결국 창작자가 오직 창의성에만 집중할 수 있는 환경을 구축하기 위한 설계도라는 설명

자주 묻는 질문

메쉬 자동 생성 도구를 쓰면 손으로 잡은 것만큼 나오나요? 단순한 파츠는 대체로 쓸 만하고, 관절이 복잡하거나 반투명이 섞인 부위는 손질이 필요합니다. 실무에서는 자동 생성 후 문제 구간만 고치는 방식이 시간을 가장 많이 아낍니다. 처음부터 전부 손으로 찍는 것과 비교하면 차이가 큽니다.

물리 연산을 켜면 모바일에서 무겁지 않나요? 물리 제약이 붙은 뼈대 수에 비례합니다. 머리카락 전체에 거는 대신 대표 뼈대 몇 개에만 걸고 나머지는 따라오게 하면 부하가 크게 줄어듭니다. 화면에 동시에 나오는 캐릭터 수를 기준으로 상한을 정해 두는 편이 안전합니다.

Spine과 Live2D 중 무엇을 골라야 하나요? 캐릭터가 전신으로 움직이고 게임 플레이에 직접 관여하면 뼈대 기반 쪽이, 상반신 연출과 표정 변화가 중심이면 다른 쪽이 편합니다. 실제로는 엔진 연동과 팀의 숙련도가 결정적인 경우가 많습니다. 도구 성능 차이보다 이쪽이 일정에 더 영향을 줍니다.

정점을 줄이면 움직임이 딱딱해지지 않나요? 변형이 일어나는 곳과 아닌 곳을 나누면 대부분 해결됩니다. 팔꿈치·무릎처럼 휘는 부위는 남기고, 평평하게 움직이는 갑옷·소품은 정점을 최소화합니다. 전 구간을 균일하게 촘촘히 찍는 것이 가장 비효율적입니다.

저희가 이 이야기를 하는 이유

에버스톤은 자체 게임의 캐릭터 애니메이션을 사내에서 만듭니다. 캐릭터 수가 늘어날수록 애니메이션 작업보다 준비 작업에서 일정이 밀리는 것을 여러 번 겪었습니다. 그래서 새 캐릭터를 시작할 때 파츠 분리 기준과 정점 밀도 기준을 먼저 정해 두고, 자동화 도구는 그 기준 안에서 씁니다.

인용한 처리 속도와 도구 정보는 원 자료 기준이며, 저희가 측정한 값이 아닙니다.

다른 글