GIF·MP4를 스프라이트 시트로 변환하는 방법

GIF나 동영상을 게임용 스프라이트 시트로 바꾸려면 프레임을 추출하고, 필요한 자세를 남긴 뒤, 같은 크기의 셀에 배치해 PNG로 저장하면 됩니다. 스프라이트 도구에서는 이 작업과 GIF·APNG 내보내기를 설치와 회원가입 없이 무료로 시작할 수 있습니다. 계정에 작품을 보관하는 기능은 로그인 후 사용합니다.

아래 예제의 크기와 프레임 수는 설정을 설명하기 위한 가정입니다. 실제 파일을 변환해 얻은 성과나 모든 원본에 적합한 추천값을 뜻하지 않습니다.

1. 원본 GIF·영상을 열고 필요한 구간 남기기

스프라이트 도구 열기에서 GIF 또는 영상을 불러옵니다. 동영상은 현재 10fps 간격으로 프레임을 추출합니다. 미리보기의 FPS는 추출 이후의 재생 속도이므로 값을 높여도 원본에서 빠진 자세가 새로 만들어지지는 않습니다. 빠른 동작의 중간 자세가 부족하면 더 적합한 원본을 준비하세요.

프레임 목록을 확인하고 앞·뒤 자르기로 불필요한 구간을 제거합니다. 영상이 열리지 않으면 브라우저가 내부 코덱을 지원하는지 확인하세요. MP4라는 확장자가 같아도 코덱에 따라 재생 여부가 다를 수 있습니다. 긴 영상은 필요한 구간만 준비하면 브라우저의 메모리 부담을 줄일 수 있습니다.

2. 프레임 순서와 내보낼 범위 정하기

걷기의 접지·통과 자세처럼 동작을 읽는 데 필요한 프레임부터 남깁니다. 중복 제거와 프레임 줄이기는 개수를 줄이는 도구입니다. 오래 유지되는 타격 포즈와 멈춤 프레임도 표현의 일부일 수 있으므로 삭제 전후를 재생해 비교하세요. 프레임을 복제하거나 순서를 옮겨 원하는 흐름을 만들 수 있습니다.

프레임을 선택한 것만으로 저장 범위가 자동으로 줄지는 않습니다. 일부만 저장하려면 내보내기에서 ‘선택 프레임만’ 옵션을 확인하고, 표시된 내보낼 개수와 시트 미리보기를 다시 봅니다. 전체를 저장하려면 이 옵션을 끕니다.

3. 단색 배경과 가장자리 번짐 정리

단색 배경은 크로마키로 지울 색을 찍고 작은 허용 범위부터 조절합니다. 모서리에 연결된 배경만 지우려면 모서리 기반 제거와 비교합니다. 투명해진 바깥쪽뿐 아니라 배경과 비슷한 색의 옷·눈이 함께 지워졌는지도 확인하세요. 가장자리에 배경색이 남으면 색번짐 제거 설정을 비교합니다.

복잡한 사진 배경을 어떤 원본에서나 자동으로 분리해 주는 기능은 아닙니다. 피사체와 배경색이 많이 겹치면 더 분리하기 쉬운 원본을 준비하거나 프레임의 필요한 부분을 직접 수정하는 편이 낫습니다.

4. 루프·FPS·바닥 기준 확인

처음과 마지막 프레임을 이어 재생해 동작이 끊기는지 봅니다. 역순과 핑퐁은 왕복 표현에 쓸 수 있지만 걷기와 공격에는 어색한 역동작을 만들 수 있습니다. 발이 흔들릴 때는 기준점 정렬을 비교하되, 점프의 높이 변화까지 없애지 않도록 확인합니다.

GIF·APNG 내보내기는 현재 미리보기 FPS에 따라 모든 프레임에 같은 간격을 적용합니다. 원본 GIF의 프레임별 대기 시간이 서로 달랐다면 그대로 유지된다고 가정하지 말고, 멈춤 자세를 복제하거나 FPS를 조정해 저장한 파일까지 재생해 보세요.

5. 가정한 12프레임을 PNG 시트로 배치하기

가령 각 프레임이 32×48px이고, 저장할 프레임이 12개라고 가정해 봅니다. 배율 100%, 기준점 정렬 끔, 열 수 4, 가장자리 여백 0, 프레임 간격 0이면 4열×3행, 128×144px의 PNG 시트가 됩니다. 프레임은 현재 목록 순서대로 왼쪽에서 오른쪽, 위에서 아래로 배치됩니다.

• 셀 크기: 32×48px. 엔진에서 한 프레임을 자르는 크기입니다.
• 시트 크기: 128×144px. 12개 프레임을 담은 전체 이미지 크기입니다.
• 재생 속도: 예를 들어 12fps를 선택하면 12프레임 한 바퀴가 1초인 구성입니다. 원본 동작에 맞는지는 직접 재생해 판단합니다.

고정 크기, 배율, 여백·간격을 바꾸면 시트 크기도 달라집니다. 기준점 정렬을 켜면 투명 영역을 기준으로 셀을 다시 계산하므로 예제와 같은 크기라고 가정하지 말고 실제 저장 결과를 확인하세요.

6. PNG·GIF·JSON 중 목적에 맞게 내보내기

게임 엔진에서 프레임을 잘라 쓸 때는 PNG 시트, 바로 재생하거나 움직임을 공유할 때는 GIF·APNG를 선택합니다. PNG 시트는 여러 그림을 한 이미지에 배열한 파일이며, PNG 자체가 움직이거나 게임 엔진의 FPS 설정까지 담는 것은 아닙니다.

프레임 좌표와 시간 정보가 필요하면 시트의 JSON 내보내기를 함께 사용할 수 있습니다. PNG와 JSON을 각각 저장하거나 두 파일을 ZIP으로 묶는 선택이 있습니다. 이 JSON은 TexturePacker 형식의 정보이므로 사용하는 엔진·가져오기 도구가 지원하는지 확인하세요. 모든 엔진에서 자동으로 애니메이션이 완성되는 것은 아닙니다.

저장 후 시트를 다시 열어 프레임 수, 셀 크기, 순서, 투명 배경을 확인합니다. Godot·Unity 등에서는 셀과 애니메이션 프레임 순서, 재생 속도를 엔진에서 설정합니다. 세부 배치 방법은 스프라이트 시트 가이드를 참고하세요.

자주 생기는 문제와 확인할 설정

• 선택하지 않은 프레임도 저장됨: ‘선택 프레임만’ 옵션과 내보낼 개수 표시를 확인합니다.
• 옷이나 눈에 구멍이 생김: 크로마키 허용 범위를 낮추고 원본의 배경색과 비교합니다.
• GIF가 원본보다 빠르거나 느림: 현재 FPS와 남긴 프레임 수를 확인합니다. 내보내기에서는 간격이 균등해집니다.
• 캐릭터가 흔들리거나 잘림: 셀 크기·여백·기준점 정렬을 확인하고 점프 높이를 의도적으로 보존할지 결정합니다.
• PNG가 한 파일만 나옴: 정상적인 시트일 수 있습니다. 안에 여러 셀이 있는지 확인하고 엔진에서 나누어 사용합니다.
• 시트가 너무 커서 저장되지 않음: 불필요한 프레임·여백을 줄이거나 출력 크기를 낮춥니다. 브라우저와 출력 크기 제한을 확인하세요.

도트 그림체도 바꾸고 싶다면

프레임 추출과 도트 스타일 변환은 별도 작업입니다. 색·외곽선까지 바꾸려면 정리한 GIF를 픽셀화에서 열어 프리셋을 조정할 수 있습니다. 픽셀화는 원본 불러오기와 설정 변경·재처리가 모두 무료이며, 브라우저에서 처리되므로 불러올 때 로그인도 필요하지 않습니다. 결과 내보내기와 계정에 작업을 보관하는 기능은 로그인 후 이용할 수 있습니다.

3D 모델에서 여러 방향의 도트 캐릭터를 만들고 싶다면 3D 모델 → 픽셀 스프라이트 작업 순서를 보세요. 내 원본을 준비하기 전에 무료 3D 샘플로 조정 흐름을 살펴볼 수도 있습니다. GIF만 시트로 정리할 목적이라면 무료 스프라이트 도구에서 바로 시작하세요.