GIF → 스프라이트 시트

GIF는 프레임 사이에 바뀐 픽셀만 저장하는 경우가 많아서, 단순히 프레임을 뽑아내면 구멍이 나거나 이전 프레임 잔상이 남은 스프라이트가 나옵니다. 이 변환기는 브라우저처럼 각 프레임을 디스포즈 방식에 따라 다시 재생하므로 시트의 모든 프레임이 온전합니다. 또한 프레임마다의 딜레이를 그대로 유지해서, 포즈를 잠시 멈추는 애니메이션도 제대로 표현됩니다.

GIF → 스프라이트 시트 사용 방법

1. 애니메이션 GIF를 넣으세요(또는 샘플을 써 보세요). 모든 프레임이 딜레이와 디스포즈 정보와 함께 디코딩됩니다.
2. 프레임 구간을 고르고, N번째 프레임마다 남기기로 긴 GIF를 1/2이나 1/3로 줄이세요. 남은 프레임이 건너뛴 프레임의 시간을 흡수하므로 속도는 그대로입니다.
3. 스트립에서 프레임을 클릭해 원하는 프레임만 빼세요.
4. 내용에 맞춰 자르기는 모든 프레임을 하나의 공통 박스로 잘라 스프라이트가 제자리에 있게 합니다. 엔진에 여백이 필요하면 패딩을 추가하세요.
5. GIF에 투명 대신 단색 배경이 있다면 배경 색 제거를 켜세요.
6. 원본 타이밍이나 고정 FPS를 고른 뒤 시트, 데이터 파일, GIF 또는 전체 ZIP으로 내보내세요.

결과물

• 자동 또는 고정 열 그리드로 배치된 투명 배경 PNG 스프라이트 시트.
• GIF의 프레임별 지속 시간이 담긴 Aseprite JSON과 Phaser/TexturePacker JSON, Godot 4 .tres SpriteFrames, CSS 스프라이트, Unity 슬라이스 설정.
• 편집 후 1×–8× 배율로 다시 인코딩한 GIF.
• 위의 모든 파일과 프레임별 개별 PNG를 담은 ZIP.

지원 엔진

• Aseprite JSON은 고르지 않은 프레임 지속 시간을 유지합니다. Aseprite Wizard 같은 Godot 임포터와 Unity의 Aseprite 임포터가 바로 읽습니다.
• Godot 4 .tres는 고정 속도에 프레임별 상대 지속 시간을 쓰므로, 멈춰 있는 프레임은 그대로 멈춰 있습니다.
• Phaser 3: hash JSON으로 아틀라스를 불러오고 animations 아래 나열된 프레임 이름으로 애니메이션을 만드세요.

게임을 만들며 얻은 팁

• 255색 이하의 픽셀 아트 GIF는 다시 양자화하지 않고 정확한 색을 쓰기 때문에 무손실로 다시 인코딩됩니다.
• 온라인에서 구한 GIF 상당수는 2×나 3×로 확대된 픽셀 아트입니다. 도구가 이를 감지해 실제 1× 픽셀로 복원하므로 시트가 작고 선명해집니다.
• 브라우저는 20 ms 미만의 GIF 딜레이를 100 ms로 재생합니다. 이 도구도 똑같이 처리하므로 미리보기가 원래 보던 것과 일치합니다.
• 단일 FPS만 받는 엔진이라면 타이밍을 고정 FPS로 바꾸고, 멈춤 포즈가 여전히 잘 보이는지 미리보기로 확인하세요.

활용 사례

• 예전 프로젝트나 GIF로만 내보내는 픽셀 아트 에디터의 GIF를 게임 엔진으로 가져오기.
• AI 애니메이션 도구로 만든 GIF를 편집하고 다듬을 수 있는 프레임으로 바꾸기.
• Aseprite, LibreSprite, Photoshop에서 손보기 위해 GIF를 번호가 매겨진 PNG 프레임으로 나누기.
• 기존 GIF로 웹사이트용 CSS 스프라이트 애니메이션 만들기.

자주 묻는 질문