클코 입문자가 1시간 만에 LMS + 서브에이전트까지

오늘 처음 지피터스를 스터디를 참여해보았습니다.
아직 뭐가 뭔지 잘 모르겠지만, 열심히 스터디 참여하겠습니다. 😂
아래는 수강한 내용을 다룬 자동 작성된 사례글입니다. 😮

--------
한줄 요약

Claude Code 입문자가 참고 이미지 하나로 LMS 페이지를 바이브코딩하고, 서브에이전트를 만들어 7개 AX 사례를 분석하여 인사이트 문서까지 자동 생성했습니다.

이런 분들께 도움돼요

• Claude Code를 처음 시작하는데 어디서부터 해야 할지 모르겠는 분

• 바이브코딩으로 UI를 만들어보고 싶은 비개발자

• 서브에이전트가 뭔지 궁금하고 직접 만들어보고 싶은 분

• 여러 문서를 분석해서 인사이트를 추출하고 싶은 분

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

문제 상황

Claude Code 입문자로서 어디서부터 시작해야 할지 막막했습니다.

• 클코로 뭘 할 수 있는지 감이 안 잡힘

• 바이브코딩, 서브에이전트 같은 개념은 들어봤지만 직접 해본 적 없음

• 실습해보고 싶은데 어떤 순서로 해야 할지 모르겠음

시작 계기

GPTers 20기 프리랜서 자동화 스터디의 1주차 실습 컨텐츠를 따라하면서:

1. Step 1: 바이브코딩으로 UI 만들기

2. Step 2: 서브에이전트 생성하기

3. Step 3: 서브에이전트 활용해서 문서 분석하기

이 3단계를 직접 실습해보기로 했습니다.

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

사용 도구

• Claude Code (VSCode Extension)

• 모델: Claude Opus 4.5

Step 1: 바이브코딩으로 LMS 페이지 만들기

참고 이미지(w1-lms-image.png)만 주고 요청했습니다.

실제 프롬프트:

단일 html로만 작성합니다.
외부 라이브러리 없이 구현해야 합니다.
참고 이미지는 gpters-w1-practice/prompt/w1-lms-image.png 입니다.

결과: Claude가 이미지를 보고 바로 660줄짜리 완성된 LMS 페이지를 생성했습니다.

• 사이드바 네비게이션

• 강의 카드 그리드

• 버튼 클릭 인터랙션

• 반응형 레이아웃

인상적이었던 점: 참고 이미지만 주니까 바로 LMS 페이지가 나왔습니다. 코드를 한 줄도 직접 쓰지 않았는데 완성된 UI가 나온 게 신기했어요.

Step 2: 서브에이전트 생성하기

2개의 분석용 서브에이전트를 만들었습니다.

ax-prompt-finder: 프롬프트 패턴 분석 전문가

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

ax-case-finder: 문제해결 사례 분석 전문가

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

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

gpters_aicase_ax/ 폴더의 7개 사례 문서를 병렬로 분석:

1. 사례글 자동화

2. 매출 대시보드

3. 바이브코더 학습

4. 상세페이지 자동화

5. Airtable 자동화

6. 이탈 피드백 수집

7. A/B 테스트 구현

시행착오: 직접 만든 서브에이전트 파일이 시스템에 등록되지 않아서 general-purpose 에이전트로 대체해서 실행했습니다.

결과와 배운 점

결과물

추출된 인사이트

프롬프트 패턴 5선:

1. 역할 부여 - "너가 마케터라고 생각하고..."

2. 구체적 예시 - "15기면 신규고, 14가 있으면 직전기수야"

3. 목적 먼저 전달 - "공부하고 싶어. 어떻게 이끌어줄래?"

4. 솔직한 피드백 - "지금 포맷이 딱 좋거든?"

5. 템플릿 반영 요청 - "다음에도 적용되게 해줘"

문제해결 패턴 5선:

1. AI 지침 무시 → 판단 범위 명시적 제한

2. Rate Limit → "직접 봐달라" 요청

3. 반복 실수 → CLAUDE.md에 체크리스트화

4. 맥락 누락 → 상황 + 요청 함께 전달

5. 노코드 한계 → 코드/AI 역할 분리

배운 점

프롬프트만 잘 쓰면 코드 없이도 UI를 만들 수 있다

• 바이브코딩: 이미지 한 장 → 완성된 페이지

• 서브에이전트: 반복 분석 작업을 자동화

• 병렬 처리: 7개 문서를 한 번에 분석

Before vs After

재사용 가능한 프롬프트

바이브코딩 프롬프트

단일 html로만 작성합니다.
외부 라이브러리 없이 구현해야 합니다.
참고 이미지는 [이미지 경로] 입니다.

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

다음 형식으로 서브에이전트를 생성해줘:
- name: [에이전트명]
- description: [용도]
- tools: Read, Grep
- model: haiku

병렬 분석 프롬프트

[폴더 경로]의 문서들을 분석하여 [추출할 내용]을 정리해줘.
결과는 [출력 경로]에 문서화해줘.

앞으로의 계획

1. 스터디 실습 컨텐츠로 계속 활용 - 2주차, 3주차 실습도 같은 방식으로 진행

2. 서브에이전트 확장 - 다른 분석 작업에도 적용할 에이전트 추가 생성

3. 추출된 패턴 실무 적용 - 프롬프트 패턴, 문제해결 패턴을 실제 업무에 적용

참고 자료

• 실습 프롬프트: gpters-w1-practice/prompt/

• 결과물: gpters-w1-practice/agent-review/

• AX 사례 원본: gpters-w1-practice/gpters_aicase_ax/