Cocos 스프라이트 시트 실전: 큰 이미지 한 장을 여러 애니메이션 프레임으로 나누는 완전한 방법

Midjourney나 Stable Diffusion으로 캐릭터의 시퀀스 프레임 애니메이션을 만들었다고 해보겠습니다. 모든 프레임이 한 장의 이미지 위에 배열되어 있습니다. 서 있기, 출발하기, 달리기, 멈추기까지 총 8프레임이 가지런히 놓여 있습니다.

겉보기에는 꽤 완벽해 보입니다.

하지만 Cocos Creator로 가져온 뒤 문제가 드러납니다. 이것은 8장의 독립 이미지가 아니라 큰 이미지 한 장입니다. 캐릭터의 각 동작을 어떻게 잘라낼까요? 재생 가능한 Animation Clip으로는 어떻게 만들까요?

준비된 plist 설정 파일은 없고, 손으로 자르기에는 너무 느립니다. 이 글에서는 무료 온라인 도구부터 전문 소프트웨어까지 세 가지 방법을 정리해 가장 수월한 길을 고를 수 있게 도와드립니다.

Sprite Sheet란 무엇이고, 왜 게임 개발에 꼭 필요할까요?

Sprite Sheet는 국내 개발자에게도 보통 “스프라이트 시트” 또는 “아틀라스”라고 불립니다. 간단히 말하면 여러 장의 작은 이미지를 큰 이미지 한 장으로 합치고, 각 작은 이미지의 위치와 크기를 설정 파일에 기록하는 방식입니다.

예를 들어 캐릭터 애니메이션이 있고, 동작은 8프레임이며 각 프레임이 64x64픽셀이라고 해보겠습니다. 따로 저장하면 8개의 독립 PNG 파일입니다. 하지만 스프라이트 시트로 만들면 이 8프레임을 512x64 또는 256x256 크기의 이미지 한 장으로 합칠 수 있고, 여기에 plist 또는 json 파일을 붙여 “첫 번째 프레임은 (0,0)에 있고, 두 번째 프레임은 (64,0)에 있다”는 식으로 알려줄 수 있습니다.

왜 이렇게 번거로운 작업을 할까요? 이유는 분명히 두 가지입니다.

Draw Call을 줄입니다. 가장 직접적인 성능 이점입니다. Draw Call은 GPU가 그리기 명령을 호출하는 횟수입니다. 8장의 분리 이미지를 같은 장면에 표시하더라도 GPU는 8번 나누어 처리해야 합니다. 텍스처가 바뀔 때마다 새 바인딩 작업이 필요하기 때문입니다. 한 장으로 합치면 Draw Call은 1번이면 되고, 렌더링 효율은 바로 좋아집니다. 모바일처럼 하드웨어 여유가 제한된 플랫폼에서는 이 차이가 꽤 뚜렷합니다.

Cocos 공식 문서의 데이터에 따르면 복잡한 장면에서 Draw Call을 수십 회에서 몇 회로 줄이면 프레임레이트를 60 FPS 근처로 안정적으로 유지할 수 있습니다. 저도 작은 게임을 만들 때 직접 확인한 적이 있습니다. 캐릭터 애니메이션을 분리 이미지에서 아틀라스로 바꾸자 저사양 Android 기기의 끊김이 눈에 띄게 줄었습니다.

메모리 조각화를 줄입니다. TexturePacker 공식 테스트에 따르면 아틀라스는 분리 이미지보다 메모리 사용량을 30-50% 절약할 수 있습니다. 원리는 어렵지 않습니다. 분리 이미지는 각각 독립적인 텍스처 버퍼를 갖고, 가장자리 정렬이나 포맷 변환 같은 비용이 누적됩니다. 한 장으로 합치면 메모리 배치가 더 조밀해지고 GPU도 더 수월하게 처리합니다.

그럼 설정 파일은 어떤 형식일까요? Cocos Creator는 plist를 사용하고, 범용 도구는 json을 많이 씁니다. plist는 Apple 계열의 설정 형식으로, XML 구조 안에 각 SpriteFrame의 이름, 좌표, 크기, 회전 정보를 기록합니다. json 형식도 비슷하지만 더 간결하고, 많은 온라인 도구와 Unity가 지원합니다.

세 가지 분할 방법: 무엇이 가장 편할까요?

손에 큰 이미지 한 장만 있고 설정 파일이 없다면 어떻게 나눌까요? 세 가지 방법이 있습니다. 자신의 상황에 맞춰 고르면 됩니다.

방법 1: TexturePacker 전문 도구

게임 업계에서 많이 쓰는 선택지입니다. TexturePacker는 아틀라스 패킹과 분해에 특화된 도구이며 Cocos, Unity, SpriteKit 등 여러 엔진을 지원합니다.

장점: 기능이 완전합니다. 자동 레이아웃 알고리즘(MaxRects, Grid, Shelf), 픽셀 포맷 최적화(iOS용 PVRTC, Android용 ETC), 회전, 잘라내기, 투명 영역 압축을 지원합니다. 내보내기 형식도 충분해서 Cocos의 plist를 바로 사용할 수 있습니다. 일괄 처리도 편합니다. 수백 장을 넣어도 한 번에 처리할 수 있습니다.

단점: 비용이 듭니다. 기본판은 $49, 프로 버전은 $199입니다. 기능은 강력하지만 독립 개발자가 작은 프로젝트를 만들 때는 이 비용이 꼭 합리적이지 않을 수 있습니다. 별도 소프트웨어를 설치해야 하고 Windows/macOS는 지원하지만 Linux는 지원하지 않습니다.

적합한 상황: 장기 유지보수 프로젝트, 많은 아트 리소스, 지속적으로 갱신해야 하는 상업 게임. 정식 출시 제품을 만드는 중이라면 이 투자는 가치가 있습니다.

Alibaba Cloud - 개발자 클라우드 1순위, Lighthouse 서버 15% 할인

15% 할인 받기 →광고

방법 2: 온라인 자동 슬라이싱 도구

소프트웨어를 설치할 필요 없이 웹페이지에서 바로 사용할 수 있습니다. 원리는 연결 요소 탐지 알고리즘입니다. 투명 배경 안의 독립 픽셀 블록을 인식하고, 경계 상자를 자동으로 계산해 잘라냅니다.

몇 가지를 써봤고, 그중 믿을 만한 두 가지를 추천합니다.

ImgCrop 지능형 분할(imgcrop.com). 스프라이트 시트를 넣으면 내부의 독립 프레임을 자동으로 인식하고 개별 PNG 파일로 내보냅니다. “시각적 순서로 이름 지정” 옵션이 있어 위에서 아래로, 왼쪽에서 오른쪽으로 정렬해 주므로 직접 이름을 바꾸는 수고가 줄어듭니다.

이미지 도구 상자(imgtool.net). 기능은 비슷하며 일괄 처리와 포맷 변환도 지원합니다.

장점: 무료이고, 설치가 필요 없으며, 속도가 빠릅니다. 50프레임짜리 캐릭터 애니메이션으로 테스트했을 때 3초 만에 결과가 나왔고 파일 이름도 깔끔했습니다.

단점: 기능에 한계가 있습니다. 복잡한 레이아웃, 겹치는 영역, 투명하지 않은 배경은 처리하기 어렵습니다. 또 네트워크에 의존하므로 민감한 리소스는 업로드하지 않는 편이 좋습니다.

적합한 상황: 빠른 프로토타입, 일회성 처리, 리소스 수가 많지 않은 경우. AI가 생성한 애니메이션 이미지 몇 장을 잘라 쓰려는 정도라면 충분합니다.

방법 3: 수동 슬라이싱(Photoshop 또는 GIMP)

가장 원시적인 방법입니다. 이미지를 열고 슬라이스 도구로 직접 선을 긋고 하나씩 내보냅니다.

장점: 정밀하게 제어할 수 있습니다. 불규칙한 형태, 특수 레이아웃, 특정 영역만 잘라야 하는 상황에서는 수동 작업이 가장 유연합니다. Photoshop에 익숙하다면 몇 장 정도는 크게 번거롭지 않습니다.

단점: 효율이 낮고 실수하기 쉽습니다. 수십 프레임 애니메이션을 자르다 보면 손도 눈도 피곤해집니다. 다음에 리소스를 바꾸면 다시 반복해야 합니다. 파일 이름 규칙도 쉽게 흐트러집니다.

적합한 상황: 특수한 요구, 단발성 처리, Photoshop 작업에 익숙한 경우. 예를 들어 리소스가 손으로 그린 그림이고 레이아웃이 불규칙해 자동 도구가 인식하지 못한다면 수동 슬라이싱이 유일한 선택일 수 있습니다.

방법 비교표

실전: 큰 이미지에서 애니메이션까지 다섯 단계

방법을 골랐다면 실제로는 어떻게 진행할까요? “AI가 생성한 캐릭터 애니메이션 → Cocos Creator에서 재생 가능한 Animation Clip”을 예로 들어 전체 흐름을 살펴보겠습니다.

단계 1: 리소스 준비

Midjourney로 캐릭터 달리기 애니메이션을 만들었다고 가정하겠습니다. 프롬프트는 character running animation sprite sheet, 8 frames, transparent background와 비슷합니다. 결과물은 PNG 한 장이고 8프레임이 가로로 배열되어 있습니다.

두 가지를 확인합니다.

1. 배경 투명도. PNG 형식이며 투명 영역이 깨끗해야 합니다. 잡색이나 워터마크가 없어야 합니다. AI가 생성한 이미지는 가장자리에 잔여 픽셀이 남는 경우가 있으니 Photoshop이나 온라인 도구로 정리합니다.
2. 프레임 정렬. 배열 순서를 확인합니다. 왼쪽에서 오른쪽으로 동작의 연속 프레임이 맞나요? AI는 가끔 순서를 섞어 출력하므로 눈으로 한 번 확인해야 합니다.

이름은 character_run_sheet.png처럼 붙이는 것을 권장합니다. 나중에 알아보기 쉽습니다.

단계 2: 분할 방법 선택

가장 빠른 방법은 온라인 도구입니다. ImgCrop(imgcrop.com)을 열고 PNG 파일을 업로드합니다.

두 가지 옵션을 선택합니다.

• “시각적 순서로 이름 지정”: 왼쪽에서 오른쪽으로 내보낸 파일을 frame_01.png부터 frame_08.png까지 자동으로 이름 붙입니다.
• “원본 크기 유지”: 크기를 줄이거나 늘리지 않고 AI가 생성한 픽셀 정밀도를 유지합니다.

분할을 클릭하고 결과를 다운로드합니다. 3초면 끝납니다.

TexturePacker가 있다면 흐름은 비슷합니다. 소프트웨어를 열고 스프라이트 시트를 가져온 뒤, “분리된 이미지를 패킹”하는 모드가 아니라 “기존 아틀라스 분해” 모드를 선택합니다. 그런 다음 plist와 여러 SpriteFrame을 내보냅니다. 이 방식은 더 전문적이고 픽셀 포맷 최적화도 할 수 있습니다.

단계 3: Cocos Creator로 가져오기

Cocos Creator 3.8 LTS(현재 장기 지원 버전)를 엽니다. 분할한 PNG 파일을 assets 디렉터리로 끌어다 놓습니다. 예를 들어 assets/sprites/character/ 폴더를 만들 수 있습니다.

각 PNG를 가져오면 Cocos가 자동으로 .meta 파일을 생성합니다. 속성 패널에서 이미지 타입이 sprite-frame인지 확인합니다. 기본값이므로 보통 바꿀 필요는 없습니다.

TexturePacker에서 내보낸 아틀라스(plist 파일 포함)를 사용하는 경우 plist + PNG 전체를 그대로 끌어다 놓습니다. Cocos는 이를 Atlas 리소스로 자동 인식하고, 그 안에 여러 SpriteFrame 하위 리소스를 포함시킵니다.

단계 4: Animation Clip 제작

이제 8개의 SpriteFrame이 있습니다. 재생 가능한 애니메이션으로 만들어야 합니다.

Railway - 현대적인 배포 플랫폼, 번거로운 운영 없이 몇 분 만에 라이브

지금 시작 →광고

1. 장면에서 Sprite 노드를 만듭니다(오른쪽 Hierarchy 클릭 → Create → Sprite).
2. 이 노드에 Animation 컴포넌트를 추가합니다(Inspector → Add Component → Animation).
3. Animation Clip을 만듭니다. assets 우클릭 → Create → Animation clip을 선택하고 character_run.anim이라고 이름 붙입니다.
4. 이 Clip을 Animation 컴포넌트의 Clips 속성으로 끌어다 놓습니다.

다음이 핵심 작업입니다.

Animation 편집기를 엽니다(메뉴 Window → Animation). Sprite 노드를 선택하면 편집기에 애니메이션 트랙이 표시됩니다.

8개의 SpriteFrame을 애니메이션 트랙으로 끌어다 놓습니다. 기본적으로 8개의 키프레임이 생성되고, 각 프레임이 이미지 하나에 대응합니다. 위치는 자동으로 정렬되지만 간격이 1초라 너무 느립니다.

프레임 간격을 조정합니다. 편집기 하단에서 Sample(샘플링 레이트)을 10 또는 12로 바꿉니다. 즉 초당 10-12프레임으로 재생한다는 뜻이며, 애니메이션 속도가 자연스러워집니다. 달리기 애니메이션은 대략 10프레임/초가 꽤 자연스럽습니다.

미리보기를 해봅니다. Animation 편집기의 재생 버튼을 누르면 Sprite 노드의 이미지가 순서대로 바뀌고 캐릭터가 달리기 시작합니다.

단계 5: 스크립트로 재생 제어

Animation Clip을 만들었다면 게임 안에서는 어떻게 호출할까요?

간단한 상황에서는 자동 반복 재생을 사용합니다.

// CharacterController.ts
import { _decorator, Component, Animation } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('CharacterController')
export class CharacterController extends Component {
    
    @property(Animation)
    animation: Animation | null = null;
    
    start() {
        if (this.animation) {
            // 달리기 애니메이션 재생, 반복 모드
            this.animation.play('character_run');
            // 반복 재생으로 설정
            const state = this.animation.getState('character_run');
            if (state) {
                state.repeatCount = Infinity;
            }
        }
    }
}

이 스크립트를 Sprite 노드에 붙이고 Animation 컴포넌트 참조를 연결합니다. 게임이 시작되면 캐릭터가 자동으로 달리기 애니메이션을 시작합니다.

애니메이션 전환이 필요한 경우도 있습니다. 예를 들어 달리기에서 정지 상태로 바꾸는 상황입니다.

playAnimation(name: string) {
    if (this.animation) {
        this.animation.crossFade(name, 0.2); // 0.2초 전환으로 갑작스러움을 줄임
    }
}

// 호출: 캐릭터 달리기 중지
this.playAnimation('character_idle');

crossFade는 두 애니메이션을 부드럽게 전환해 순간적으로 프레임이 튀지 않게 합니다. 사소해 보이지만 꽤 중요한 디테일입니다. 이 처리가 없으면 애니메이션 전환이 딱딱해 보입니다.

제가 겪었던 함정들, 미리 피하는 법

스프라이트 시트를 다룰 때 자주 만나는 문제가 몇 가지 있습니다. 미리 알아두면 디버깅 시간을 꽤 줄일 수 있습니다.

함정 1: Cocos Creator 3.x는 구버전 TexturePacker를 인식하지 못합니다

TexturePacker 4.x 또는 그 이전 버전을 사용한다면, 내보낸 plist 파일을 Cocos Creator 3.0+에 가져올 때 “Atlas format not supported” 오류가 날 수 있습니다.

원인은 Cocos Creator 3.x에서 아틀라스 파서가 바뀌었고 TexturePacker 5.x 형식만 인식하기 때문입니다.

해결 방법은 TexturePacker를 5.x로 업그레이드하는 것입니다. 또는 TexturePacker를 쓰지 않고 Cocos 내장 Auto Atlas(자동 아틀라스 기능)를 사용할 수도 있습니다. Cocos Creator에서 assets 폴더를 우클릭 → Create → Auto Atlas를 선택하고 분리 이미지를 끌어다 놓으면 자동으로 아틀라스가 생성됩니다.

함정 2: 프레임 이름 순서가 엉킵니다

온라인 도구로 분할한 뒤 파일 이름은 frame_01.png, frame_02.png처럼 보이지만, 가끔 순서가 맞지 않습니다. 예를 들어 AI가 생성한 이미지의 프레임 배열이 오른쪽에서 왼쪽인데, 도구가 “시각적 순서”로 이름을 붙이면 첫 프레임이 오히려 동작의 마지막 프레임이 됩니다.

애니메이션으로 가져오면 캐릭터의 달리기가 “역재생”됩니다. 뒤로 달리는 것처럼 보입니다.

해결 방법은 분할하기 전에 프레임 배열 방향을 눈으로 확인하는 것입니다. 오른쪽에서 왼쪽이라면 수동으로 이름을 바꾸거나 Photoshop으로 일괄 이름 변경을 합니다. TexturePacker에는 “공간 정렬” 옵션이 있어 방향(위에서 아래, 왼쪽에서 오른쪽)을 직접 지정할 수 있습니다.

함정 3: 투명 픽셀 잘라내기 문제

Sprite 컴포넌트에는 Trim 속성이 있고, 기본적으로 이미지 가장자리의 투명 픽셀을 잘라낼 수 있습니다. 원래는 렌더링을 더 조밀하게 만들기 위한 최적화 설계입니다.

하지만 어떤 경우에는 이 잘라내기가 문제를 만듭니다. 예를 들어 캐릭터 애니메이션의 각 프레임 크기가 완전히 같지 않다고 해보겠습니다. 첫 프레임은 64x64이고, 두 번째 프레임은 팔이 뻗으면서 64x70이 됩니다. 잘라내기 후 두 번째 프레임의 경계가 달라지고, 애니메이션 재생 중 캐릭터 위치가 튀게 됩니다.

해결 방법은 SpriteFrame 속성에서 Trim Type을 None(잘라내지 않음) 또는 Custom(사용자 지정)으로 바꾸는 것입니다. 모든 프레임의 크기를 일정하게 유지하면 위치 흔들림을 피할 수 있습니다.

함정 4: Animation Clip의 프레임 간격이 맞지 않습니다

초보자가 자주 겪는 문제입니다. Animation Clip이 너무 빠르거나 너무 느리게 재생됩니다.

기본 샘플링 레이트는 60, 즉 초당 60프레임입니다. 이미지가 8프레임뿐이라면 이 속도에서는 0.13초 만에 끝납니다. 캐릭터 달리기가 순간이동처럼 보입니다.

Vultr - 고성능 NVMe 클라우드 서버, 전 세계 32개 노드, Docker 원클릭 배포

요금 보기 →광고

해결 방법은 Sample 값을 조정하는 것입니다. 달리기 애니메이션은 보통 8-12프레임/초가 적당하므로 10 또는 12로 바꿉니다. 호흡이나 대기처럼 느린 애니메이션이라면 6-8프레임/초면 충분합니다.

Animation 편집기에서 각 프레임의 시간을 직접 조정할 수도 있습니다. 키프레임을 선택하고 위치를 드래그하면 간격을 정확하게 제어할 수 있습니다.

성능 최적화: 아틀라스는 어떻게 설계해야 할까요?

스프라이트 시트를 만들었다면 성능을 조금 더 밀어붙일 수 있습니다.

아틀라스 크기 권장값

단일 아틀라스는 2048x2048픽셀을 넘기지 않는 것이 좋습니다. 이는 많은 저사양 기기의 텍스처 상한입니다. 이 크기를 넘으면 일부 기기에서 오류가 나거나 품질이 낮아진 상태로 렌더링될 수 있습니다.

캐릭터 애니메이션 프레임이 많다면(예: 50프레임 공격 동작) 두 장의 아틀라스로 나누는 것을 고려하세요. TexturePacker는 자동 분할을 지원합니다. Max Size를 2048로 설정하면 초과분을 자동으로 새 이미지로 분리합니다.

픽셀 포맷 선택

플랫폼별로 권장 포맷이 다릅니다.

• iOS: PVRTC(Apple 전용 압축 포맷). TexturePacker에서 내보낼 때 PVRTC 4bpp를 선택하면 파일 크기를 원본의 1/4 수준까지 줄일 수 있습니다.
• Android: ETC1 또는 ETC2. 대부분의 기기에서 지원하며 압축 효율도 괜찮습니다.
• 크로스 플랫폼 공통: RGBA8888(비압축). 파일은 크지만 호환성이 가장 좋아 테스트 단계에 적합합니다.

정식 출시 시에는 목표 플랫폼에 맞는 포맷을 선택합니다. TexturePacker는 “다중 포맷 패킹”을 지원하므로 iOS와 Android용 아틀라스를 한 번에 생성할 수 있습니다.

동적 아틀라스 기능

Cocos Creator에는 Auto Atlas 기능이 있어 장면 안에 흩어진 SpriteFrame을 자동으로 합쳐 렌더링할 수 있습니다.

켜는 방법은 간단합니다. assets 우클릭 → Create → Auto Atlas를 선택한 뒤 모든 분리 이미지를 끌어다 놓습니다. 빌드 시 자동으로 아틀라스가 생성되고 Draw Call도 자동으로 줄어듭니다.

이 기능은 리소스가 많지 않은 프로젝트에 적합합니다. 아트 리소스가 많다면 TexturePacker로 미리 패킹하는 편이 더 강한 제어력을 제공합니다.

Draw Call 모니터링

스프라이트 시트가 정말 최적화 효과를 냈는지 어떻게 확인할까요? Draw Call 수를 보면 됩니다.

Cocos Creator 개발자 도구의 Profiler 패널은 실시간 Draw Call을 보여줍니다. 장면이 복잡할 때 분리 이미지와 아틀라스의 수치를 비교해 보세요.

이상적인 상태는 같은 캐릭터의 모든 애니메이션 프레임이 하나의 아틀라스 안에 들어 있고, Draw Call이 1회로 유지되는 것입니다. 캐릭터가 서로 다른 아틀라스에 있다면 애니메이션을 전환할 때 Draw Call이 튈 수 있습니다. 이때는 관련 애니메이션을 한 장의 이미지로 합치는 것을 고려하세요.

정리

AI가 생성한 스프라이트 시트 한 장을 Cocos Creator에서 재생 가능한 Animation Clip으로 바꾸는 흐름은 복잡하지 않습니다.

1. 리소스를 확인합니다(투명 배경, 올바른 프레임 순서).
2. 분할 방법을 고릅니다(온라인 도구가 가장 빠르고, TexturePacker가 가장 전문적입니다).
3. Cocos Creator로 가져옵니다(PNG 또는 Atlas 형식).
4. Animation Clip을 만듭니다(프레임 끌어다 놓기, 간격 조정, 미리보기).
5. 스크립트로 재생을 제어합니다(반복, 전환, 페이드).

도구 선택 기준은 간단합니다. 빠른 프로토타입은 온라인 도구, 상업 프로젝트는 TexturePacker를 사용하세요. 주의할 함정은 버전 호환성, 이름 순서, 잘라내기 설정, 프레임 간격 조정입니다.

이 단계를 마치면 캐릭터 애니메이션이 게임 안에서 자연스럽게 달릴 수 있습니다.