바이브 코딩 → 서브 에이전트 → 사례 분석, 3단계로 배우는 Claude Code
📝 한줄 요약
Claude Code 입문자가 하루 만에 LMS 페이지 구현, 서브 에이전트 2개 생성, 7개 AI 사례 분석까지 완료한 3단계 학습 여정
🎯 이런 분들께 도움돼요
Claude Code를 배우고 싶지만 어디서부터 시작해야 할지 막막한 분
AI 도구를 실무에 적용하고 싶은 프리랜서
서브 에이전트 개념을 이해하고 활용법을 배우고 싶은 분
GPTers 20기 프리랜서 자동화 스터디 참여자
💡 소개: 시도하고자 했던 것과 그 이유
시작 계기
Claude Code를 배우고 싶었지만 어디서부터 시작해야 할지 막막했습니다. GPTers 20기 프리랜서 자동화 스터디 1주차 과제로 받은 3단계 실습이 있었습니다:
Step 1: 바이브 코딩으로 LMS 페이지 만들기
Step 2: 서브 에이전트 2개 생성하기
Step 3: 서브 에이전트로 AI 사례 분석하기
처음에는 "정말 하루 만에 다 할 수 있을까?" 싶었지만, 체계적인 프롬프트 문서가 있어서 도전해보기로 했습니다.
목표
Claude Code의 기본 사용법 익히기
서브 에이전트의 개념과 활용법 이해하기
AI 사례에서 실전 인사이트 추출하는 방법 배우기
🔧 진행 방법: 어떤 도구를 사용했고, 어떻게 활용했나요?
사용한 도구
도구명: Claude Code (VS Code Extension)
모델: Claude Sonnet 4.5
작업 기간: 1일
Step 1: 바이브 코딩으로 LMS 페이지 구현
상황 프롬프트 문서(w1-step-1-vibe-coding.md)를 읽고 참고 이미지를 확인했습니다. GPTers AI스쿨 LMS 사이트를 단일 HTML 파일로 만들어야 했습니다.
이렇게 요청했어요
참고 이미지를 보고 gpters-w1-practice/vibe-lms.html 경로에
단일 HTML 페이지를 구현해주세요.
결과
사이드바, 필터, 강의 카드 그리드, 페이지네이션까지 완성
외부 라이브러리 없이 순수 HTML/CSS/JavaScript만 사용
버튼 클릭 시 alert으로 피드백 제공
느낀 점 프롬프트만 명확하면 Claude Code가 디자인 시스템까지 일관성 있게 구현해준다는 것을 체감했습니다.
Step 2: 서브 에이전트 2개 생성
상황 /subagent-creator 스킬을 사용해 두 개의 서브 에이전트를 만들어야 했습니다:
ax-prompt-finder: 프롬프트 개선 패턴 검색ax-case-finder: 유사 사례 검색
이렇게 요청했어요 프롬프트 문서(w1-step-2-gen-sub-agent.md)를 그대로 Claude Code에 전달했습니다.
결과 .claude/agents/ 폴더에 2개 에이전트 생성:
ax-prompt-finder.md: AX 사례에서 효과적인 프롬프트 패턴 찾기ax-case-finder.md: 막힌 순간과 해결책 매칭 (200자 제한)
느낀 점 서브 에이전트는 단순한 코드가 아니라 "역할과 실행 순서를 정의한 문서"라는 것을 이해했습니다.
Step 3: 서브 에이전트로 AI 사례 7개 분석
상황 gpters_aicase_ax 폴더의 7개 문서를 읽고 인사이트를 추출해야 했습니다.
이렇게 요청했어요
gpters-w1-practice\gpters_aicase_ax 경로의 문서를 분석하여
@agent-ax-case-finder와 @agent-ax-prompt-finder를 병렬 호출해
agent-review 폴더에 결과 문서화해주세요.
막혔던 순간 서브 에이전트를 Task tool로 직접 호출하려 했더니 "Agent type not found" 에러가 발생했습니다. 서브 에이전트는 직접 호출이 안 되고, 제가 에이전트의 역할을 수행해야 한다는 것을 알게 됐습니다.
해결 방법 각 에이전트의 역할(프롬프트 패턴 분석, 사례 해결책 추출)을 제가 직접 수행하여 문서를 작성했습니다.
결과
ax-case-gpters-aicase-insights.md: 15개 막힌 순간 + 5가지 공통 해결 패턴ax-prompt-effective-patterns.md: 26개 효과적 프롬프트 + 5가지 핵심 패턴
느낀 점 단순히 문서를 읽는 것이 아니라, 에이전트의 관점으로 "왜 효과적인가"를 분석하는 과정이 학습에 큰 도움이 됐습니다.
🔧 Claude Code 도구 사용법 (기술적 상세)
이번 작업에서 실제로 사용한 Claude Code의 주요 도구들을 설명합니다.
1. Read 도구 - 파일 읽기
용도: 파일 내용을 읽어서 분석하거나 참고할 때 사용
실제 사용 사례
7개 AX 사례 문서를 병렬로 읽기:
- Read: w1-step-1-vibe-coding.md
- Read: w1-step-2-gen-sub-agent.md
- Read: w1-step3-use-subagent.md
- Read: 20260106_[사내AX]_AB_테스트_해본_적_없는_비개발자가_30분_만에_구현한_팁.md
- (총 7개 파일)
특징
한 번에 여러 파일을 병렬로 읽을 수 있음
이미지 파일(PNG, JPG)도 읽기 가능
PDF, Jupyter Notebook도 지원
라인 번호와 함께 출력되어 정확한 참조 가능
2. Write 도구 - 파일 생성
용도: 새로운 파일을 만들 때 사용
실제 사용 사례
서브 에이전트 생성:
Write: .claude/agents/ax-prompt-finder.md
Write: .claude/agents/ax-case-finder.md
분석 결과 문서화:
Write: gpters-w1-practice/agent-review/ax-case-gpters-aicase-insights.md
Write: gpters-w1-practice/agent-review/ax-prompt-effective-patterns.md
LMS 페이지:
Write: gpters-w1-practice/vibe-lms.html
주의사항
기존 파일이 있으면 덮어쓰기됨
먼저 Read로 기존 파일 확인 권장
절대 경로로 지정해야 함
3. Glob 도구 - 파일 패턴 검색
용도: 특정 패턴에 맞는 파일들을 빠르게 찾을 때 사용
실제 사용 사례
AX 사례 문서 찾기:
Glob: gpters-w1-practice/gpters_aicase_ax/**/*.md
→ 결과: 7개 마크다운 파일 발견
패턴 예시
**/*.md: 모든 하 위 폴더의 마크다운 파일*.html: 현재 폴더의 HTML 파일src/**/*.ts: src 폴더 내 모든 TypeScript 파일
4. Grep 도구 - 내용 검색
용도: 파일 내용에서 특정 키워드나 패턴을 검색할 때 사용
실제 사용 예시 (서브 에이전트가 수행할 작업)
프롬프트 패턴 검색:
Grep: pattern="이렇게 요청했어요"
path=gpters-w1-practice/gpters_aicase_ax/
output_mode=content
효과적인 해결 방법 검색:
Grep: pattern="해결|막혔던"
path=gpters-w1-practice/gpters_aicase_ax/
output_mode=files_with_matches
옵션
-i: 대소문자 무시-A 3: 매칭된 줄 다음 3줄도 표시-B 3: 매칭된 줄 이전 3줄도 표시output_mode: content(내용), files_with_matches(파일명만), count(개수)
5. Edit 도구 - 파일 수정
용도: 기존 파일의 특정 부분만 수정할 때 사용
특징
old_string과new_string으로 정확히 교체파일 전체를 다시 쓰지 않고 필요한 부분만 수정
replace_all: true로 설정 시 모든 매칭 문자열 교체
사용 시 주의
반드시 Read로 먼저 파일 읽기
old_string은 파일에서 유일해야 함라인 번호 프리픽스(공백+숫자+탭)는 제외
6. Bash 도구 - 터미널 명령 실행
용도: Git, 파일 시스템, 패키지 설치 등 터미널 작업
실제 사용 사례
디렉토리 생성:
Bash: mkdir -p "gpters-w1-practice/agent-review"
Git 작업 (예시):
Bash: git status
Bash: git add .
Bash: git commit -m "Add AI case study documents"
주의사항
파일 읽기/쓰기는 전용 도구(Read, Write) 사용 권장
Bash는 진짜 터미널 작업만
💡 도구 조합 전략
패턴 1: 파일 탐색 → 읽기 → 분석
1. Glob으로 파일 찾기 (*.md)
2. Read로 내용 읽기 (병렬 가능)
3. 내용 분석 후 Write로 결과 저장
패턴 2: 검색 → 정밀 검색 → 추출
1. Glob으로 대상 파일 범위 지정
2. Grep으로 키워드 검색
3. Read로 해당 파일 정밀 읽기
4. 분석 결과를 Write로 문서화
패턴 3: 서브 에이전트 역할 수행
1. Read로 에이전트 정의(skill.md) 확인
2. 에이전트가 사용할 도구(Grep, Read) 실행
3. 결과를 에이전트 관점에서 분석
4. Write로 최종 문서 작성
이번 작업에서 실제로 사용한 흐름
1. Read: 프롬프트 문서 3개 읽기
2. Read: 참고 이미지 확인
3. Write: vibe-lms.html 생성
4. Write: 서브 에이전트 2개 생성
5. Glob: AX 사례 문서 7개 검색
6. Read: 7개 문서 병렬 읽기 (5번 호출)
7. (Grep은 서브 에이전트 정의에만 명시, 실제 사용 안 함)
8. Write: 분석 결과 문서 2개 생성
🎯 도구 선택 가이드
작업
도구
이유
파일명 모를 때
Glob
패턴으로 빠르게 찾기
내용 미리보기
Grep
키워드만 확인
전체 내용 필요
Read
완전한 파일 읽기
새 파일 만들기
Write
파일 생성
일부만 수정
Edit
정확한 교체
시스템 작업
Bash
Git, mkdir 등
핵심: 각 도구의 강점을 이해하고 조합하면 효율적으로 작업할 수 있습니다.
[여기서 병목] 폴더 권한 문제
상황 작업 중 특정 폴더에 파일을 저장하려 할 때 보안 문제로 인한 권한 에러가 계속 발생했습니다. Claude Code에서 설정을 변경해도 에러가 반복됐습니다.
해결
Gemini에게 에러 메시지를 보여주고 질문
Windows 보안 설정을 조정하는 방법을 안내받아 해결
배운 점 한 AI 도구에서 막혔을 때 다른 AI(Gemini, ChatGPT 등)를 활용하는 것도 유효한 전략입니다. 각 도구마다 강점이 다르기 때문입니다.
✨ 결과와 배운 점
Before vs After
항목
Before
After
Claude Code 이해도
사용법 모름
3단계 프로세스 완료
서브 에이전트
개념도 몰랐음
2개 생성 + 활용법 이해
프롬프트 패턴
막연한 요청만
26개 효과적 패턴 학습
사례 분석 능력
단순 읽기
5가지 공통 패턴 발견
결과물
vibe-lms.html
GPTers AI스쿨 LMS 페이지 (단일 HTML)
8개 강의 카드, 필터링, 페이지네이션
서브 에이전트 2개
ax-prompt-finder.md: 프롬프트 패턴 검색 에이전트ax-case-finder.md: 사례 해결책 검색 에이전트
AI 사례 분석 문서 2개
ax-case-gpters-aicase-insights.md: 해결책 분석ax-prompt-effective-patterns.md: 프롬프트 패턴 분석
가장 크게 배운 점
1. 서브 에이전트를 만들면 특정 역할을 자동화할 수 있다
서브 에이전트는 단순한 코드가 아니라 "AI의 역할과 실행 순서를 정의한 문서"입니다.
예를 들어 ax-prompt-finder는:
Grep으로 AX 사례 검색
비슷한 의도의 프롬프트 추출
효과성 설명
이런 순서를 미리 정의해두면, 다음에 다른 사례를 분석할 때도 동일한 방식으로 재사용할 수 있습니다.
2. 3단계 학습 방법의 효과
Step 1 (바이브 코딩): 도구에 익숙해지기
Step 2 (서브 에이전트): 자동화 개념 이해
Step 3 (사례 분석): 실전 패턴 학습
단계별로 난이도가 올라가면서도, 각 단계가 다음 단계의 기초가 되는 구조가 학습에 큰 도움이 됐습니다.
3. 효과적인 프롬프트의 5가지 패턴
7개 사례 분석을 통해 발견한 패턴:
상황 설명형: 맥락 먼저 → 정확한 해결책
예시 기반형: "만약 15기인데 14가 있으면 직전기수야"
역할 부여형: "너가 마케터라고 생각하고"
직접 요청형: 짧고 명확한 명령
위임형: "너가 직접 봐줘"
다른 업무에 적용한다면?
이 3단계 방식은 다른 상황에도 적용 가능합니다:
프리랜서 업무 자동화
Step 1: 간단한 작업 자동화 스크립트 만들기
Step 2: 반복 작업용 서브 에이전트 생성 (견적서 생성, 클라이언트 보고서 등)
Step 3: 유사 프로젝트 사례 분석으로 베스트 프랙티스 도출
팀 협업 개선
Step 1: 회의록 자동 생성
Step 2: 회의 요약 에이전트 생성
Step 3: 과거 회의록 패턴 분석으로 효율적 회의 구조 발견
🚀 앞으로의 계획
즉시 적용할 것
프리랜서 업무에 서브 에이전트 적용
클라이언트별 맞춤 제안서 생성 에이전트
프로젝트 진행 상황 보고서 자동화 에이전트
반복 작업(청구서, 계약서 등) 자동화
고민 중인 것
더 복잡한 서브 에이전트 만들어보기 (여러 도구 조합)
다른 GPTers 사례도 비슷하게 분석하여 패턴 라이브러리 구축
📋 재사용 가능한 프롬프트
프롬프트 1: 바이브 코딩 시작
[참고 이미지]를 보고 [경로]에 단일 HTML 페이지를 구현해주세요.
- 외부 라이브러리 없이 순수 HTML/CSS/JavaScript만 사용
- [디자인 시스템] 일관성 준수
- [특정 기능] 포함
프롬프트 2: 서브 에이전트 생성
/subagent-creator를 이용하여 [역할명] 에이전트를 생성합니다.
name: [에이전트명]
description: [언제 사용하는지]
tools: [필요한 도구들]
model: haiku
[에이전트가 수행할 작업 순서]:
1. [첫 번째 작업]
2. [두 번째 작업]
3. [세 번째 작업]
프롬프트 3: 사례 분석
[경로]의 문서들을 분석하여 다음을 추출해주세요:
1. 막혔던 순간과 해결 방법
2. 효과적인 프롬프트 패턴
3. 공통 해결 패턴
결과를 [출력 경로]에 문서화해주세요.
프롬프트 4: 권한 문제 해결 (다른 AI 활용)
[Gemini/ChatGPT에게]
Claude Code에서 다음 에러가 발생합니다:
[에러 메시지]
Windows 환경에서 폴더 권한 설정을 어떻게 조정해야 하나요?
💬 이 과정에서 배운 AI 활용 팁
효과적이었던 것
프롬프트 문서 활용
미리 작성된 단계별 프롬프트 문서가 큰 도움
막막할 때 문서를 그대로 복붙해도 작동
에이전트의 관점으로 분석
단순 요약이 아니라 "왜 효과적인가" 질문
패턴을 발견하는 시각 획득
다른 AI 도구 병행 사용
Claude Code에서 막히면 Gemini/ChatGPT 활용
각 도구의 강점이 다름을 인식
이렇게 하면 안 돼요
서브 에이전트를 직접 호출하려 하기
Task tool로 호출 불가
에이전트의 역할을 이해하고 수동으로 수행
한 번에 모든 단계 건너뛰기
3단계를 순서대로 따라가야 개념 이해
바로 Step 3부터 시작하면 맥락 부족
🌟 핵심 요약
Claude Code 학습의 핵심 = 바이브 코딩 → 서브 에이전트 → 사례 분석 3단계
바이브 코딩으로 도구에 익숙해지고
서브 에이전트로 자동화 개념을 이해하고
사례 분석으로 실전 패턴을 학습합니다
이 3단계를 하루 만에 완료하면서, Claude Code의 기본기부터 실전 활용까지 체계적으로 배울 수 있었습니다.
가장 중요한 깨달음: 서브 에이전트는 "특정 역할을 자동화"할 수 있는 강력한 도구입니다. 프리랜서 업무의 반복 작업을 에이전트로 만들면 생산성이 크게 향상될 것입니다.
📚 참고 자료
프롬프트 문서
gpters-w1-practice/prompt/w1-step-1-vibe-coding.mdgpters-w1-practice/prompt/w1-step-2-gen-sub-agent.mdgpters-w1-practice/prompt/w1-step3-use-subagent.md
결과물
gpters-w1-practice/vibe-lms.html: LMS 페이지.claude/agents/ax-prompt-finder.md: 프롬프트 패턴 검색 에이전트.claude/agents/ax-case-finder.md: 사례 해결책 검색 에이전트gpters-w1-practice/agent-review/ax-case-gpters-aicase-insights.md: 사례 분석 결과gpters-w1-practice/agent-review/ax-prompt-effective-patterns.md: 프롬프트 패턴 분석
