OG
OG Studio
og-studio.restyart.com
URL → OG 에디터

NEW · URL만 넣으면 OG 자동 생성

디자이너가 HTML을 만들면
OG는 자동 생성된다

HTML 기반 인터랙티브 OG Image 생성 플랫폼. URL만 넣으면 브랜드 정체성이 반영된 1200×630 PNG를 만들고, React/HTML 템플릿으로 SNS 공유용 Open Graph 이미지를 자동 생성합니다. 웹에서는 라이브 프리뷰, 공유 시에는 Playwright/Satori로 PNG를 렌더링합니다.

URL로 자동 생성 수동 에디터
OG Studio preview

HTML Editor

React / HTML + Tailwind로 템플릿을 작성하고 {{변수}}로 동적 치환합니다.

OG API

/api/og?title=...&theme=glass 한 줄로 1200×630 PNG를 생성합니다.

Theme System

Glass, Linear, Cursor, Notion, Brutalism 등 11개 테마를 즉시 전환합니다.

Export Ready

PNG URL, HTML, JSON, React/Next 스니펫까지 바로 복사합니다.

핵심 흐름

React / HTML Template
        ↓
   Live Preview (Browser)
        ↓
   /api/og  (Satori / @vercel/og)
        ↓
   PNG 1200×630
        ↓
   Open Graph / Twitter Card

다음 단계: AI 템플릿 생성, Batch ZIP, Playwright 풀 HTML 캡처, 마켓플레이스.

OG Studio란?

OG Studio는 디자이너·개발자가 만든 HTML/React 화면을 Open Graph Image(1200×630 PNG)로 변환하는 플랫폼입니다. 웹에서는 인터랙티브 프리뷰로 보여 주고, SNS 공유용으로는 Playwright·Satori 기반 렌더링으로 PNG를 생성합니다. URL → OG, 수동 에디터, OG API를 한곳에서 사용할 수 있습니다.

HTML 기반 OG Image의 장점

기존 OG 생성 도구는 고정 템플릿에 제목만 바꾸는 경우가 많습니다. OG Studio는 Tailwind·React 컴포넌트로 브랜드 UI를 그대로 재현하고, Glass·Linear·Notion 등 11개 테마를 즉시 전환할 수 있습니다. 제품 스크린샷·입력→결과 플로우·점수 대시보드 등 실제 SaaS UI 패턴을 OG에 담아 클릭률과 브랜드 인지도를 높일 수 있습니다.

활용 사례

  • SaaS 랜딩 OG

    서비스 URL을 분석해 브랜드 색·카피·UI 패턴이 반영된 OG를 3분 안에 만듭니다.

  • 블로그·문서 공유

    /api/og 쿼리 파라미터로 title·description·theme만 바꿔 페이지별 OG PNG URL을 생성합니다.

  • 마케팅 A/B 테스트

    HTML 템플릿을 수정해 여러 OG 변형을 빠르게 비교·배포합니다.

  • Next.js 연동

    React 컴포넌트 스니펫을 복사해 app/api/og/route.tsx에 바로 붙여 넣을 수 있습니다.

OG 이미지 생성 가이드

  1. 방법 A — URL 자동 생성

    Brand Identity → OG에서 rebrand.restyart.com 등 브랜드 URL을 입력합니다. AI가 색상·멘트·UI 패턴을 추출하고 「브랜드 OG 캡처」로 PNG를 받습니다.

  2. 방법 B — HTML 에디터

    수동 에디터에서 React/HTML 템플릿을 작성하고 테마·변수를 조정한 뒤 PNG URL을 복사합니다.

  3. 방법 C — OG API

    GET /api/og?title=...&theme=glass로 1200×630 PNG를 즉시 생성해 meta og:image에 연결합니다.

자주 묻는 질문

OG Studio는 무료로 사용할 수 있나요?

MVP 단계에서는 Restyart 팀 내부·데모 목적으로 제공됩니다. URL 분석, 에디터, PNG API를 브라우저에서 바로 체험할 수 있습니다.

URL만 넣어도 OG 이미지가 만들어지나요?

네. Brand Identity → OG(/from-url)에서 사이트 URL을 분석해 브랜드 색·카피·UI 패턴을 반영한 1200×630 OG를 자동 생성합니다.

어떤 형식으로 내보낼 수 있나요?

PNG 다운로드, HTML 복사, React 컴포넌트, /api/og·/api/capture URL 등 여러 형식을 지원합니다.

Open Graph 이미지 표준 크기는?

Facebook·Twitter·LinkedIn 등 SNS 공유에 널리 쓰이는 1200×630(1.91:1) 비율을 기본으로 합니다.

참고 자료

Open Graph 프로토콜과 SNS 메타 태그 표준을 이해하면 OG Studio 결과물을 더 효과적으로 배포할 수 있습니다.

OG Studio Glass 테마 Open Graph 이미지 예시 — HTML에서 PNG로 변환하는 흐름
OG Studio Glass 테마 1200×630 PNG 예시