Satori CSS 제약을 극복한 Headless Chromium 기반 Dynamic OG Image 아키텍처

Dynamic OG Images in Next.js Without @vercel/og (1,200 630)

Accreditly2026년 4월 27일7분intermediate

AI 요약

Context

Next.js의 @vercel/og(Satori) 라이브러리가 CSS Grid, calc(), CSS Variable 등 최신 표준의 일부만 지원하는 subset 렌더러라는 한계 존재. 이로 인해 복잡한 마케팅 에셋 구현 시 디자인 수정마다 Satori 전용 문법으로 변환해야 하는 비효율적 개발 루프 발생.

Technical Solution

Headless Chromium 인스턴스를 통한 HTML/CSS 표준 렌더링 및 PNG 스크린샷 추출 방식 도입
Next.js의 opengraph-image.tsx 라우트를 진입점으로 설정하여 데이터 기반 HTML 템플릿 생성
외부 html2img API를 활용한 렌더링 위임을 통해 Chromium 바이너리 관리 및 Lambda 메모리 제약 문제 해결
Next.js의 기본 AGGRESSIVE Caching 메커니즘을 이용해 API 호출 비용 최적화 및 응답 속도 확보
폰트 렌더링 안정성을 위해 base64-encoded woff2 인라이닝 및 ms_delay 파라미터를 통한 렌더링 동기화 처리
실패 시 정적 Fallback 이미지를 반환하는 try/catch 구조를 통한 사용자 경험 저하 방지

실천 포인트

1. 복잡한 CSS 레이아웃 필요 시 Satori 대신 Chromium 기반 렌더러 검토

2. 외부 렌더링 API 사용 시 Next.js Route Cache를 통한 비용 및 성능 최적화 적용

3. 폰트 렌더링 누락 방지를 위해 @font-face 인라이닝 또는 wait_for_selector 설정 확인

4. 콘텐츠 수정 반영을 위한 URL 내 콘텐츠 해시 포함 및 캐시 무효화 전략 수립

5. 인증이 필요한 이미지 자산은 base64 data URL로 변환하여 렌더러에 전달

태그

#Dynamic OG Image #Headless Chromium #Satori #Next.js #Edge-Runtime

원문 읽기