Blog Publisher

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

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

전제 조건

• - dev-blog repo: INLINECODE0

• - cwebp 설치 (brew install webp) - 이미지 후처리용
• Git user 설정:

이미지 생성 정책 (중요)

우선순위: 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순위: 사용자 직접 생성

INLINECODE8 실패 시 사용자가 직접 생성:

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

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

CODEBLOCK0

Vercel 정보

• - 프로젝트: INLINECODE9
• 팀: INLINECODE10
• Preview 브랜치: INLINECODE11

• - Production: INLINECODE13

핵심 작성 규칙 (중요)

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

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

1. 2. faq는 선택 필드다.

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

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

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

• - 예: INLINECODE20

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

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

워크플로우

1) 소스 가져오기

Obsidian 기준:

• - 볼트: INLINECODE23
• 초안: Projects/블로그 - *.md 또는 INLINECODE25

2) .mdoc 변환 및 Frontmatter 작성

파일:

• - ko: INLINECODE27
• en: INLINECODE28

권장 기본 템플릿:

CODEBLOCK1

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

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

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

단계 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-image-gen
• 탭 확인: browser tabs --profile=chrome
• 동작: ChatGPT 탭에서 새 채팅 → 프롬프트 입력 → 생성 → 다운로드

4) 이미지 수신 + 후처리

자동 생성 성공 시:

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

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

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

절차:

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

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

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

네이밍:

• - INLINECODE30
• en 별도 이미지 필요 시: INLINECODE31

6) 영어 버전 생성

• - 파일: INLINECODE32
• ko 내용 자연 번역
• 내부 링크는 같은 언어 경로로 맞춤
• 이미지 내 한글이 있으면 영어 버전 이미지 별도 생성/편집

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

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

CODEBLOCK7

확인 링크:

• - ko: INLINECODE33
• en: INLINECODE34

승인 후:
CODEBLOCK8

최종 체크리스트

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

참고

• - 포맷 상세: INLINECODE38