Blog Publisher

Obsidian 노트 또는 텍스트를 dev-blog에 발행하는 워크플로우.

이미지 생성 정책: 사용자가 직접 이미지를 생성하고 전송하면, 에이전트는 후처리(crop, webp 변환) 및 배포를 담당합니다.

전제 조건

• dev-blog repo: ~/projects/dev-blog
  • 없으면 clone: git@github.com:sonim1/dev-blog.git
• cwebp 설치 (brew install webp) - 이미지 후처리용
• Git user 설정:
  • Kendrick B Jung <bumfoo@gmail.com>

이미지 생성 정책 (중요)

우선순위: chatgpt-image-gen 스킬 → 사용자 직접 생성

1순위: chatgpt-image-gen 스킬 시도

에이전트가 먼저 chatgpt-image-gen 스킬을 사용해 이미지 생성을 시도합니다.

조건:

• Chrome 확장프로그램(OpenClaw Browser Relay)이 설치되어 있어야 함
• ChatGPT 탭이 attach 되어 있어야 함 (openclaw browser tabs --profile=chrome으로 확인)

성공 시:

• 바로 이미지 생성 후 후처리(crop, webp 변환) 진행

실패 시:

• Chrome 확장프로그램 미설치/미연결 → 사용자에게 안내
• 기타 오류 → 사용자에게 알림 후 수동 생성 요청

2순위: 사용자 직접 생성

chatgpt-image-gen 실패 시 사용자가 직접 생성:

• 사용자가 이미지 생성 도구(Gemini, DALL-E, Midjourney 등) 사용
• 생성된 이미지를 Telegram으로 전송
• 에이전트가 후처리(crop, webp 변환) 및 배포

사용자 안내 메시지 (스킬 실패 시)

⚠️ ChatGPT 이미지 자동 생성을 시도했으나 Chrome 확장프로그램이 연결되지 않았습니다.

**해결 방법:**
1. Chrome에서 ChatGPT (chat.openai.com) 탭 열기
2. OpenClaw Browser Relay 확장프로그램 아이콘 클릭
3. 배지가 ON으로 바뀌면 완료

**또는 직접 생성:**
위 프롬프트로 직접 이미지 생성 후 Telegram으로 전송해주세요.

Vercel 정보

• 프로젝트: it-blog
• 팀: bumfoo-s-team
• Preview 브랜치: preview
  • https://it-blog-git-preview-bumfoo-s-team.vercel.app
• Production: main
  • https://sonim1.com

핵심 작성 규칙 (중요)

1. tldr는 반드시 frontmatter에 작성한다.

• 본문에 ## TL;DR 섹션을 만들지 않는다.

2. faq는 선택 필드다.

• 2개 이상 입력 시 FAQPage JSON-LD로 출력된다.
• UI에 직접 보이는 섹션이 아니라 SEO/GEO용 구조화 데이터다.

3. ko/en 페어 글은 slug, 태그, 구조를 최대한 맞춘다.

4. 이미지 경로는 현재 기준 src/assets 상대 경로를 사용한다.

• 예: ../../../assets/{slug}-{timestamp}.webp

5. Related Posts는 임베딩 기반이다.

• 로컬에서 DATABASE_URL, OPENAI_API_KEY가 없으면 related가 안 보일 수 있음.
• 상용 env에서는 정상 동작.

워크플로우

1) 소스 가져오기

Obsidian 기준:

• 볼트: ~/Library/Mobile Documents/com~apple~CloudDocs/_Obsidian/_Personal/Personal/
• 초안: Projects/블로그 - *.md 또는 Inbox/*.md

2) .mdoc 변환 및 Frontmatter 작성

파일:

• ko: src/content/blog/ko/{slug}.mdoc
• en: src/content/blog/en/{slug}.mdoc

권장 기본 템플릿:

---
draft: false
title: "제목"
description: "설명 (SEO용 1~2문장)"
date: YYYY-MM-DD
tldr:
  - 핵심 요약 1
  - 핵심 요약 2
faq:
  - q: 질문 1
    a: 답변 1
  - q: 질문 2
    a: 답변 2
cover: ../../../assets/{slug}-{YYYYMMDDHHmmssSSS}.webp
tags:
  - Tag1
  - Tag2
---

3) 이미지 스타일/배치 제안 + 자동 생성 시도

단계 A: 프롬프트 작성 및 자동 생성 시도

1. 이미지 스타일/배치 제안 작성
2. 상세한 영문 프롬프트 작성
3. chatgpt-image-gen 스킬로 자동 생성 시도

단계 B: 자동 생성 결과 처리

• 성공: 생성된 이미지 후처리로 바로 진행
• 실패: 사용자에게 안내 후 수동 생성 요청

보고 포맷:

### 🎨 이미지 스타일 제안
1. 스타일 A: 설명
2. 스타일 B: 설명
3. 스타일 C: 설명

### 📍 이미지 배치 계획
- **커버 이미지**: [설명]
- **인라인 이미지 1**: [설명]
- **인라인 이미지 2**: [설명] (필요시)

### 📝 이미지 생성용 프롬프트

#### 커버 이미지

[상세한 영문 프롬프트]

• 해상도: 1408x768 (16:9)
• 스타일: [flat design / 3D / etc]
• 색상: [color palette]

#### 인라인 이미지 1

[상세한 영문 프롬프트]

• 해상도: 1024x768 또는 1200x800
• 스타일: [설명]

### 🤖 자동 생성 실행

프롬프트 준비 후 `chatgpt-image-gen` 스킬 사용:

ChatGPT 이미지 생성 스킬로 커버 이미지 생성 시도

• 스킬: chatgpt-image-gen
• 탭 확인: browser tabs --profile=chrome
• 동작: ChatGPT 탭에서 새 채팅 → 프롬프트 입력 → 생성 → 다운로드

**성공**: 후처리로 바로 진행  
**실패**: 위 사용자 안내 메시지 출력 후 수동 생성 요청

4) 이미지 수신 + 후처리

자동 생성 성공 시:

• 생성된 이미지 바로 후처리 (crop, webp 변환)
• 사용자 확인 후 진행

자동 생성 실패 → 수동 생성 시:

• 사용자가 생성한 이미지를 Telegram으로 전송
• 이미지 확인 및 후처리 (crop, resize, webp 변환)
• 승인 후 진행

절차:

1. 이미지 수신 (자동 또는 Telegram)
2. 필요시 후처리
3. webp 변환
4. 사용자 승인 후 배포 진행

5) 이미지 후처리 + webp 변환

• AI 생성 이미지는 필요 시 공백 crop
• 스크린샷은 본문 가독성 맞춰 리사이즈
• webp 변환:

cwebp -q 80 input.png -o "src/assets/{slug}-{timestamp}.webp"

네이밍:

• {slug}-{YYYYMMDDHHmmssSSS}.webp
• en 별도 이미지 필요 시: {slug}-en-{YYYYMMDDHHmmssSSS}.webp

6) 영어 버전 생성

• 파일: src/content/blog/en/{slug}.mdoc
• ko 내용 자연 번역
• 내부 링크는 같은 언어 경로로 맞춤
• 이미지 내 한글이 있으면 영어 버전 이미지 별도 생성/편집

7) Preview 배포 + 승인 (필수)

main 직행 금지, preview 검토 후 배포.

cd ~/projects/dev-blog
git checkout -B preview
git add -A
git commit -m "Add blog post: {title}"
git push origin preview --force

확인 링크:

• ko: https://it-blog-git-preview-bumfoo-s-team.vercel.app/ko/blog/{slug}
• en: https://it-blog-git-preview-bumfoo-s-team.vercel.app/en/blog/{slug}

승인 후:

git checkout main
git merge preview
git push origin main

최종 체크리스트

• frontmatter에 tldr 있음
• 본문에 ## TL;DR 없음
• faq가 있으면 Q/A 2개 이상
• 사용자 제공 이미지 확인 및 webp 변환 완료
• cover/inline 이미지 경로 정상
• ko/en slug 및 구조 정합성 확인
• preview 링크 확인 및 승인 완료
• main 배포 완료

참고

• 포맷 상세: references/blog-format.md