## 한줄 요약
Claude Code 입문자가 4개의 프롬프트 파일로 "바이브코딩 → 서브에이전트 생성 → 병렬 문서 분석 → 사례글 작성"까지 하나의 워크플로우로 연결한 실전 연습기
---
## 이런 분들께 도움돼요
- Claude Code를 처음 시작해서 뭘 해봐야 할지 모르겠는 입문자
- 서브에이전트(Task)를 어떻게 활용하는지 궁금한 분
- 여러 문서를 한 번에 분석하고 정리하고 싶은 분
- 프롬프트를 단계별로 구조화하는 방법을 배우고 싶은 분
---
## 소개: 시도하고자 했던 것과 그 이유
### 시작 계기
"프리랜서 클코 자동화 스터디"에 참여하면서 Claude Code를 처음 접했습니다. 이론만 보는 것보다 실제로 사용해보고 싶었어요.
그런데 막상 시작하려니 막막했습니다:
- "뭘 만들어볼까?"
- "서브에이전트가 뭐지?"
- "병렬 호출은 어떻게 하는 거지?"
하지만 스터디장님이 준비하신 **4단계 워크플로우**로 하나 하나 따라가며 쉽게 진행 할 수 있었습니다.
### 목표
1. 바이브코딩으로 간단한 페이지 만들어보기
2. 서브에이전트 생성하고 사용법 익히기
3. 여러 문서를 병렬로 분석해서 인사이트 추출하기
4. 전체 과정을 사례글로 정리하기
---
## 진행 방법: 어떤 도구를 사용했고, 어떻게 활용했나요?
### 사용한 도구
- **도구명**: Claude Code (VS Code Extension)
- **모델**: Claude Opus 4.5
- **특이사항**: 서브에이전트 병렬 호출 기능 활용
### 4단계 워크플로우
| 단계 | 프롬프트 파일 | 작업 내용 |
|------|-------------|---------|
| Step 1 | `w1-step-1-vibe-coding.md` | 바이브코딩으로 LMS HTML 페이지 구현 |
| Step 2 | `w1-step-2-gen-sub-agent.md` | 서브에이전트 2개 생성 |
| Step 3 | `w1-step3-use-subagent.md` | 서브에이전트 병렬 호출로 7개 문서 분석 |
| Step 4 | `w1-step4-ai-case-write.md` | /ai-case-writer로 사례글 작성 |
---
### Step 1: 바이브코딩으로 LMS 페이지 구현
**프롬프트 핵심:**
```
현재 사용자는 클로드 코드 입문자입니다.
프롬프트와 클로드 코드 연습 목적을 위한 바이브 코딩을 진행합니다
gpters-w1-practice/vibe-lms.html 경로의 단일 페이지를 구현해야 합니다.
참고 사항:
- 외부 라이브러리를 설치하지 않은 상태에서 구현
- 단일 html로만 작성
- 참고 이미지: gpters-practice/prompt/w1-lms-image.png
```
**결과**: 참고 이미지를 기반으로 단일 HTML 파일로 LMS 페이지가 생성됨
---
### Step 2: 서브에이전트 2개 생성
**프롬프트 핵심:**
```
/subagent-creator를 이용하여 두 서브 에이전트를 생성합니다
Agent 1: ax-prompt-finder
- 프롬프트 개선 패턴을 AX 사례에서 병렬 검색
- tools: Read, Grep
- model: haiku
Agent 2: ax-case-finder
- 현재 상황과 비슷한 AX 사례 병렬 검색
- tools: Read, Grep
- model: haiku
```
**결과**: 각각 다른 역할을 가진 서브에이전트 2개가 생성됨
- `ax-prompt-finder`: 효과적인 프롬프트 패턴 추출 전문
- `ax-case-finder`: AI 활용 사례 패턴 분석 전문
---
### Step 3: 서브에이전트 병렬 호출로 7개 문서 분석
**프롬프트 핵심:**
```
gpters-w1-practice/gpters_aicase_ax 경로의 문서 인사이트를 파악
main-agent가 전체 문서를 읽고 맥락을 이해합니다.
아래 에이전트를 병렬로 호출하여 내용을 파악합니다:
@agent-ax-case-finder
@agent-ax-prompt-finder
결과값을 gpters-w1-practice/agent-review에 문서화
- ax-prompt-finder 결과: ax-prompt-{title}.md
- ax-case-finder 결과: ax-case-{title}.md
```
**실행 과정:**
1. Main Agent가 7개 AX 사례 문서를 먼저 읽음
2. 두 서브에이전트를 **동시에** 호출 (병렬 실행)
3. 각 에이전트가 전문 영역에 맞게 분석
4. 결과를 각각 문서로 저장
**결과물:**
- `ax-case-비개발자-AI활용-7가지-핵심패턴.md`
- `ax-prompt-효과적인-프롬프트-패턴-가이드.md`
---
### Step 4: 사례글 자동 작성
**프롬프트 핵심:**
```
/ai-case-writer를 이용하여 현재 작업의 내용을 사례 게시글로 작성
askuserquestion으로 사용자에게 필요한 맥락을 되물고 사례글 작성
```
**과정:**
1. Claude가 현재 세션 요약
2. 4가지 질문으로 추가 맥락 수집
3. gpters 양식에 맞춰 자동 작성
---
## 결과와 배운 점
### Before vs After
| 항목 | Before | After |
|------|--------|-------|
| Claude Code 이해도 | "뭘 해야 하지?" | 4단계 워크플로우 완성 |
| 서브에이전트 | 존재 자체를 몰랐음 | 병렬 호출까지 활용 |
| 문서 분석 | 하나씩 읽어야 함 | 7개를 동시에 분석 |
| 사례글 작성 | 막막함 | 질문에 답하면 완성 |
### 핵심 배운 점: 프롬프트 구조화의 중요성
**가장 효과적이었던 것:**
1. **단계별 프롬프트 파일 분리**
- 한 번에 다 하려고 하지 않음
- 각 단계가 명확한 입력/출력을 가짐
2. **구체적인 경로와 파일명 지정**
```
결과값을 gpters-w1-practice/agent-review에 문서화
ax-prompt-finder 결과: ax-prompt-{title}.md
```
3. **역할 분담 명시**
```
main-agent가 전체 문서를 읽고 맥락을 이해합니다.
아래 에이전트를 병렬로 호출하여...
```
### 인상적이었던 순간
4단계가 자연스럽게 연결되는 것이 가장 인상적이었습니다:
```
바이브코딩 (연습)
↓
서브에이전트 생성 (도구 준비)
↓
병렬 문서 분석 (실전 활용)
↓
사례글 작성 (공유)
```
각 단계의 결과물이 다음 단계의 입력이 되는 구조였어요.
---
## 재사용 가능한 프롬프트
### 1. 바이브코딩 시작할 때
```
현재 사용자는 클로드 코드 입문자입니다.
[목적]을 위한 바이브 코딩을 진행합니다.
[경로]에 [파일 형식]으로 구현해야 합니다.
참고 사항:
- [제약조건 1]
- [제약조건 2]
참고 이미지: [이미지 경로]
```
### 2. 서브에이전트 생성할 때
```
/subagent-creator를 이용하여 서브 에이전트를 생성합니다
---
name: [에이전트 이름]
description: [역할 설명]
tools: [사용할 도구들]
model: haiku
---
[에이전트가 수행할 작업]:
1. [작업 1]
2. [작업 2]
3. [작업 3]
```
### 3. 서브에이전트 병렬 호출할 때
```
[경로]의 문서들을 분석합니다.
main-agent가 전체 문서를 읽고 맥락을 이해합니다.
아래 에이전트를 병렬로 호출하여 내용을 파악합니다:
@agent-[에이전트1]
@agent-[에이전트2]
결과값을 [출력 경로]에 문서화
- [에이전트1] 결과: [파일명 패턴]
- [에이전트2] 결과: [파일명 패턴]
```
### 4. 사례글 작성할 때
```
/ai-case-writer를 이용하여 현재 작업의 내용을 사례 게시글로 작성합니다
askuserquestion으로 사용자에게 필요한 맥락을 되물고 사례글 작성
제목: [원하는 제목]
주제: [주제 설명]
```
---
## 결과물 경로
```
gpters-w1-practice/
├── vibe-lms.html # Step 1 결과
├── prompt/
│ ├── w1-step-1-vibe-coding.md # Step 1 프롬프트
│ ├── w1-step-2-gen-sub-agent.md # Step 2 프롬프트
│ ├── w1-step3-use-subagent.md # Step 3 프롬프트
│ └── w1-step4-ai-case-write.md # Step 4 프롬프트
├── gpters_aicase_ax/ # 분석 대상 7개 문서
└── agent-review/ # Step 3 결과
├── ax-case-비개발자-AI활용-7가지-핵심패턴.md
└── ax-prompt-효과적인-프롬프트-패턴-가이드.md
```
---
## 앞으로의 계획
- 서브에이전트를 다른 분석 작업에도 활용해보기
- 프롬프트 파일들을 템플릿으로 정리해서 재사용
- 4주 목표인 "자동화 사례 3개" 완성하기
---
## 도움 받은 글
분석 대상으로 사용한 7개 AX 사례:
1. A/B 테스트 해본 적 없는 비개발자가 30분 만에 구현한 팁
2. Airtable Automation을 '사람 개입 없는 운영 자동화'로 재설계
3. 랜딩페이지 이탈하려는 유저 피드백을 AI 바이브로 듣는 방법
4. 바이브코더가 개발자 써먹는(?) 법
5. AI스터디 매출 분석에 필요한 데이터 로직 & 대시보드 구축
6. 제각각인 상세페이지, 섹션별 자동화로 내 맘대로 수정하기
7. 사례글 안 쓰는 당신을 위한 자동화
