동영상 → 스프라이트 시트 변환기 (MP4, WebM, MOV)

대부분의 동영상 → 시트 변환기는 일정 간격으로 프레임을 잡고 끝납니다. 일회성 이펙트라면 그걸로 충분합니다. 하지만 걷기 사이클이라면 루프 지점에서 툭 끊기는 시트, 모든 외곽선에 남은 초록색 테두리, 프레임마다 따로 잘려서 덜덜 떨리는 캐릭터가 남습니다. 이 도구는 이 세 가지 문제를 대신 해결합니다. 동작의 주기를 찾고, 가장자리 디스필로 배경을 키잉하고, 모든 프레임을 하나의 공통 박스로 자릅니다.

동영상 → 스프라이트 시트 사용 방법

MP4, WebM 또는 MOV를 넣으세요. 단색 초록, 마젠타, 파랑, 흰색 배경에서 촬영하거나 렌더링한 캐릭터가 가장 깔끔하게 나옵니다. 알파 채널이 있는 WebM은 Chrome과 Edge에서 투명도가 유지됩니다.
원하는 부분의 시작과 끝(최대 30초), 캡처 크기를 정한 뒤 프레임 추출을 누르세요. 클립이 한 번 재생되는 동안 디코딩된 모든 프레임이 캡처됩니다.
동작이 반복되면 도구가 한 사이클 전체를 찾아 선택합니다. 시트에 넣을 프레임 수를 고르면 사이클 전체에 고르게 분배되고, 마지막 닫는 프레임은 제외되어 루프가 끊기지 않습니다.
배경 키를 확인하세요. 자동 모드는 프레임 테두리에서 배경 색을 읽습니다. 틀렸다면 원본 프레임에서 배경을 클릭하세요. 허용 범위, 가장자리 부드러움, 디스필, 1px 축소를 조절하면 결과가 실시간으로 바뀝니다.
최대 프레임 크기를 정하고, 가장자리를 딱 떨어지게 하고 모든 프레임에 같은 팔레트를 쓰고 싶다면 픽셀화를 켜세요.
PNG 시트를 Aseprite, Phaser/TexturePacker, Godot, CSS 데이터와 함께 내보내거나, 애니메이션 GIF, 또는 이 모두와 개별 프레임까지 담은 ZIP으로 받으세요.

결과물

투명 배경에 그리드로 배치된 PNG 스프라이트 시트(자동 또는 고정 열 수, 패딩 선택 가능).
Aseprite JSON, Phaser/TexturePacker JSON(hash 또는 array), Godot 4 SpriteFrames .tres, 단계식 키프레임 애니메이션이 포함된 CSS 스프라이트 클래스, Unity 슬라이스 설정 형식의 프레임 데이터.
정수 배율로 확대할 수 있고 투명 또는 검정/흰색 배경을 고를 수 있는 애니메이션 GIF.
시트, GIF, 모든 데이터 형식, 프레임별 개별 PNG를 담은 ZIP.

지원 엔진

Godot 4: PNG와 .tres를 같은 폴더에 넣고 SpriteFrames를 AnimatedSprite2D에 지정하세요. PNG가 다른 위치에 있다면 첫 줄의 res:// 경로를 수정하세요.
Unity: PNG를 Sprite (Multiple)로 가져오고 Filter Mode를 Point로 설정한 다음, Unity 설정 파일의 숫자로 Grid By Cell Size 슬라이스를 하세요.
Phaser 3 및 PixiJS: PNG를 TexturePacker JSON(hash)과 함께 아틀라스로 불러오세요. JSON에는 애니메이션 프레임 이름도 순서대로 들어 있습니다.
GameMaker, Defold, Construct, RPG Maker: 내보내기 설정 아래에 표시된 프레임 크기로 PNG를 스트립이나 그리드로 가져오세요.

게임을 만들며 얻은 팁

캐릭터에 없는 색을 배경으로 촬영하거나 렌더링하세요. 초록 옷을 입은 주인공에게는 마젠타가 가장 안전하고, 빨강이나 분홍이 들어간 대상에는 초록이 좋습니다.
캐릭터 주변에 여백을 두세요. 팔다리가 화면 밖으로 나가면 공통 크롭으로도 되살릴 수 없습니다.
걷기와 달리기 사이클은 32–64 px에서 8프레임, 10–12 fps면 잘 읽힙니다. 대기 동작은 4–6프레임에 애니메이션 미리보기의 핑퐁을 쓰면 됩니다.
키잉 후에도 외곽선에 색이 남으면 가장자리 부드러움을 조금 올리고 디스필을 켜 두세요. 1px 축소는 색 테두리가 남을 때만 켜세요.
최종 게임 내 크기에서 픽셀화하세요. 512 px 프레임을 공통 팔레트로 48 px까지 줄이는 쪽이 이미 픽셀화된 시트를 확대·축소하는 것보다 훨씬 좋아 보입니다.

활용 사례

로토스코핑한 참고 영상을 프로토타입용 임시 애니메이션으로 만들기.
그린 스크린 위 캐릭터를 AI 동영상 모델로 만든 결과물에서 루프 사이클 추출하기.
렌더 파이프라인을 따로 구축하지 않고 Blender나 Spine 렌더를 스프라이트 시트로 변환하기.
동영상으로 렌더링한 이펙트(연기, 마법, 물)를 스프라이트 시트로 게임에 넣기.

자주 묻는 질문

동영상이 어딘가에 업로드되나요?

아니요. 파일은 브라우저가 읽고 프레임은 내 기기에서 처리됩니다. 서버로 아무것도 보내지 않으며, 페이지가 로드된 뒤에는 오프라인에서도 계속 작동합니다.

어떤 동영상 형식을 지원하나요?

브라우저가 재생할 수 있는 모든 형식입니다. MP4(H.264), WebM(VP8/VP9/AV1), 그리고 대부분의 MOV가 됩니다. iPhone의 HEVC/H.265 .mov 파일은 Safari와 일부 Chrome 빌드에서만 디코딩됩니다. 파일이 열리지 않으면 먼저 H.264 MP4로 변환하세요.

루프 감지는 어떻게 작동하나요?

캡처된 각 프레임을 피사체의 아주 작은 실루엣으로 줄입니다. 그다음 가능한 모든 N에 대해 각 프레임이 N단계 뒤 프레임과 얼마나 비슷한지 측정해 동작이 반복되는 주기를 찾고, 첫 프레임과 마지막 프레임이 가장 잘 맞는 사이클을 고릅니다. 뚜렷하게 나은 간격이 없으면 일회성 동작으로 보고 전체 구간을 사용합니다.

동영상의 투명 배경을 그대로 유지할 수 있나요?

네, VP8/VP9 WebM의 알파 채널을 디코딩하는 Chrome과 Edge에서 가능합니다. 배경에서 유지를 선택하면 아무것도 지워지지 않습니다. 다른 브라우저에서는 이런 동영상이 검정 배경으로 표시되므로 키잉을 사용하세요.

프레임은 몇 장까지 처리할 수 있나요?

한 번에 최대 30초까지 캡처합니다. 프레임은 선택한 캡처 크기로 메모리에 저장되고 전체 용량은 약 350 MB로 제한되므로, 긴 클립을 큰 캡처 크기로 잡으면 중간에 멈춥니다. 스프라이트용이라면 256–512 px 캡처로 충분합니다.

작은 크기로 설정하면 프레임이 왜 흐릿해지나요?

동영상 프레임을 줄이면 픽셀이 평균화되어 가장자리가 부드러워집니다. 픽셀화를 켜면 결과가 하드 알파와 공통 팔레트로 정리되어 최종 크기에서 선명한 픽셀 아트 가장자리가 나옵니다.

아무것도 촬영하지 않고 스프라이트 시트를 만들 수 있나요?

네. 이 사이트의 AI 생성기가 캐릭터를 그리고 모션 라이브러리로 애니메이션을 입힌 뒤, 이 도구와 같은 형식으로 내보냅니다.