스프라이트 시트

이 도구로 할 수 있는 일

GIF의 모든 프레임을 한 장의 격자 이미지(스프라이트 시트)로 합치거나, 반대로 시트 이미지를 칸으로 잘라 프레임 이미지와 GIF로 되돌립니다. 게임 스프라이트나 CSS 애니메이션 만들 때 씁니다.

사용 순서

GIF → 시트

1. GIF 파일을 올립니다.
2. 가로 칸 수, 칸 간격, 칸 가로 크기를 정하면 미리보기에 시트가 바로 보입니다.
3. 시트 형식(PNG 또는 WebP)을 고르고 "시트 이미지 저장"을 누릅니다.

시트 → 프레임

1. GIF가 아닌 시트 이미지를 올립니다.
2. 가로 칸 수와 세로 칸 수를 정하면 미리보기에 격자선이 표시됩니다.
3. "프레임 ZIP 저장"으로 칸마다 PNG를 받거나, 초당 프레임을 정하고 "GIF 만들기"를 눌러 GIF를 만든 뒤 "다운로드"를 누릅니다.

설정 설명

• 가로 칸 수/칸 간격/칸 가로: 시트 전체 크기는 가로 = 칸 수 x 칸 가로 + (칸 수 - 1) x 간격, 세로도 같은 식입니다. 칸 세로는 원본 비율로 정해집니다.
• 가로/세로 칸 수(시트 → 프레임): 시트를 균등하게 나눕니다. 칸 순서는 왼쪽 위에서 시작해 가로 방향으로, 줄이 끝나면 다음 줄입니다.
• 초당 프레임: 만들 GIF의 프레임 속도입니다.

동작 원리

시트 모드에서는 GIF의 모든 프레임을 합성된 전체 화면으로 풀어 낸 뒤, 칸 크기로 줄여 왼쪽 위에서부터 가로 방향으로 배치한 캔버스를 PNG나 WebP로 저장합니다. 자르기 모드에서는 시트 이미지를 가로 칸 수 x 세로 칸 수의 균등한 칸으로 나누고, 칸 경계는 반올림한 정수 좌표를 씁니다. GIF는 첫 칸의 크기에 맞춰 모든 프레임을 같은 크기로 만든 뒤 인코딩합니다.

알아두기

• 시트 모드의 프레임 수가 칸 수보다 적어 남는 칸은 비어 있습니다.
• 칸 크기가 정수가 아니면 경계가 반올림되어 1px 정도 어긋날 수 있습니다. 칸 수가 이미지 크기를 딱 나누도록 정하는 것이 좋습니다.
• 시트 → 프레임 모드의 "작업대에 올리기"는 만든 GIF가 있으면 GIF를, 없으면 자른 프레임 PNG 전체를 올립니다.
• 탭을 닫으면 결과가 사라집니다.