스크린샷 API로 소셜 미디어 미리보기 이미지 자동화

Source: Dev.to

문제점

블로그 글을 게시하거나, 기능을 출시하거나, 링크를 공유할 때마다 Twitter, Slack, Discord, LinkedIn 같은 플랫폼은 og:image 메타 태그를 찾습니다. 이 태그가 없거나 일반적이면 링크가 눈에 띄지 않게 됩니다.

페이지마다 고유한 이미지를 디자인하는 것은 규모에 맞지 않으며, 자동화가 필요합니다.

해결책: HTML → 이미지

아이디어는 간단합니다:

1. OG 이미지를 HTML 템플릿(및 CSS)으로 디자인합니다.
2. 동적 데이터(제목, 저자, 날짜)를 파라미터로 전달합니다.
3. 헤드리스 브라우저 스크린샷 API를 통해 PNG로 렌더링합니다.
4. 생성된 PNG를 og:image 메타 태그에서 제공합니다.

스크린샷 API를 이용한 최소 예시

curl "https://rendly-api.fly.dev/api/v1/templates/og-basic/render?title=My+Blog+Post&author=Mack" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  --output og-image.png

한 번의 HTTP 호출, 한 장의 이미지.

HTML 템플릿 만들기

템플릿은 단순히 HTML + CSS입니다. 시작 예시:

<div style="font-family: system-ui; padding: 2rem; background: #f0f0f0;">
  <h1>{{title}}</h1>
  <p>by {{author}} · {{date}}</p>
</div>

마법 같은 점: 이미 HTML과 CSS를 알고 있으니 새로운 디자인 툴을 배울 필요가 없습니다.

블로그에 통합하기

Next.js / React

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    openGraph: {
      images: [
        `https://rendly-api.fly.dev/api/v1/templates/og-basic/render?title=${encodeURIComponent(post.title)}&author=${post.author}`
      ],
    },
  };
}

Rails

# Example Ruby code to generate the OG image URL
og_image_url = "https://rendly-api.fly.dev/api/v1/templates/og-basic/render?title=#{CGI.escape(@post.title)}&author=#{@post.author}"

정적 사이트 (Hugo, Jekyll, 11ty)

프론트‑매터나 템플릿에 URL을 설정합니다. 대부분의 정적 사이트 생성기는 동적 메타 태그를 지원합니다.

왜 로컬에서 Puppeteer를 직접 쓰지 않을까?

가능은 하지만:

• 헤드리스 Chrome은 ~500 MB 이상의 RAM을 사용합니다.
• 콜드 스타트가 느립니다(2–5 초).
• 브라우저 업데이트, 폰트, 렌더링 quirks를 직접 관리해야 합니다.
• 서버리스 환경(Lambda)의 타임아웃·메모리 제한에 잘 맞지 않습니다.

전용 API가 이 모든 것을 처리해 줍니다. URL만 얻으면 이미지가 바로 생성됩니다.

성능 팁

• 캐시를 적극 활용 – OG 이미지는 거의 변하지 않으므로 Cache-Control: public, max-age=86400을 설정합니다.
• 웹훅 사용 – API가 비동기 렌더링을 지원한다면, 요청 시점이 아니라 게시 시점에 이미지를 생성합니다.
• 템플릿을 단순하게 – DOM 노드가 적을수록 렌더링이 빨라집니다.
• 시스템 폰트 사용 – 커스텀 폰트는 지연을 초래하므로 system‑ui를 사용하면 즉시 로드됩니다.

ROI

맞춤형 미리보기 이미지를 가진 링크는 소셜 미디어에서 **2–3배 더 많은 클릭**을 얻습니다. 주간으로 글을 게시하는 블로그라면, 이를 자동화하면 월 몇 시간씩 절약되고 트래픽이 눈에 띄게 증가합니다.

저는 바로 이 워크플로우를 위해 설계된 스크린샷 및 이미지‑생성 API인 Rendly를 만들고 있습니다. 무료 티어 제공 — 신용카드 필요 없음.