스프라이트 시트 만드는 법: 프레임, 동영상, 캐릭터 이미지 한 장에서 시작하기

스프라이트 시트는 애니메이션의 모든 프레임을 이미지 한 장에 담은 파일입니다. 보통 격자 형태로 배치하고, 각 프레임의 위치와 표시 시간을 적은 작은 데이터 파일을 함께 둡니다. 게임 엔진은 이 이미지를 한 번만 불러오고, 재생할 때마다 한 칸씩 잘라서 그립니다.

만드는 방법은 지금 가진 것에 따라 달라집니다. 프레임이 이미 PNG 파일로 나뉘어 있다면 묶기만 하면 됩니다. 동작이 동영상 안에 있다면 구간을 고르고 프레임 레이트에 맞춰 프레임을 뽑아야 합니다. 캐릭터 그림 한 장뿐이라면 애니메이션부터 만들어야 합니다.

2026년 10월 8일, 내려받을 수 있는 실제 파일로 세 가지 경우를 모두 진행했습니다. 무료 sprite sheet maker로 주황색 로봇이 달리는 16프레임을 묶었고, 무료 동영상→스프라이트 시트 변환기로 4초짜리 투명 WebM을 변환했습니다. 마지막으로 이 로봇 프레임을 처음에 AI로 어떻게 만들었는지 설명합니다. 두 무료 도구는 브라우저에서 실행되므로 파일이 컴퓨터 밖으로 나가지 않고, 계정도 필요 없습니다. 도구 화면은 현재 영어로만 제공됩니다.

스프라이트 시트 파일에 들어 있는 것

로봇 달리기는 16프레임이고, 프레임 하나의 크기는 376 × 280픽셀입니다. 한 줄에 4개씩 배치하면 1504 × 1120 PNG가 됩니다.

PNG만으로는 한 프레임이 어디서 끝나고 다음 프레임이 어디서 시작하는지 알 수 없습니다. 그 정보는 옆에 있는 JSON에 들어 있습니다. 아래는 sprite sheet maker가 내보낸 파일에서 여섯 번째 프레임 항목과 시트 정보를 가져온 것입니다.

{
  "frames": {
    "frame_0005.png": {
      "frame": { "x": 376, "y": 280, "w": 376, "h": 280 },
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": { "x": 0, "y": 0, "w": 376, "h": 280 },
      "sourceSize": { "w": 376, "h": 280 },
      "duration": 42
    }
  },
  "meta": {
    "image": "robot-run-spritesheet.png",
    "size": { "w": 1504, "h": 1120 },
    "frameTags": [{ "name": "robot-run", "from": 0, "to": 15, "direction": "forward" }],
    "animgen": { "frameCount": 16, "frameDurationMs": 42, "durationMs": 672, "fps": 23.81, "loop": true }
  }
}

• frame은 시트에서 잘라낼 사각형으로, 왼쪽 위를 원점으로 한 픽셀 값입니다.
• duration은 해당 프레임을 화면에 보여 주는 시간(밀리초)입니다.
• frameTags는 연속된 프레임 묶음에 동작 이름을 붙입니다. 시트 하나에 동작이 여러 개라면 동작마다 태그가 하나씩 있습니다.
• spriteSourceSize와 sourceSize는 프레임을 트림했을 때만 의미가 있습니다. 잘라낸 프레임을 원래 캔버스의 어느 위치에 되돌릴지 엔진에 알려 줍니다.

필드 이름은 Aseprite의 해시 형식 JSON 내보내기와 같아서, Aseprite 시트를 읽는 코드라면 그대로 읽을 수 있습니다. animgen 블록은 추가 정보이므로 무시해도 됩니다.

표시 시간은 정수 밀리초로 저장됩니다. 24 FPS에서 한 프레임은 약 41.67밀리초인데 42로 반올림되어 기록되므로, 16프레임의 합은 667밀리초가 아니라 672밀리초가 됩니다. fps가 23.81로 표시되는 이유입니다. 한 루프에서 생기는 차이는 5밀리초입니다. 소리나 다른 애니메이션과 정확히 맞춰야 한다면 프레임별 시간을 더하지 말고 엔진에서 클립 속도를 24 FPS로 지정하세요.

이미 있는 프레임을 묶기

애니메이션이 이미 개별 이미지로 나뉘어 있을 때 쓰는 방법입니다. Krita의 애니메이션 렌더링으로 내보낸 이미지 시퀀스, AnimGen의 PNG 프레임 ZIP, 3D 프로그램의 렌더링 결과, 누군가에게 받은 폴더 같은 경우입니다. Aseprite에서 그린다면 내장 기능인 File → Export Sprite Sheet로 PNG와 JSON을 바로 내보낼 수 있어 별도 도구가 필요 없습니다.

직접 따라 해 보려면 로봇 16프레임(ZIP, 700 KB)을 내려받으세요. 파일 이름은 robot-run-1.png부터 robot-run-16.png까지이며 번호 앞에 0을 채우지 않았습니다. 실제 내보내기에서도 흔한 방식입니다.

1. sprite sheet maker를 열고 파일을 끌어다 놓거나 폴더를 통째로 선택합니다.
2. 순서를 확인합니다. 단순한 문자 순서로 정렬하면 robot-run-10.png가 robot-run-1.png 바로 뒤에 옵니다. 이 도구는 이름 속 숫자로 정렬하기 때문에 실제로 1부터 16까지 순서대로 놓였습니다. 프레임을 끌어서 순서를 바꾸거나, 삭제하거나, 전체를 뒤집을 수도 있습니다.
3. 속도를 정합니다. 미리 보기 속도와 JSON에 기록되는 시간을 함께 결정합니다. 로봇을 생성할 때와 같은 24 FPS로 설정했습니다.
4. 열 수를 고릅니다. 16프레임의 기본값은 4열이며 정사각형 4×4 격자가 됩니다.
5. 스프라이트 시트 PNG와 JSON을 내려받습니다. 공유용으로 같은 프레임을 애니메이션 GIF로도 내보낼 수 있습니다.

내보낸 시트를 디코딩해서 각 칸을 원본 프레임과 비교했습니다. 16프레임 모두 알파 값이 정확히 일치했고, 완전히 불투명한 픽셀의 색도 모두 같았습니다. 반투명한 가장자리 픽셀의 색은 최대 1단계(255단계 중) 차이가 났는데, 브라우저 캔버스가 색을 프리멀티플라이드 알파로 저장하기 때문입니다. 내보낸 PNG, 해당 JSON, SHA-256이 포함된 측정 기록을 직접 확인할 수 있습니다.

애니메이션 GIF도 그대로 끌어다 놓으면 됩니다. GIF의 각 프레임이 한 칸이 되고, 속도는 GIF의 프레임 지연 값에서 가져옵니다.

프레임이 같은 캔버스를 쓰면 트림을 끄세요

도구의 Trim empty space around each frame 옵션을 켜면 각 프레임 주변의 빈 공간이 잘립니다. 로봇 프레임에서는 칸 크기가 163 × 190, 시트가 652 × 760으로 줄어 픽셀 수가 71% 감소했습니다. 그런데 PNG 파일은 785.0 KB에서 736.7 KB로 조금만 줄었습니다. 완전히 투명한 영역은 원래 압축 후 용량을 거의 차지하지 않기 때문입니다.

트림은 프레임마다 자기 경계 상자에 맞춰 자른 뒤 아래쪽 가운데를 기준으로 정렬합니다. 이 달리기에서는 로봇이 공중에 뜨는 순간이 있어서, 몸의 가장 아래 지점이 프레임마다 22픽셀 범위에서 오르내립니다. 트림하면 모든 프레임이 칸의 아랫변에 붙어 통통 튀는 움직임이 사라집니다. 팔과 다리가 흔들리면서 경계 상자의 폭도 달라지기 때문에 몸이 좌우로 최대 16픽셀 밀립니다.

한 애니메이션 프로그램에서 내보낸 프레임은 대개 같은 캔버스를 씁니다. 그 캔버스에 캐릭터가 서 있는 위치가 이미 담겨 있으므로 그대로 두는 편이 좋습니다. 트림은 오래된 시트에서 잘라낸 스프라이트처럼 프레임 크기가 제각각일 때 유용합니다. 이럴 때는 아래쪽 가운데 기준 덕분에 발이 다시 한 줄에 맞춰집니다.

2의 거듭제곱 크기와 간격

Round the sheet up to power-of-two sizes(2의 거듭제곱으로 올림)를 켜자 1504 × 1120이 2048 × 2048이 되었습니다. PNG는 785.0 KB에서 843.6 KB로 조금 늘었지만, 픽셀당 4바이트로 디코딩한 텍스처는 6.4 MiB에서 16 MiB로 늘었습니다. 오래된 iOS 기기의 PVRTC 압축이나 WebGL 1의 밉맵처럼 대상 플랫폼이 요구할 때만 켜세요. 요즘 2D 엔진은 대부분 임의 크기를 받아들입니다.

간격(spacing)은 칸 사이에 투명 픽셀을 넣습니다. 선형 필터링이나 밉맵을 쓰면 GPU가 칸 경계를 넘어 한두 픽셀을 샘플링해서 이웃 프레임이 가는 선으로 보일 수 있습니다. 로봇 프레임은 사방에 최소 39픽셀의 투명 여백이 있어 간격 0으로도 문제가 없습니다. 프레임을 바짝 잘랐다면 몇 픽셀의 간격을 넣고, 엔진에서 시트를 자를 때 같은 값을 분리 간격으로 입력하세요.

동영상 클립을 스프라이트 시트로 변환하기

동작이 영상으로 존재할 때 쓰는 방법입니다. 화면 녹화, 렌더링한 클립, 그린 스크린 영상, MP4나 WebM으로 저장한 생성 애니메이션 등이 해당합니다.

변환기에 들어 있는 샘플을 사용했습니다. 하늘색 인형이 달리는 640 × 640 WebM으로, 길이는 4.00초이고 배경은 투명합니다(원본 영상).

1. 동영상→스프라이트 시트 변환기를 열고 영상을 끌어다 놓습니다. 타임라인에 썸네일이 채워집니다.
2. 양쪽 핸들을 움직여 필요한 동작을 감싸고 Play range로 반복 재생해 확인합니다. 여기서는 2.50초부터 3.83초까지의 달리기를 남겼습니다.
3. 프레임 레이트와 프레임 너비를 고릅니다. 12 FPS에서 1.33초 구간은 16프레임이 되고, 너비를 256픽셀로 하면 4×4 격자, 1024 × 1024픽셀, 560.1 KB의 시트가 나옵니다.
4. 스프라이트 시트 PNG와 JSON, 또는 번호가 붙은 PNG 프레임 ZIP을 내려받습니다.

원본은 24 FPS이므로 12 FPS를 고르면 한 프레임씩 건너뛰어 가져옵니다. 24 FPS를 고르면 모든 프레임이 남아 32프레임으로 두 배가 됩니다. 루프를 만들 때는 Play range에서 마지막 프레임이 첫 프레임으로 돌아가는 순간을 보세요. 끊기는 느낌이 있다면 시작점이나 끝점을 한 프레임 옮기면 됩니다.

이 WebM은 자체 투명 정보를 갖고 있어서 뽑아낸 프레임도 투명합니다. MP4에는 알파 채널이 없습니다. 단색이나 그린 스크린 배경 앞에서 찍은 영상이라면 도구가 그 색을 감지해 제거할 수 있고, 허용 범위와 가장자리 정리도 조절할 수 있습니다. 머리카락, 연기, 모션 블러 같은 세부 묘사를 그린 스크린에서 분리하려면 제대로 된 키잉이 필요하며, 무료 도구로는 할 수 없습니다.

캐릭터 이미지 한 장으로 애니메이션 생성하기

세 번째 방법은 움직임 없는 그림 한 장에서 시작합니다. 앞에서 쓴 로봇 프레임도 이렇게 만들었습니다. 1254 × 1254 로봇 PNG에, 카메라를 고정하고 크기를 유지한 채 오른쪽을 보고 제자리에서 계속 달리라는 프롬프트를 붙였습니다. Seedance 2.0 Fast, 4초, 480p, Alpha Key로 요청했고, 2026년 10월 3일 실제로 36크레딧이 들었습니다. 결과는 752 × 560, 24 FPS, 97프레임 영상이었습니다.

이 97프레임 가운데 44~59번을 루프로 골랐고, 이 글을 위해 절반 크기인 376 × 280으로 줄였습니다. 정확한 프롬프트, 원본 키 컬러 영상, 루프 구간을 고른 과정은 조작 가능한 캐릭터 글에 있습니다. 깔끔한 루프를 찾는 방법은 걷기 루프 글에서 더 자세히 다룹니다.

AnimGen에서 생성한 애니메이션은 내보낼 때 바로 JSON이 포함된 스프라이트 시트나 Godot, Unity, Unreal Paper2D, Cocos Creator, Construct 3용 패키지로 받을 수 있습니다(출력 형식). 무료 묶기 도구는 다른 프로그램에서 프레임을 먼저 수정했을 때만 필요합니다. 크레딧 소모량은 모델과 설정에 따라 달라지므로, 생성 전에 표시되는 견적과 현재 요금을 확인하세요.

Godot 4나 Unity로 가져오기

Godot 4. AnimatedSprite2D 노드를 추가하고 Sprite Frames 속성에서 새 SpriteFrames 리소스를 만듭니다. 에디터 아래쪽 SpriteFrames 패널에서 Add frames from a Sprite Sheet를 눌러 PNG를 고르고, Horizontal과 Vertical을 모두 4로 설정합니다. 간격을 넣었다면 Separation에 같은 값을 입력합니다. 16칸을 선택해 Add 16 frames를 누른 뒤 애니메이션 속도를 24 FPS로 하고 반복을 켭니다. Godot의 2D 스프라이트 애니메이션 튜토리얼에서도 같은 대화 상자를 볼 수 있습니다. 간격이 0인 시트라면 일반 Sprite2D에 hframes = 4, vframes = 4를 지정하고 코드에서 frame을 바꾸는 방법도 있습니다.

Unity. PNG를 선택하고 Texture Type을 Sprite (2D and UI), Sprite Mode를 Multiple로 바꿉니다. 픽셀 아트라면 Filter Mode도 Point로 설정합니다. Sprite Editor를 열어 Slice를 고르고, Type을 Grid By Cell Size, 크기를 376 × 280, 피벗을 아래쪽 가운데로 지정한 뒤 적용합니다. 스프라이트 16개를 순서대로 선택해 초당 24샘플의 애니메이션 클립을 만듭니다. 자르기 옵션은 Unity의 Sprite Editor 가이드에 설명되어 있습니다.

마지막 줄이 다 채워지지 않은 경우, 예를 들어 15프레임을 4×4 격자에 넣으면 두 엔진 모두 빈자리까지 칸을 만듭니다. 그 칸은 애니메이션에 넣지 마세요. AnimGen의 Godot용과 Unity용 패키지를 쓰면 이 수작업이 필요 없고, Godot 4 가져오기 검증에서 그중 하나를 실제로 실행되는 프로젝트로 확인했습니다.

시트를 쓰기 전에 확인할 문제

크기 제한에 대해: 4096 × 4096은 모바일과 WebGL에서 흔히 쓰는 안전한 상한입니다. 스프라이트 시트와 PNG 시퀀스 비교에서는 이 상한을 넘는 5120 × 5120 시트를 측정하고 나누는 방법을 보여 줍니다.

스프라이트 시트 제작에 관해 자주 묻는 질문

무료로 스프라이트 시트를 만드는 도구가 있나요?

이 글에서 사용한 sprite sheet maker와 동영상 변환기는 무료이고, 브라우저에서 실행되며, 계정이 필요 없습니다. 다른 무료 스프라이트 도구로는 GIF 변환, 기존 시트 자르기, 시트를 다시 GIF로 바꾸기를 할 수 있습니다. 이미 Aseprite를 쓰고 있다면 내장 내보내기 기능으로 묶을 수 있습니다. 상용 아틀라스 패커인 TexturePacker는 폴리곤 패킹과 엔진별 내보내기 기능을 제공하는데, 이런 기능은 애니메이션 하나보다 여러 스프라이트를 모은 큰 아틀라스에서 더 쓸모가 있습니다.

ChatGPT로 스프라이트 시트를 만들 수 있나요?

이미지 생성 모델은 캐릭터의 여러 자세를 한 장 안에 격자로 그릴 수 있습니다. 이 글에서는 ChatGPT를 테스트하지 않았습니다. 그런 이미지를 쓰기 전에 모든 칸의 크기가 같은지, 칸마다 캐릭터의 크기와 비율이 일정한지, 자세가 이웃 칸으로 넘어가지 않는지, 배경이 투명하거나 제거할 수 있는 단색인지 확인하세요. 스프라이트 시트 커터를 쓰면 그런 이미지를 개별 프레임으로 자르고 같은 프레임 크기로 다시 묶을 수 있습니다. 캐릭터 이미지에서 이어지는 동작을 생성해 프레임으로 내보내려면 앞에서 설명한 AI 방법을 쓰세요.

스프라이트 시트는 어떤 형식인가요?

보통 투명도를 유지하면서 화질이 손실되지 않는 PNG에 데이터 파일을 더합니다. 직접 짠 코드나 웹 게임에서는 JSON이 가장 흔합니다. 엔진 고유 형식도 있는데, 자르기 사각형을 담은 Unity .meta 파일, Godot SpriteFrames 리소스, Cocos Creator .plist 등이 그 예입니다. 사용하는 엔진이나 로더가 읽을 수 있는 형식을 고르고, PNG와 데이터 파일은 항상 함께 보관하세요.

전체 과정을 해 보려면 로봇 프레임을 내려받아 sprite sheet maker에서 묶고, 위의 단계대로 엔진에 불러와 보세요. 캐릭터는 있는데 애니메이션이 아직 없다면 AnimGen 스튜디오에서 시작해 그곳에서 바로 스프라이트 시트를 내보낼 수 있습니다.