엣지 함수 + WebAssembly로 OG 이미지를 5배 빠르게 생성하는 Satori

Vercel이 2022년 10월 OG Image Generation 라이브러리를 공개했다. 기존 Chromium 기반 솔루션(50MB 함수, P99 5초)을 Edge Functions + WebAssembly + Satori(HTML/CSS → SVG 변환 라이브러리)로 대체해 P99 TTFB를 5초에서 1초 미만으로, 비용을 160배 절감했다.

핵심 포인트

Satori: React JSX를 HTML/CSS로 받아 SVG로 변환하는 핵심 라이브러리, WebAssembly로 Edge에서 실행
성능: P99 TTFB 4.96초→0.99초, P90 4초→0.75초, 함수 크기 50MB→500KB
Chromium 기반 대비 Edge Functions 방식은 160배 저렴
Next.js Conf에서 100,000건 이상의 맞춤형 티켓을 평균 800ms에 생성
Tailwind CSS 지원(tw prop), Google Fonts 동적 서브셋, 외부 이미지 자동 캐시

상세 정리

기존 방식의 한계: 구형 솔루션은 Serverless Function에서 Chromium을 실행해 이미지를 스크린샷. 함수 크기 50MB, P99 5초, 복잡한 설정. 트래픽 급증 시 비용도 크게 증가.
새 아키텍처: Edge Functions + WebAssembly + Satori. Satori가 JSX로 작성한 React 컴포넌트를 CSS Flexbox 레이아웃으로 계산해 SVG로 변환. 브라우저 없이 텍스트/이미지/스타일 렌더링 가능.
성능 개선 수치: P99 TTFB 4.96초→0.99초(5배), P90 4초→0.75초. 함수 크기 50MB→500KB(100배 감소). Edge Functions 경량 런타임 덕분에 Chromium 시작 비용 제거.
비용: Chromium Serverless 대비 Edge Functions가 약 160배 저렴. CPU 시간 기준 과금에서 Wasm 실행이 JS보다 2배 빠른 점도 기여.
코드 예시: import { ImageResponse } from '@vercel/og' + export default function() { return new ImageResponse(<div>Hello</div>) }. JSX로 소셜 카드를 선언적으로 작성.
지원 기능: CSS Flexbox 레이아웃, 커스텀 폰트/이모지(Google Fonts CDN 동적 서브셋), Tailwind CSS(tw prop), 외부 이미지 fetch + 자동 캐시 헤더.
실제 검증: Next.js Conf에서 커스텀 폰트 + GitHub 아바타 + 배경 이미지 + SVG 내장된 100,000건 이상 고유 티켓을 평균 800ms에 생성. 무중단 처리.
프레임워크 무관: Next.js 외 어느 프레임워크에서도 사용 가능. 자체 Edge Function 환경에서 직접 호출 가능.

왜 읽나동적 OG 이미지/소셜 카드를 서버리스로 생성하거나 WebAssembly + Edge Functions로 이미지 처리를 최적화하려는 프론트엔드/인프라 엔지니어에게 아키텍처 설계와 실제 성능 수치를 함께 제공한다.

Vercel Blog 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

엣지 함수 + WebAssembly로 OG 이미지를 5배 빠르게 생성하는 Satori

이 글과 비슷한

대규모 도그푸딩: cdnjs를 Cloudflare 개발자 플랫폼으로 이전하다

Dependabot 길들이기: 업데이트 묶고, 주기 늦추고, 보안은 빠르게

Cloudflare, 프라이버시 프로토콜 디버깅 CLI pvcli 오픈소스 공개