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

Vibe Coding이란?

Vibe Coding은 AI와 자연어로 대화하며 코드를 작성하는 개발 방식입니다. 정확한 명령어나 문법보다 의도와 맥락을 전달하는 것이 핵심입니다.

"이 함수가 좀 느린 것 같아. 뭐가 문제인지 봐줘." "사용자가 로그인할 때 뭔가 불안정해. 에러 핸들링 좀 강화하자."

기존 코딩과의 차이:

기존 방식	Vibe Coding
정확한 구문 작성	의도 설명
문서 검색 → 코드 작성	대화로 해결
혼자서 디버깅	AI와 함께 분석
코드 리뷰 요청 → 대기	실시간 피드백

효과적인 프롬프팅

1. 컨텍스트 먼저

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

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

2. 구체적인 제약 조건

❌ "성능 최적화해줘"

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

3. 예시로 설명

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

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

4. 점진적 요청

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

실전 워크플로우

시나리오 1: 새 기능 개발

[대화 시작]

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

시나리오 2: 버그 수정

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');
        }

수정할까요?

You: 응, 그리고 비슷한 패턴 다른 데도 있는지 확인해줘

Claude: [전체 검색 중...] 3군데 더 발견했어요:

src/app/auth/register/page.tsx:45
src/middleware.ts:23
src/hooks/useAuth.ts:18

전부 수정할까요?


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

You: src/utils/helpers.ts가 너무 커졌어. 정리 좀 하자.

Claude: [Read] src/utils/helpers.ts (847 lines)

분석 결과:

날짜 관련 함수: 12개
문자열 처리: 8개
숫자 포맷: 5개
API 헬퍼: 7개
기타: 3개

이렇게 분리하면 어떨까요?

src/utils/ ├── date.ts (날짜) ├── string.ts (문자열) ├── number.ts (숫자) ├── api.ts (API) └── index.ts (re-export)

You: 좋아, 근데 기존 import 경로도 다 바꿔줘야 해

Claude: 네, 기존 import를 유지하면서 분리할게요. index.ts에서 모든 함수를 re-export하면 기존 코드 변경 없이 작동해요.

[분리 작업 시작...]


---

## 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: [변경 사항 요약, 커밋 메시지 생성]

마치며

Vibe Coding은 단순히 "AI가 코드를 대신 작성해주는 것"이 아닙니다. 개발자의 사고를 AI가 보조하고 가속화하는 것입니다.

핵심은:

AI는 도구이지, 대체재가 아님
명확한 의도 전달이 좋은 결과로 이어짐
검토와 이해 없이 코드 수락은 금물
점진적이고 반복적인 접근이 효과적

이 시리즈에서 배운 Claude Code, MCP, Vibe Coding을 조합하면 개발 생산성을 크게 높일 수 있습니다. 직접 프로젝트에 적용해보세요!