3장: 프롬프트 — 바이브코딩의 핵심 스킬
바이브코딩에서 여러분이 직접 하는 일은 딱 하나입니다. AI에게 말하는 것. 이 "말"을 프롬프트라고 합니다. 코드를 얼마나 아느냐보다 프롬프트를 얼마나 잘 쓰느냐가 결과를 결정합니다.
프롬프트란 무엇인가
프롬프트는 AI에게 보내는 지시문입니다. "투두 앱 만들어줘"도 프롬프트이고, "버튼 색깔을 파란색으로 바꿔줘"도 프롬프트입니다.
중요한 건 AI는 여러분의 머릿속을 읽을 수 없다는 점입니다. 여러분이 "멋진 웹사이트"를 상상할 때, 그 "멋진"이 정확히 무엇인지 AI는 모릅니다. 여러분이 당연하게 여기는 것들 — 이 사이트는 모바일에서도 봐야 한다, 한국어로 나와야 한다, 외부 라이브러리는 쓰지 않았으면 한다 — 을 말하지 않으면 AI는 그냥 자기 판단대로 합니다.
프롬프트는 그 간격을 메우는 도구입니다. 여러분이 상상하는 것을 AI가 이해할 수 있는 언어로 풀어내는 것, 그게 프롬프트입니다.
나쁜 프롬프트 vs 좋은 프롬프트
세 가지 예시를 봅시다. 같은 목표인데 프롬프트에 따라 결과가 얼마나 달라지는지 비교해보세요.
예시 1: 투두 앱
나쁜 프롬프트:
투두 앱 만들어줘.
AI가 뭔가를 만들긴 합니다. 하지만 어떤 기술 스택을 쓸지, 어떻게 생겨야 하는지, 어떤 기능이 있어야 하는지 전혀 모릅니다. Python으로 만들 수도 있고, 아주 기초적인 HTML로 만들 수도 있습니다.
좋은 프롬프트:
HTML 파일 하나로 동작하는 투두 앱을 만들어줘.
- 할 일 입력 필드와 추가 버튼
- 추가된 할 일은 목록으로 표시
- 각 항목마다 완료 체크박스와 삭제 버튼
- 완료된 항목은 취소선으로 표시
- 새로고침해도 목록이 유지되게 localStorage 사용
- 배경은 흰색, 심플한 디자인
기술 스택(HTML 하나), 기능(추가/체크/삭제), 동작 방식(localStorage), 디자인 방향을 모두 명시했습니다.
예시 2: 에러 수정
나쁜 프롬프트:
에러 고쳐줘.
어떤 에러인지, 어디서 났는지 AI가 알 수 없습니다.
좋은 프롬프트:
아래 에러가 나고 있어. 고쳐줘.
TypeError: Cannot read properties of undefined (reading 'map')
at ProductList (src/components/ProductList.jsx:12)
에러 메시지 전체를 복사해서 붙여넣고, 어떻게 처리하면 좋은지를 같이 줬습니다. 에러 메시지의 뜻을 몰라도 됩니다. 그대로 복사해서 AI에게 주면 AI가 해석합니다.
예시 3: 디자인 수정
나쁜 프롬프트:
디자인 예쁘게 바꿔줘.
"예쁘다"의 기준이 사람마다 다릅니다. AI는 자기 기준으로 바꿉니다.
좋은 프롬프트:
헤더 디자인을 바꿔줘.
- 배경색: 짙은 남색(#1a237e)
- 로고와 메뉴 텍스트: 흰색
- 높이: 60px
- 메뉴 항목 간격: 24px
- 스크롤해도 화면 상단에 고정
색상 코드, 수치, 동작 방식까지 명시하면 AI가 정확하게 반영합니다.
5가지 프롬프트 패턴
바이브코딩에서 반복해서 쓰는 패턴 다섯 가지입니다. 외울 필요 없이 상황에 따라 참고하면 됩니다.
패턴 1. 구체적 지시
무엇을 만들지, 어떤 요소가 포함되어야 하는지 구체적으로 나열합니다. 가장 기본적이고 자주 쓰는 패턴입니다.
핵심은 이것들을 명시하는 겁니다.
- 무엇을: 어떤 페이지, 기능, 화면 요소인지
- 어떻게 생겼는지: 레이아웃, 색상, 크기
- 어떻게 동작하는지: 클릭하면 무슨 일이 일어나는지
- 어떤 기술로: HTML, React, Next.js 등
예시:
로그인 페이지를 만들어줘.
- 이메일 입력 필드
- 비밀번호 입력 필드 (입력값이 보이지 않게)
- 로그인 버튼 — 클릭하면 /dashboard로 이동
- "비밀번호를 잊으셨나요?" 링크
- 전체 화면 가운데 정렬, 카드 형태
- Tailwind CSS 사용
뭔가 빠뜨린 것 같아도 괜찮습니다. 결과를 보고 추가로 요청할 수 있습니다.
패턴 2. 역할 부여
AI에게 특정 전문가의 역할을 맡기면 그 관점에서 접근합니다.
너는 사용성 전문가야.
이 회원가입 폼을 처음 쓰는 사람 입장에서 불편한 점을 찾아줘.
그리고 개선 방법도 제안해줘.
같은 코드를 봐도 역할에 따라 다른 것에 집중합니다. 보안 전문가는 취약점을, 디자이너는 시각적 일관성을, 사용성 전문가는 사용 흐름을 봅니다.
실제로 자주 쓰는 역할들:
너는 시니어 프론트엔드 개발자야. 이 코드에서 개선할 수 있는 부분을 알려줘.
너는 UX 디자이너야. 이 화면에서 사용자가 헷갈릴 수 있는 부분을 찾아줘.
너는 한국 사용자를 위한 서비스를 만드는 사람이야. 이 텍스트들을 자연스러운 한국어로 바꿔줘.
패턴 3. 단계 분리
복잡한 작업은 한 번에 다 시키면 AI가 중요한 부분을 빠뜨리거나 엉뚱한 방향으로 가기 쉽습니다. 단계를 나눠서 각 단계마다 결과를 확인하는 게 훨씬 안전합니다.
예를 들어, 쇼핑몰을 만든다면:
1단계 -- 먼저 설계만:
온라인 서점을 만들려고 해. 어떤 페이지들이 필요할지 목록으로 정리해줘.
각 페이지에 어떤 기능이 있어야 하는지도 간단히 써줘.
코드는 아직 쓰지 마.
목록을 확인하고, 방향이 맞으면:
2단계 -- 첫 번째 페이지 구현:
좋아. 먼저 메인 페이지부터 만들어줘.
책 목록을 카드 형태로 보여주고, 각 카드에 표지 이미지, 제목, 저자, 가격이 나오게.
3단계 -- 다음 페이지로 이동:
메인 페이지 완성됐어. 이제 책 상세 페이지 만들어줘.
메인에서 카드 클릭하면 이 페이지로 이동하게.
이렇게 하면 뭔가 잘못됐을 때 일찍 발견하고 수정할 수 있습니다.
패턴 4. 예시 제공
말로 설명하기 어려운 레이아웃이나 데이터 구조는 예시를 직접 보여주면 AI가 훨씬 정확하게 파악합니다.
텍스트로 레이아웃 스케치:
아래처럼 생긴 대시보드를 만들어줘.
[상단 헤더: 로고 | 메뉴 | 로그인 버튼]
--------------------------------------------
[사이드바] | [메인 콘텐츠]
- 홈 | 월별 매출 그래프 (상단)
- 주문 |
- 고객 | 최근 주문 목록 (하단)
- 설정 |
데이터 구조 예시:
상품 데이터가 아래 형태로 되어 있어.
이걸 화면에 표로 보여줘.
{
"products": [
{ "id": 1, "name": "아메리카노", "price": 4500, "stock": 100 },
{ "id": 2, "name": "카페라떼", "price": 5000, "stock": 80 }
]
}
비슷한 서비스 참고:
Notion의 사이드바처럼, 클릭하면 하위 항목이 펼쳐지는 트리 메뉴를 만들어줘.
패턴 5. 제약 조건
하지 말아야 할 것, 반드시 지켜야 할 조건을 명시합니다. 이걸 빠뜨리면 AI가 자기 판단으로 결정하고, 나중에 "이건 이렇게 하지 말았어야 했는데"가 생깁니다.
하지 말 것을 명시:
이 기능을 추가할 때 기존 CSS 파일은 건드리지 마.
style.css는 수정하지 말고, 새 클래스는 인라인 스타일로 처리해줘.
외부 라이브러리 추가하지 말고, 순수 HTML/CSS/JavaScript로만 만들어줘.
반드시 지킬 것을 명시:
모든 텍스트는 한국어로.
버튼, 안내 문구, 에러 메시지 전부 한국어야.
색상은 현재 디자인 시스템을 유지해줘.
primary: #2563EB, text: #111827, background: #F9FAFB
이 색상 값만 써.
기술 스택을 명시:
이 프로젝트에서 쓰는 기술 스택(React, TypeScript, Tailwind CSS)에 맞게 만들어줘.
프롬프트를 점진적으로 발전시키기
처음부터 완벽한 프롬프트를 쓸 필요가 없습니다. 오히려 짧게 시작해서 결과를 보고 수정하는 방식이 더 효율적입니다.
실제 대화 흐름을 보면 이렇습니다.
나: 투두 앱 만들어줘.
기본 투두 앱이 나왔습니다. 기능은 되는데 디자인이 마음에 안 듭니다.
나: 디자인을 바꿔줘. 배경은 연한 회색(#f5f5f5), 각 할 일 항목은 흰색 카드로.
카드에 살짝 그림자 넣어줘.
디자인이 좋아졌습니다. 그런데 완료된 항목이 일반 항목과 구분이 안 됩니다.
나: 완료 체크한 항목은 텍스트에 취소선 긋고, 텍스트 색을 회색으로 바꿔줘.
이제 완료 항목이 구분됩니다. 새로고침하면 목록이 사라지는 게 불편합니다.
나: 새로고침해도 목록이 유지되게 localStorage에 저장해줘.
이렇게 대화를 이어가면서 원하는 것에 점점 가까워집니다. 처음에 모든 걸 한 번에 말하려다 보면 오히려 중요한 걸 빠뜨리기 쉽습니다.
AI가 엉뚱한 방향으로 갔을 때
결과가 기대와 많이 다를 때는 두 가지 방법이 있습니다.
첫째, 방향을 잡아줍니다.
아, 이 방향이 아니야. 현재 코드는 두고,
버튼 색깔만 파란색으로 바꿔줘. 다른 건 건드리지 마.
둘째, 처음부터 다시 합니다. Claude Code에서 /clear를 입력하면 대화 내용이 초기화되고 새로 시작할 수 있습니다. 대화가 꼬였다 싶으면 새로 시작하는 게 빠를 때가 많습니다.
바이브코딩 프롬프트 실전 팁
몇 가지 습관을 들이면 결과가 달라집니다.
기술 스택을 항상 명시하세요. "페이지 만들어줘"보다 "Next.js로 페이지 만들어줘"가 훨씬 정확한 결과를 줍니다. 프로젝트 초반에 CLAUDE.md에 기술 스택을 써두면 (5장에서 다룹니다) 매번 명시하지 않아도 됩니다.
파일 형태를 말해주세요. "만들어줘"보다 "HTML 파일 하나로 만들어줘" 또는 "React 컴포넌트로 만들어줘"가 낫습니다.
"왜"를 설명하면 더 좋은 결과가 나옵니다. "버튼을 크게 해줘"보다 "모바일 사용자가 손가락으로 누르기 편하게 버튼을 크게 해줘"라고 하면 AI가 맥락을 이해하고 더 적절하게 처리합니다.
화면을 캡처해서 보여주세요. Claude Code는 이미지를 볼 수 있습니다. 수정하고 싶은 화면을 캡처해서 "이 화면에서 헤더 부분을 바꿔줘"라고 하면 훨씬 정확합니다.
✏️ 실습: 같은 앱을 3가지 다른 프롬프트로 만들어보고 차이 비교하기
프롬프트의 차이를 직접 체험해봅시다.
1단계: Code 탭에서 Select folder를 눌러 prompt-test라는 새 폴더를 만들고 선택합니다.
2단계: 세 가지 프롬프트를 순서대로 시도합니다. 하나 만들고 결과를 브라우저에서 확인한 뒤, /clear로 대화를 초기화하고 다음 프롬프트를 시도합니다. 폴더 이름은 헷갈리지 않게 바꿔주세요.
프롬프트 A — 모호하게:
계산기 만들어줘.
프롬프트 B — 기능을 구체적으로:
웹 브라우저에서 동작하는 계산기를 만들어줘.
- 숫자 버튼 0~9
- 사칙연산 버튼 +, -, ×, ÷
- 등호(=)와 초기화(C) 버튼
- 상단에 계산 결과를 보여주는 화면
- 버튼 클릭으로 동작
- HTML 파일 하나로 만들어줘
프롬프트 C — 기능 + 디자인 + 제약 조건:
웹 브라우저에서 동작하는 계산기를 만들어줘.
- 숫자 버튼 0~9
- 사칙연산 버튼 +, -, ×, ÷
- 등호(=)와 초기화(C) 버튼
- 상단에 계산 결과를 보여주는 화면
- 버튼 클릭으로 동작
- HTML 파일 하나로, 외부 라이브러리 없이 만들어줘
디자인:
- 어두운 배경(#1c1c1e)
- 버튼은 둥글게, 숫자는 회색, 연산자는 주황색
- iPhone 계산기 앱 느낌으로
3단계: 세 결과를 비교합니다. 확인할 포인트입니다.
- A는 어떤 기술로 만들어졌나요? 어떻게 생겼나요?
- B와 A를 비교했을 때 어떤 부분이 달라졌나요?
- C는 B보다 어떤 부분이 더 내 의도에 가까운가요?
같은 Claude Code, 같은 AI 모델인데 프롬프트 하나가 결과를 어떻게 바꾸는지 느껴보세요.
참고자료