🐹 달려!

이 도구로 그린 장면 · 마지막 갱신 2026-08-09

달려! — 자세를 조금씩 다르게 그린 장면을 이어 붙여 달리는 동작을 만든 프레임 애니메이션 예제입니다.
이 그림은 내보낸 움직이는 SVG라 이 페이지에서도 실제로 재생됩니다.

흔들림만으로는 달리기가 되지 않습니다. 다리가 앞뒤로 바뀌어야 하니까요. 이 장면은 자세를 조금씩 다르게 만든 여러 장을 이어 붙여 동작을 만듭니다.

▶ 이 장면 열어보기

열면 편집 상태로 들어갑니다. 고쳐도 원본은 그대로이니 마음껏 바꿔 보세요.

어떻게 만들었나

자세 프레임이란

한 장의 그림을 두고 조각들의 각도·위치만 다르게 저장한 것이 자세 프레임입니다. 그림을 다시 그리지 않아도 되니 용량이 거의 늘지 않습니다.

조각 목록과 프레임 데이터는 길이가 맞아야 한다

자세 프레임은 조각마다 값을 하나씩 갖습니다. 조각을 추가·삭제하면 그 길이가 어긋나는데, 어긋난 프레임 데이터는 로드할 때 통째로 버려집니다. 조각을 늘린 뒤 동작이 사라졌다면 원인은 대개 이것입니다.

반복 구간을 짧게

달리기는 두세 장이면 충분합니다. 장수를 늘릴수록 파일이 그만큼 커집니다.

따라 해보기

이어서 보기