ChanghyukBan프롬프트 엔지니어링 실전편
AI에게 코드를 잘 시키는 법
같은 Claude Code, 같은 Cursor를 쓰는데 어떤 사람은 30분 만에 기능을 만들고, 어떤 사람은 3시간을 써도 엉뚱한 코드를 받습니다. 차이는 도구가 아니라 프롬프트입니다.
프롬프트 = AI에게 보내는 지시서. 지시가 모호하면 결과도 모호합니다. 구체적으로 시키면 구체적인 결과가 나옵니다.
01 나쁜 프롬프트 vs 좋은 프롬프트
| 나쁜 프롬프트 ❌ | 좋은 프롬프트 ✅ | 차이점 |
|---|---|---|
| "로그인 기능 만들어줘" | "Supabase Auth로 이메일/비밀번호 로그인 페이지를 만들어줘. /login 경로, Server Action 사용, 에러 메시지 한글로" | 기술 스택 + 경로 + 패턴 명시 |
| "이거 왜 안 돼?" | "이 에러가 발생합니다: [에러 메시지]. 파일은 src/app/login/page.tsx이고, 24번째 줄에서 발생합니다" | 에러 + 파일 + 위치 명시 |
| "예쁘게 만들어줘" | "Tailwind CSS로 모바일 반응형 카드 UI를 만들어줘. 그라데이션 배경, 라운드 코너, 호버 시 그림자" | 구체적 스타일 지시 |
| "결제 기능 추가해" | "토스페이먼츠 결제 연동을 해줘. /api/payments/confirm 라우트 생성, 결제 승인 후 orders 테이블에 저장, 실패 시 에러 반환" | API + DB + 에러 처리 명시 |
| "테스트해줘" | "회원가입 → 로그인 → 상품 구매 → 구매 내역 확인 플로우를 테스트해줘. 각 단계에서 예상 결과를 알려줘" | 테스트 시나리오 명시 |
규칙: AI는 "눈치"를 못 봅니다. 당신이 머릿속에 그리는 그림을 말로 전부 설명해야 합니다. "알아서 잘 해줘"는 최악의 프롬프트입니다.
02 프롬프트 5가지 원칙
원칙 1
구체적으로 (Specific)
"대시보드 만들어줘" ❌ → "로그인한 사용자의 구매 내역, 수강 중인 강의, 최근 활동을 보여주는 대시보드 페이지를 /dashboard 경로에 만들어줘" ✅
원칙 2
맥락을 제공 (Context)
"버그 고쳐줘" ❌ → "이 프로젝트는 Next.js 16 + Supabase를 사용하고, 현재 /shop 페이지에서 상품 목록이 안 뜨는 문제가 있어. RLS 정책은 이미 설정했어" ✅
원칙 3
단계별로 나눠서 (Step by step)
"전체 서비스 만들어줘" ❌ → "먼저 DB 스키마를 설계해줘. 그다음 API를 만들자. 마지막으로 UI를 붙이자" ✅. 한 번에 다 시키면 품질이 떨어집니다.
원칙 4
제약 조건 명시 (Constraints)
"페이지 만들어줘" ❌ → "Server Component로 만들어줘. 외부 라이브러리 추가하지 마. 기존 UI 컴포넌트(src/components/ui)를 사용해" ✅
원칙 5
예시를 보여줘 (Examples)
"이런 식으로 만들어줘"와 함께 스크린샷, 참고 URL, 또는 기존 코드를 보여주면 결과 품질이 2배 이상 올라갑니다.
03 상황별 프롬프트 템플릿
새 프로젝트 시작
이 프로젝트의 아키텍처를 설계해줘.
목표: [서비스 한 줄 설명]
기술 스택: Next.js 16, Supabase, Tailwind CSS v4, TypeScript
핵심 기능: 1) [기능1] 2) [기능2] 3) [기능3]
사용자 유형: [관리자/일반 사용자 등]
먼저 디렉토리 구조와 DB 스키마를 제안해줘.
CLAUDE.md도 작성해줘.버그 수정
이 에러를 해결해줘.
에러 메시지: [전체 에러 메시지 붙여넣기]
발생 파일: [파일 경로]
발생 시점: [어떤 동작을 했을 때]
기대 동작: [원래 이렇게 되어야 함]
최근 변경 사항: [직전에 뭘 수정했는지]UI 만들기
[페이지/컴포넌트] UI를 만들어줘.
참고: [URL 또는 스크린샷 설명]
스타일: Tailwind CSS, 모바일 반응형
색상: primary(#667eea), 그라데이션 사용
레이아웃: [그리드/플렉스, 카드 형태 등]
포함 요소: [버튼, 입력 필드, 표 등]
기존 컴포넌트 활용: src/components/ui의 Card, Badge, Button 사용API 연동
[외부 서비스] API를 연동해줘.
문서 URL: [API 문서 주소]
필요한 엔드포인트: [어떤 API를 호출해야 하는지]
인증 방식: [API 키 / OAuth 등]
데이터 흐름: [요청 → 처리 → 저장 순서]
Server Action으로 만들어줘. 에러 처리 포함.리팩토링
[파일/기능]을 리팩토링해줘.
현재 문제: [코드가 너무 길다 / 중복이 많다 / 성능이 느리다]
유지할 것: [기존 동작은 그대로]
변경할 것: [구조만 개선 / 성능 최적화 / 타입 추가]
기존 테스트가 있다면 통과하는지 확인해줘.04 CLAUDE.md와 프롬프트의 관계
매번 같은 맥락을 반복 설명하는 건 비효율적입니다. CLAUDE.md에 프로젝트 컨텍스트를 한번 정의해두면, 이후 프롬프트에서는 "뭘 해줘"만 말하면 됩니다.
CLAUDE.md 없이
"Next.js 16 App Router에서 Supabase를 사용하고 있고, createClient()는 src/lib/supabase/server.ts에 있어. Tailwind v4를 쓰고 있고, 컴포넌트는 src/components/ui에 있어. 이 맥락에서 /shop 페이지를 만들어줘"
CLAUDE.md 있으면
"/shop 페이지를 만들어줘. 상품 목록을 카테고리별로 필터링하고, 정렬 기능도 넣어줘."
CLAUDE.md = 영구적 맥락, 프롬프트 = 일시적 지시. 이 둘을 분리하면 프롬프트가 짧고 강력해집니다.
05 실전 대화 예시 — AI와의 대화 흐름
좋은 바이브코딩은 한 번에 완벽한 프롬프트를 쓰는 게 아니라, 대화를 통해 점진적으로 완성하는 겁니다.
1단계: 큰 그림
"예약 시스템을 만들 거야. 미용실용이고, 고객이 날짜/시간/디자이너를 선택해서 예약하는 기능이야. 아키텍처를 설계해줘."
2단계: 세부 구현
"좋아. 이제 예약 폼 UI를 만들어줘. 달력은 직접 구현하지 말고 날짜 선택 input을 사용해. 디자이너 선택은 카드 형태로."
3단계: 수정 요청
"디자이너 카드에 프로필 사진과 전문 분야를 추가해줘. 선택된 카드는 primary 색상 보더로 강조."
4단계: 엣지 케이스
"같은 시간에 두 명이 동시에 예약하면 어떻게 돼? 중복 방지 로직을 추가해줘."
06 자주 하는 실수
| 실수 | 왜 문제인가 | 해결법 |
|---|---|---|
| 한 번에 모든 것을 시킴 | AI가 집중력을 잃고 품질 저하 | 한 번에 하나의 기능만 시키기 |
| 에러 메시지를 안 보여줌 | AI가 추측으로 해결 시도 | 전체 에러 메시지를 그대로 복붙 |
| "알아서 해줘" | AI의 선택이 내 의도와 다름 | 원하는 결과를 구체적으로 설명 |
| 맥락 없이 이어서 작업 | 이전 대화를 잊어버림 | CLAUDE.md + progress.md 활용 |
| 결과를 검증 안 함 | 버그가 쌓여서 나중에 폭발 | 각 단계마다 직접 실행해서 확인 |
07 프롬프트 치트시트
구체적
"로그인" 아닌 "이메일 로그인"
맥락
기술 스택 + 현재 상태
단계별
한 번에 하나씩
최종 공식:
좋은 프롬프트 = [맥락] + [구체적 요구사항] + [제약 조건] + [기대 결과]
"이 프로젝트(맥락)에서 상품 목록 페이지를(요구사항) Tailwind으로(제약) 카테고리 필터와 정렬이 되게(기대 결과) 만들어줘"
좋은 프롬프트 = [맥락] + [구체적 요구사항] + [제약 조건] + [기대 결과]
"이 프로젝트(맥락)에서 상품 목록 페이지를(요구사항) Tailwind으로(제약) 카테고리 필터와 정렬이 되게(기대 결과) 만들어줘"
더 배우고 싶다면
AtoZAI 블로그에서 바이브코딩, AI 에이전트, 배포 가이드 등 실전 콘텐츠를 계속 업데이트합니다. 프롬프트 템플릿과 CLAUDE.md 예시가 포함된 PDF 가이드도 Shop에서 확인하세요.