GIF 프레임 추출기

사용 방법

1. GIF를 드롭 영역에 끌어다 놓거나 클릭해서 선택합니다. 복사한 GIF 파일을 Ctrl/Cmd+V로 붙여넣어도 됩니다.
2. 정보 표시줄에서 캔버스 크기, 프레임 수, 전체 재생 시간, 첫 재생 후 반복 횟수, 파일 크기를 확인합니다.
3. 내보낼 프레임을 고릅니다. 처음에는 모든 프레임이 선택되어 있습니다. 썸네일을 클릭해 하나씩 켜고 끄거나 「전체 선택」「선택 해제」로 한 번에 바꿀 수 있습니다. 「프레임 1 ~ 48, 간격 4」처럼 입력하고 「이 조건으로 선택」을 누르면 범위나 N프레임 간격으로 고를 수 있습니다.
4. PNG(투명 유지) 또는 JPG(품질과 투명 영역 배경색 지정)를 선택합니다.
5. 「ZIP 다운로드」로 선택한 프레임을 한꺼번에 받습니다. 한 장만 필요하면 썸네일 아래 다운로드 아이콘을 누르세요. 파일명은 {원래 이름}-frame-001.png 형식입니다.
6. 스프라이트 시트가 필요하면 열 수와 간격을 정하고 「스프라이트 시트 만들기」를 누른 뒤 PNG와 JSON을 내려받거나 JSON을 복사합니다.

프레임이 완전한 이미지로 나오는 이유

GIF는 완성된 그림을 여러 장 쌓아 두는 형식이 아닙니다. 두 번째 프레임부터는 바뀐 사각형 영역만 기록하고 바뀌지 않은 픽셀은 투명으로 표시하는 경우가 많습니다. 또 프레임마다 disposal(처리 방식)이 붙어 있습니다.

조각을 그대로 꺼내면 구멍 난 이미지가 됩니다. 이 도구는 캔버스 하나를 계속 유지하면서 프레임별 처리 방식을 순서대로 적용하고, 프레임을 그릴 때마다 캔버스를 복사해 내보냅니다. 그래서 모든 PNG가 그 순간의 완전한 화면이고, 크기도 캔버스와 같아 12번째 프레임과 1번째 프레임을 픽셀 단위로 겹쳐 볼 수 있습니다.

스프라이트 시트와 JSON

스프라이트 시트는 선택한 프레임을 왼쪽에서 오른쪽, 위에서 아래 순서로 격자에 배치합니다. 칸 사이 간격은 투명으로 남습니다. JSON 예시는 다음과 같습니다.

{
  "image": "loader-sprite.png",
  "width": 256,
  "height": 64,
  "frameWidth": 64,
  "frameHeight": 64,
  "columns": 4,
  "spacing": 0,
  "frames": [
    { "frame": 1, "x": 0, "y": 0, "w": 64, "h": 64, "duration": 80 },
    { "frame": 2, "x": 64, "y": 0, "w": 64, "h": 64, "duration": 80 }
  ]
}

frame은 원본 GIF의 프레임 번호라서 어떤 프레임을 건너뛰었는지 바로 알 수 있습니다. duration 단위는 밀리초입니다.

CSS만으로 재생하려면 「열 수」를 선택한 프레임 수와 같게 해서 한 줄짜리 시트를 만들고 steps()로 넘깁니다.

.loader {
  width: 64px;
  height: 64px;
  background: url(loader-sprite.png) 0 0 / auto 64px;
  animation: play 0.32s steps(4) infinite;
}
@keyframes play {
  to { background-position: -256px 0; }
}

주요 활용 사례

• 짤방이나 화면 녹화 GIF에서 한 장면만 무손실 PNG로 저장해 발표 자료, 버그 리포트, 썸네일에 사용.
• GIF를 게임용 스프라이트 시트로 변환해 Phaser, PixiJS, Godot, 직접 만든 Canvas 루프에 적용. 프레임 시간은 JSON에 그대로 남음.
• 무거운 GIF를 CSS steps() 애니메이션으로 교체하거나 필요한 프레임만 WebP로 저장.
• UI 애니메이션을 프레임 단위로 점검해 레이아웃이 튀거나 전환이 깜빡이는 프레임을 찾기.
• 긴 GIF에서 N프레임마다 한 장씩 추출해 스토리보드나 한눈에 보는 요약 이미지 만들기.

ffmpeg로 하면 안 되나요?

아주 큰 파일이라면 ffmpeg가 맞고, 프레임 합성도 정확합니다. 다만 기본 설정에서는 지연이 제각각인 GIF를 고정 프레임레이트로 다시 맞추기 때문에, 5프레임짜리 GIF에서 중복 PNG가 수십 장 나올 수 있습니다. 프레임당 한 장씩 받으려면 -fps_mode passthrough를 붙이세요.

ffmpeg -i input.gif -fps_mode passthrough frame-%03d.png

이 페이지는 설치 없이 같은 프레임을 얻을 수 있고, 눈으로 보면서 프레임을 고르고, 스프라이트 시트와 JSON까지 한 번에 만듭니다.

동작 원리

이 페이지는 브라우저 기본 이미지 디코딩 API 대신 GIF를 직접 디코딩합니다. WebCodecs의 ImageDecoder는 모든 브라우저에서 지원되지 않고, 프레임별 처리 방식도 얻을 수 없기 때문입니다. 논리 화면 기술자, 전역·지역 색상표, 그래픽 제어 확장(지연, 처리 방식, 투명색), NETSCAPE2.0 반복 횟수를 읽은 다음 프레임마다 LZW 데이터를 풉니다. 코드 길이는 최소 코드 크기에서 12비트까지 늘어나고, clear 코드를 만나면 사전을 초기화합니다. 인터레이스 프레임은 네 번의 패스에서 행 순서를 복원합니다. 파일이 중간에 끊겨도 끊기기 전까지 디코딩한 픽셀은 그대로 남습니다. 디코딩은 짧은 구간으로 나눠 진행하므로 큰 파일에서도 페이지가 멈추지 않고 진행률이 표시됩니다.

지원 범위

• 프레임은 항상 캔버스 전체 크기로 내보냅니다. 자르기와 크기 조절은 범위 밖이며, 크기 조절은 내보낸 프레임을 이미지 압축기에서 처리하세요.
• 출력 형식은 PNG, JPG, 이들의 ZIP, PNG 스프라이트 시트입니다. WebP 변환은 WebP 변환기를 사용하세요.
• 움직이는 GIF의 편집이나 재조립은 범위 밖이며, 이 도구는 분할 전용입니다.
• 크기 한도: 디코딩 기준 5,000만 픽셀, 1,000프레임, 프레임 하나 또는 스프라이트 시트당 16,777,216픽셀.

관련 도구

• WebP 변환기 — 내보낸 PNG 프레임을 한꺼번에 WebP로 변환.
• 이미지 모자이크 — 공유하기 전에 프레임의 민감한 부분을 흐리게 하거나 가림.
• 이미지 압축기 — 내보낸 프레임과 스프라이트 시트를 압축하거나 크기 조절.