1. 움짤은 왜 아직도 안 죽었을까

2025년의 타임라인은 이미 영상 중심이다. 릴스, 쇼츠, 틱톡이 피드를 점령했다.
그런데 이상하게도 블로그 본문, 카페 게시글, 메신저 대화창, 제품 상세페이지에서는 여전히 '움짤'이 주력이다.

이유는 단순하다. 움짤은 '재생'이라는 행동을 요구하지 않는다.
영상은 사용자가 탭하거나, 최소한 소리를 켤지 말지 판단해야 한다. 그 사이에 손가락은 이미 아래로 스크롤한다.
반면 움짤은 화면에 들어온 순간부터 스스로 움직인다. 결정 비용이 0이다.

모션은 인간의 주변시(peripheral vision)에서 가장 먼저 감지되는 신호다.
망막 주변부는 색 해상도는 낮지만 움직임 감지에는 극도로 민감하다. 포식자를 피하던 진화의 잔재다.
그래서 정적인 텍스트 블록 사이에 놓인 0.8초짜리 루프 하나는, 본문 어떤 굵은 글씨보다 강력한 시선 앵커가 된다.

2. GIF 포맷의 기술적 실체

디자이너가 GIF를 다루면서 가장 많이 겪는 문제는 "왜 색이 이렇게 뭉개지고 파일은 이렇게 큰가"다.
이건 툴 문제가 아니라 포맷의 구조적 한계다. 원인을 알면 해결 방향이 바로 보인다.

2-1. 256색 팔레트라는 족쇄

GIF는 인덱스 컬러 방식이다. 한 프레임이 사용할 수 있는 색은 최대 256개.
풀컬러(24bit)는 1,677만 색을 표현하는데, GIF는 그중 256개만 골라 번호표를 붙여 쓴다.

그래서 그라데이션이 들어간 영상, 피부톤, 하늘, 연기, 글로우 효과는 GIF로 만들면 반드시 밴딩(띠 현상)이나 디더링 노이즈가 생긴다.
반대로 플랫한 일러스트, 아이콘, UI 화면 녹화, 라인 애니메이션은 원래 색 수가 적어 GIF와 궁합이 좋다.

2-2. LZW 압축은 '가로줄' 단위로 일한다

GIF의 압축 알고리즘은 LZW다. 같은 픽셀 패턴이 반복될 때 이를 사전(dictionary)에 등록해 줄인다.
핵심은 이 압축이 가로 방향 스캔라인 단위로 작동한다는 점이다.

따라서 GIF 용량을 줄이는 실전 원칙은 이렇게 정리된다.

2-3. 프레임 간 차분(delta) 최적화

GIF는 애니메이션 프레임을 저장할 때 바뀐 영역만 부분 프레임으로 기록할 수 있다.
Disposal Method 설정(Do Not Dispose / Restore to Background)이 이 동작을 제어한다.

즉, 카메라가 고정된 화면에서 일부만 움직이는 영상은 GIF가 놀라울 정도로 가벼워진다.
반대로 화면 전체가 패닝/줌하는 영상은 모든 프레임이 통째로 새 데이터라 용량이 폭발한다.

2-4. 프레임 딜레이의 함정 (10ms 단위)

GIF의 프레임 지연값은 1/100초 단위 정수로 저장된다. 그래서 정확한 30fps(33.33ms)를 표현할 수 없다.
30fps를 만들려면 3,3,4 / 3,3,4를 섞어야 하는데 대부분 툴이 그냥 3(=33.3fps)이나 4(=25fps)로 뭉갠다.

또한 딜레이 값 0 또는 1은 브라우저마다 해석이 다르다. 안전한 최소값은 2(=50fps)다.
현실적으로 움짤의 스위트스팟은 12~20fps다. 사람은 12fps 이상이면 연속 동작으로 인식하고, 그 이상은 용량 대비 체감 개선이 급격히 떨어진다.

3. 포맷 전쟁: GIF를 언제 버려야 하는가

GIF는 감성과 호환성의 포맷이고, 효율의 포맷은 아니다.
동일한 3초 클립을 각 포맷으로 만들면 용량 차이는 다음과 같은 경향을 보인다.

3-1. 포맷 선택 의사결정

3-2. "GIF 링크"의 정체

지금 우리가 SNS에서 보는 대부분의 "GIF"는 실제 GIF 파일이 아니다.
텐서(Tenor), 기피(Giphy) 같은 서비스는 검색 결과를 GIF 아이콘으로 보여주지만, 실제 전송·재생되는 파일은 MP4나 WebM으로 변환된 사일런트 루프 비디오다.

플랫폼이 이렇게 하는 이유는 명확하다. 트래픽 비용과 배터리 소모다.
GIF 디코딩은 CPU가 매 프레임을 직접 그리지만, MP4는 하드웨어 디코더가 처리한다.
즉 모바일에서 GIF 여러 개가 걸린 페이지는 발열과 스크롤 버벅임의 주범이 된다.

4. 루프 설계: 움짤의 진짜 실력이 갈리는 지점

기술보다 중요한 게 루프 감각이다.
3초 클립을 자른 뒤 그냥 반복시키면 끝 지점과 시작 지점이 튀면서 '뚝' 하는 시각적 딸꾹질이 생긴다.

4-1. 루프의 4가지 유형

4-2. 좋은 루프 길이는 몇 초인가

실무 감각으로 정리하면 이렇다.

5. 제작 파이프라인: 소스에서 업로드까지

STEP 1. 소스 선택 — 여기서 90%가 결정된다

움짤 품질은 후반 압축이 아니라 소스 선택에서 거의 다 정해진다.
다음 조건을 만족하는 구간을 고르면 같은 용량으로 두 배 예쁜 결과가 나온다.

STEP 2. 해상도 다이어트

GIF에서 해상도는 용량에 제곱으로 영향을 준다. 가로를 절반으로 줄이면 픽셀 수는 4분의 1이 된다.
가장 효과가 큰 최적화이면서, 동시에 가장 눈에 덜 띄는 손실이다.

STEP 3. 컬러 팔레트 전략

대부분의 툴은 팔레트를 '적응형(Adaptive)'으로 만든다. 클립에 실제로 등장한 색들을 분석해 256색을 뽑는 방식이다.
여기서 두 가지 선택지가 갈린다.

STEP 4. 디더링 선택

디더링은 부족한 색을 점 패턴으로 속여 그라데이션처럼 보이게 하는 기법이다.

STEP 5. FFmpeg 2-pass 팔레트 워크플로

무료로 최고 품질의 GIF를 뽑는 표준 방법이다. 팔레트를 먼저 생성하고, 그 팔레트로 GIF를 만든다.

# 1단계: 최적 팔레트 추출
ffmpeg -i input.mp4 -vf "fps=15,scale=640:-1:flags=lanczos,palettegen=max_colors=192:stats_mode=diff" palette.png

# 2단계: 팔레트 적용 + Bayer 디더링
ffmpeg -i input.mp4 -i palette.png -lavfi "fps=15,scale=640:-1:flags=lanczos[x];[x][1:v]paletteuse=dither=bayer:bayer_scale=4:diff_mode=rectangle" output.gif

영상으로 변환해 쓰는 경우는 훨씬 간단하고 훨씬 가볍다.

# 웹 자동재생용 사일런트 루프 MP4
ffmpeg -i input.mp4 -an -vf "fps=24,scale=720:-2" -c:v libx264 -crf 26 -pix_fmt yuv420p -movflags +faststart out.mp4

STEP 6. 후처리 압축(gifsicle)

# 손실 압축 + 프레임 차분 최적화
gifsicle -O3 --lossy=60 --colors 128 input.gif -o output.gif

--lossy는 유사 픽셀을 같은 색으로 묶어 압축률을 높인다. 30~80 사이에서 소재별로 조정한다.
텍스트가 포함된 화면 녹화 GIF에는 lossy를 낮게(20~40) 써야 글자가 흐려지지 않는다.

6. 플랫폼별 규격과 함정

같은 파일인데 어디서는 잘 움직이고 어디서는 정지 이미지가 되는 이유는, 플랫폼마다 서버측 재인코딩 정책이 다르기 때문이다.

6-1. 웹 페이지 삽입 코드 패턴

블로그를 직접 커스터마이징할 수 있다면, GIF 대신 이 패턴이 압도적으로 유리하다.

<video autoplay loop muted playsinline
       poster="cover.jpg" width="720">
  <source src="loop.webm" type="video/webm">
  <source src="loop.mp4"  type="video/mp4">
</video>

playsinline이 없으면 iOS에서 전체화면 플레이어가 강제로 열린다. 움짤 느낌이 완전히 깨진다.
muted가 없으면 자동재생이 차단된다. 이 두 속성은 선택이 아니라 필수다.

WebP 애니메이션을 폴백과 함께 쓰는 방법도 있다.

<picture>
  <source srcset="loop.webp" type="image/webp">
  <img src="loop.gif" alt="버튼 호버 인터랙션 루프" width="720">
</picture>

7. 디자인 문법: 눈길을 끄는 움짤의 조형 원리

7-1. 모션의 12원칙 중 움짤에 쓰이는 4가지

디즈니 애니메이션 12원칙 전부를 쓸 필요는 없다. 2~3초 루프에서 실제로 체감되는 것은 네 개다.

7-2. 모션의 개수 제한

움짤 초보가 가장 흔히 하는 실수는 여러 요소를 동시에 움직이는 것이다.
화면에 동시 운동 요소가 3개를 넘으면 사람의 시선은 어디에도 고정되지 못하고, 결과적으로 아무 정보도 전달되지 않는다.

7-3. 텍스트가 들어갈 때

움짤 위에 자막이나 카피를 올릴 때 지켜야 할 것들.

특히 GIF는 팔레트 축소로 얇은 세리프 폰트의 획이 사라진다.
움짤 자막은 무조건 굵은 산세리프가 안전하다. 그리고 텍스트 영역은 디더링을 끄는 편이 훨씬 선명하다.

8. 접근성과 윤리: 움직임은 무기이자 흉기다

자동으로 움직이는 콘텐츠는 일부 사용자에게 실질적인 피해를 준다. 이건 감성 문제가 아니라 규범 문제다.

@media (prefers-reduced-motion: reduce){
  .tx-loop video{ animation:none }
  .tx-loop video::-webkit-media-controls{ display:block }
}

9. 목적별 움짤 레시피 8가지

① 블로그 본문 시선 앵커

스크롤 이탈이 일어나는 본문 3분의 1 지점에 1초 루프 마이크로 모션을 배치한다.
규격: 480px / 12fps / 팔레트 64색 / 단순 도형. 용량 100KB 이하로 유지 가능하다.

② 제품 상세 '실사용 장면'

텍스트 설명 10줄보다 4초 사용 장면 루프가 강하다.
카메라 고정 삼각대 필수. 손 동작만 움직이면 용량이 급감하고 집중도는 올라간다.

③ UI 튜토리얼 화면 녹화

커서 하이라이트를 켜고, 불필요한 마우스 배회를 잘라낸다.
텍스트 선명도가 생명이므로 디더링 없음 + 색 수 64 + 원본 해상도 유지가 오히려 정답이다.
스크린 캡처는 색 수가 적어 큰 해상도에서도 용량이 안 뛴다.

④ 비포/애프터 전환

2프레임짜리 '깜빡임' 움짤. 각 프레임 1.5초, 크로스페이드 0.3초.
보정·리디자인·정리 콘텐츠에서 설명력이 압도적이다. 용량은 수십 KB에 불과하다.

⑤ 데이터 시각화 애니메이션

막대가 자라거나 수치가 카운트업되는 3초 루프.
루프 사이 1초의 완성 정지 구간을 두는 게 핵심이다. 그 순간이 사용자가 숫자를 읽는 시간이다.

⑥ 프로필·배너 시그니처 루프

브랜드 로고의 미세한 호흡(스케일 2~3% 왕복), 라인 드로잉 진행.
이 영역은 GIF보다 Lottie 또는 SVG 애니메이션이 압도적으로 유리하다. 수 KB로 4K급 선명도를 낸다.

⑦ 커뮤니티 리액션 움짤

여기선 화질을 버리고 타이밍을 산다.
웃긴 지점 직전 0.3초부터 시작해 직후 0.5초에 끊는다. 컷 루프 그대로 두는 게 더 재밌다.

⑧ 이메일 뉴스레터 헤더

메일은 비디오를 못 쓰므로 GIF가 유일한 선택지다.
600px 폭 / 3초 / 200KB 이하 / 첫 프레임만 봐도 메시지가 전달되게 설계한다. 많은 메일 앱이 첫 프레임만 표시한다.

10. 성능 체크리스트: 움짤이 페이지를 망치지 않게

움짤을 많이 넣은 페이지는 예외 없이 느려진다. 원인은 세 가지다.

const io = new IntersectionObserver(es => es.forEach(e => {
  const v = e.target;
  e.isIntersecting ? v.play() : v.pause();
}), { threshold: 0.25 });
document.querySelectorAll('video[loop]').forEach(v => io.observe(v));

이 스크립트 하나로 모바일 발열과 데이터 소모가 눈에 띄게 줄어든다.
움짤을 많이 쓰는 블로그일수록 재생 제어가 곧 사용자 경험이다.

11. 자주 만나는 문제와 해결

12. 앞으로의 움짤

기술은 이미 GIF를 넘어섰다. AVIF 애니메이션, WebP 애니메이션, AV1 비디오는 모두 GIF보다 열 배 이상 효율적이다.
그런데도 GIF라는 단어는 사라지지 않는다. 이제 GIF는 포맷의 이름이 아니라 '짧고 소리 없이 반복되는 콘텐츠'라는 장르의 이름이 되었기 때문이다.

생성형 AI가 텍스트 한 줄로 루프 애니메이션을 만들어내는 지금, 디자이너의 경쟁력은 렌더링 능력이 아니다.
무엇을 움직이게 하고, 무엇을 멈춰둘지 결정하는 판단력이다.
모든 것이 움직이는 화면은 아무것도 말하지 않는다.

움짤은 가장 오래된 웹 포맷이면서, 여전히 가장 효율적인 시각 언어다.
0.8초의 반복 안에 무엇을 담을지 고민하는 일. 그것이 지금 시대의 디자인 감각이다.