저는 애니메이션 GIF와 얼굴 이미지를 입력받아 새로운 GIF를 반환하는 브라우저 기반의 gif face swap 도구를 구축했습니다.

어려웠던 점은 AI 모델을 시작하는 것이 아니었습니다. 요청을 차단하거나 상태를 잃지 않으면서 장시간 실행되는 미디어 작업(media job)을 처리하는 것이었습니다.

스택 (Stack)

• Next.js 및 TypeScript
• AI 추론 (inference)을 위한 Replicate
• 작업 및 크레딧 기록을 위한 Supabase
• 브라우저 측 GIF 유틸리티를 위한 FFmpeg WASM
• 가벼운 미리보기를 위한 Animated WebP

비동기 생성 (Async generation)

하나의 HTTP 요청 내에서 추론 (inference)을 기다리는 대신, Replicate 예측 (prediction)을 생성하고 웹훅 (webhook)을 통해 결과를 받습니다:

export async function createPrediction(
  targetGifUrl: string,
  faceImageUrl: string,
...

각 Supabase 작업은 예측 ID (prediction ID)와 다섯 가지 상태 중 하나를 저장합니다:

type JobStatus =
  | "queued"
  | "processing"
...

프론트엔드는 작업 엔드포인트(job endpoint)를 폴링 (polling)하고, 웹훅 (webhook)은 최종 결과를 업데이트합니다. 이를 통해 사용자는 활성화된 생성 작업을 잃지 않고 페이지를 새로고침할 수 있습니다.

사이트 속도 유지하기

원본 GIF는 처리를 위해 계속 사용할 수 있도록 유지되지만, 템플릿 미리보기는 애니메이션 WebP로 변환됩니다:

pnpm asset:gif-to-webp input.gif preview.webp

이렇게 하면 얼굴 교체 (face-swap) 파이프라인으로 전송되는 소스 애니메이션을 수정하지 않고도 UI를 더 가볍게 유지할 수 있습니다.

주요 교훈: AI 미디어 도구에서 추론 (inference)은 작업의 절반에 불과합니다. 작업 상태 (job state), 웹훅 (webhooks), 파일 처리, 그리고 실패 복구 (failure recovery)가 데모를 실제 제품처럼 느껴지게 만드는 핵심입니다.