프롬프트 엔지니어링

좋은 프롬프트의 3원칙

바이브 코딩에서 프롬프트는 **코드 대신 작성하는 "지시서"**입니다. 좋은 지시서는 다음 3가지를 포함합니다:

1. 구체적으로 (What)

무엇을 만들지 명확하게 말합니다.

Bad:  "로그인 기능 만들어줘"
Good: "이메일/비밀번호로 로그인하는 기능을 만들어줘.
       Supabase Auth를 사용하고, 로그인 성공 시 /dashboard로 리다이렉트해줘."

2. 맥락과 함께 (Context)

현재 상황과 기존 코드를 알려줍니다.

Bad:  "버그 고쳐줘"
Good: "로그인 버튼을 클릭하면 'TypeError: Cannot read property email of null'
       에러가 발생해. app/login/page.tsx의 handleSubmit 함수에서 나는 것 같아."

3. 결과 형태 지정 (How)

원하는 결과물의 형태를 알려줍니다.

Bad:  "API 만들어줘"
Good: "사용자 목록을 반환하는 GET /api/users 엔드포인트를 만들어줘.
       응답 형식은 { users: [{ id, name, email }], total: number } 로."

Before / After 비교 10선

프롬프트 패턴 카탈로그

새 기능 추가 패턴

"[기능 이름]을 추가해줘.

요구사항:
- [구체적 요구사항 1]
- [구체적 요구사항 2]
- [구체적 요구사항 3]

기술 스택: [사용할 라이브러리/도구]
파일 위치: [생성할 파일 경로]"

실전 예시:

"사용자 프로필 편집 기능을 추가해줘.

요구사항:
- 이름, 이메일, 프로필 이미지 변경 가능
- 이미지는 Supabase Storage에 업로드
- 변경 사항은 실시간으로 헤더에 반영

기술 스택: Supabase Storage, react-hook-form
파일 위치: app/(main)/profile/page.tsx"

버그 수정 패턴

"[어디서] [무엇을 하면] [어떤 문제가] 발생해.

에러 메시지:
[에러 메시지 전문]

기대 동작: [원래 이렇게 되어야 한다]
실제 동작: [이렇게 되고 있다]"

실전 예시:

"로그인 페이지에서 이메일을 입력하고 로그인 버튼을 누르면 페이지가 새로고침되면서 입력값이 사라져.

에러 메시지: 없음 (콘솔에도 에러 없음)

기대 동작: 로그인 처리 후 대시보드로 이동
실제 동작: 페이지가 새로고침됨"

리팩토링 패턴

"[파일/함수]를 리팩토링해줘.

현재 문제:
- [문제점 1]
- [문제점 2]

원하는 방향:
- [개선 방향 1]
- [개선 방향 2]

주의: [변경하면 안 되는 것]"

UI/스타일 패턴

"[컴포넌트]의 디자인을 변경해줘.

현재: [현재 모습 설명]
원하는 모습: [원하는 모습 설명]
참고: [참고 사이트/이미지가 있으면]

반응형:
- 모바일: [모바일 레이아웃]
- 데스크톱: [데스크톱 레이아웃]"

코드 리뷰 패턴

"[파일/폴더]의 코드를 리뷰해줘.

다음 관점에서 검토:
- 보안 취약점
- 성능 문제
- 코드 중복
- 베스트 프랙티스 위반

문제가 있으면 수정 코드도 함께 제안해줘."

맥락 제공의 기술

에러 메시지 전달법

# 전체 에러 메시지를 그대로 복사해서 전달
> "이 에러가 발생했어:
 
  TypeError: Cannot destructure property 'user' of '(0 , _supabase__WEBPACK_IMPORTED_MODULE_2__.createClient)(...)' as it is undefined.
      at LoginPage (app/login/page.tsx:15:9)
 
  고쳐줘."

스크린샷 활용

Claude Code는 이미지를 이해합니다. UI 문제라면 스크린샷을 보여주세요:

> "이 스크린샷을 봐줘 (이미지 드래그 앤 드롭)
   모바일에서 헤더가 이렇게 겹치는데 고쳐줘"

파일 참조

# 특정 파일을 읽게 하기
> "lib/auth.ts를 읽고, 이 인증 로직에 세션 갱신 기능을 추가해줘"
 
# 여러 파일의 관계를 알려주기
> "app/api/users/route.ts가 lib/db.ts의 getUsers()를 호출하는데,
   페이지네이션을 추가하고 싶어"

대화 전략

큰 작업 vs 작은 작업

확인 먼저 요청하기

복잡한 작업은 구현 전에 계획을 먼저 보여달라고 하세요:

> "이 기능을 구현하기 전에, 어떤 파일을 만들고 수정할지 계획을 먼저 보여줘"

되돌리기

> "마지막 변경을 되돌려줘"
> "방금 수정한 3개 파일을 원래대로 복원해줘"

방향 전환

> "이 방식 말고, 다른 접근법으로 해보자. [새로운 방향 설명]"
> "지금까지 한 것 유지하고, [이 부분]만 다시 해줘"

다음 단계

프롬프트 작성법을 익혔다면:

1. 실전 프로젝트 — 배운 프롬프트로 실제 앱 만들기 (Pro)
2. 함정과 주의점 — 바이브코딩의 위험과 대처법