소개
# 스터디장이 준 프롬프트
## 한줄 요약
스터디장이 준 3단계 프롬프트를 따라 바이브코딩 → 서브에이전트 생성 → 병렬 분석까지 한 번에 완료하고, 재사용 가능한 분석 문서 2개를 얻었습니다.
## 이런 분들께 도움돼요
- Claude Code 입문자로 체계적인 학습 가이드가 필요한 분
- 서브에이전트를 직접 만들어보고 활용해보고 싶은 분
- AX 사례를 분석하여 인사이트를 추출하는 방법을 배우고 싶은 분
- 프리랜서로 자동화 스터디에 참여 중인 분
## 소개: 시도하고자 했던 것과 그 이유
### 배경
프리랜서 클로드 코드 자동화 스터디에 참여하게 되었습니다. 프롬프트와 클로드 코드 연습을 목적으로 한 바이브 코딩을 진행하게 되었고, 스터디장이 3단계로 구성된 프롬프트를 제공했습니다.
### 3단계 프롬프트 구성
**Step 1: 바이브코딩**
- LMS 사이트를 단일 HTML로 구현
- 외부 라이브러리 없이 순수 HTML/CSS/JS만 사용
- 디자인 시스템 일관성 유지
**Step 2: 서브에이전트 생성**
- ax-prompt-finder: 프롬프트 패턴 분석 전문 에이전트
- ax-case-finder: 사례 해결 패턴 분석 전문 에이전트
**Step 3: 서브에이전트 활용**
- 5개의 AX 사례 문서 분석
- 두 에이전트를 병렬로 실행
- 결과를 각각 문서화
### 시작 계기
스터디장이 준 프롬프트 3단계를 따라 연습하려고 했습니다. 단순히 따라하는 것이 아니라, 각 단계를 통해 바이브코딩, 서브에이전트 생성, 병렬 분석이라는 세 가지 핵심 스킬을 모두 익히고 싶었습니다.
## 진행 방법: 어떤 도구를 사용했고, 어떻게 활용했나요?
### 사용한 도구
- **도구명**: Claude Code (CLI)
- **모델**: Claude Sonnet 4.5
- **핵심 기능**: Task (서브에이전트), Read, Write, Edit, Glob
### 1단계: 바이브코딩 - LMS 사이트 제작
**상황**: 참고 이미지를 보고 LMS 사이트를 단일 HTML로 구현해야 했습니다.
**진행 과정**:
1. 참고 이미지 분석 (w1-lms-image.png)
2. 디자인 요소 파악 (헤더, 사이드바, 강의 카드 그리드)
3. 색상 체계 정의 (노란색 CTA, 주황색 포인트)
4. vibe-lms.html 파일 생성 및 구현
**결과물**:
- 강의 카드 8개가 포함된 완전한 LMS 페이지
- 필터링 기능 (전체보기/학습중/즐겨찾기/시작안함)
- 진행률 표시 바
- 반응형 그리드 레이아웃
### 2단계: 서브에이전트 생성
**상황**: `/subagent-creator` 스킬을 사용하여 2개의 전문 분석 에이전트를 만들어야 했습니다.
**ax-prompt-finder 에이전트**:
```yaml
name: ax-prompt-finder
description: 프롬프트 개선 패턴을 AX 사례에서 병렬 검색
tools: Read, Grep, Glob
model: haiku
```
**역할**:
- 현재 프롬프트 분석
- AX 사례에서 비슷한 의도 찾기
- 실제로 작동한 프롬프트 추출
- 효과성 설명
**ax-case-finder 에이전트**:
```yaml
name: ax-case-finder
description: 현재 상황과 비슷한 AX 사례 병렬 검색
tools: Read, Grep, Glob
model: haiku
```
**역할**:
- 현재 문제 분석
- 키워드로 AX 사례 검색
- 막혔던 순간과 해결 매칭
- 실제 해결 방법 추출 (200자 요약)
### 3단계: 병렬 분석 실행
**상황**: 5개의 AX 사례 문서를 분석하여 인사이트를 추출해야 했습니다.
**이렇게 요청했어요**:
```
gpters-w1-practice\gpters_aicase_ax 해당 경로의 5개의 문서 인사이트를 파악한 다음,
인사이트를 추려내 문서화를 목표합니다.
main-agent 가 전체 문서를 읽고 맥락을 이해합니다.
아래 에이전트를 병렬로 호출하여 내용을 파악합니다.
@agent-ax-case-finder
@agent-ax-prompt-finder
결과값을 gpters-w1-practice\agent-review 경로에 문서화를 해주세요
```
**진행 과정**:
1. Main agent가 5개 AX 사례 문서를 모두 읽음
2. 두 서브에이전트를 **병렬로 동시 실행**
3. ax-prompt-finder: 18개의 재사용 가능한 프롬프트 패턴 추출
4. ax-case-finder: 6가지 핵심 해결 전략 도출
5. 각각 마크다운 문서로 자동 정리
### 인상 깊었던 순간
**서브에이전트 2개를 병렬로 실행해서 빠르게 분석한 순간이 가장 인상적이었습니다.**
두 개의 Task를 동시에 호출하자 각 에이전트가 독립적으로 분석을 시작했고, 몇 분 만에 두 가지 관점의 분석 결과를 동시에 얻었습니다. 혼자 읽고 정리했다면 몇 시간은 걸렸을 작업이었습니다.
```
Task(subagent_type="ax-case-finder", prompt="...")
Task(subagent_type="ax-prompt-finder", prompt="...")
```
단 두 줄의 병렬 호출로:
- ax-prompt-patterns.md: 8가지 프롬프트 패턴 + 재사용 템플릿
- ax-case-solutions.md: 5개 사례 분석 + 6가지 해결 전략
이 두 문서가 자동으로 생성되었습니다.
시도하고자 했던 것과 그 이유를 알려주세요.
(내용 입력)
진행 방법
이번 작업은 다음 프롬프트 문서를 참고했습니다:
- `gpters-w1-practice/prompt/w1-step-2-gen-sub-agent.md` - 서브에이전트 생성 가이드
- `gpters-w1-practice/prompt/w1-step3-use-subagent.md` - 서브에이전트 활용 가이드
그리고 분석 대상이 된 5개의 AX 사례 문서:
1. A/B 테스트 해본 적 없는 비개발자가 30분 만에 구현한 팁
2. Airtable Automation을 '사람 개입 없는 운영 자동화'로 재설계
3. 랜딩페이지 이탈하려는 유저 피드백을 AI 바이브로 듣는 방법
4. 바이브코더가 개발자 써먹는 법
5. AI스터디 매출 분석에 필요한 데이터 로직 & 대시보드 구축
결과와 배운 점
## 결과와 배운 점
### Before vs After
| 항목 | Before | After |
|------|--------|-------|
| LMS 사이트 | 없음 | vibe-lms.html 완성 |
| 서브에이전트 | 개념만 알고 있음 | 2개 직접 생성 |
| AX 사례 분석 | 수동으로 읽어야 함 | 병렬 자동 분석 |
| 프롬프트 패턴 | 산발적으로 알고 있음 | 18개 패턴 문서화 |
| 해결 전략 | 암묵적 지식 | 6가지 전략 명시화 |
| 작업 시간 | 몇 시간 예상 | 실제 1-2시간 완료 |
### 결과물
**1. vibe-lms.html**
- 8개 강의 카드가 포함된 완전한 LMS 페이지
- 필터링, 진행률 표시, 즐겨찾기 기능
- 브라우저에서 즉시 확인 가능
**2. 서브에이전트 2개**
- `.claude/agents/ax-prompt-finder.md`
- `.claude/agents/ax-case-finder.md`
- 향후 다른 분석에도 재사용 가능
**3. 분석 문서 2개**
- `ax-prompt-patterns.md`: 18개 프롬프트 패턴 + 재사용 템플릿
- `ax-case-solutions.md`: 5개 사례 분석 + 6가지 핵심 해결 전략
### 배운 점
**1. 서브에이전트 생성과 활용 방법을 습득**
서브에이전트는 단순히 "명령을 실행하는 도구"가 아니라, **특정 관점과 역할을 가진 전문 분석가**라는 것을 체감했습니다.
- ax-prompt-finder: "프롬프트 엔지니어" 관점
- ax-case-finder: "문제 해결 컨설턴트" 관점
같은 문서를 읽어도 각자 다른 인사이트를 추출하는 것이 놀라웠습니다.
**2. 프롬프트 패턴과 사례 해결 패턴 분석 문서 획득**
가장 큰 수확은 **재사용 가능한 지식 자산**을 얻었다는 점입니다.
**프롬프트 패턴 문서에서 배운 것**:
- 상황 + 제약조건 + 질문 구조
- 도메인 지식은 구체적 예시와 함께
- "너가 [역할]이라고 생각하고" 역할 전환 기법
- 설계 문서 먼저, 구현 나중
- 에러 → 문서화 → 재발 방지 루프
**사례 해결 패턴 문서에서 배운 것**:
- 문제 → 명확화 → 최적 솔루션 패턴
- 비유로 개념 이해하기
- 막힌 순간에 즉시 피드백 요청
- 같은 실수는 문서화로 방지
- 30분 ~ 2시간 내에 실제 산출물 완성 가능
**3. 바이브코딩으로 실제 동작하는 사이트 제작**
비개발자로서 단일 HTML 파일로 완전한 LMS 사이트를 만들어본 경험이 자신감을 주었습니다. "브라우저에서 파일을 어떻게 열어?"라고 물어보니 `start` 명령어로 바로 실행해주는 것도 인상적이었습니다.
## 다른 업무에 적용한다면?
이 경험을 바탕으로 다른 상황에도 적용할 수 있을 것 같습니다:
### 1. 다른 프로젝트에서도 서브에이전트 활용
이번에 만든 ax-prompt-finder, ax-case-finder는 다른 분석에도 재사용할 수 있습니다.
예를 들어:
- 고객 피드백 분석 → "고객 니즈 패턴" 추출
- 경쟁사 분석 → "차별화 전략" 도출
- 회의록 정리 → "액션 아이템" 추출
서브에이전트는 한 번 만들어두면 계속 사용할 수 있다는 게 핵심입니다.
### 2. 분석한 프롬프트 패턴을 실제 업무에 적용
18개 프롬프트 패턴 중 바로 써먹을 수 있는 것들:
**상황 + 제약 + 질문 템플릿**:
```
[현재 상황]:
[문제점/제약]:
[의문]: 보통 어떻게 해?
```
**도메인 지식 전달 템플릿**:
```
[분류 기준]을 보고 판단해야 해.
예를 들어 [구체적 상황 1]이면 [결과 A]고,
[구체적 상황 2]면 [결과 B]야.
```
**역할 전환 템플릿**:
```
ultrathink 너가 [역할]라고 생각하고
[결과물]을 제안해줄래?
```
이런 템플릿을 내 업무에 맞게 채워서 사용하면 됩니다.
### 3. 추가로 2주차 학습 진행
스터디 커리큘럼을 계속 따라가면서:
- 2주차: 더 복잡한 자동화 구현
- 3주차: 실전 프로젝트 적용
- 4주차: 최종 결과물 완성
각 주차마다 배운 내용을 서브에이전트로 만들어두면, 나만의 AI 툴킷이 완성될 것 같습니다.
## 재사용 가능한 프롬프트
### 1. 바이브코딩 시작 프롬프트
```
gpters-w1-practice/vibe-lms.html 경로의 단일 페이지를 구현해야 합니다.
참고 사항:
- 기능 복잡도가 높지 않은 사이트를 지향합니다
- 외부 라이브러리를 설치하지 않은 상태에서 구현해야 합니다
- 단일 html 로만 작성합니다
- LMS 사이트의 디자인 시스템 일관성 준수
- 각 요소의 버튼을 누를 때 인터렉션 효과는 적절히 반영돼야 합니다
참고 이미지: gpters-practice\prompt\w1-lms-image.png
```
### 2. 서브에이전트 생성 프롬프트
```
/subagent-creator 를 이용하여 두 서브 에이전트를 생성합니다
Agent 1: Prompt Pattern Finder
---
name: ax-prompt-finder
description: 프롬프트 개선 패턴을 AX 사례에서 병렬 검색
tools: Read, Grep, Glob
model: haiku
---
현재 프롬프트를 분석해야 합니다.
1. AX 사례에서 비슷한 의도 찾기
2. 실제로 작동한 프롬프트 추출
3. "왜 효과적인가" 설명
---
Agent 2: ax-Case Finder
---
name: ax-case-finder
description: 현재 상황과 비슷한 AX 사례 병렬 검색
tools: Read, Grep, Glob
model: haiku
---
현재 문제를 분석해야 합니다.
1. 키워드로 AX 사례 검색
2. "막혔던 순간과 해결" 매칭
3. 실제 해결 방법 추출
OUTPUT: 사례 참고 1개 (200자)
```
### 3. 병렬 분석 실행 프롬프트
```
gpters-w1-practice\gpters_aicase_ax
해당 경로의 5개의 문서 인사이트를 파악한 다음,
인사이트를 추려내 문서화를 목표합니다.
main-agent 가 전체 문서를 읽고 맥락을 이해합니다.
아래 에이전트를 병렬로 호출하여 내용을 파악합니다.
@agent-ax-case-finder
@agent-ax-prompt-finder
결과값을 다음 경로에 문서화를 해주세요
gpters-w1-practice\agent-review 해당 path 에 적절히 문서화를 해주세요
문서는 각 에이전트 당 1개만 작성합니다.
ax-prompt-finder 의 결과 : ax-prompt-{title}.md 문서
ax-case-finder : ax-case-{title}.md
```
도움 받은 글 (옵션)
## 도움 받은 글
이번 작업은 다음 프롬프트 문서를 참고했습니다:
- `gpters-w1-practice/prompt/w1-step-2-gen-sub-agent.md` - 서브에이전트 생성 가이드
- `gpters-w1-practice/prompt/w1-step3-use-subagent.md` - 서브에이전트 활용 가이드
그리고 분석 대상이 된 5개의 AX 사례 문서:
1. A/B 테스트 해본 적 없는 비개발자가 30분 만에 구현한 팁
2. Airtable Automation을 '사람 개입 없는 운영 자동화'로 재설계
3. 랜딩페이지 이탈하려는 유저 피드백을 AI 바이브로 듣는 방법
4. 바이브코더가 개발자 써먹는 법
5. AI스터디 매출 분석에 필요한 데이터 로직 & 대시보드 구축
---
**🤖 이 글은 Claude Code와 함께 작성되었습니다.**