한줄 요약
스터디장이 준 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로 구현해야 했습니다.
진행 과정:
참고 이미지 분석 (w1-lms-image.png)
디자인 요소 파악 (헤더, 사이드바, 강의 카드 그리드)
색상 체계 정의 (노란색 CTA, 주황색 포인트)
vibe-lms.html 파일 생성 및 구현
결과물:
강의 카드 8개가 포함된 완전한 LMS 페이지
필터링 기능 (전체보기/학습중/즐겨찾기/시작안함)
진행률 표시 바
반응형 그리드 레이아웃
2단계: 서브에이전트 생성
상황: /subagent-creator 스킬을 사용하여 2개의 전문 분석 에이전트를 만들어야 했습니다.
ax-prompt-finder 에이전트:
name: ax-prompt-finder
description: 프롬프트 개선 패턴을 AX 사례에서 병렬 검색
tools: Read, Grep, Glob
model: haiku
역할:
현재 프롬프트 분석
AX 사례에서 비슷한 의도 찾기
실제로 작동한 프롬프트 추출
효과성 설명
ax-case-finder 에이전트:
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 경로에 문서화를 해주세요
진행 과정:
Main agent가 5개 AX 사례 문서를 모두 읽음
두 서브에이전트를 병렬로 동시 실행
ax-prompt-finder: 18개의 재사용 가능한 프롬프트 패턴 추출
ax-case-finder: 6가지 핵심 해결 전략 도출
각각 마크다운 문서로 자동 정리
인상 깊었던 순간
서브에이전트 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가지 해결 전략
이 두 문서가 자동으로 생성되었습니다.
결과와 배운 점
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 사례 문서:
A/B 테스트 해본 적 없는 비개발자가 30분 만에 구현한 팁
Airtable Automation을 '사람 개입 없는 운영 자동화'로 재설계
랜딩페이지 이탈하려는 유저 피드백을 AI 바이브로 듣는 방법
바이브코더가 개발자 써먹는 법
AI스터디 매출 분석에 필요한 데이터 로직 & 대시보드 구축
🤖 이 글은 Claude Code와 함께 작성되었습니다.
