도트 애니메이션 만들기 · 프레임·어니언 스킨·태그

브라우저에서 한 프레임씩 그려 애니메이션을 만듭니다. 프레임·태그·시간은 자르기와 패킹에 쓰는 Studio 타임라인에 그대로 있고, 픽셀 작업 공간은 앞뒤 프레임을 어니언 스킨으로 보여 주며 칠하게 해 줍니다. 걷기 동작을 한곳에서 그리고, 재생하고, 내보낼 수 있습니다.

도트 애니메이션은 프레임마다 정해진 밀리초 동안 보여 주는 짧은 반복입니다. 걷기는 6~8프레임을 약 100ms씩(두 걸음에 0.6~0.8초) 쓰면 무난하고, 대기 동작은 2~4프레임을 150~300ms씩 더 오래 보여 줘야 떨리지 않고 숨 쉬는 느낌이 납니다. 픽셀 작업 공간에서 Alt+N은 현재 프레임을 복사해 다음 자세를 그리게 하고, F3은 어니언 스킨, 프레임마다 시간을 따로(기본 100ms) 정하며 Enter로 반복 재생합니다. .aseprite로 저장하거나 태그마다 GIF·APNG·엔진 파일로 내보내세요.

칠할 스프라이트·프레임·GIF·.aseprite 파일, 또는 정리할 확대된 그림을 끌어다 놓으세요

빈 Studio 열기

브라우저에서 처리하며 파일은 업로드되지 않습니다.

Studio 픽셀 작업 공간: 타임라인의 CC0 닌자 달리기 6프레임, 어니언 스킨으로 앞뒤 프레임을 보며 한 프레임을 편집하는 화면 — CC0 에셋(OpenGameArt)을 연 실제 Studio 화면입니다.

내보내기 대상

.aseprite검증됨· Aseprite 1.3.18
Engine bundles검증됨· Godot 4.7.2 · Unity 6000.5
Palette files측정 확인· read back
Frame PNG · .nerulio일반 파일

프레임 수, 타이밍, 그리고 프레임별 시간이 중요한 이유

걷기 한 주기는 두 걸음입니다. 걸음마다 같은 핵심 자세를 지납니다. 접지(두 발이 땅에 닿고 다리가 가장 벌어짐), 하강(체중이 실리며 몸이 가장 낮음), 교차(한 다리가 다른 다리를 지나침), 상승(몸이 가장 높음)입니다. 걸음당 네 자세면 8프레임, 하강을 빼면 6프레임입니다. 접지 자세를 먼저 그려 어니언 스킨으로 확인한 뒤 중간 프레임을 채우세요.

타이밍은 전체 프레임률이 아니라 프레임당 밀리초입니다. 100ms 프레임 8개는 800ms 주기라 한 걸음이 400ms입니다. 대기 동작은 양 끝 자세를 오래 둘 때 잘 읽힙니다. 들숨·날숨 자세에 300ms, 중간 프레임에 150ms를 주는 식입니다. Nerulio는 프레임마다 시간을 따로 가지므로 멈춤을 위해 프레임을 복제할 필요가 없습니다.

애니메이션이 어디로 가느냐에 따라 시간 저장 방식이 달라집니다. GIF는 지연을 1/100초 단위로 세므로 125ms는 13(130ms)이 되고 내보내기가 이를 알려 줍니다. APNG는 밀리초를 그대로 저장합니다. 애니메이션마다 속도 하나로 재생하는 엔진에는 Nerulio 엔진 내보내기가 1000 ÷ 평균 시간을 FPS로, 프레임별 배수를 함께 씁니다.

핵심 자세: 동작을 정하는 그림. 걷기에서는 접지·하강·교차·상승.
중간 프레임: 두 핵심 자세 사이에 넣어 동작을 부드럽게 하는 프레임.
어니언 스킨: 그리는 프레임 아래에 이전·다음 프레임을 흐리게 보여 주는 기능.
멈춤: 자세가 읽히도록 이웃 프레임보다 오래 보여 주는 프레임.
태그: 방향과 반복 횟수가 있는 이름 붙은 프레임 구간(walk, idle).

예시: 걷기와 대기 동작의 타이밍

타임라인에 입력한 시간과 각 내보내기가 그 값을 다루는 방식입니다.

walk   8프레임 × 100 ms          = 주기 800 ms → 한 걸음 400 ms
walk   6프레임 × 100 ms          = 주기 600 ms → 한 걸음 300 ms (더 빠른 걸음)
idle   4프레임 300,150,300,150   = 한 번 숨쉬기 900 ms
idle의 엔진 FPS                  = 1000 / 평균(300,150,300,150) = 1000 / 225 = 4.44
       배수 300/225 = 1.33, 150/225 = 0.67
GIF    150 ms → 15/100초(정확)   125 ms → 13/100초 = 130 ms(반올림)
APNG   125 ms → 125/1000초(정확)
보폭   딛은 발이 한 걸음(400 ms) 동안 16 px 뒤로 → 캐릭터를 초당 40 px 이동

마지막 줄은 걷기가 미끄러지지 않게 하는 검산입니다. 딛고 있는 발이 뒤로 가는 속도가 게임에서 캐릭터가 앞으로 가는 속도와 같아야 합니다. 게임의 이동 속도가 다르다면 이동 속도만 바꾸지 말고 프레임 시간이나 보폭을 고치세요.

이렇게 작동합니다

현재 프레임을 복사한 새 프레임(Alt+N)이나 빈 프레임(Alt+Shift+N), 프레임 삭제(Alt+C), 쉼표·마침표로 이동, Enter로 재생·정지. 태그에는 방향(정방향·역방향·핑퐁)과 반복 횟수가 있습니다.
어니언 스킨(F3)은 칠하는 프레임 아래에 이전·다음 프레임을 보여 주고(빨강·파랑으로 물들이기 선택 가능), 보여 줄 개수와 불투명도는 타임라인에서 정합니다. 미리보기 창(F7)은 칠하는 동안에도 정수 배율로 태그를 계속 재생합니다.
프레임마다 밀리초 단위 시간을 따로 가지므로 멈춘 자세와 빠른 휘두르기를 한 애니메이션에 담을 수 있습니다. 512×512, 100프레임 스프라이트에서 100ms 프레임이 제시간에 재생됐습니다(2초에 20프레임).
가져온 시트의 한 프레임을 칠하면 그 프레임만 자기 픽셀을 갖게 되고, 다른 프레임과 원본 시트는 그대로이며 변경은 되돌리기 한 번입니다.
프레임은 스프라이트 작업 공간이 읽는 모든 곳에서 옵니다. 픽셀을 보고 자르는 시트, 번호 붙은 PNG, 지연 시간이 있는 GIF·APNG, 레이어·태그·시간이 있는 .aseprite.

사용 방법

GIF, 번호 붙은 프레임, .aseprite 파일을 이 페이지에 끌어다 놓으면 프레임으로 들어와 픽셀 작업 공간이 열립니다. 시트 한 장은 먼저 스프라이트 작업 공간에서 자를 위치를 확인하고 적용합니다.
타임라인에서 프레임을 고르고 F3으로 어니언 스킨을 켠 뒤, 앞뒤 프레임을 보며 자세를 다시 그립니다.
Alt+N으로 중간 프레임을 넣고 프레임마다 시간을 입력한 뒤, 타임라인의 태그 줄을 끌어 애니메이션 이름을 붙입니다.
Enter를 누르거나 F7로 미리보기 창을 열어 반복을 확인하고, .aseprite로 저장하거나 패킹·내보내기에서 애니메이션마다 GIF·APNG로 내보냅니다.

내보내기 전에 반복 확인하기

Enter를 눌러 최소 다섯 번 반복을 봅니다. 이음매에서 튀거나 멈칫하면 대개 마지막 프레임이 첫 프레임과 같은 경우입니다.
교차 프레임에서 어니언 스킨(F3)을 켭니다. 양옆의 접지 프레임이 좌우 대칭으로 놓여야 합니다.
미리보기 창(F7)을 1배나 2배로 엽니다. 확대해서 적당했던 타이밍이 실제 크기에서는 느리게 느껴지는 경우가 많습니다.
GIF로 내보낸 뒤 내보내기 안내를 읽습니다. 1/100초로 반올림된 프레임이 모두 표시됩니다.

애니메이션할 때 쓰는 타임라인 조작

스프라이트 작업 공간과 같은 타임라인을 픽셀 작업 공간에서 씁니다.

동작	키	결과
새 프레임(복사)	Alt+N	현재 프레임을 바로 뒤에 복제해 다시 그릴 수 있게 함
빈 프레임	Alt+Shift+N	새 자세를 위한 빈 프레임 추가
프레임 삭제	Alt+C	선택한 프레임을 되돌리기 한 번으로 삭제
어니언 스킨	F3	현재 프레임 아래에 앞뒤 프레임 표시. 개수·불투명도·색 조절
재생 / 미리보기 창	Enter / F7	프레임별 시간대로 재생, 미리보기는 정수 배율로 선명하게

문제 해결

증상	유력한 원인	확인 방법	해결
한 주기마다 한 번씩 덜컥거림	마지막 프레임이 첫 프레임의 복사본이라 같은 자세가 두 번 연속 나옴	쉼표·마침표로 이음매를 넘겨 보면 같은 프레임이 연달아 있음	중복된 마지막 프레임 삭제(Alt+C)
게임에서 캐릭터가 미끄러지거나 문워크함	한 주기의 보폭과 게임 속 이동 속도가 맞지 않음	딛은 발이 한 걸음에 몇 픽셀 움직이는지 재서 걸음 시간으로 나누기	이동 속도를 보폭에 맞추거나(400ms에 16px = 초당 40px) 프레임 시간을 다시 정하기
GIF가 미리보기보다 빠르거나 느림	GIF는 지연을 1/100초로 저장해 애매한 밀리초는 반올림되고, 최소 20ms가 적용됨	내보내기 안내에 반올림된 프레임이 나옴	10ms 배수로 정하거나 밀리초를 그대로 지키는 APNG로 내보내기
Nerulio에서는 맞는데 엔진에서 타이밍이 다름	엔진에 태그 하나당 FPS만 주고 프레임별 시간은 버림	멈춤 프레임의 길이를 엔진과 타임라인에서 비교	프레임별 배수를 쓰는 패킹·내보내기의 엔진 번들 사용. Godot 프레임 시간 참고
어니언 스킨에 아무것도 안 보임	꺼져 있거나 불투명도가 너무 낮거나 구간의 첫 프레임에 있음	타임라인의 어니언 스킨 버튼과 설정 확인	F3을 누르고 불투명도를 올린 뒤 이웃 프레임이 있는 곳으로 이동

다른 방법

방법	이럴 때 더 낫습니다
에이스프라이트	멈춘 프레임들에 그림 하나를 재사용하는 링크된 셀이나, 데스크톱 앱의 태그·어니언 스킨이 필요할 때. 어니언 스킨과 프레임 시간은 공식 문서에 설명돼 있습니다.
다른 곳에서 그린 프레임 모으기	자세가 이미 PNG로 있다면 스프라이트 애니메이터에서 애니메이션을 만들고 시간을 정하세요.
기존 시트 미리보기	편집 없이 반복만 보려면 스프라이트 애니메이션 미리보기.

엔진별 내보내기와 검증 방법

"검증됨"은 실제 CC0 에셋으로 내보낸 파일을 해당 엔진·도구가 직접 불러와 원본과 비교했다는 뜻입니다. 불러오지 않은 형식은 그렇게 표시합니다.

대상	파일	검증
.aseprite	`layers · blend · opacity · locked · indexed palette · frames · tags`	검증됨 Aseprite 1.3.18실제 Aseprite 명령줄이 파일을 인덱스 모드, 레이어 2개, 불투명도 160의 곱하기, 편집 불가로 잠긴 레이어 그대로 다시 열었고 프레임 픽셀이 같았습니다.
Palette files	`.gpl · .pal · .hex · .ase · .act · .json`	측정 확인 read back형식마다 쓰고 다시 읽어 같음을 확인했고, Aseprite가 만든 .gpl·.pal·.hex·.act와 실제 Adobe .ase(16색)를 읽었습니다.
Engine bundles	`Godot 4 · Unity 6 · Phaser 3/4 · PixiJS 8 … through Pack & Export`	검증됨 Godot 4.7.2 · Unity 6000.5그린 스프라이트는 패킹·내보내기에서 묶습니다. 그 엔진 파일은 실제 CC0 에셋으로 각 엔진에서 불러와 확인했습니다(49회 중 47회 통과, 실패 2회는 Phaser 3 프리셋이 피하는 Phaser 3.90 버그).
Frame PNG · .nerulio	`PNG-8 with the palette when an indexed frame fits it · project file`	일반 파일어떤 도구에서도 쓰는 일반 파일이며, 엔진 실행 검증은 주장하지 않습니다.

검증 근거

정리 벤치마크(원래 1배 그림을 아는 CC0 사례 69개): 크기를 정확히 찾은 비율 81 %(±1px 90 %), 배경 유지 시 픽셀 74.0 % 정확. 가장 나은 경쟁 도구는 크기 30 %(perfectPixel), 정확한 픽셀 44.6 %(unfake.js). Aseprite로 만든 ×4 최근접 확대는 100 %, ×3.78 쌍선형 확대는 99.7 % 정확하게 돌아왔고 두 경우 모두 크기를 자동으로 찾았습니다. 1px 외곽선과 드롭 섀도는 Aseprite 결과와 픽셀까지 같았습니다(1846px, 705px). 여기서 쓴 .aseprite는 Aseprite 1.3.18에서 인덱스 모드와 레이어·블렌드·잠금이 그대로 열립니다.

한계

쉼표·마침표는 처음과 끝에서 멈추고 돌아가지 않습니다. 계속 보려면 Enter나 태그 안 반복을 쓰세요.
링크된 셀이 없어 두 번 쓰는 자세는 픽셀이 두 벌 저장됩니다.
중간 프레임 자동 생성은 없으며 모든 프레임을 직접 그립니다.
픽셀 작업 공간에 없는 것(Aseprite에는 있음): 레이어 그룹, 링크된 셀, 타일맵 레이어, 참조 레이어, RotSprite와 선택 영역 자유 회전·크기 조절(뒤집기와 90°만), 그라디언트·스프레이·윤곽·텍스트 도구, 사용자 브러시(사각·원 1~16px), 타일 반복 그리기, Lua 스크립트와 명령줄.
대칭 축은 숫자로 입력하며 캔버스에서 끌 수 없습니다. 터치에서는 오른쪽 버튼이 없어 배경색은 전환 버튼이나 X로 씁니다.
정리: JPEG는 가깝게 돌아오지만(배경 유지 시 84 %가 ΔE 0.02 이내) 정확히 같은 경우는 드뭅니다(12 %). 모의 생성 그림은 크기를 정확히 맞힌 비율이 20 %(±1px 80 %)이고, 실제 생성 그림 7장은 하나도 자동으로 맞추지 않았습니다. 패널이 제안한 픽셀 크기를 직접 입력해야 합니다.
인덱스 변환은 Aseprite의 RGB 거리가 아니라 Oklab에서 가장 가까운 색을 고릅니다. 시험 스프라이트의 68 % 픽셀이 다른(눈으로 더 가까운) 색이 됐습니다. Lospec 검색이 유일한 네트워크 요청이며 먼저 묻습니다.

버전과 출처

Nerulio: 새 프레임의 기본 시간은 100ms입니다(src/studio/sprite/playback.js). 512×512에 100프레임인 스프라이트에서 100ms 프레임이 제시간에 재생됐습니다(헤드리스 Chromium, 2초에 20프레임). GIF 내보내기는 1/100초로 반올림하고 최소 20ms를 두며 이를 알려 주고, APNG 내보내기는 밀리초를 그대로 씁니다(src/game/export/anim.js). GIF 타이밍 설명은 GIF89a 사양을 따릅니다.

참고한 공식 문서

자주 묻는 질문

프레임 수에 제한이 있나요?

정해진 제한은 없고 메모리가 한계입니다. 브라우저 테스트는 512×512에 100프레임인 스프라이트를 칠하며, 프레임 전환 16ms, 되돌리기 90~140ms가 걸렸습니다.

쉼표·마침표 키가 끝에서 처음으로 돌아가나요?

이번 버전에서는 돌아가지 않고 첫 프레임과 마지막 프레임에서 멈춥니다. 스프라이트 작업 공간도 같습니다. 계속 돌려 보려면 Enter로 재생하거나 태그 안 반복을 켜세요.

애니메이션을 GIF로 내보낼 수 있나요?

네. 패킹·내보내기에서 애니메이션마다 GIF 하나 또는 원본과 같은 APNG로, 프레임별 지연 시간 그대로 내보냅니다. 내보낸 파일은 프레임마다 다시 디코딩해 확인했습니다. GIF는 투명이 켜짐·꺼짐뿐이니 부드러운 가장자리는 APNG로 두세요.

무료인가요? 계정이 필요한가요?

이 페이지의 기능은 모두 무료이며 계정 없이 쓸 수 있습니다. 워터마크나 막혀 있는 내보내기가 없습니다.

스프라이트가 업로드되나요?

아니요. Studio는 이 브라우저 탭 안에서 디코딩·패킹·내보내기를 합니다. 프로젝트는 브라우저(IndexedDB)에 자동 저장되며 .nerulio 파일로 저장할 수 있습니다.

Aseprite나 엔진 플러그인을 설치해야 하나요?

아니요. .aseprite 파일은 브라우저에서 읽고 씁니다. 엔진별 번들에는 그 엔진에 필요한 것이 들어 있습니다(Godot는 가져오기 설정과 씬, Unity와 Godot 타일셋은 작은 편집기 스크립트).