GIF의 혁신 gifski: 256색 한계를 뛰어넘다

개발기
#gifski #프레임별팔레트 #시간축디더링 #고화질GIF #GIF혁신 #인코더 #색감개선

지난 포스팅에서는 FFmpeg를 사용해 동영상을 GIF로 변환하는 과정을 다뤘습니다.

이전 글: FFmpeg로 동영상 고화질 GIF 만드는 법

하지만 FFmpeg를 사용해서 만든 GIF는 색감이 단순하고, 움직임이 부드럽지 못하다는 아쉬움이 있었죠.

그래서 이번에는 그 아쉬움을 보완하는 고화질 GIF 인코더 gifski를 소개하고, gifski의 핵심 기술 3가지와 FFmpeg와의 차이를 정리합니다.

그리고 이 기술을 사용한 GIF 변환 사이트를 공유합니다.

🔗 ZIF - 브라우저 기반 고품질 GIF 변환기

‘gifski’라는 기술을 사용해서 동영상을 훌륭한 품질의 GIF로 변환할 수 있는데요,
이 기술이 궁금하시다면 아래 글을 읽어봐 주세요! 😀

1. gifski란?

🔗 https://gif.ski

gifski란, 256가지 색만 사용 가능한 GIF의 한계를 돌파한 것처럼 보이는 기술입니다.

gifski 예시 gif

팔레트 하나로 모든 프레임을 처리하는 기존 GIF 대신, 프레임마다 새 팔레트를 만드는 방식과 프레임 간 노이즈 패턴을 조율해서 256색 제한 안에서도 색이 풍부해 보이게 합니다.

이 기술에 대해 좀 더 자세히 설명해 볼게요.

2. Gifski 핵심 기술

2-1. 고품질 팔레트

libimagequant/pngquant 기반의 ‘고품질 팔레트’ 생성

Gifski GIF 생성 방식의 첫 번째 키 포인트는 프레임을 libimagequant(pngquant 엔진)로 팔레트화한다는 점입니다.

libimagequant란?

간단하게 말해서 수백만 색의 이미지를 256색 팔레트 이미지로 바꿀 때, 최대한 원본과 시각적으로 거의 동일하게 보이도록 오차를 최소화한 256색 팔레트를 찾아줍니다.

libimagequant란

이 엔진으로 png 파일도 이렇게나 압축될 수 있네요!

GIF는 한 프레임에 최대 256색만 쓸 수 있는데, 수십만~수백만 색으로 이루어진 현실 세계의 노을 풍경을:

  • 제가 크레파스에서 256색 뽑아서 그린 것
  • 컬러학 박사 장인이 선별해서 뽑은 256개의 색으로 그린 것

결과가 많이 다르겠죠.

실전 테스트: libimagequant의 위력

libimagequant가 왜 컬러 장인인지 아래의 테스트 예시를 통해 느껴봅시다.

libimagequant

후지산 직찍 입니다.. ^^ 여기 540px짜리 풍경 사진이 있습니다. 이 사진으로 두 가지 버전 테스트를 해보겠습니다.

a) 일반 양자화 (제가 뽑은 256색)

brew install imagemagick  # imagemagick 설치

magick sunset_540.png -colors 256 -dither FloydSteinberg naive_256.png

위 명령어는 예시 이미지에 ImageMagick의 내장 색 양자화(quantize) 알고리즘을 돌려서:

  1. 이미지 전체를 대표할 256개 색을 고르고
  2. 모든 픽셀을 그 256색 중 하나로 다시 매핑한 다음
  3. Floyd-Steinberg 디더링을 적용

나이브 양자화 예시

나이브 양자화 예시 입니다. 빠르고 간단하지만, 결과를 보니 하늘, 노을 부분에서 짜부러진 게(밴딩 현상)가 보이네요.

b) libimagequant 기반 pngquant (컬러 장인)

brew install pngquant  # pngquant 설치

pngquant --force --speed 1 --quality 70-100 --output liq_256.png 256 sunset_540.png

이번에는 libimagequant 엔진으로 256색 팔레트를 최적화 후 이미지를 생성합니다.

libimagequant 양자화 예시

libimagequant 양자화 예시.

훨씬 더 자연스러운 이미지가 나왔습니다!

Importance Map

Importance Map

또 libimagequant에는 importance map이라는 기능이 있는데, 얼굴이나 글자처럼 중요한 픽셀에 가중치를 더 주고, 그 정보를 바탕으로 팔레트를 우선 배분해 주는 기술입니다.

liq_image_set_importance_map()

동일 256색에서도 시각적 품질이 더 향상되겠죠.

2-2. Cross-frame palettes (프레임별 최적화)

GIF는 전역(Global) 팔레트뿐 아니라 로컬(Local) 팔레트 = 프레임별 팔레트도 허용합니다. 로컬 팔레트가 있으면 그 프레임은 그 팔레트를 사용하는 방식인데요.

gifski는:

  1. 각 프레임을 libimagequant로 로컬 팔레트(LCT)화하고
  2. 이전/이후 프레임의 색 분포를 참고해 일부 색을 재사용하고
  3. 프레임이 바뀌어도 같은 영역이 비슷한 팔레트 색을 유지하도록 해서

색이 튀는 느낌을 줄이는 cross-frame 최적화를 적용합니다.

그 결과 프레임이 바뀌어도 색이 들쭉날쭉 튀어 보이지 않고 부드럽게 보이는 거죠.

팔레트 종류 확인하기

gifsicle --info your_file.gif

위 명령어로 GIF 프레임 정보를 확인할 수 있습니다.

1) gifski.gif

gifski

* 57 images
  logical screen 450x580
  global color table [2]
  background 0
  loop forever
  + image #0 450x580
    comment gif.ski
    local color table [256]
    disposal asis delay 0.10s
  + image #1 450x580 transparent 0
    local color table [256]
    disposal asis delay 0.10s
  + image #2 450x580 transparent 0
    local color table [256]
    disposal asis delay 0.10s
  ...

gifski가 만든 GIF에는 각 프레임마다 LCT(256색)가 붙어 있는 것을 볼 수 있습니다. disposal asis으로 이전 프레임을 유지하면서 그 위에 다음 프레임을 그려서 잔상/레이어를 활용하고 있고요.

이 방식 덕분에 프레임별로 색을 최적화할 수 있고, 다양한 장면에서도 더 자연스러운 색감을 표현할 수 있습니다.

2) ffmpeg.gif ffmpeg_gif

logical screen 480x618
  global color table [256]
  background 255
  loop forever
  + image #0 480x618 transparent 255
    local color table [256]
    disposal asis delay 0.07s
  + image #1 480x618 transparent 255
    disposal asis delay 0.06s
  ...

결과를 보니 전역 팔레트 256색(GCT)가 있고, 첫 프레임만 LCT를 둔 혼합 구조입니다. 대부분 전역 팔레트 기반이라, 장면 변화가 크면 색 손실 등 이미지 품질이 낮아집니다.

3) naver.gif

naver_gif

logical screen 388x500
  global color table [256]
  background 0
  loop forever
  + image #0 388x500 transparent 255
    disposal background delay 0.10s
  + image #1 388x500 transparent 255
    disposal background delay 0.10s
  ...

이건 네이버 블로그 앱으로 생성한 GIF 파일입니다. 전역 팔레트 256색만 사용, 로컬 팔레트 없고요. (흠.. 네이버는 전역 팔레트 색을 어떻게 뽑은 걸까요… 🤔)

2-3. Temporal dithering (시간축 디더링)

마지막으로 Temporal dithering(시간축 디더링)입니다.

시간축 디더링에 앞서 ‘이미지 디더링’을 간단하게 설명하자면, 이미지 디더링이란 제한된 색상 팔레트를 사용하여 더 넓은 색상 범위를 표현하는 기법이죠.

💡 참고: 디더링(Dithering)이란? 이미지 디더링 종류 - 잘 정리해둔 페이지가 있어서 첨부했습니다.

보통은 한 프레임 내부에서 픽셀 패턴을 섞지만, gifski는 시간축(여러 프레임)으로 확장합니다.

일반 공간 디더링 Temporal dithering (시간축 디더링)
한 프레임 안에서 픽셀을 섞어 중간 톤을 만듦 프레임마다 디더링 패턴을 살짝 바꿔서 더 많은 색을 인식하게 함

시간축 디더링의 원리

사람의 눈과 뇌는 짧은 시간 동안 들어온 빛을 한 덩어리로 묶어 느끼는 경향이 있어요.

그래서 아주 빠르게 빨간색, 파란색을 번갈아 보여주면, 색 하나하나를 구분하지 못하고 둘을 섞은 보라색으로 느낍니다. gifski는 이를 이용해 더 많은 색을 인식하도록 만든 거죠.

3. FFmpeg vs Gifski 차이점 정리

FFmpeg vs gifski 비교 FFmpeg_Gifski

FFmpeg 기본 파이프라인

전역 팔레트 256을 뽑아 모든 프레임에 적용

gifski 파이프라인

기본적으로:

  • ✅ 프레임별 팔레트
  • ✅ Cross-frame 일관성
  • ✅ 시간축 디더링 기술 적용

그 결과, 같은 256색 제한이라도 색 재현이 눈에 띄게 개선되었습니다.

gifski의 치명적인 단점

그런데 이 gifski도 꽤나 치명적인 단점이 하나 있었으니…

gifski 단점

바로 ezgif, 네이버 앱처럼 간단하게 쓸 수 없다는 점이었습니다. ㅠㅠ

일단 앱스토어에서 프로그램을 설치해야 합니다.

전 프로그램 까는 거 별로 안 좋아하거든요… 어딘가에 뭐가 저장될지도 모르는 찜찜함도 별로고요.

그래서 직접 만들었습니다

그래서 내가 업로드할 사진이 어디 저장되지도 않고, 품질은 좋고, 변환 시간도 짧은 사이트를 직접 만들었습니다.

ZIF - 브라우저 기반 고품질 GIF 변환기

ZIF의 특징

  • 🔒 완전한 프라이버시: 파일이 서버에 업로드되지 않음
  • ⚡ 빠른 변환: 브라우저에서 로컬 처리
  • 🎨 고품질: gifski 기술 적용
  • 💰 완전 무료: 설치 불필요, 광고 없음

매뉴얼 없이도 누구나 사용할 수 있게 만들어뒀지만, 이 사이트에 대한 자세한 설명은 다음 편에 해보도록 하겠습니다!

마치며

긴 글 읽어주셔서 감사합니다. 🙌

요약:

  • gifski는 프레임별 팔레트와 시간축 디더링으로 256색 한계를 극복
  • libimagequant로 최적 팔레트 생성
  • FFmpeg보다 색 재현력이 뛰어남
  • 브라우저에서 바로 사용할 수 있는 ZIF를 만들었음

P.S.
이 서비스가 마음에 드신다면, 주변 분들에게도 추천해주세요.

여러분의 파일을 안전하게 지키면서 멋진 GIF를 만들 수 있는 도구입니다.

💬 댓글

자유롭게 의견을 나눠주세요