피드로 돌아가기
Dev.toDevOps
원문 읽기
Playwright 기반 HTML 렌더링을 통한 API 비용 제로 OG 이미지 자동화
What I learned generating OG images for articles with Playwright and zero API cost
AI 요약
Context
정적 사이트 생성기(SSG) 기반의 다수 사이트 운영 중 외부 API 의존성 및 비용 발생 문제 직면. Cloudinary의 비용 부담과 Satori의 CSS 제약, node-canvas의 CI 빌드 복잡성을 해결하기 위한 대체 설계 필요.
Technical Solution
- Headless Browser 기반의 HTML-to-Image 파이프라인을 구축하여 CSS Flexbox 및 Gradient 제어권 확보
- 정규 표현식 기반의 Accent Color 매핑 시스템을 설계하여 태그별 시각적 차별화 자동 구현
wait_until="networkidle"옵션을 통해 Google Fonts CDN 로딩 완료 시점과 캡처 시점을 동기화<link rel="preconnect">적용으로 폰트 요청 지연으로 인한 렌더링 실패 가능성 최소화- 단일 Browser Instance 및 Page Object를 재사용하는 루프 구조로 배치 처리 성능 최적화
document.fonts.ready대기 전략을 통한 폰트 적용 상태의 결정론적 검증 방안 마련
실천 포인트
- 외부 API 비용 절감이 필요할 때 Headless Browser 기반의 스냅샷 방식 검토 - 웹 폰트 사용 시 `networkidle` 및 `preconnect`를 통해 레이아웃 시프트 및 폰트 미적용 문제 해결 - 다량의 이미지 생성 시 브라우저 인스턴스 재사용을 통한 오버헤드 감소 적용 - 복잡한 CSS 레이아웃이 필요할 경우 Satori보다 Playwright와 같은 풀 브라우저 렌더링 엔진 채택