스프라이트 시트 동영상 변환 · 선명한 WebM
개발 일지, 트레일러, 스토어 페이지에는 GIF보다 동영상이 필요할 때가 많습니다. 시트를 애니메이션으로 나눈 뒤 "WebM video"로 내보내면 애니메이션마다 WebM이 하나씩 나오며, 최근접 이웃으로 4배 키워 도트가 네모 그대로 선명하고, 단색 배경 위에서 프레임마다 자기 길이만큼 보입니다.
Nerulio는 스프라이트 시트의 애니메이션마다 WebM 동영상을 하나씩 만듭니다(VP9, 브라우저에 VP9 인코더가 없으면 VP8). 인코딩은 브라우저의 WebCodecs VideoEncoder가 합니다. 프레임은 최근접 이웃으로 4배 키우고(한 변이 1920 px를 넘으면 그보다 작게), 단색 어두운 배경 위에 그리며, 프레임마다 자기 길이를 유지합니다. 파일 하나에 한 사이클이 들어갑니다. MP4나 오디오는 쓰지 않으니, MP4가 필요한 곳에는 ffmpeg 같은 도구로 WebM을 변환하세요.
- GIF / APNG디코딩 확인· Pillow
- Godot 4검증됨· Godot 4.7.2
- Unity 6검증됨· Unity 6000.5.3f1
- Phaser 3 / 4검증됨· Phaser 3.90 + 4.2
- PixiJS 8검증됨· PixiJS 8.21
- Aseprite JSON검증됨· Phaser load.aseprite · PixiJS 8.21
- .aseprite검증됨· Aseprite 1.3.18
- Spine / libGDX검증됨· spine-canvas 4.2
- Starling / Sparrow XML검증됨· Phaser 4.2
- LÖVE검증됨· LÖVE 11.5
- Defold빌드 확인· Defold bob.jar 1.13.1
- GameMaker미검증
- CSS sprites검증됨· Chromium
픽셀아트를 동영상으로 만들 때 조심할 점
VP9·VP8 같은 동영상 코덱은 손실 압축이고 보통 색을 가로세로 절반 해상도(4:2:0)로 저장합니다. 2 × 2 픽셀마다 색 샘플이 하나입니다. 32 × 32 스프라이트의 1픽셀 외곽선은 옆 픽셀로 번집니다. 인코딩 전에 최근접 이웃으로 모든 픽셀을 4 × 4 블록으로 키우면 원래 픽셀 하나가 색 샘플을 온전히 가지게 되어, 압축 뒤에도 가장자리가 네모로 남습니다.
이 내보내기에는 투명이 없습니다. VP9는 WebM에서 알파를 담을 수 있지만 무시하는 재생기가 많아서, 모든 프레임을 단색 rgb(32, 34, 40) 배경 위에 섞습니다. 반투명 픽셀은 알파 비율만큼 이 색과 섞입니다.
타이밍은 고정 프레임레이트가 아니라 타임스탬프로 저장됩니다. 각 프레임은 앞 프레임들이 끝나는 시점에 시작하고(파일 안에서는 정수 밀리초), 250 ms 멈춤 동작도 그대로 멈춥니다. 파일에는 재생 순서(핑퐁은 펼친 순서)로 애니메이션 한 사이클이 들어가며, 반복은 재생기가 맡습니다.
- 4:2:0
- 크로마 서브샘플링. 색은 가로·세로 절반 해상도, 밝기는 원래 해상도로 저장합니다.
- VP9 / VP8
- WebM에 담기는 동영상 코덱. Nerulio는 브라우저에 VP9(
vp09.00.10.08)를 요청하고, 안 되면 VP8을 씁니다. - VideoEncoder
- 프레임을 인코딩하는 WebCodecs 브라우저 API. 모든 브라우저에 있지는 않고 보안(HTTPS) 페이지에서만 동작합니다.
- 최근접 이웃
- 픽셀을 섞지 않고 k × k 블록으로 복사하는 확대 방식.
예시: 크기, 비트레이트, 길이
프레임 64 × 64, walk = 6프레임 × 100 ms
배율 4× → 256 × 256 px (두 변 모두 1920 px 이하인 4 이하 최대 배율)
비트레이트 max(500 000, 256 × 256 × 8) = 524 288 bit/s
길이 6 × 100 ms = 0.6 s, 한 사이클
파일 hero_webm/hero_walk.webm
보스 700 × 300: 4× = 가로 2800 (초과), 3× = 2100 (초과) → 2× = 1400 × 600
홀수 545 × 201: 4× = 2180 (초과) → 3× = 1635 × 603 → 1636 × 604로 채움 (짝수 변)내보내기 안내가 애니메이션마다 이 내용을 알려 줍니다. 예: “walk: WebM VP9 256×256 (4× nearest), lossy, background rgb(32,34,40).”
무엇이 어디로 옮겨지나
| Studio에서 | WebM에서 | 참고 |
|---|---|---|
| 애니메이션(태그) | .webm 파일 하나 | 내보내기 이름 + 애니메이션 이름, 예: hero_walk.webm |
| 프레임 길이 | 다음 프레임의 타임스탬프 | 정수 밀리초, 들쭉날쭉한 타이밍 유지 |
| 방향, 핑퐁 | 재생 순서대로 프레임 | 한 사이클, 반복 횟수는 저장 안 됨 |
| 픽셀 | k × k 블록, 프레임이 크지 않으면 k = 4 | 최근접 이웃 확대 후 손실 압축 |
| 투명 | rgb(32, 34, 40) 위에 섞음 | 파일에 알파 채널 없음 |
| 크기가 다른 프레임 | 애니메이션마다 한 칸, 프레임을 피벗에 맞춤 | GIF 내보내기와 같은 정렬 |
이렇게 작동합니다
- 동영상은 색을 절반 해상도(4:2:0)로 저장해 한 픽셀짜리 점이 번지므로, 인코딩 전에 최근접 이웃으로 4배 키웁니다.
- 대부분의 플레이어가 WebM의 VP9 알파를 무시하기 때문에 투명 대신 단색 배경을 씁니다.
- 브라우저의 WebCodecs VideoEncoder로 VP9(안 되면 VP8) 인코딩, Studio 자체 WebM 먹서로 파일 작성. 업로드는 없습니다.
- 프레임별 길이를 그대로 써서 멈춤 동작이나 들쭉날쭉한 타이밍도 살아납니다. 프레임은 피벗에 맞춰 재생 순서대로 들어갑니다.
- 2026-09-24에 Chromium에서 확인: 모든 프레임이 4배인 VP9 WebM을 만들었고 ffprobe로 프레임 수를 셌습니다.
사용 방법
- 스프라이트 시트를 넣고 적용을 누릅니다. 처음에는 행마다 애니메이션이 하나씩 생깁니다.
- 프레임별로, 또는 태그 전체를 모두 fps로 설정해 시간을 맞추고 Enter로 확인합니다.
- 패킹·내보내기에서 WebM video를 고릅니다.
- 내보내면 애니메이션마다 .webm이 하나씩 나옵니다. MP4가 필요하면 ffmpeg 같은 도구로 변환하세요.
받게 되는 파일
| 파일 | 용도 |
|---|---|
hero_webm.zip | 내려받는 파일. 안에 hero_webm/ 폴더가 있습니다(내보내기 이름을 따름). |
hero_webm/hero_walk.webm | walk 한 사이클: WebM 컨테이너의 VP9(또는 VP8) 동영상, 오디오 트랙 없음. |
내보낸 뒤: MP4, 더 긴 클립, 게시
- ZIP을 풉니다. 애니메이션마다
.webm이 하나 있습니다. 검증에서 Chromium이 이 파일을 재생했습니다. - MP4가 필요하면 ffmpeg로 다시 인코딩하세요. 예:
ffmpeg -i hero_walk.webm -c:v libx264 -pix_fmt yuv420p hero_walk.mp4. 확대는 이미 픽셀에 들어가 있어 MP4에서도 네모 블록이 유지됩니다. - 0.6초짜리 클립은 게시물로는 짧습니다.
-stream_loop은 인코딩 전에 입력을 반복합니다.ffmpeg -stream_loop 9 -i hero_walk.webm -c:v libx264 -pix_fmt yuv420p hero_walk_x10.mp4면 열 사이클, 6초가 됩니다. - 동영상 옆에 시트나 APNG를 함께 보관하세요. WebM은 손실 압축이라 애니메이션을 보여 주는 용도이지 엔진에 넣는 용도가 아닙니다.
결과 확인
- 재생해서 한 사이클 시간을 재 보세요. 6프레임 × 100 ms면 0.6초입니다.
- 멈추고 확대해 보세요. 원래 픽셀 하나가 4 × 4 블록이고, 압축 때문에 색 경계가 약간 부드럽습니다.
ffprobe hero_walk.webm이 코덱(vp9 또는 vp8)과, 안내에 나온 너비·높이를 보여 줍니다.
스프라이트 애니메이션 공유: WebM·GIF·APNG
| WebM video | Animated GIF | APNG | |
|---|---|---|---|
| 보기 좋게 확대 | 예, 최근접 이웃 4배 | 아니요, 시트 크기 그대로 | 아니요, 시트 크기 그대로 |
| 스프라이트 뒤 | 단색 배경 | 투명(켜짐·꺼짐만) | 투명, 부드러운 가장자리 유지 |
| 색 정확도 | 비슷하지만 압축됨 | 255색 이하면 정확 | 정확 |
| 손실? | 있음 | 255색을 넘을 때만(미디언 컷) | 없음 |
| 필요한 것 | WebCodecs VideoEncoder(Chromium, Firefox) | Studio만 있으면 됨 | Studio만 있으면 됨 |
| 어울리는 곳 | 영상 게시물, 트레일러, 스토어 페이지 | GIF가 재생되는 채팅·커뮤니티 | 팀에 보여 줄 정확한 미리보기 |
문제 해결
| 증상 | 유력한 원인 | 확인 방법 | 해결 |
|---|---|---|---|
| WebM 버튼이 꺼져 있음 | 이 브라우저에 WebCodecs VideoEncoder가 없거나, 페이지가 HTTPS가 아닙니다 | 버튼 툴팁이 알려 줍니다 | 최신 Chrome이나 Edge를 쓰세요. GIF와 APNG 내보내기는 없이도 됩니다 |
| 동영상이 1초도 안 돼 끝남 | 파일 하나는 한 사이클이고, 반복은 재생기 몫입니다 | 길이가 프레임 시간의 합과 같습니다 | 재생기에서 반복하거나, 게시 전에 ffmpeg -stream_loop로 입력을 반복하세요 |
| 부드러운 가장자리에 어두운 테두리 | 반투명 픽셀이 어두운 배경과 섞였습니다 | 빛 번짐이나 안티에일리어싱된 가장자리를 봅니다 | 투명이 필요하면 APNG로 내보내세요. 이 내보내기의 배경색은 고정입니다 |
| 큰 스프라이트가 흐릿함 | 두 변을 1920 px 이하로 맞추려고 배율이 4배 아래로 내려가, 원래 픽셀당 남는 픽셀이 적어졌습니다 | 안내에 “(2× nearest)”처럼 배율이 나옵니다 | 애니메이션을 작게 나눠 내보내거나 2배를 받아들이세요 |
| 사이트가 파일을 거부함 | WebM이 아니라 MP4(H.264)만 받습니다 | 업로드 도움말의 형식 목록 | 위처럼 ffmpeg로 변환하세요 |
다른 방법
| 방법 | 이럴 때 더 낫습니다 |
|---|---|
| 같은 패널의 Animated GIF나 APNG | 투명이 중요한 채팅·커뮤니티 게시물. APNG는 부드러운 가장자리와 정확한 색을 유지합니다. |
| 플로팅 미리보기(F7, 최대 8배)를 화면 녹화 | 원하는 배경, 여러 애니메이션 나란히, 긴 녹화가 필요할 때. |
| PNG 프레임을 내보내 영상 편집기에서 만들기 | MP4를 바로, 원하는 프레임레이트나 소리와 함께 만들어야 할 때. 스프라이트 시트를 PNG 프레임으로 참고. |
엔진별 내보내기와 검증 방법
"검증됨"은 실제 CC0 에셋으로 내보낸 파일을 해당 엔진·도구가 직접 불러와 원본과 비교했다는 뜻입니다. 불러오지 않은 형식은 그렇게 표시합니다.
| 대상 | 파일 | 검증 |
|---|---|---|
| Godot 4 | .tres SpriteFrames · .tscn AnimatedSprite2D · .png.import | 검증됨 Godot 4.7.2Godot가 불러와 모든 애니메이션 프레임을 그려 원본과 비교했습니다. 씬은 Nearest 필터를 쓰고 회전은 쓰지 않습니다. |
| Unity 6 | .unity.json · Editor/NerulioSpriteImporter.cs · AnimationClip | 검증됨 Unity 6000.5.3f1배치 모드에서 스프라이트 영역·피벗·픽셀·클립 키·길이를 확인했습니다. |
| Phaser 3 / 4 | atlas JSON (multiatlas) · .anims.json | 검증됨 Phaser 3.90 + 4.2두 버전 모두에서 프레임과 애니메이션을 그렸습니다. |
| PixiJS 8 | spritesheet JSON · animations · anchor · meta.scale | 검증됨 PixiJS 8.21회전·여러 페이지 아틀라스도 포함해 확인했습니다. |
| Aseprite JSON | hash / array · frameTags · slices | 검증됨 Phaser load.aseprite · PixiJS 8.21태그의 방향과 반복 횟수가 유지됩니다. |
| .aseprite | layers · tags · durations · slices | 검증됨 Aseprite 1.3.18Aseprite 명령줄로 열어 렌더링했습니다. |
| Spine / libGDX | .atlas | 검증됨 spine-canvas 4.2Spine 런타임이 회전·트림 영역을 모두 그렸습니다. libGDX 자체는 실행하지 않았습니다. |
| Starling / Sparrow XML | XML per page | 검증됨 Phaser 4.2Phaser 3.90은 트림된 XML 프레임을 잘못 그립니다(Phaser 버그). "Sparrow XML (Phaser 3)" 프리셋은 트림을 끄며 3.90·4.2 모두 통과합니다. |
| LÖVE | Lua quads · nerulio_atlas.lua · main.lua | 검증됨 LÖVE 11.5포함된 헬퍼로 모든 프레임을 그리고 모든 애니메이션을 재생했습니다. |
| Defold | .atlas · .tilesource | 빌드 확인 Defold bob.jar 1.13.1Defold 명령줄 빌더로 빌드하고 빌드된 텍스처의 UV를 다시 읽어 확인했습니다. |
| GameMaker | spr_<name>_stripN.png · gamemaker.json | 미검증GameMaker에서 불러오지 않았습니다(헤드리스 실행 불가). 스트립은 GameMaker 스트립 가져오기 방식대로 자릅니다. |
| CSS sprites | .css · preview .html | 검증됨 Chromium포함된 스타일시트로 모든 클래스를 그렸습니다. |
| GIF / APNG | one file per animation | 디코딩 확인 Pillow내보낸 뒤 모든 프레임과 지연 시간을 다시 디코딩했습니다. APNG는 원본과 동일합니다. |
검증 근거
GIF 디코더: 실제 GIF 29개 408/408프레임이 Pillow와 동일, APNG 16개 132/132프레임. .aseprite: 코퍼스 231개 파일을 가져와 다시 쓰고 Aseprite 1.3.18로 열었을 때 태그·길이·픽셀 231/231 일치. 내보내기: 실제 CC0 에셋으로 실제 엔진에서 49회 실행해 47회 통과. 실패 2회는 Phaser 3.90의 트림 XML 버그이며 Phaser 3 프리셋으로 피합니다.
한계
- WebM만 씁니다. MP4와 오디오 트랙은 없습니다.
- 배경색과 배율은 고정입니다. rgb(32, 34, 40), 두 변이 1920 px 안이면 4배.
- 파일마다 한 사이클이며 반복 횟수는 저장하지 않습니다.
- 격자·섬 인식은 신뢰도가 표시된 미리보기일 뿐이며 적용을 누르기 전에는 아무것도 자르지 않습니다. 모든 선택에는 한 번에 바꿀 수 있는 대안이 있습니다.
- 레이어가 정확히 합성되지 않는 .aseprite 파일(그룹 불투명도 등)은 합쳐서 가져오고, 가져오기 패널에 이유를 표시합니다.
- 가져온 아틀라스에서 회전된 프레임은 회전된 채로 남으며 그 내보내기는 미검증입니다.
- 이미지는 한 변 32,768px(2억 6,800만 픽셀)까지이며 브라우저 메모리에 따라 달라집니다.
버전과 출처
WebM 내보내기는 Chromium에서 확인했습니다. 파일이 WebM(EBML) 헤더로 시작하고, ffprobe가 동영상 스트림과 프레임을 읽고, Chromium이 6 × 100 ms 애니메이션을 4배 크기로 0.6초 동안 재생했습니다. 인코더는 브라우저 자체의 것이라 VP9가 나올지 VP8이 나올지는 브라우저에 달려 있습니다. VideoEncoder 지원 범위는 MDN, ffmpeg 옵션은 ffmpeg 공식 문서를 따릅니다.
참고한 공식 문서
자주 묻는 질문
MP4로 바로 받을 수 있나요?
아니요. WebM(VP9, 안 되면 VP8)만 씁니다. ffmpeg 같은 변환기로 MP4로 바꾸면 되고, 최근접 이웃 4배 확대가 이미 들어가 있어 도트는 네모 그대로입니다.
WebM 버튼이 눌리지 않아요.
동영상은 브라우저의 WebCodecs VideoEncoder로 만듭니다. Chromium과 Firefox에는 있으며, 내보내기는 Chromium에서 확인했습니다. 없는 브라우저에서는 버튼이 꺼져 있고, GIF와 APNG는 그대로 내보낼 수 있습니다.
동영상은 무손실인가요?
아니요. 동영상 압축은 손실이 있어 WebM은 보여 주기용이지 엔진에 넣는 용도가 아닙니다. 정확한 프레임은 시트 내보내기나 APNG로 받으세요.
무료인가요? 계정이 필요한가요?
이 페이지의 기능은 모두 무료이며 계정 없이 쓸 수 있습니다. 워터마크나 막혀 있는 내보내기가 없습니다.
스프라이트가 업로드되나요?
아니요. Studio는 이 브라우저 탭 안에서 디코딩·패킹·내보내기를 합니다. 프로젝트는 브라우저(IndexedDB)에 자동 저장되며 .nerulio 파일로 저장할 수 있습니다.
Aseprite나 엔진 플러그인을 설치해야 하나요?
아니요. .aseprite 파일은 브라우저에서 읽고 씁니다. 엔진별 번들에는 그 엔진에 필요한 것이 들어 있습니다(Godot는 가져오기 설정과 씬, Unity와 Godot 타일셋은 작은 편집기 스크립트).