무료 OG 이미지 생성기 만들기 — 방법과 이유

Source: Dev.to

문제점

소셜 미디어에 공유하는 모든 링크는 Open Graph 메타 태그를 사용해 미리보기 카드를 생성합니다. og:image가 없으면, 여러분의 링크는 다른 사람들의 깔끔한 카드와 비교했을 때 스팸처럼 보입니다.

대부분의 개발자는 다음 중 하나를 합니다:

• 완전히 건너뛰기 (나쁨)
• 이미지당 Figma에서 30분씩 소비 (비효율)
• Cloudinary/imgix 변환에 비용 지불 (블로그 포스트에는 과도함)

해결책: 무료 도구

저는 무료 OG 이미지 생성기를 만들었습니다. 이 도구를 사용하면:

• 6가지 템플릿 선택 (gradient, split, minimal, bold, dark, pattern)
• 제목, 부제, 저자, 이모지, 색상, 글꼴 크기 맞춤 설정
• PNG로 다운로드 (1200 × 630 — 표준 OG 크기)

HTML 메타 태그를 복사해 “에 붙여넣으세요.

완전히 클라이언트‑사이드에서 동작합니다. 회원가입 필요 없고, 워터마크도 없으며, 숨은 비용도 없습니다.

작동 원리

이 생성기는 바닐라 JavaScript와 HTML Canvas API로 구축되었습니다. 핵심 구현은 다음과 같습니다:

const canvas = document.createElement("canvas");
canvas.width = 1200;
canvas.height = 630;
const ctx = canvas.getContext("2d");

const gradient = ctx.createLinearGradient(0, 0, 1200, 630);
gradient.addColorStop(0, primaryColor);
gradient.addColorStop(1, secondaryColor);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 1200, 630);

ctx.fillStyle = "#ffffff";
ctx.font = "bold 56px Inter, sans-serif";
wrapText(ctx, title, 80, 280, 1040, 68);

const dataUrl = canvas.toDataURL("image/png");

핵심 결정 사항

• 1200 × 630 은 보편적인 OG 이미지 크기이며 (Twitter, Facebook, LinkedIn, Discord 모두 지원)
• 클라이언트‑사이드 전용 은 서버 비용이 전혀 없고 즉시 생성 가능
• 의존성 없음 — Canvas API만 사용

왜 무료로 제공하나요?

저는 현재 Rendly 라는 스크린샷 및 이미지 생성 API를 만들고 있기 때문입니다. 무료 도구는 개인에게 도움이 되고, API는 수백·수천 개의 OG 이미지를 프로그래밍 방식으로 생성해야 하는 팀에게 도움이 됩니다.

블로그 포스트 하나? 무료 도구를 사용하세요. 동적으로 OG 이미지가 필요한 500개의 포스트를 가진 CMS? 그때는 API가 필요합니다:

const response = await fetch("https://rendly.dev/api/v1/screenshots", {
  method: "POST",
  headers: { "Authorization": "Bearer YOUR_API_KEY" },
  body: JSON.stringify({
    html: ogImageTemplate(post.title, post.author),
    width: 1200,
    height: 630,
    format: "png"
  })
});

또 하나: 기존 태그 확인하기

이와 함께 저는 Meta Tag Checker를 만들었습니다. URL을 입력하면 다음을 보여줍니다:

• 모든 OG 및 Twitter Card 태그
• 각 플랫폼에서 링크가 어떻게 보이는지 시각적 미리보기
• 완성도 점수
• 누락된 항목

OG 이미지를 생성하는 것은 전투의 절반에 불과합니다—태그가 실제로 작동하는지 검증해야 합니다.

사용해 보기

🎨 Free OG Image Generator
🔍 Meta Tag Checker

회원가입 필요 없습니다. 추가했으면 하는 템플릿이 있으면 알려 주세요.