| name | imagine-og |
| description | 블로그·랜딩 글의 **OG 이미지 / 소셜 카드**(Twitter / Instagram / LinkedIn)를 플랫폼 프리셋에 맞춰 자동 생성한다. 배경 일러스트만 Codex 이미지 모델로 뽑고, 제목·태그 같은 글자는 AI에 맡기지 않고 공용 후처리 모듈(`scripts/lib/compose-text.js`)로 합성한다. 사용자가 "OG 이미지", "소셜 카드", "imagine-og", "Twitter 카드" 등을 말하면 이 스킬이 담당한다. 블로그 수백 편을 일괄 렌더하는 `--bulk` 모드도 지원한다. |
| argument-hint | <title> [--tag <tag>] [--platforms og,twitter,instagram-post,...] [--template <name>] [--bulk <glob>] [--from-frontmatter] |
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.
파이프라인
- 배경 일러스트만 AI 생성.
size는 플랫폼별 generate_size 사용(16:9 계열은 1536×1024, 정방형은 1024×1024).
- 프롬프트 가공: 사용자
<title>·--tag를 모델 프롬프트에 포함하지 않는다. 태그는 config.tag_palette_map으로 배경 톤 매핑에만 사용(예: 튜토리얼 → warm orange gradient, pencil texture). negative prompt에 text, watermark, logo, typography, letters, characters, readable words, deformed, blurry 강제 포함.
- 크롭·리사이즈:
generate_size 결과를 플랫폼 final 규격으로 center-crop(Instagram story는 세로 확장). 원본 배경은 _source_bg.png로 별도 보존해 재합성 가능.
- 텍스트 합성: 공용
scripts/lib/compose-text.js의 compositeText(bgPath, textOptions, outPath) 재사용. 이 스킬 안에 별도 텍스트 합성 로직은 두지 않는다.
- 세이프존 적용: OG/Twitter는 하단 20% 트리밍에 대비해 제목을 상/중앙에 배치. Instagram Post는 중앙 90% 세이프존.
- 출력 저장:
./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
- 동작:
- 각 파일의 frontmatter(
title, tags, hero_color)를 읽어 --title / --tag / 팔레트 시드로 매핑 (config.bulk.from_frontmatter_keys 참고).
- 같은
--template은 동일 배경 프리셋 + 변주(색·질감 고정, 레이아웃만 변화)로 렌더 → 시리즈 스타일 일관성 유지.
- 동시 실행 제한:
config.bulk.concurrency (기본 2) — 쿼터·레이트리밋 보호.
- 출력은 각 포스트별로
./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의 브랜드 팔레트가 있으면 배경 프롬프트 시드에 자동 반영.
