LaunchSpark — 상품 이미지 한 장으로 15·10·5초 세로형 광고 영상 자동 생성
LaunchSpark는 상품 이미지 한 장을 업로드하면 인공지능이 광고 기획부터 세로형(9:16)
광고 영상, 채널별 캠페인 카피까지 자동으로 만들어 주는 웹 데모입니다.
어떻게 작동하나요 (4단계 파이프라인)
- 1. 상품 이미지 업로드 — 파일 선택 또는 클립보드 붙여넣기(Ctrl/⌘+V)로 상품 이미지를 올립니다. 이미지는 서버에서 base64 data URL로 변환됩니다.
- 2. 상품 분석 (GPT-4o 비전) — 업로드한 이미지를 GPT-4o 비전 모델이 분석해 상품명, 카테고리, 색상 팔레트, 무드, 타깃, 경쟁사, USP를 추출합니다.
- 3. 광고 기획 — GPT-4o가 서로 다른 각도의 광고 콘셉트 3안과, HOOK·PROOF·CTA로 구성된 스토리보드를 15·10·5초 길이 옵션별로 생성합니다.
- 4. 영상 완성 — MiniMax Turbo 영상 생성 API로 9:16 세로형 광고 영상을 만들고, Instagram·TikTok·YouTube Shorts용 캠페인 카피(캡션·해시태그)를 함께 제공합니다.
어떤 기술로 만들었나요
- 백엔드/런타임: Hono 프레임워크 위에서 Cloudflare Pages(엣지 서버리스)로 동작합니다. 런타임 파일시스템이 없어 이미지는 data URL로 처리하고, 상태는 클라이언트 localStorage에 저장합니다.
- 텍스트 AI: OpenAI GPT-4o를 fetch로 직접 호출(JSON 모드·비전)하며, 호출 실패 시 사전 준비된 데모용 데이터로 자동 폴백해 발표 중 빈 화면이 나오지 않게 했습니다.
- 영상 AI: MiniMax Turbo 영상 생성 API를 서버 전용으로 연동했습니다. 제출·상태 폴링·MP4 다운로드·취소를 구현했고, API 키는 브라우저에 노출되지 않도록 서버(Cloudflare Pages Function)에서만 사용합니다.
- 프론트엔드: 프레임워크 없는 Vanilla JavaScript 단일 페이지 앱(SPA)과 Tailwind CSS(CDN)로 3단계 위저드 UI를 구성했습니다.
- 빌드/배포: Vite로 번들링하여 Cloudflare Pages에 Wrangler로 배포합니다.
보안 및 설계 원칙
- 모든 외부 API 호출과 API 키 사용은 서버 측 라우트에서만 수행하며, 키를 코드·로그·브라우저 번들에 노출하지 않습니다.
- 영상 생성 재시도 시 동일한 Idempotency-Key를 유지해 중복 생성을 방지합니다.
- 공개 데모 비용 보호를 위해 IP 기준 분당 요청 수 제한을 적용했습니다.
제작: LaunchSpark 팀 · 스택: Hono + Cloudflare Pages + GPT-4o + MiniMax Turbo