Visual Storytelling

---
name: visual-storytelling
description: "비주얼 스토리텔링의 스토리 설계, 텍스트 집필, AI 이미지 생성(Gemini), HTML 레이아웃, 통합 편집을 에이전트 팀이 협업하여 제작하는 풀 프로덕션 파이프라인. '비주얼 스토리 만들어줘', '포토에세이 기획', '이미지+글 조합', '비주얼 에세이', '스토리 페이지 제작', '인터랙티브 스토리', '비주얼 콘텐츠 기획', '이미지 에세이', '웹 스토리', '비주얼 내러티브' 등 이미지와 텍스트를 결합한 스토리텔링 제작에 이 스킬을 사용한다. 기존 텍스트나 이미지가 있는 경우에도 레이아웃 통합을 지원한다. 단, 영상 편집, 인쇄물 DTP, 인터랙티브 웹앱 개발(JS 기반 인터랙션)은 이 스킬의 범위가 아니다."
---

# Visual Storytelling — 비주얼 스토리텔링 풀 프로덕션 파이프라인

비주얼 스토리의 스토리설계→텍스트집필→AI이미지생성→HTML레이아웃→통합편집을 에이전트 팀이 협업하여 제작한다.

## 실행 모드

**에이전트 팀** — 5명이 SendMessage로 직접 통신하며 교차 검증한다.

## 에이전트 구성

| 에이전트 | 파일 | 역할 | 타입 |
|---------|------|------|------|
| story-architect | `.claude/agents/story-architect.md` | 내러티브 구조, 장면 설계 | general-purpose |
| essay-writer | `.claude/agents/essay-writer.md` | 본문, 캡션, 인용구 집필 | general-purpose |
| image-prompter | `.claude/agents/image-prompter.md` | Gemini 이미지 프롬프트, 생성 | general-purpose |
| layout-builder | `.claude/agents/layout-builder.md` | HTML/CSS 레이아웃 제작 | general-purpose |
| editorial-reviewer | `.claude/agents/editorial-reviewer.md` | 교차 검증, 정합성 확인 | general-purpose |

## 워크플로우

### Phase 1: 준비 (오케스트레이터 직접 수행)

1. 사용자 입력에서 추출한다:
   - **스토리 주제**: 비주얼 스토리의 주제/소재
   - **유형** (선택): 에세이/포토에세이/브랜드스토리/여행기
   - **톤앤무드** (선택): 서정적/다큐멘터리적/몽환적/강렬한
   - **장면 수** (선택): 원하는 분량
   - **기존 파일** (선택): 텍스트, 이미지, 참고 자료
2. `_workspace/` 디렉토리와 `_workspace/images/` 디렉토리를 생성한다
3. 입력을 정리하여 `_workspace/00_input.md`에 저장한다
4. 기존 파일이 있으면 `_workspace/`에 복사하고 해당 Phase를 건너뛴다
5. 요청 범위에 따라 **실행 모드를 결정**한다 (아래 "작업 규모별 모드" 참조)

### Phase 2: 팀 구성 및 실행

팀을 구성하고 작업을 할당한다. 작업 간 의존 관계는 다음과 같다:

| 순서 | 작업 | 담당 | 의존 | 산출물 |
|------|------|------|------|--------|
| 1 | 스토리 설계 | architect | 없음 | `_workspace/01_story_blueprint.md` |
| 2a | 텍스트 집필 | writer | 작업 1 | `_workspace/02_essay_text.md` |
| 2b | 이미지 프롬프트·생성 | prompter | 작업 1 | `_workspace/03_image_prompts.md`, `images/` |
| 3 | HTML 레이아웃 | builder | 작업 2a, 2b | `_workspace/04_layout.html` |
| 4 | 편집 리뷰 | reviewer | 작업 2a, 2b, 3 | `_workspace/05_review_report.md` |

작업 2a(텍스트)와 2b(이미지)는 **병렬 실행**한다. 둘 다 작업 1(스토리 설계)에만 의존하므로 동시에 시작할 수 있다.

**팀원 간 소통 흐름:**
- architect 완료 → writer에게 장면별 텍스트 역할·감정 전달, prompter에게 시각적 모티프·이미지 컨셉 전달, builder에게 장면 구조·비율 전달
- writer 완료 → prompter에게 텍스트 감정과 이미지 보완 방향 전달, builder에게 텍스트 배치 가이드 전달
- prompter 완료 → builder에게 이미지 파일·종횡비·배치 정보 전달
- reviewer는 모든 산출물을 교차 검증. 🔴 필수 수정 발견 시 해당 에이전트에게 수정 요청 → 재작업 → 재검증 (최대 2회)

### Phase 3: 통합 및 최종 산출물

리뷰어의 보고서를 기반으로 최종 산출물을 정리한다:

1. `_workspace/` 내 모든 파일을 확인한다
2. 리뷰 보고서의 🔴 필수 수정이 모두 반영되었는지 확인한다
3. 최종 요약을 사용자에게 보고한다:
   - 스토리 블루프린트 — `01_story_blueprint.md`
   - 에세이 텍스트 — `02_essay_text.md`
   - 이미지 프롬프트 — `03_image_prompts.md`
   - HTML 레이아웃 — `04_layout.html`
   - 리뷰 보고서 — `05_review_report.md`
   - 생성 이미지 — `images/` 디렉토리

## 작업 규모별 모드

사용자 요청의 범위에 따라 투입 에이전트를 조절한다:

| 사용자 요청 패턴 | 실행 모드 | 투입 에이전트 |
|----------------|----------|-------------|
| "비주얼 스토리 만들어줘", "풀 프로덕션" | **풀 파이프라인** | 5명 전원 |
| "스토리 기획만 해줘" | **기획 모드** | architect + reviewer |
| "이 글에 이미지 생성해줘" (기존 텍스트) | **이미지 모드** | prompter + reviewer |
| "텍스트와 이미지로 HTML 만들어줘" (기존 소재) | **레이아웃 모드** | builder + reviewer |
| "이 비주얼 스토리 검토해줘" | **리뷰 모드** | reviewer 단독 |

**기존 파일 활용**: 사용자가 기존 텍스트나 이미지를 제공하면, 해당 파일을 `_workspace/`에 복사하고 해당 단계의 에이전트는 건너뛴다.

## 데이터 전달 프로토콜

| 전략 | 방식 | 용도 |
|------|------|------|
| 파일 기반 | `_workspace/` 디렉토리 | 주요 산출물 저장 및 공유 |
| 메시지 기반 | SendMessage | 실시간 핵심 정보 전달, 수정 요청 |
| 태스크 기반 | TaskCreate/TaskUpdate | 진행 상황 추적, 의존 관계 관리 |

파일명 컨벤션: `{순번}_{에이전트}_{산출물}.{확장자}`

## 에러 핸들링

| 에러 유형 | 전략 |
|----------|------|
| 이미지 생성 실패 | 대안 프롬프트 1회 재시도 → 실패 시 플레이스홀더 + 프롬프트 텍스트 |
| 주제 모호 | 스토리설계자가 3개 방향 제안 후 진행 |
| 에이전트 실패 | 1회 재시도 → 실패 시 해당 산출물 없이 진행, 리뷰 보고서에 누락 명시 |
| 리뷰에서 🔴 발견 | 해당 에이전트에 수정 요청 → 재작업 → 재검증 (최대 2회) |
| 이미지-텍스트 감정 충돌 | 이미지 프롬프트 수정 또는 텍스트 톤 조정 |

## 테스트 시나리오

### 정상 흐름
**프롬프트**: "'도시의 새벽'이라는 주제로 서정적인 비주얼 에세이를 만들어줘. 8장면 정도"
**기대 결과**:
- 스토리 블루프린트: 8장면 내러티브 아크, 감정 곡선, 시각적 모티프(새벽빛 그라데이션)
- 에세이 텍스트: 장면별 서술+캡션+인용구, 리듬 있는 문체
- 이미지: 8장 수채화 스타일 새벽 풍경, 일관된 컬러 팔레트
- HTML: 반응형 레이아웃, 풀블리드+텍스트+인용구 패턴 조합
- 리뷰: 정합성 매트릭스 전항목 확인

### 기존 파일 활용 흐름
**프롬프트**: "이 에세이 글에 맞는 이미지 생성하고 HTML로 만들어줘" + 텍스트 파일
**기대 결과**:
- 기존 텍스트를 `_workspace/02_essay_text.md`로 복사
- architect가 텍스트 분석으로 간략 블루프린트 생성
- prompter + builder + reviewer 투입

### 에러 흐름
**프롬프트**: "비주얼 스토리 만들어줘, 주제는 자유"
**기대 결과**:
- architect가 3개 주제 방향 제안 (계절/여행/일상 등)
- 가장 보편적인 주제로 진행, 6장면 축소 구성
- 리뷰 보고서에 "주제 자동 선정" 명시

## 에이전트별 확장 스킬

개별 에이전트의 도메인 전문성을 강화하는 확장 스킬:

| 스킬 | 대상 에이전트 | 역할 |
|------|-------------|------|
| `image-prompt-engineering` | image-prompter | 5-Layer 프롬프트 구조, 스타일 키워드, 일관성 기법 |
| `narrative-structure-patterns` | story-architect | 3막/5막/영웅여정 구조, 감정 곡선, 비주얼 리듬 |