Vibe Coding 실전 — AI 페어 프로그래밍의 기술

❌ "버튼 컴포넌트 만들어줘"

✅ "우리 프로젝트는 Next.js + TailwindCSS 사용하고,
    디자인 시스템에 따라 primary, secondary, ghost 3가지 변형이 있어.
    버튼 컴포넌트 만들어줘."

❌ "성능 최적화해줘"

✅ "이 컴포넌트가 리스트에서 100개 이상 렌더링될 때 느려져.
    React.memo 적용하고, 불필요한 리렌더링 막아줘.
    useMemo, useCallback이 과하면 오히려 안 쓰는 게 나아."

✅ "에러 응답 형식을 통일하고 싶어.
    지금은 어떤 건 { error: 'message' }이고
    어떤 건 { message: 'error', code: 500 }이야.

    이렇게 통일해줘:
    {
      success: false,
      error: { code: 'ERROR_CODE', message: '설명' }
    }"

1단계: "이 API의 전체 구조를 설명해줘"
2단계: "에러 핸들링이 부족한 부분을 찾아줘"
3단계: "찾은 부분에 try-catch 추가해줘"
4단계: "테스트 케이스도 만들어줘"

[대화 시작]

You: 사용자 프로필 페이지를 만들어야 해.
     - 아바타, 이름, 이메일 표시
     - 프로필 수정 모달
     - 비밀번호 변경 기능

Claude: 프로필 페이지 구조를 설계해볼게요.

        1. ProfilePage 컴포넌트 (메인)
        2. ProfileCard 컴포넌트 (정보 표시)
        3. EditProfileModal (수정 모달)
        4. ChangePasswordForm (비밀번호)

        먼저 ProfilePage부터 만들까요?

You: 응, 근데 우리 프로젝트 구조에 맞게 해줘.
     src/app/(dashboard)/profile/page.tsx 여기에 만들면 돼.

Claude: [프로젝트 구조 확인]
        네, 기존 레이아웃과 스타일을 참고해서 만들게요.
        [Write] src/app/(dashboard)/profile/page.tsx
        [Write] src/components/profile/ProfileCard.tsx

You: 로그인 후에 가끔 홈으로 리다이렉트가 안 돼.
     콘솔에 에러는 없어.

Claude: 몇 가지 확인해볼게요.
        [Read] src/app/auth/login/page.tsx
        [Read] src/lib/auth.ts

        문제를 찾았어요. 리다이렉트 로직에서
        세션 확인이 비동기인데 await 없이 처리하고 있어요.

        ```typescript
        // 현재 코드 (문제)
        if (session) {
          router.push('/home');
        }

        // 수정 코드
        if (await getSession()) {
          router.push('/home');
        }

### 시나리오 3: 리팩토링

---

## Vibe Coding 팁

### Do's (하세요)

1. **생각의 흐름대로 말하기**
   - "음... 이 부분이 좀 이상해"
   - "아 잠깐, 그것보다 먼저 이거 해결하자"

2. **피드백 주기**
   - "아 그게 아니라..."
   - "좋아, 근데 여기만 조금 수정해줘"

3. **점진적 확장**
   - "일단 기본 동작만 되게 해줘"
   - "이제 에러 처리 추가하자"
   - "마지막으로 최적화하자"

4. **의도 설명**
   - "사용자가 실수로 삭제하는 걸 방지하고 싶어"
   - "나중에 다국어 지원도 할 수 있게 해줘"

### Don'ts (하지 마세요)

1. **너무 많은 요청 한 번에**
   - ❌ "로그인, 회원가입, 비밀번호 찾기, 프로필 전부 만들어줘"
   - ✅ 기능별로 나눠서 요청

2. **결과만 요구**
   - ❌ "완벽한 인증 시스템 만들어줘"
   - ✅ "일단 JWT 기반 로그인부터 만들자"

3. **AI 의존**
   - ❌ 모든 코드를 AI에게 맡기기
   - ✅ 이해하고, 리뷰하고, 수정하기

---

## 페어 프로그래밍 세션

### 준비

```bash
# 프로젝트 디렉토리에서 시작
cd my-project
claude

# 컨텍스트 설정
You: 이 프로젝트에 대해 간단히 파악하고
     오늘 할 일 정리하자

[오전: 기능 개발]
You: 결제 모듈 연동해야 해. 토스페이먼츠 사용할 거야.
Claude: [문서 확인, 코드 작성, 테스트]

[점심 후: 코드 리뷰]
You: 오전에 작성한 코드 리뷰해줘
Claude: [잠재적 문제점, 개선 제안]

[오후: 버그 수정]
You: QA에서 이런 버그 리포트가 왔어
Claude: [분석, 수정, 테스트]

[마무리: 정리]
You: 오늘 변경사항 커밋 메시지 작성해줘
Claude: [변경 사항 요약, 커밋 메시지 생성]