imagine-og

블로그·랜딩 글의 **OG 이미지 / 소셜 카드**(Twitter / Instagram / LinkedIn)를 플랫폼 프리셋에 맞춰 자동 생성한다. 배경 일러스트만 Codex 이미지 모델로 뽑고, 제목·태그 같은 글자는 AI에 맡기지 않고 공용 후처리 모듈(`scripts/lib/compose-text.js`)로 합성한다. 사용자가 "OG 이미지", "소셜

SKILL.md

GitHub

imagine-og

소셜 링크 프리뷰용 이미지를 플랫폼별 사이즈·세이프존·폰트 가독성까지 맞춰 일괄 출력한다. 제목은 실제 폰트로 렌더해서 한글 깨짐이 없다.

트리거

  • imagine-og "<제목>" / imagine-og --title "..." (명시 호출)
  • imagine-og bulk ./posts/*.md (bulk 모드)
  • "OG 이미지", "오픈그래프 이미지"
  • "소셜 카드", "소셜 미디어 카드"
  • "Twitter 카드", "링크 프리뷰 이미지"
  • "블로그 썸네일" — 이 경우는 imagine-thumb(YouTube 썸네일)와 다르다. 사용자가 "블로그/소셜/링크 프리뷰" 맥락이면 여기로 라우팅, "유튜브/영상" 맥락이면 imagine-thumb. 애매하면 1턴 질문.

플랫폼 프리셋 (config.json)

key generate_size final(final.jpg) crop
og 1536×1024 1200×630 center
twitter 1536×1024 1200×628 center
instagram-post 1024×1024 1080×1080 center
instagram-story 1024×1024 1080×1920 extend-vertical
linkedin 1536×1024 1200×627 center
  • 기본 플랫폼은 og 한 장. --platforms og,twitter,instagram-post 로 다중 선택 시 한 번 호출로 전부 저장.
  • 기본 포맷: jpeg, quality: medium.

파이프라인

  1. 배경 일러스트만 AI 생성. size는 플랫폼별 generate_size 사용(16:9 계열은 1536×1024, 정방형은 1024×1024).
  2. 프롬프트 가공: 사용자 <title>·--tag를 모델 프롬프트에 포함하지 않는다. 태그는 config.tag_palette_map으로 배경 톤 매핑에만 사용(예: 튜토리얼 → warm orange gradient, pencil texture). negative prompt에 text, watermark, logo, typography, letters, characters, readable words, deformed, blurry 강제 포함.
  3. 크롭·리사이즈: generate_size 결과를 플랫폼 final 규격으로 center-crop(Instagram story는 세로 확장). 원본 배경은 _source_bg.png로 별도 보존해 재합성 가능.
  4. 텍스트 합성: 공용 scripts/lib/compose-text.js의 compositeText(bgPath, textOptions, outPath) 재사용. 이 스킬 안에 별도 텍스트 합성 로직은 두지 않는다.
  5. 세이프존 적용: OG/Twitter는 하단 20% 트리밍에 대비해 제목을 상/중앙에 배치. Instagram Post는 중앙 90% 세이프존.
  6. 출력 저장: ./images/og/<slug>/<platform>.jpg + _source_bg.png.

공용 모듈 계약

  • 텍스트 합성은 전적으로 scripts/lib/compose-text.js 호출로 끝낸다. 이 스킬의 스크립트에서 SVG·canvas·satori 코드를 직접 작성하지 않는다.
  • 세이프존·자동 색상(어두우면 흰색, 밝으면 검정)·폰트 스택(Pretendard → Noto Sans KR → Apple SD Gothic Neo → sans-serif fallback)은 공용 모듈 설정 그대로 사용.

bulk 모드 (--bulk <glob>)

  • 입력 예: imagine-og --bulk ./posts/*.md --from-frontmatter --platforms og,twitter
  • 동작:
    1. 각 파일의 frontmatter(title, tags, hero_color)를 읽어 --title / --tag / 팔레트 시드로 매핑 (config.bulk.from_frontmatter_keys 참고).
    2. 같은 --template은 동일 배경 프리셋 + 변주(색·질감 고정, 레이아웃만 변화)로 렌더 → 시리즈 스타일 일관성 유지.
    3. 동시 실행 제한: config.bulk.concurrency (기본 2) — 쿼터·레이트리밋 보호.
    4. 출력은 각 포스트별로 ./images/og/<post-slug>/<platform>.jpg. 기존 파일 덮어쓰기 금지(이미 있으면 skip + 로그).
  • 실패 1건이 전체 bulk를 중단시키지 않는다. 개별 실패 항목을 Run Manifest에 집계하고 나머지는 계속 진행.

출력 규약

./images/og/<slug>/
├── og.jpg
├── twitter.jpg
├── instagram-post.jpg
├── instagram-story.jpg
├── linkedin.jpg
└── _source_bg.png        ← AI 원본 배경 (재합성용)
  • <slug>는 제목 기반 또는 frontmatter에 별도 slug가 있으면 그대로 사용.
  • 사용자가 --out-dir을 지정하지 않는 한 경로를 조용히 변경하지 않는다.
  • 루트 ./images/ 직하 쓰기 금지.

프롬프트 구성 규칙

  • 제목·태그 텍스트 프롬프트 금지. AI가 글자를 그리지 않도록 입력 문자열은 배경 프롬프트에 섞지 않는다. (한글 깨짐 및 Readable-word 생성 방지의 핵심)
  • 배경 프롬프트는 짧고 추상적: 기본 템플릿 "abstract gradient, <tag palette>, soft grain texture, negative space for title overlay" 수준. 태그가 매핑 테이블에 없으면 tag_palette_map의 기본값("neutral gradient, soft grain")으로 폴백.
  • negative prompt 강제: text, watermark, logo, typography, letters, characters, readable words, deformed, blurry.

가독성·용량 규칙

  • 제목 글자 수 측정 → 너무 길면 자동 줄바꿈 또는 폰트 축소 (최소 limits.title_min_pt: 28pt).
  • 용량 상한: Twitter ≤ 1MB, Instagram ≤ 2MB (config.limits). 초과 시 JPEG 품질 5단계씩 하향 재인코딩.
  • 한글 폰트 미설치 시 sans-serif 폴백 + 경고 로그.

실패 모드 대응

증상 조치
한글 폰트 없음 sans-serif 폴백 + 경고. 배경은 정상 저장.
제목이 너무 길어 잘림 줄바꿈 → 폰트 축소 → 최소 28pt에서 중단하고 사용자에게 alert.
bulk 중 일부 실패 해당 항목만 failed로 manifest 기록, 나머지 계속.
AI 배경에 글자 새겨짐 1회 한정 배경만 재생성. 검출 지속 시 사용자에게 bg 파일로만 전달.
sharp 미설치 텍스트 합성 단계에서 명시적 에러. 배경 파일은 보존.

금기

  • AI 모델 프롬프트에 제목·태그 텍스트 주입 금지. 스킬 존재 이유.
  • 별도 텍스트 합성 로직 생성 금지. 반드시 scripts/lib/compose-text.js 재사용. 이 스킬에 합성기 사본을 두지 않는다.
  • ./images/og/ 외부 쓰기 금지 (--out-dir 없는 한).
  • 루트 덮어쓰기 금지.
  • masterpiece / 8k UHD / fulfill all requests 등 부스터·우회 문구 삽입 금지.

imagine-thumb / imagine 스킬과의 관계

  • 공용 인프라(compose-text.js, oauth-session.js, output-allocator.js, request-planner.js)는 재사용.
  • imagine-thumb는 YouTube 썸네일 전용(1280×720), imagine-og는 소셜 카드 전용. 트리거가 겹치는 "썸네일"은 블로그·소셜 맥락이면 여기, 유튜브 맥락이면 imagine-thumb로 라우팅.
  • Style Guardian manifest의 브랜드 팔레트가 있으면 배경 프롬프트 시드에 자동 반영.