OGPix가 Satori를 활용해 Puppeteer 방식의 OG 이미지 생성을 2-5초에서 50ms로 단축

Context

Open Graph 이미지 생성을 위해 Puppeteer/Playwright를 사용하면 약 2-5초의 렌더링 시간이 소요되고 200MB 이상의 Chrome 바이너리가 필요하며 호스팅 비용이 높다. Canvas 라이브러리를 사용하는 방식은 명령형 코드 작성, 모듈 재사용 불가, 텍스트 레이아웃이 어렵다. 수동 디자인 방식은 페이지당 Figma를 열어야 하므로 10페이지 이상 확장이 불가능하다.

Technical Solution

• Satori 라이브러리를 사용해 React 컴포넌트를 SVG로 렌더링한 후 PNG로 변환
• Vercel Edge Functions에서 실행해 콜드 스타트 제거 및 전역 분산
• CDN 캐싱 적용으로 동일 파라미터 요청 시 즉시 응답
• URL 파라미터 기반 인터페이스(title, description, theme, key)로 모든 웹 프레임워크 호환
• Next.js generateMetadata, Astro, Hugo, WordPress, 순수 HTML 등 어디서나 메타 태그로 URL만 삽입

Impact

• OG 이미지 생성 속도: 50ms 달성
• 프리 티어: 월 100장 생성 가능 (워터마크 포함)
• Starter 플랜: 월 $9에 5,000장 생성
• Pro 플랜: 월 $29에 50,000장 생성

Key Takeaway

프레임워크 불가지론적 설계로 URL 파라미터만 전달하면 모든 환경에서 작동하는 API 서비스는 도입 장벽을 낮춘다. Edge Functions와 CDN 캐싱 조합은 자주 반복되는 정적 생성 작업의 지연시간을 획기적으로 단축할 수 있다.