1주차 미니 사례: 바이브 코딩부터 서브 에이전트 활용까지

1주차 미니 사례: 바이브 코딩부터 서브 에이전트 활용까지

한줄 요약

클로드 코드 입문자가 1주차 실습으로 LMS 사이트 구현, 커스텀 서브 에이전트 2개 생성, 5개 AX 문서에서 12가지 프롬프트 패턴을 추출한 과정

이런 분들께 도움돼요

• 클로드 코드를 처음 시작하는 입문자

• 바이브 코딩으로 빠르게 프로토타입을 만들고 싶은 분

• 커스텀 서브 에이전트를 만들어 반복 작업을 자동화하고 싶은 분

• AI 활용 사례에서 패턴을 찾아 실무에 적용하고 싶은 분

소개: 시도하고자 했던 것과 그 이유

시작 계기

프리랜서 클로드 코드 자동화 스터디 1주차 과제로, 클로드 코드의 기본기를 익히고 실무에 적용할 수 있는 기반을 만들고 싶었습니다.

해결하고 싶었던 문제

1. 바이브 코딩 연습: 단순한 페이지를 빠르게 만드는 법 체득

2. 서브 에이전트 이해: 커스텀 에이전트로 반복 작업을 자동화하는 방법 학습

3. 패턴 추출 자동화: AX 사례 분석을 수동이 아닌 체계적으로 진행

진행 방법: 어떤 도구를 사용했고, 어떻게 활용했나요?

사용한 도구

• Claude Code CLI (Sonnet 4.5)

• 서브 에이전트 프레임워크 (.claude/agents/)

• 단일 HTML 개발 (외부 라이브러리 없음)

Step 1: 바이브 코딩 - LMS 사이트 구현

목표: 참고 이미지만으로 LMS 사이트를 단일 HTML로 구현

프롬프트:

아래 주어진 참고 사항을 바탕으로
gpters-w1-practice/vibe-lms.html 경로의 단일 페이지를 구현해야 합니다.

- 기능 복잡도가 높지 않은 사이트
- 외부 라이브러리 설치 없음
- 단일 html로만 작성
- 디자인 시스템 일관성 준수
- 버튼 클릭 시 인터랙션 효과 반영

참고 이미지: gpters-w1-practice/prompt/w1-lms-image.png

결과:

• 헤더 + 사이드바 + 메인 컨텐츠 레이아웃 구현

• 4개 강의 카드 (썸네일, 진행률, 버튼)

• 필터 버튼, 사이드바 네비게이션 동작

• 노란색(#ffd54f), 오렌지(#ff6b35) 컬러 시스템 적용

소요 시간: 약 30분

Step 2: 서브 에이전트 생성

목표: AX 사례 분석을 위한 2개 커스텀 에이전트 생성

Agent 1: ax-prompt-finder

역할: 프롬프트 개선 패턴을 AX 사례에서 병렬 검색

name: ax-prompt-finder
description: 프롬프트 개선 패턴을 AX 사례에서 병렬 검색
tools: Read, Grep, Glob
model: haiku

시스템 프롬프트:

현재 프롬프트를 분석해야 합니다.
1. AX 사례에서 비슷한 의도 찾기
2. 실제로 작동한 프롬프트 추출
3. "왜 효과적인가" 설명

Agent 2: ax-case-finder

역할: 현재 상황과 비슷한 AX 사례 병렬 검색

name: ax-case-finder
description: 현재 상황과 비슷한 AX 사례 병렬 검색
tools: Read, Grep, Glob
model: haiku

시스템 프롬프트:

현재 문제를 분석해야 합니다.
1. 키워드로 AX 사례 검색
2. "막혔던 순간과 해결" 매칭
3. 실제 해결 방법 추출
OUTPUT: 사례 참고 1개 (200자)

인상 깊었던 점:

커스텀 에이전트를 직접 만들 수 있다는 것 자체가 클로드 코드의 확장성을 체감하는 순간이었습니다.

Step 3: 서브 에이전트로 AX 사례 분석

목표: 5개 AX 문서에서 인사이트를 추출하여 2개 문서로 정리

분석 대상:

1. A/B 테스트 해본 적 없는 비개발자가 30분 만에 구현한 팁

2. Airtable Automation을 '사람 개입 없는 운영 자동화'로 재설계

3. 랜딩페이지 이탈하려는 유저 피드백을 AI 바이브로 듣는 방법

4. 바이브코더가 개발자 써먹는(?) 법

5. AI스터디 매출 분석 데이터 로직 & 대시보드 구축

프롬프트:

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-patterns.md 문서
ax-case-finder : ax-case-solutions.md

결과물:

1. ax-prompt-patterns.md

내용: 12가지 효과적인 프롬프트 패턴 추출

• 상황 설명 + 막연한 질문

• "~해줘" 직접 명령

• 비즈니스 맥락 설명

• 구체적 예시 제시

• 역할 부여(Role-play)

• 학습 목적 명시

• 문제 + 해결책 제시

• 피드백 형식 변경

• 직접 확인 요청

• 반복 실수 문서화

• 흐름 유지 요청

• 문서화 일괄 요청

핵심 인사이트:

비개발자 성공 공식 = 명확한 목적 + 구체적 맥락 + 즉각 피드백

2. ax-case-solutions.md

내용: 5개 사례별 핵심 해결 패턴 (각 200자 요약)

• 사례 1: 모를 땐 막연하게 물어보기 → AI가 옵션 제시

• 사례 2: 명세 먼저 작성 → 구현 요청

• 사례 3: 현상만 말해도 원인 분석 + 해결책

• 사례 4: 학습 목적 명시 → AI가 가이드 역할

• 사례 5: 도메인 로직은 구체적 예시로

공통 막힘 포인트:

1. 개념을 모르는 상태 → "어떤 식으로 해?"

2. 비즈니스 로직 구현 → 구체적 예시 필수

3. 반복되는 에러 → "CLAUDE.md에 추가해줘"

4. AI 출력이 안 맞음 → 즉시 피드백

5. 에러 원인 파악 안 됨 → "직접 봐주면 안돼?"

결과와 배운 점

Before vs After

배운 점

1. 서브 에이전트 개념 이해

핵심 깨달음:

클로드 코드는 단순히 코드 생성 도구가 아니라, 내 업무에 맞춘 AI 어시스턴트를 만들 수 있는 플랫폼입니다.

실무 적용 아이디어:

• 반복적인 코드 리뷰 → code-reviewer 에이전트

• 문서 요약 작업 → doc-summarizer 에이전트

• 데이터 분석 패턴 → data-analyst 에이전트

2. 프롬프트 패턴의 힘

효과적인 패턴:

❌ "코드 좀 고쳐줘"
✅ "15기 결제인데 참여기수에 14가 있으면 직전기수고, 15가 첫 번째면 신규야"
   (구체적 예시 제시)

❌ "분석해줘"
✅ "ultrathink 너가 마케터라고 생각하고 지표를 기획해줘"
   (역할 부여)

3. 문서화의 중요성

• 인사이트를 체계적으로 정리하니 재사용 가능한 지식이 됨

• 프롬프트 템플릿으로 다른 상황에도 적용 가능

• 팀원들과 공유하여 집단 학습 효과

결과물 요약

📂 gpters-w1-practice/
├── vibe-lms.html                    # LMS 사이트
├── .claude/agents/
│   ├── ax-prompt-finder.md         # 프롬프트 패턴 분석 에이전트
│   └── ax-case-finder.md           # 사례 해결 분석 에이전트
└── agent-review/
    ├── ax-prompt-patterns.md       # 12가지 프롬프트 패턴
    └── ax-case-solutions.md        # 5가지 해결 사례

재사용 가능한 프롬프트

1. 바이브 코딩 프롬프트

아래 주어진 참고 사항을 바탕으로 [경로]의 단일 페이지를 구현해야 합니다.

- 기능 복잡도가 높지 않은 사이트
- 외부 라이브러리 설치 없음
- 단일 html로만 작성
- 디자인 시스템 일관성 준수

참고 이미지: [이미지 경로]

2. 서브 에이전트 생성 프롬프트

/subagent-creator 를 이용하여 [N]개의 서브 에이전트를 생성합니다

Agent 1: [에이전트 이름]
---
name: [agent-name]
description: [언제 사용하는지 설명]
tools: [필요한 도구들]
model: haiku
---

[에이전트가 수행할 작업]
1. [작업 1]
2. [작업 2]
3. [작업 3]

3. 문서 분석 프롬프트

[경로]의 [N]개의 문서 인사이트를 파악한 다음,
인사이트를 추려내 문서화를 목표합니다.

main-agent 가 전체 문서를 읽고 맥락을 이해합니다.
아래 에이전트를 병렬로 호출하여 내용을 파악합니다.

@agent-[에이전트1]
@agent-[에이전트2]

결과값을 [출력 경로]에 문서화를 해주세요

4. 효과적인 프롬프트 패턴 (AX 사례에서 추출)

탐색 단계

[하고 싶은 것]을 하고 싶은데 보통 어떤 식으로 해?

구체적 예시 제공

[기능]을 구현해줘. [비즈니스 맥락 설명]
예를 들어 [구체적 예시]

역할 기반 협업

ultrathink 너가 [역할]라고 생각하고 [결과물] 기획해줘

재발 방지

이거 왜 자꾸 반복해서 실수해?
다시 실수 안 하게 CLAUDE.md에 추가해줘

향후 계획

단기 (2주차)

• 더 복잡한 자동화 스크립트 작성

• 서브 에이전트 고도화 (tools 추가, 프롬프트 개선)

• 12가지 프롬프트 패턴을 실제 작업에 적용

장기 (실무 적용)

• 반복 작업 자동화: 코드 리뷰, 문서 요약, 데이터 분석용 커스텀 에이전트 생성

• 팀 공유: 추출한 프롬프트 패턴을 팀 위키에 등록하여 집단 학습

• 지식 자산화: 매주 배운 내용을 체계적으로 문서화하여 재사용 가능한 템플릿 구축

도움 받은 글

참고한 AX 사례 (5개)

1. A/B 테스트 해본 적 없는 비개발자가 30분 만에 구현한 팁

2. Airtable Automation을 '사람 개입 없는 운영 자동화'로 재설계

3. 랜딩페이지 이탈하려는 유저 피드백을 AI 바이브로 듣는 방법

4. 바이브코더가 개발자 써먹는(?) 법

5. AI스터디 매출 분석 데이터 로직 & 대시보드 구축

서브 에이전트 참고 문서

• 서브 에이전트 생성 가이드

• Available Tools 목록

작성 날짜: 2026-01-13 스터디: 프리랜서 클로드 코드 자동화 스터디 1주차 소요 시간: 약 3시간 (바이브 코딩 30분 + 에이전트 생성 30분 + 문서 분석 2시간)