Next.js에서 OG 이미지 자동 생성하기 — Satori로 삽질한 이야기

import { ImageResponse } from 'next/og';
import { NextRequest } from 'next/server';
import fs from 'fs';
import path from 'path';
 
export const runtime = 'nodejs';
 
export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') ?? 'zerry.co.kr';
  const description = searchParams.get('description') ?? '';
 
  // 폰트 로딩 (아래에서 자세히 설명)
  let fonts: { name: string; data: Buffer; weight: 400 | 700 }[] = [];
  try {
    const fontBold = fs.readFileSync(
      path.join(process.cwd(), 'public/fonts/Pretendard-Bold.otf')
    );
    const fontRegular = fs.readFileSync(
      path.join(process.cwd(), 'public/fonts/Pretendard-Regular.otf')
    );
    fonts = [
      { name: 'Pretendard', data: fontBold, weight: 700 },
      { name: 'Pretendard', data: fontRegular, weight: 400 },
    ];
  } catch {
    // 폰트 로드 실패 시 기본 폰트로 fallback
  }
 
  return new ImageResponse(
    (
      <div style={{ /* 여기에 이미지 레이아웃 */ }}>
        {title}
      </div>
    ),
    {
      width: 1200,
      height: 630,
      fonts,
    }
  );
}

const fontBold = fs.readFileSync(
  path.join(process.cwd(), 'public/fonts/Pretendard-Bold.otf')
);
const fontRegular = fs.readFileSync(
  path.join(process.cwd(), 'public/fonts/Pretendard-Regular.otf')
);
fonts = [
  { name: 'Pretendard', data: fontBold, weight: 700 },
  { name: 'Pretendard', data: fontRegular, weight: 400 },
];

// v1: 전형적인 AI 생성물 느낌
return new ImageResponse(
  (
    <div style={{
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      width: '100%',
      height: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      flexDirection: 'column',
    }}>
      <div style={{ fontSize: 60, color: 'white', fontWeight: 700 }}>
        {title}
      </div>
      <div style={{ fontSize: 24, color: 'rgba(255,255,255,0.8)' }}>
        {description}
      </div>
    </div>
  ),
  { width: 1200, height: 630 }
);

{/ 배경 그라데이션 블롭 /}
<div style={{
  position: 'absolute',
  top: '-100px',
  right: '-50px',
  width: '700px',
  height: '700px',
  borderRadius: '50%',
  background: 'radial-gradient(circle, rgba(99,102,241,0.2) 0%, rgba(59,130,246,0.08) 40%, transparent 70%)',
  display: 'flex',
}} />
<div style={{
  position: 'absolute',
  bottom: '-200px',
  left: '-100px',
  width: '500px',
  height: '500px',
  borderRadius: '50%',
  background: 'radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 60%)',
  display: 'flex',
}} />

{/ 좌측: 텍스트 콘텐츠 /}
<div style={{
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'space-between',  // 상중하 균등 배치
  padding: '52px 40px 48px 56px',
  width: '620px',
  position: 'relative',
}}>
  {/ 브랜드 /}
  <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
    <div style={{
      width: '32px', height: '32px',
      borderRadius: '8px',
      background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: '16px', fontWeight: 700, color: '#fff',
    }}>
      Z
    </div>
    <div style={{ fontSize: '16px', fontWeight: 700, color: 'rgba(255,255,255,0.6)' }}>
      zerry.co.kr
    </div>
  </div>

// 코드 에디터 가짜 라인들 (시각적 장식용)
const codeLines = [
  { indent: 0, segments: [
    { w: 50, c: '#c084fc' },  // 보라색 — 키워드
    { w: 90, c: '#93c5fd' },  // 파란색 — 변수
    { w: 30, c: '#fbbf24' },  // 노란색 — 문자열
  ]},
  { indent: 1, segments: [
    { w: 70, c: '#6ee7b7' },  // 초록색 — 함수
    { w: 45, c: '#f9a8d4' },  // 핑크색 — 숫자
    { w: 80, c: '#93c5fd' },
  ]},
  { indent: 2, segments: [
    { w: 60, c: '#fbbf24' },
    { w: 100, c: '#a5b4fc' },
  ]},
  // ... 더 많은 라인들
];

{codeLines.map((line, i) => (
  <div key={i} style={{
    display: 'flex',
    alignItems: 'center',
    gap: '6px',
    paddingLeft: ${line.indent * 24}px,
    height: '12px',
  }}>
    {/ 줄 번호 /}
    <div style={{ width: '20px', fontSize: '10px', color: '#334155', display: 'flex' }}>
      {i + 1}
    </div>
    {/ 코드 세그먼트 /}
    {line.segments.map((seg, j) => (
      <div key={j} style={{
        width: ${seg.w}px,
        height: '10px',
        borderRadius: '3px',
        background: seg.c,
        opacity: 0.5,
        display: 'flex',
      }} />
    ))}
  </div>
))}

{/ 떠 있는 터미널 카드 /}
<div style={{
  display: 'flex',
  flexDirection: 'column',
  position: 'absolute',
  bottom: '20px',
  left: '-40px',      // 에디터 밖으로 살짝 삐져나옴
  width: '280px',
  background: 'rgba(15,23,42,0.9)',
  border: '1px solid rgba(148,163,184,0.15)',
  borderRadius: '12px',
  padding: '16px 20px',
  gap: '10px',
}}>
  <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
    <div style={{ fontSize: '12px', color: '#4ade80', display: 'flex' }}>
      >
    </div>
    <div style={{ fontSize: '12px', color: '#94a3b8' }}>
      ./gradlew build
    </div>
  </div>
  <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
    <div style={{ fontSize: '11px', color: '#4ade80', display: 'flex' }}>
      ✓
    </div>
    <div style={{ fontSize: '11px', color: '#64748b' }}>
      BUILD SUCCESSFUL
    </div>
  </div>
</div>

<div style={{
  position: 'absolute',
  bottom: '0',
  left: '0',
  right: '0',
  height: '3px',
  background: 'linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6)',
  display: 'flex',
}} />

// src/app/blog/[slug]/page.tsx
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const post = await getPost(params.slug);

// src/app/layout.tsx 또는 src/app/page.tsx
export const metadata: Metadata = {
  openGraph: {
    images: [
      {
        url: '/api/og?title=zerry.co.kr&description=Backend Engineer 조용진의 기술 블로그',
        width: 1200,
        height: 630,
      },
    ],
  },
};

{description && (
  <div style={{ fontSize: '18px', color: 'rgba(148,163,184,0.8)' }}>
    {description.length > 60
      ? description.slice(0, 60) + '…'
      : description}
  </div>
)}

// 캐싱 헤더를 추가하고 싶다면
const response = new ImageResponse(/ ... */);
response.headers.set(
  'Cache-Control',
  'public, max-age=86400, s-maxage=86400, stale-while-revalidate=604800'
);
return response;