## 한줄 요약
Claude Code로 LMS 사이트를 바이브코딩하고, 커스텀 서브에이전트 2개를 만들어 5개 AX 사례를 분석한 첫 실습 경험
---
## 이런 분들께 도움돼요
- Claude Code를 처음 접하고 실습하고 싶은 분
- 바이브코딩이 실제로 어떻게 작동하는지 궁금한 분
- 서브에이전트를 직접 만들어보고 싶은 비개발자
- gpters 자동화 스터디에 참여 중이거나 관심 있는 분
---
## 소개: 시도하고자 했던 것과 그 이유
### 시작 계기
바이브코딩과 서브에이전트 개념을 실제로 적용해보고 싶었습니다.
gpters 20기 프리랜서 자동화 스터디 1주차 과제는 3단계로 구성되어 있었어요:
1. **바이브코딩**: LMS 사이트 단일 HTML 페이지 구현
2. **서브에이전트 생성**: AX 사례 분석용 에이전트 2개 만들기
3. **서브에이전트 활용**: 실제 문서 분석하기
이론으로만 알던 것들을 직접 해보면서 감을 잡고 싶었습니다.
### 과제 요구사항
**Step 1: 바이브코딩 (LMS 사이트)**
- 단일 HTML 파일로만 작성
- 외부 라이브러리 설치 없음
- 참고 이미지 기반 디자인
- 인터랙티브 요소 포함
**Step 2: 서브에이전트 생성**
- ax-prompt-finder: 프롬프트 개선 패턴 검색
- ax-case-finder: 유사 AX 사례 검색
**Step 3: 서브에이전트 활용**
- 5개 AX 문서 분석
- 인사이트 추출 및 문서화
---
## 진행 방법: 어떤 도구를 사용했고, 어떻게 활용했나요?
### 사용한 도구
- **도구명**: Claude Code (CLI)
- **모델**: Claude Sonnet 4.5
- **특이사항**: 바이브코딩 + 서브에이전트 기능 실습
---
### Step 1: 바이브코딩으로 LMS 사이트 만들기
**요청 프롬프트:**
```
참고 이미지를 바탕으로 gpters-w1-practice/vibe-lms.html 경로에
단일 페이지를 구현해야 합니다.
- 기능 복잡도가 높지 않은 사이트
- 외부 라이브러리 설치 없음
- 단일 html로만 작성
- 인터랙티브 효과 포함
```
**결과:**
- 참고 이미지를 읽고 분석
- 30분 만에 완성된 LMS 사이트
- 사이드바, 강의 카드 그리드, 필터링, 페이지네이션 모두 구현
- 순수 HTML/CSS/JavaScript만 사용
![LMS 사이트 완성 화면 - 좌측 사이드바, 중앙 강의 카드 그리드, 상단 필터 섹션]
**인상적이었던 점:**
- 이미지만 보여줬는데 디자인 의도까지 파악
- 8개 강의 카드에 각각 다른 그라데이션 배경 적용
- 버튼 클릭 시 인터랙션 자동 구현
---
### Step 2: 커스텀 서브에이전트 2개 생성
**ax-prompt-finder (프롬프트 패턴 검색)**
```markdown
---
name: ax-prompt-finder
description: 프롬프트 개선 패턴을 AX 사례에서 병렬 검색
tools: Read, Grep, Glob
model: haiku
---
당신은 프롬프트 개선 패턴 분석 전문가입니다.
## 호출 시 수행할 작업
1. 현재 프롬프트 분석
2. AX 사례에서 비슷한 의도의 프롬프트 검색
3. 효과적인 패턴 추출
4. 개선 방안 제시
```
**ax-case-finder (사례 검색)**
```markdown
---
name: ax-case-finder
description: 현재 상황과 비슷한 AX 사례를 병렬 검색
tools: Read, Grep, Glob
model: haiku
---
당신은 AX 사례 검색 전문가입니다.
## 호출 시 수행할 작업
1. 현재 문제 분석
2. 키워드 추출
3. AX 사례 병렬 검색
4. "막혔던 순간"과 "해결 방법" 매칭
OUTPUT: 사례 참고 1개 (200자 이내)
```
**생성 과정:**
1. /subagent-creator 스킬 호출
2. YAML frontmatter + 시스템 프롬프트 작성
3. .claude/agents/ 경로에 저장
---
### Step 3: 서브에이전트로 AX 사례 분석 (막힌 순간)
**시도한 방법:**
```
Task 도구로 서브에이전트 병렬 호출
```
**결과:**
```
Agent type 'ax-case-finder' not found.
Agent type 'ax-prompt-finder' not found.
```
**문제 원인:**
- 서브에이전트를 만들었지만 시스템에 즉시 등록되지 않음
- Task 도구는 이미 등록된 에이전트만 호출 가능
**해결 방법:**
- 서브에이전트 대신 직접 분석 진행
- 5개 AX 문서를 모두 읽고 수동으로 패턴 추출
---
### 실제 분석 과정
**1단계: 5개 AX 문서 읽기**
```
- A/B 테스트 구현 (비개발자가 30분만에)
- Airtable Automation 재설계
- 랜딩 페이지 이탈 피드백 (Voiceform)
- 바이브코더-개발자 협업 루프
- 매출 대시보드 구축 (Airtable 연동)
```
**2단계: 두 가지 관점으로 인사이트 추출**
1. **막힌 순간과 해결 패턴** (ax-case 관점)
- 15개 막힌 순간 추출
- 각 상황별 해결 방법 정리
- 공통 패턴 8가지로 분류
2. **효과적인 프롬프트 패턴** (ax-prompt 관점)
- 23개 프롬프트 패턴 추출
- 6단계로 분류 (탐색/설계/구현/디버깅/개선/학습)
- 재사용 가능한 템플릿 정리
**3단계: 문서화**
- ax-case-gpters-aicase-insights.md (막힌 순간과 해결)
- ax-prompt-gpters-aicase-insights.md (프롬프트 패턴)
![분석 결과 문서 - 패턴 분류 테이블과 재사용 템플릿]
---
## 결과와 배운 점
### Before vs After
| 항목 | Before | After |
|------|--------|-------|
| 바이브코딩 이해 | 개념만 앎 | 직접 실습 완료 |
| 서브에이전트 | 만들어본 적 없음 | 2개 생성 완료 |
| AX 패턴 분석 | 산발적 이해 | 체계적 문서화 |
| 실전 문제해결 | - | 에이전트 미등록 시 우회 |
### 결과물
1. **LMS 사이트** (`gpters-w1-practice/vibe-lms.html`)
- 단일 HTML, 외부 라이브러리 없음
- 8개 강의 카드, 필터링, 페이지네이션
- 순수 JavaScript 인터랙션
2. **커스텀 서브에이전트 2개** (`.claude/agents/`)
- ax-prompt-finder.md
- ax-case-finder.md
3. **AX 인사이트 문서 2개** (`gpters-w1-practice/agent-review/`)
- ax-case-gpters-aicase-insights.md - 15개 막힌 순간 + 해결 패턴
- ax-prompt-gpters-aicase-insights.md - 23개 프롬프트 패턴
### 배운 점
#### 1. 바이브코딩은 정말 빠르다
참고 이미지만 주면 30분 만에 완성도 높은 결과물이 나옵니다. 디자인 의도까지 파악해서 세부 사항을 채워줘요.
#### 2. 서브에이전트 구조 이해
```
YAML frontmatter (메타데이터)
+
시스템 프롬프트 (역할 정의)
=
커스텀 AI 에이전트
```
#### 3. AI도 제약이 있다
서브에이전트를 만들었다고 바로 호출되는 게 아니었어요. 시스템 등록 과정이 필요하다는 걸 배웠습니다.
#### 4. 우회 방법도 해결책
에이전트가 안 되면 직접 분석하면 됩니다. 오히려 더 세밀하게 작업할 수 있었어요.
#### 5. 패턴 추출의 가치
- 5개 사례에서 23개 재사용 가능한 프롬프트 패턴 발견
- "도메인 로직은 예시 필수" 같은 실용적 원칙 정리
- 다음 작업 시 참고 자료로 활용 가능
---
## 재사용 가능한 프롬프트
### 1. 바이브코딩 시작
```
참고 이미지를 바탕으로 [경로]에 [설명]을 구현해주세요.
- 단일 HTML로만 작성
- 외부 라이브러리 없음
- [특정 요구사항]
```
### 2. 서브에이전트 생성 요청
```
/subagent-creator를 이용하여 [에이전트명] 서브에이전트를 생성합니다.
---
name: [에이전트명]
description: [언제 사용하는지]
tools: [사용할 도구들]
model: haiku
---
[역할 정의 및 수행 작업]
```
### 3. 문서 분석 + 인사이트 추출
```
[경로]의 [N]개 문서를 분석하여 [관점]으로 인사이트를 추출해주세요.
각 문서에서:
- [추출 대상 1]
- [추출 대상 2]
- [추출 대상 3]
결과를 [경로]에 [형식]으로 문서화해주세요.
```
### 4. 패턴 분류 및 정리
```
[N]개 사례에서 공통 패턴을 찾아 분류하고,
재사용 가능한 템플릿으로 정리해주세요.
```
---
## 다음 단계
### 향후 계획
1. **서브에이전트 실전 활용**
- 생성한 에이전트를 실제 프로젝트에 적용
- 다른 유형의 서브에이전트 추가 제작
2. **패턴 라이브러리 구축**
- 분석한 프롬프트 패턴을 개인 라이브러리로 정리
- 팀원들과 공유
3. **바이브코딩 확장**
- 더 복잡한 기능이 있는 페이지 도전
- 실제 서비스에 적용 가능한 수준으로 발전
### 다른 분들께 추천
**이런 분들께 추천합니다:**
- 바이브코딩을 책으로만 보신 분 → 직접 해보세요!
- 서브에이전트가 뭔지 궁금한 분 → 만들어보면 이해됩니다
- AX 사례를 정리하고 싶은 분 → 이 방식 참고하세요
**시작하는 법:**
1. 참고 이미지나 간단한 요구사항 준비
2. Claude Code에 바이브코딩 요청
3. 서브에이전트 만들어보기 (에러도 배움)
4. 실제 문서 분석하며 인사이트 추출
---
## 도움 받은 글
- [gpters 20기 프리랜서 자동화 스터디](https://www.gpters.org)
- .claude/skills/subagent-creator - 서브에이전트 생성 가이드
- gpters-w1-practice/gpters_aicase_ax/ - 5개 AX 사례 문서
---
## 마치며
처음엔 "서브에이전트가 뭐지?"였는데, 직접 만들고 활용(시도)해보니 개념이 확실히 잡혔습니다.
에이전트 호출은 실패했 지만, 그 과정에서 직접 분석하며 오히려 더 깊이 이해할 수 있었어요. 실패도 학습의 일부라는 걸 다시 한번 느꼈습니다.
1주차 과제를 통해:
- 바이브코딩의 속도를 체감했고
- 서브에이전트 구조를 이해했으며
- AX 사례에서 재사용 가능한 23개 패턴을 추출했습니다
다음 주차가 기대됩니다! 🚀
