Imagine Og

imagine-og

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

트리거

• imagine-og "<제목>" / imagine-og --title "..." (명시 호출)
• imagine-og bulk ./posts/*.md (bulk 모드)
• "OG 이미지", "오픈그래프 이미지"
• "소셜 카드", "소셜 미디어 카드"
• "Twitter 카드", "링크 프리뷰 이미지"
• "블로그 썸네일", "링크 프리뷰" — 블로그/소셜/링크 프리뷰 맥락의 카드형 썸네일은 모두 여기로 라우팅.

플랫폼 프리셋 (config.json)

• 기본 플랫폼은 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 폴백 + 경고 로그.

실패 모드 대응

금기

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

imagine 스킬과의 관계

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