chongdashu/cc-skills

OG 이미지 크리에이터

코드베이스를 먼저 이해한 후, 각 라우트에 맞는 상황별 Open Graph 이미지를 Playwright와 기존 컴포넌트를 사용하여 생성합니다. 진정성 있고 브랜드에 부합하는 OG 이미지를 만듭니다.

철학: 진정성 있는 디자인 vs 템플릿

OG 이미지를 생성하기 전에 반드시 질문하세요:

• 이 사이트의 브랜드 아이덴티티는 무엇인가요 (색상, 폰트, 로고, 디자인 언어)?
• 어떤 라우트/페이지가 존재하며 각각의 목적은 무엇인가요?
• 일관성을 위해 재사용할 수 있는 컴포넌트와 에셋은 무엇인가요?
• 어떤 페이지 유형에 다른 시각적 처리가 필요한가요?

핵심 원칙:

1. 생성 전에 먼저 연구하세요: 아무것도 만들기 전에 코드베이스 구조, 라우팅, 브랜드를 이해하세요.
2. 템플릿보다 진정성: 일반적인 소셜 카드 템플릿이 아닌 실제 브랜드 색상, 폰트, 컴포넌트를 사용하세요.
3. 컨텍스트 인식 디자인: 랜딩 페이지, 기사, 제품, 문서는 각각 다른 시각적 접근 방식이 필요합니다.
4. 스마트 자동화: 라우트를 자동 감지하고 브랜드를 추출하되, 사용자 맞춤 설정을 허용하세요.

워크플로우

1. 탐색 및 분석

라우트 발견:

• 프로젝트 구조를 분석하여 프레임워크(Next.js, Astro, React 등)를 파악합니다.
• 프레임워크 규칙에 따라 라우트를 자동 감지합니다:
  • Next.js: app/*/page.tsx 또는 pages/*.tsx
  • Astro: src/pages/*.astro
  • React Router: 라우트 설정 분석
• 페이지에서 라우트 메타데이터(제목, 설명)를 추출합니다.
• 페이지 유형(랜딩, 기사, 제품, 소개 등)을 분류합니다.

브랜드 추출:

• 로고/아이콘 파일을 찾습니다(SVG 선호).
• CSS/Tailwind 설정에서 색상 팔레트를 추출합니다.
• 스타일시트 또는 설정에서 기본 폰트를 식별합니다.
• 기존 컴포넌트에서 디자인 패턴을 캡처합니다.

탐색을 자동화하려면 scripts/analyze_codebase.py를 사용하세요.

2. 디자인 전략

페이지 유형별 적절한 레이아웃 결정:

• 랜딩 페이지: 굵게, 미니멀하게, 가치 제안 강조
• 기사/블로그 게시물: 제목 + 발췌문, 관련 날짜/작성자
• 제품 페이지: 제품명, 주요 기능, 가능하면 시각 자료
• 문서: 주제 + 설명, 체계적/구조화된 느낌
• 소개/회사 페이지: 브랜드 중심, 전문적

레이아웃 원칙:

• 넉넉한 여백(복잡함 피하기)
• 공유 시 가독성을 위한 높은 대비
• 브랜드 색상은 강조용으로 사용, 지나치게 하지 않기
• 사이트와 일치하는 타이포그래피 계층 구조
• 1200x630px(표준 OG 치수)

3. 이미지 생성

컴포넌트 기반 생성:

• 일관성을 위해 가능하면 React 컴포넌트를 재사용합니다.
• Playwright를 사용하여 컴포넌트를 이미지로 렌더링합니다.
• 브랜드 색상, 폰트, 에셋을 적용합니다.
• 실제 페이지 메타데이터를 주입합니다(플레이스홀더가 아닌).

기술적 접근 방식:

1. 브랜드 스타일이 적용된 최소 HTML 템플릿을 만듭니다.
2. 각 라우트에 대해 페이지별 마크업을 생성합니다.
3. Playwright를 사용하여 1200x630 크기로 스크린샷을 캡처합니다.
4. public/og/ 또는 적절한 정적 디렉토리에 저장합니다.
5. 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 Image Generation(@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 이미지를 만들 수 있습니다.