| 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: 준비 (오케스트레이터 직접 수행)
- 사용자 입력에서 추출한다:
- 스토리 주제: 비주얼 스토리의 주제/소재
- 유형 (선택): 에세이/포토에세이/브랜드스토리/여행기
- 톤앤무드 (선택): 서정적/다큐멘터리적/몽환적/강렬한
- 장면 수 (선택): 원하는 분량
- 기존 파일 (선택): 텍스트, 이미지, 참고 자료
_workspace/ 디렉토리와 _workspace/images/ 디렉토리를 생성한다- 입력을 정리하여
_workspace/00_input.md에 저장한다
- 기존 파일이 있으면
_workspace/에 복사하고 해당 Phase를 건너뛴다
- 요청 범위에 따라 실행 모드를 결정한다 (아래 "작업 규모별 모드" 참조)
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: 통합 및 최종 산출물
리뷰어의 보고서를 기반으로 최종 산출물을 정리한다:
_workspace/ 내 모든 파일을 확인한다- 리뷰 보고서의 🔴 필수 수정이 모두 반영되었는지 확인한다
- 최종 요약을 사용자에게 보고한다:
- 스토리 블루프린트 —
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막/영웅여정 구조, 감정 곡선, 비주얼 리듬 |
