OG 이미지에 Figma 사용을 중단하세요 (자동화를 위한 API를 만들었습니다)

Source: Dev.to

코딩은 사랑하지만 디자인은 싫어요. 블로그 포스트를 배포할 때마다 Figma를 열고, 템플릿을 찾고, 텍스트를 편집하고, PNG로 내보내고, S3에 업로드해야 했어요… 20 분이 걸렸죠. 그래서 이번 주말에 Next.js + Satori를 사용해 자동화 솔루션을 만들었습니다.

스택

• Next.js App Router (Edge Runtime)
• @vercel/og (Satori) – HTML/CSS를 SVG로, 다시 PNG로 변환
• Tailwind CSS – 스타일링용

작동 방식

쿼리 파라미터(title, theme)를 받는 API 라우트 /api/og를 만들었습니다. Satori가 React 컴포넌트를 실시간으로 이미지로 렌더링합니다.

결과

이제 메타 태그에 아래 URL만 붙여넣으면 됩니다:

https://ogimage.art/api/og?title=My%20Post

즉시 1200 × 630 크기의 이미지를 생성합니다.

직접 사용해 보기

모두를 위한 무료 도구로 만들었습니다.

👉 ogimage.art

(코드는 아직 비공개이지만, 추후 핵심 이미지 생성 엔진을 오픈소스화할 수도 있습니다. 관심 있으시면 알려 주세요!)