비주얼 스토리텔링의 스토리 설계, 텍스트 집필, AI 이미지 생성(Gemini), HTML 레이아웃, 통합 편집을 에이전트 팀이 협업하여 제작하는 풀 프로덕션 파이프라인. '비주얼 스토리 만들어줘', '포토에세이 기획', '이미지+글 조합', '비주얼 에세이', '스토리 페이지 제작', '인터랙티브 스토리', '비주얼 콘텐츠 기획', '이미지 에세이', '웹 스토리', '비주얼 내러티브' 등 이미지와 텍스트를 결합한 스토리텔링 제작에 이 스킬을 사용한다. 기존 텍스트나 이미지가 있는 경우에도 레이아웃 통합을 지원한다. 단, 영상 편집, 인쇄물 DTP, 인터랙티브 웹앱 개발(JS 기반 인터랙션)은 이 스킬의 범위가 아니다.
비주얼 스토리의 스토리설계→텍스트집필→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 |
_workspace/ 디렉토리와 _workspace/images/ 디렉토리를 생성한다_workspace/00_input.md에 저장한다_workspace/에 복사하고 해당 Phase를 건너뛴다팀을 구성하고 작업을 할당한다. 작업 간 의존 관계는 다음과 같다:
| 순서 | 작업 | 담당 | 의존 | 산출물 |
|---|---|---|---|---|
| 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(스토리 설계)에만 의존하므로 동시에 시작할 수 있다.
팀원 간 소통 흐름:
리뷰어의 보고서를 기반으로 최종 산출물을 정리한다:
_workspace/ 내 모든 파일을 확인한다01_story_blueprint.md02_essay_text.md03_image_prompts.md04_layout.html05_review_report.mdimages/ 디렉토리사용자 요청의 범위에 따라 투입 에이전트를 조절한다:
| 사용자 요청 패턴 | 실행 모드 | 투입 에이전트 |
|---|---|---|
| "비주얼 스토리 만들어줘", "풀 프로덕션" | 풀 파이프라인 | 5명 전원 |
| "스토리 기획만 해줘" | 기획 모드 | architect + reviewer |
| "이 글에 이미지 생성해줘" (기존 텍스트) | 이미지 모드 | prompter + reviewer |
| "텍스트와 이미지로 HTML 만들어줘" (기존 소재) | 레이아웃 모드 | builder + reviewer |
| "이 비주얼 스토리 검토해줘" | 리뷰 모드 | reviewer 단독 |
기존 파일 활용: 사용자가 기존 텍스트나 이미지를 제공하면, 해당 파일을 _workspace/에 복사하고 해당 단계의 에이전트는 건너뛴다.
| 전략 | 방식 | 용도 |
|---|---|---|
| 파일 기반 | _workspace/ 디렉토리 | 주요 산출물 저장 및 공유 |
| 메시지 기반 | SendMessage | 실시간 핵심 정보 전달, 수정 요청 |
| 태스크 기반 | TaskCreate/TaskUpdate | 진행 상황 추적, 의존 관계 관리 |
파일명 컨벤션: {순번}_{에이전트}_{산출물}.{확장자}
| 에러 유형 | 전략 |
|---|---|
| 이미지 생성 실패 | 대안 프롬프트 1회 재시도 → 실패 시 플레이스홀더 + 프롬프트 텍스트 |
| 주제 모호 | 스토리설계자가 3개 방향 제안 후 진행 |
| 에이전트 실패 | 1회 재시도 → 실패 시 해당 산출물 없이 진행, 리뷰 보고서에 누락 명시 |
| 리뷰에서 🔴 발견 | 해당 에이전트에 수정 요청 → 재작업 → 재검증 (최대 2회) |
| 이미지-텍스트 감정 충돌 | 이미지 프롬프트 수정 또는 텍스트 톤 조정 |
프롬프트: "'도시의 새벽'이라는 주제로 서정적인 비주얼 에세이를 만들어줘. 8장면 정도" 기대 결과:
프롬프트: "이 에세이 글에 맞는 이미지 생성하고 HTML로 만들어줘" + 텍스트 파일 기대 결과:
_workspace/02_essay_text.md로 복사프롬프트: "비주얼 스토리 만들어줘, 주제는 자유" 기대 결과:
개별 에이전트의 도메인 전문성을 강화하는 확장 스킬:
| 스킬 | 대상 에이전트 | 역할 |
|---|---|---|
image-prompt-engineering | image-prompter | 5-Layer 프롬프트 구조, 스타일 키워드, 일관성 기법 |
narrative-structure-patterns | story-architect | 3막/5막/영웅여정 구조, 감정 곡선, 비주얼 리듬 |