Satori의 Yoga 엔진 제약을 통한 Edge 기반 SVG 렌더링 최적화

Satori's CSS limits: what it can and can't render

Accreditly2026년 6월 29일9분intermediate

AI 요약

Context

@vercel/og의 기반 엔진인 Satori는 브라우저가 아닌 Yoga layout engine을 사용하는 경량 HTML-to-SVG 변환기임. Edge function 환경에서의 빠른 실행을 위해 CSS 전체 스펙이 아닌 의도적으로 제한된 subset만 구현하여 런타임 오버헤드를 최소화한 구조임.

Technical Solution

Yoga layout engine 채택을 통한 CSS Grid 및 Block flow 제거와 Flexbox 중심의 레이아웃 단일화
브라우저의 렌더링 파이프라인 대신 HTML/CSS를 SVG로 변환 후 PNG로 래스터화하는 2단계 렌더링 공정 설계
Viewport 단위(vw, vh) 및 z-index를 배제하고 Document order 기반의 페인팅 모델을 적용한 렌더링 단순화
외부 스타일시트 및 Selector를 제거하고 Inline style 전용 구조를 채택하여 스타일 계산 복잡도 제거
시스템 폰트 의존성을 없애고 ArrayBuffer 형태의 폰트 데이터를 직접 주입하는 폰트 로딩 메커니즘 구현
복잡한 UI 요구사항 발생 시 Satori의 subset 제약을 벗어나 실제 Chromium 기반의 Headless 브라우저 렌더링 API로 전환하는 Trade-off 전략 제시

실천 포인트

- Satori 사용 시 모든 컨테이너에 'display: flex' 명시적 선언 여부 확인 - CSS Grid 설계를 중첩된 Flexbox 구조로 변환하여 구현 가능성 검토 - ::before, ::after 등 Pseudo-element를 실제 DOM 요소로 대체 설계 - z-index 대신 마크업 순서를 통한 요소 적층 순서 제어 적용 - 폰트 렌더링을 위해 TTF, OTF, WOFF 형식의 버퍼 데이터 준비

태그

#Flexbox #SVG Rendering #Edge Function #Satori #Yoga Engine

원문 읽기