한줄 요약
클로드 코드 입문자가 바이브코딩으로 LMS 페이지를 만들고, 서브에이전트를 생성하여 7개 AX 사례에서 프롬프트 패턴과 문제해결 인사이트를 추출했습니다.
이런 분들께 도움돼요
클로드 코드를 처음 사용해보고 싶은 비개발자
바이브코딩과 서브에이전트 활용을 동시에 배우고 싶은 분
GPTers AX 사례에서 프롬프트 패턴을 배우고 싶은 분
소개: 시도하고자 했던 것과 그 이유
문제 상황 (Before)
클로드 코드를 처음 접하면서 어디서부터 시작해야 할지 막막했습니다. 바이브코딩이 뭔지, 서브에이전트는 어떻게 만드는지, 실제로 어떻게 활용할 수 있는지 감이 오지 않았습니다.
시작하게 된 계기
프리랜서 클코 자동화 스터디에 참여하면서, 바이브코딩과 서브에이전트 활용을 동시에 연습하고 싶었습니다. 단순히 이론만 배우는 것이 아니라, 실제로 3단계 실습을 통해 클로드 코드의 다양한 기능을 체험하고자 했습니다.
진행 방법: 어떤 도구를 사용했고, 어떻게 활용했나요?
사용한 도구
도구명: Claude Code (VSCode Extension)
모델: Claude Opus 4.5
특이사항: 클로드 코드 입문자로서 3단계 실습 진행
AI와 협업한 과정
Step 1: 바이브코딩으로 LMS 페이지 만들기
상황: 참고 이미지만 보고 GPTers AIFFEL LMS 페이지를 단일 HTML로 구현해야 했습니다.
이렇게 요청했어요:
아래 주어진 참고 사항을 바탕으로 gpters-w1-practice/vibe-lms.html 경로의 단일 페이지를 구현해야 합니다.
참고 사항:
기능 복잡도가 높지 않은 사이트
외부 라이브러리 없이 단일 html로만 작성
LMS 사이트의 디자인 시스템 일관성 준수
버튼 클릭 시 인터랙션 효과 반영
참고 이미지: gpters-w1-practice/prompt/w1-lms-image.png
결과:
헤더, 사이드바, 메인 컨텐츠(8개 강의 카드 그리드) 완성
사이드바 메뉴 활성화, 필터 버튼, 강의 입장/즐겨찾기 인터랙션 구현
노란색(#ffeb3b), 파란색(#4285f4) 디자인 시스템 일관성 유지
느낀 점: 이미지 하나만 보여줬는데 전체 페이지가 바로 만들어지는 게 신기했습니다.
Step 2: 서브에이전트 생성하기
상황: AX 사례 분석을 위해 역할이 분리된 두 개의 에이전트를 만들어야 했습니다.
이렇게 요청했어요:
/subagent-creator 를 이용하여 두 서브 에이전트를 생성합니다
Agent 1: ax-prompt-finder
프롬프트 개선 패턴을 AX 사례에서 병렬 검색
tools: Read, Grep / model: haiku
Agent 2: ax-case-finder
현재 상황과 비슷한 AX 사례 병렬 검색
tools: Read, Grep / model: haiku
결과:
.claude/agents/폴더에 두 개의 에이전트 파일 생성각 에이전트가 명확한 역할과 분석 프로세스 보유
느낀 점: 서브에이전트 설정 파일만 만들면 역할이 분리되는 것이 인상적이었습니다. MD 파일 하나로 AI의 역할을 정의할 수 있다는 게 놀라웠어요.
Step 3: 서브에이전트로 AX 사례 분석하기
상황: 7개의 GPTers AX 사례 문서에서 인사이트를 추출하고 문서화해야 했습니다.
이렇게 요청했어요:
gpters-w1-practice/gpters_aicase_ax 경로의 7개 문서 인사이트를 파악한 다음, 인사이트를 추려내 문서화를 목표합니다.
main-agent가 전체 문서를 읽고 맥락을 이해합니다. 아래 에이전트를 병렬로 호출하여 내용을 파악합니다.
@agent-ax-case-finder
@agent-ax-prompt-finder
결과값을 gpters-w1-practice/agent-review 경로에 문서화해주세요.
결과:
ax-prompt-effective-patterns.md: 10가지 효과적인 프롬프트 패턴 추출
ax-case-problem-solving.md: 7개 사례의 문제-해결 패턴 분석
분석된 AX 사례 (7개):
A/B 테스트 - 비개발자 30분 구현
Airtable Automation - 사람 개입 없는 자동화
랜딩페이지 이탈 피드백 - Exit Intent + Voiceform
바이브코더 개발자 협업 - 학습 루프
매출 대시보드 - Airtable 연동
상세페이지 자동화 - Claude Code 스킬
사례글 자동화 - /devlog, /ai-case 커맨드
인상적이었던 순간
"오!" 했던 순간: 서브에이전트 설정 파일만 만들면 역할이 분리되는 것을 봤을 때입니다. 복잡한 코드 없이 MD 파일 하나로 AI에게 특정 역할을 부여하고, 병렬로 작업을 진행할 수 있다는 점이 놀라웠습니다.
결과와 배운 점
Before vs After
항목
Before
After
클로드 코드 경험
전혀 없음
3단계 실습 완료
바이브코딩 이해도
개념만 알음
직접 LMS 페이지 구현
서브에이전트 활용
모름
2개 에이전트 생성 및 활용
AX 사례 인사이트
없음
10개 패턴 + 7개 해결 사례 문서화
결과물
vibe-lms.html: GPTers AIFFEL LMS 페이지 (단일 HTML)
ax-prompt-finder.md: 프롬프트 패턴 분석 에이전트
ax-case-finder.md: 문제해결 사례 분석 에이전트
ax-prompt-effective-patterns.md: 프롬프트 패턴 분석 결과
ax-case-problem-solving.md: 문제해결 패턴 분석 결과
배운 점과 나만의 꿀팁
효과적이었던 것
참고 이미지와 함께 요청하기 - 텍스트 설명보다 이미지가 더 명확한 결과를 만듦
에이전트 역할을 명확히 정의하기 - name, description, tools, model을 구체적으로 지정
단계별로 진행하기 - 바이브코딩 → 에이전트 생성 → 에이전트 활용 순서로 점진적 학습
이렇게 하면 안 돼요 (주의사항)
커스텀 에이전트는 Task 도구에서 직접 호출되지 않으므로 general-purpose로 대체 필요
한 번에 너무 많은 것을 요청하기보다 단계별로 진행하는 것이 효과적
앞으로의 계획
다음 단계
실제 업무에 클로드 코드를 적용해볼 계획
자주 사용하는 작업을 커스텀 에이전트로 자동화
다른 업무에 적용한다면?
반복되는 문서 작업을 에이전트화
데이터 분석 작업에 병렬 에이전트 활용
코드 리뷰나 문서 검토에 역할 분리된 에이전트 사용
재사용 가능한 프롬프트
프롬프트 1: 바이브코딩으로 페이지 만들기
아래 참고 이미지를 바탕으로 [파일경로]에 단일 HTML 페이지를 구현해주세요.
참고 사항:
- 외부 라이브러리 없이 단일 html로만 작성
- [디자인 시스템] 일관성 준수
- 버튼 클릭 시 인터랙션 효과 반영
참고 이미지: [이미지 경로]
프롬프트 2: 서브에이전트 생성하기
두 개의 서브에이전트를 생성합니다.
Agent 1: [에이전트명]
- description: [역할 설명]
- tools: [사용할 도구]
- model: [모델 선택]
Agent 2: [에이전트명]
- description: [역할 설명]
- tools: [사용할 도구]
- model: [모델 선택]
프롬프트 3: 에이전트로 문서 분석하기
[경로]의 문서들을 분석합니다.
main-agent가 전체 문서를 읽고 맥락을 이해합니다.
아래 에이전트를 병렬로 호출하여 내용을 파악합니다.
- @[에이전트1]
- @[에이전트2]
결과값을 [출력 경로]에 문서화해주세요.
