GPTers 20기 첫 날, Claude Code에게 이미지 보여주고 "만들어줘" 했더니 진짜 웹페이지가 완성됐다.

## 문제 상황 (Before)

GPTers 20기 스터디 첫 날이었다.

"Claude Code로 자동화를 배운다"는데, 솔직히 뭘 하는 건지 감이 안 왔다. Sub-Agent? Skill? Vibe Coding? 용어도 낯설고, 코드도 모르는데 따라갈 수 있을지 걱정됐다.

## 사용한 도구

- 도구: Claude Code (VSCode Extension)

- 모델: Claude Opus 4.5

## AI와 협업한 과정

### Step 1: Vibe Coding - 이미지 하나로 웹페이지 만들기

1주차 실습 첫 번째는 "Vibe Coding"이었다.

GPTers LMS 화면 이미지를 보여주고 이렇게 말했다:

```

이 이미지 보고 페이지 만들어줘

```

그랬더니 진짜로 200줄 넘는 HTML/CSS/JS 코드가 나왔다. 브라우저에서 열어보니까 진짜 웹페이지가 있었다.

솔직히 코드가 어떻게 작동하는지는 모르겠다. 근데 결과물이 나왔다. 이게 Vibe Coding인가 보다.

### Step 2: Sub-Agent 만들기

두 번째는 Sub-Agent를 만드는 것이었다.

Sub-Agent는 특정 작업만 전문으로 하는 "미니 Claude"라고 한다. /subagent-creator라는 명령어로 두 개를 만들었다:

- ax-prompt-finder: 프롬프트 패턴 찾는 에이전트

- ax-case-finder: 비슷한 사례 찾는 에이전트

아직 정확히 뭔지는 모르겠지만, .claude/agents/ 폴더에 파일이 생긴 건 확인했다.

### Step 3: AX 사례 분석

세 번째는 다른 사람들의 AX 사례를 분석하는 것이었다.

7개의 사례를 읽었는데, 다들 처음엔 막막했다가 Claude랑 대화하면서 해결한 이야기들이었다. "나도 할 수 있겠다"는 생각이 들었다.

분석 결과로 두 개의 문서가 만들어졌다:

- 효과적인 프롬프트 패턴 5가지

- 공통 문제 상황과 해결법

## 결과 (After)

### Before vs After

| 항목 | Before | After |

|------|--------|-------|

| Claude Code 이해도 | 뭔지 모름 | 일단 따라하면 결과물 나옴 |

| 웹페이지 만들기 | 불가능 | 이미지 보여주면 됨 |

| Sub-Agent | 처음 들어봄 | 만들어봄 (아직 헷갈림) |

### 결과물

- 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 사례 분석 문서 2개

## 배운 점

### 효과적이었던 것

- 일단 따라하기: 이해 안 돼도 따라하면 결과물이 나온다

- "만들어줘" 한 마디: 코드 몰라도 된다

### 아직 헷갈리는 것

- Sub-Agent, Skill 개념이 정확히 뭔지

- 이걸 실제 내 업무에 어떻게 적용하는지

## 앞으로의 계획

2주차, 3주차 실습 계속 따라하면서 자동화 사례 3개 만들어보고 싶다.

## 재사용 가능한 프롬프트

### Vibe Coding 시작할 때

```

[이미지/참고자료] 보고 [결과물] 만들어줘

```

### Sub-Agent 만들 때

```

/subagent-creator

```

---

GPTers 20기 Claude Code 스터디 1주차 실습 후기

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요