OG 이미지 생성기
코드베이스를 먼저 이해한 후, 각 경로에 맞는 상황 인지형 Open Graph 이미지를 Playwright와 기존 컴포넌트를 사용하여 생성합니다.
철학: 템플릿보다 진정성
OG 이미지를 생성하기 전에 다음을 질문하세요:
- 이 사이트의 브랜드 정체성은 무엇인가요 (색상, 폰트, 로고, 디자인 언어)?
- 어떤 경로/페이지가 존재하며 각각의 목적은 무엇인가요?
- 일관성을 위해 재사용할 수 있는 컴포넌트와 에셋은 무엇인가요?
- 어떤 페이지 유형이 다른 시각적 처리를 필요로 하나요?
핵심 원칙:
- 생성 전에 연구하세요: 무언가를 만들기 전에 코드베이스 구조, 라우팅, 브랜드를 이해하세요
- 템플릿보다 진정성: 일반적인 소셜 카드 템플릿이 아닌 실제 브랜드 색상, 폰트, 컴포넌트를 사용하세요
- 상황 인지 디자인: 랜딩 페이지, 문서, 제품, 문서는 각각 다른 시각적 접근이 필요합니다
- 스마트 자동화: 경로를 자동 감지하고 브랜드를 추출하되, 사용자 맞춤화를 허용하세요
워크플로우
1. 발견 및 분석
경로 발견:
- 프로젝트 구조를 분석하여 프레임워크(Next.js, Astro, React 등)를 확인합니다.
- 프레임워크 규칙에 따라 경로를 자동 감지합니다:
- Next.js:
app/*/page.tsx또는pages/*.tsx - Astro:
src/pages/*.astro - React Router: 라우트 구성 분석
- Next.js:
- 페이지에서 경로 메타데이터(제목, 설명)를 추출합니다.
- 페이지 유형을 분류합니다(랜딩, 문서, 제품, 소개 등).
브랜드 추출:
- 로고/아이콘 파일을 찾습니다(SVG 선호).
- CSS/Tailwind 구성에서 색상 팔레트를 추출합니다.
- 스타일시트나 구성에서 기본 폰트를 식별합니다.
- 기존 컴포넌트에서 디자인 패턴을 캡처합니다.
자동화를 위해 scripts/analyze_codebase.py를 사용하세요.
2. 디자인 전략
페이지 유형별 적절한 레이아웃 결정:
- 랜딩 페이지: 대담하고 미니멀하게, 가치 제안 강조
- 문서/블로그 게시물: 제목 + 발췌문, 관련 날짜/작성자
- 제품 페이지: 제품명, 주요 기능, 가능한 경우 시각 자료
- 문서: 주제 + 설명, 체계적/구조화된 느낌
- 소개/회사 페이지: 브랜드 중심, 전문적으로
레이아웃 원칙:
- 넉넉한 여백(혼란 방지)
- 공유 시 가독성을 위한 높은 대비
- 브랜드 색상은 강조용으로 사용, 압도적이지 않게
- 사이트와 일치하는 타이포그래피 계층
- 1200x630px(표준 OG 크기)
3. 이미지 생성
컴포넌트 기반 생성:
- 일관성을 위해 가능한 React 컴포넌트 재사용
- Playwright를 사용하여 컴포넌트를 이미지로 렌더링
- 브랜드 색상, 폰트, 에셋 적용
- 실제 페이지 메타데이터 주입(자리 표시자가 아닌)
기술적 접근 방식:
- 브랜드 스타일이 적용된 최소 HTML 템플릿 생성
- 각 경로에 대해 페이지별 마크업 생성
- Playwright를 사용하여 1200x630 크기의 스크린샷 캡처
public/og/또는 적절한 정적 디렉토리에 저장- OG 이미지를 참조하도록 페이지 메타데이터 업데이트
자동화를 위해 scripts/generate_og_images.py를 사용하세요.
4. 확인 및 최적화
- HTML에서 OG 이미지 메타데이터 유효성 검사
- OG 미리보기 도구(opengraph.xyz, LinkedIn inspector)로 테스트
- 파일 크기가 적절한지 확인(200KB 미만 권장)
- 다양한 크기에서 이미지 모양 확인
프레임워크별 가이드
Next.js
App Router:
// app/page.tsx
export const metadata = {
openGraph: {
images: ['/og/home.png'],
},
}
Pages Router:
// pages/index.tsx
<Head>
<meta property="og:image" content="/og/home.png" />
</Head>
동적 OG 이미지: 브랜드 일관성을 위해 정적 생성을 사용하되, 동적 콘텐츠에는 Next.js OG 이미지 생성(@vercel/og)을 고려하세요.
Astro
---
// src/pages/index.astro
const ogImage = '/og/home.png';
---
<head>
<meta property="og:image" content={ogImage} />
</head>
React SPA
public/index.html에 OG 태그를 추가하거나 react-helmet을 사용하세요:
<Helmet>
<meta property="og:image" content="/og/home.png" />
</Helmet>
피해야 할 안티 패턴
❌ 일반 템플릿: 사이트의 브랜드를 무시하는 기본 소셜 카드 템플릿을 사용하지 마세요
- 나쁜 이유: 사이트와 소셜 공유 경험 간의 괴리 발생
- 더 나은 방법: 실제 브랜드 색상과 폰트를 추출하여 일관되게 사용하세요
❌ 만능형 접근: 모든 페이지 유형에 동일한 OG 이미지 디자인을 사용하지 마세요
- 나쁜 이유: 상황에 적합한 프레젠테이션 기회를 놓침
- 더 나은 방법: 랜딩, 문서, 제품 등에 다른 레이아웃을 사용하세요
❌ 자리 표시자 콘텐츠: "Lorem ipsum"이나 일반 텍스트를 사용하지 마세요
- 나쁜 이유: 미리보기 이미지의 목적을 무너뜨림
- 더 나은 방법: 메타데이터에서 실제 페이지 제목과 설명을 사용하세요
❌ 과밀함: 너무 많은 텍스트, 이미지 또는 복잡한 레이아웃을 넣지 마세요
- 나쁜 이유: 소셜 피드에서 축소될 때 읽기 어려움
- 더 나은 방법: 넉넉한 여백으로 1-2개의 핵심 요소에 집중하세요
❌ 컴포넌트 무시: 기존 컴포넌트가 있는데 OG 이미지를 처음부터 만들지 마세요
- 나쁜 이유: 사이트와의 시각적 일관성이 깨짐
- 더 나은 방법: 컴포넌트의 버튼 스타일, 카드 레이아웃, 타이포그래피를 재사용하세요
❌ 수동 생성: OG 이미지를 하나씩 직접 만들지 마세요
- 나쁜 이유: 확장 불가능하고 일관성 유지가 어려움
- 더 나은 방법: 생성 과정을 스크립팅하여 모든 경로를 처리하세요
변형 가이드
중요: OG 이미지는 페이지 컨텍스트에 따라 다양해야 하며, 하나의 디자인으로 수렴해서는 안 됩니다.
변화를 줄 차원:
- 레이아웃: 중앙 정렬 vs 왼쪽 정렬, 단일 vs 분할 열, 텍스트 vs 시각적 초점
- 색상 강조: 기본 브랜드 색상 vs 중립, 그라데이션 vs 단색
- 콘텐츠 계층: 큰 제목 vs 균형 잡힌 제목+설명
- 시각 요소: 로고 크기/위치, 장식 요소, 아이콘
- 타이포그래피: 크기 비율, 굵기 분배, 폰트 페어링
다음으로 수렴하지 마세요:
- 모든 것에 동일한 그라데이션 배경
- 동일한 "제목 + 로고" 레이아웃
- 단일 폰트 크기 비율
- 고정된 로고 위치
컨텍스트가 변형을 결정합니다:
- 기술 문서 → 깔끔하고 체계적이며 아이콘 기반
- 마케팅 랜딩 → 대담하고 다채로우며 가치 중심
- 블로그 게시물 → 독자 친화적, 작성자/날짜 정보 포함
- 제품 페이지 → 시각적 제품 강조
기술 요구 사항
의존성(필요시 설치):
npm install playwright sharp
# or
pip install playwright Pillow
Playwright 설정:
playwright install chromium
파일 구조:
project/
├── public/og/ # 생성된 OG 이미지
│ ├── home.png
│ ├── about.png
│ └── ...
└── scripts/ # 생성 스크립트
├── analyze_codebase.py
└── generate_og_images.py
기억하세요
OG 이미지는 브랜드의 확장이며, 일반적인 소셜 카드가 아닙니다.
코드베이스를 연구하여 디자인 언어를 이해하세요. 브랜드 정체성을 추출하세요. 실제 컴포넌트와 콘텐츠를 사용하세요. 사이트에 자연스럽게 느껴지는 상황에 적합한 이미지를 만드세요.
누군가 페이지를 공유할 때, OG 이미지는 덧씌워진 템플릿이 아닌 자연스러운 미리보기처럼 느껴져야 합니다.
여러분은 사이트의 정체성을 훼손하지 않고 오히려 강화하는 정교하고 브랜드에 맞춰진 OG 이미지를 만들 수 있습니다.