스프라이트 시트 생성기이란?

스프라이트 시트 생성기는 여러 개별 이미지를 하나의 최적화된 스프라이트 시트로 합칩니다. 프레임이나 아이콘을 업로드하거나, 움직이는 GIF를 끌어다 놓으면 각 프레임이 자동으로 들어옵니다. 레이아웃(격자, 가로 스트립, 세로 스트립, 압축)을 고르고 배경을 투명 또는 단색으로 설정한 뒤, 합친 이미지를 JSON, JSON 배열, XML TextureAtlas, CSS 위치 데이터와 함께 내보내세요.

격자 모드는 모든 것을 균일한 N×M 레이아웃으로 배치하여 모든 프레임 크기가 같은 애니메이션 사이클에 적합합니다. 가로 스트립과 세로 스트립은 프레임을 한 줄 또는 한 열로 정렬하며, 간단한 2D 엔진 애니메이션의 표준 레이아웃입니다. 압축 모드는 빈 패킹을 수행해 크기가 다른 아이콘을 최소한의 낭비로 끼워 맞춥니다. 움직이는 GIF를 끌어다 놓으면 각 프레임이 시트 안으로 디코딩되므로 프레임을 먼저 내보낼 필요가 없습니다. 출력은 기본적으로 투명 배경을 유지하며, 크로마키용 단색을 채울 수도 있습니다. 메타데이터는 JSON 해시, JSON 배열, XML TextureAtlas, CSS의 네 가지 형식으로 제공되어 Phaser, PixiJS, Unity, Godot 또는 CSS의 background-position에 바로 넣을 수 있습니다. 애니메이션 미리보기로 1~60 FPS로 프레임을 넘겨 보며 내려받기 전에 타이밍을 맞출 수 있습니다. 프레임을 한 칸씩 넘기며 어긋난 스프라이트를 찾고, 각 프레임의 투명한 여백을 잘라내 시트를 작게 유지하며, 시퀀스를 움직이는 GIF로 내려받아 게임 엔진 없이 결과를 공유할 수 있습니다.

사용 방법

1. 스프라이트 시트로 합칠 개별 이미지들을 업로드하세요.
2. 레이아웃(그리드, 가로, 세로, 패킹)을 선택하고 간격을 조정한 다음, 배경을 투명 또는 단색으로 설정하세요.
3. 스프라이트 시트 이미지를 CSS 또는 JSON 위치 데이터와 함께 다운로드하세요.

사용 시기

• 캐릭터 걷기 사이클이나 폭발 애니메이션을 한 장으로 묶어 게임 엔진에 넘기고 싶을 때.
• UI 아이콘 세트를 한 파일로 합쳐 페이지가 HTTP 요청을 40번이 아니라 한 번만 보내도록 만들고 싶을 때.
• 타일맵 스프라이트에 일정한 패딩을 주어 인접 타일 색이 번지지 않게 준비하고 싶을 때.

결과

게임 개발자가 16개의 캐릭터 애니메이션 프레임(각 64×64)을 업로드합니다. 도구가 4×4 그리드로 배치하여 게임 엔진용 JSON 프레임 좌표가 포함된 256×256 스프라이트 시트를 생성합니다.

자주 묻는 질문

그리드 대신 패킹 레이아웃을 언제 써야 하나요?

모든 프레임이 같은 크기일 때는 그리드를 쓰세요. 예를 들어 32×32 캐릭터 애니메이션이 그렇습니다. 한 줄이나 한 열의 시퀀스가 필요하면 가로 또는 세로 스트립을 선택하세요. 대부분의 게임 엔진이 가장 쉽게 불러올 수 있는 형식입니다. 아이콘 크기가 들쑥날쑥하다면 패킹을 쓰세요. 16×16과 48×48이 섞인 UI 세트 같은 경우에 유리하며, 시트는 가장 작아지지만 메타데이터는 손으로 읽기 어렵습니다.

패딩 설정은 어디에 쓰이나요?

패딩은 각 프레임 둘레에 투명 픽셀을 더해 줍니다. 패딩이 없으면 선형 필터링을 쓰는 렌더러가 인접 프레임의 색을 현재 프레임 가장자리로 번지게 합니다. 1~2픽셀만 줘도 이 아티팩트를 막을 수 있습니다.

어떤 메타데이터 형식으로 내보내야 하나요?

JSON(해시)은 대부분의 엔진이 읽는 TexturePacker 형식으로, 각 프레임을 이름으로 키 처리합니다. JSON 배열은 프레임을 순서가 있는 목록으로 저장하며 Phaser 3와 일부 파이프라인이 선호합니다. XML은 Unity, Godot, Friday Night Funkin이 쓰는 Starling/Sparrow의 TextureAtlas입니다. CSS는 웹 아이콘 세트를 위한 background-position 클래스를 제공합니다. 사용하는 렌더러가 기대하는 형식을 고르세요.

출력 결과에 투명도가 유지되나요?

기본적으로 유지됩니다. 시트는 알파 채널이 살아 있는 PNG로 저장되므로 원본 PNG의 투명 배경이 그대로 옮겨집니다. 불투명한 시트가 필요하다면 레이아웃 옵션 옆에서 단색 배경을 골라 주세요. 크로마키나 알파를 무시하는 엔진에 유용합니다. 투명이 중요하면 JPG를 원본으로 쓰지 마세요. 업로드 전에 이미 알파가 흰색으로 합성됩니다.

한 장의 시트에 프레임을 몇 개까지 담을 수 있나요?

현실적으로 모바일 GPU는 단일 텍스처를 2048 혹은 4096 픽셀로 제한하므로 4096×4096에 64×64 프레임을 깔면 4096개가 들어갑니다. 애니메이션 용도라면 구형 기기를 위해 2048×2048 시트 두 장으로 나누는 편이 안전합니다.

관련 도구