Day 5 — 바이브코딩 입문: AI에게 코드를 제대로 시키는 법

오늘의 목표

AI 코딩 도구를 "잘 쓰는" 원리를 이해한다

원하는 결과가 나오는 프롬프트를 쓸 수 있다

AI가 만든 코드를 검토하고 고칠 수 있다

준비물: 세팅 완료된 내 프로젝트 저장소 + 설계 문서들

0. 들어가기 전에 — 왜 이게 중요한가

우리는 프론트를 바이브코딩(AI 활용)으로 만듭니다. 그런데 AI는 시키는 대로 만듭니다. 막연하게 시키면 막연한 결과가, 정확하게 시키면 정확한 결과가 나옵니다.

핵심: AI는 마법사가 아니라 "엄청 빠른 신입 개발자"입니다. 일을 잘 시키려면, 맥락을 주고 → 명확히 요청하고 → 결과를 검토해야 합니다.

오늘 배우는 건 "코딩"이 아니라 "코딩을 시키는 법" 입니다. 이게 여러분의 핵심 무기입니다.

1. 좋은 프롬프트의 4요소

AI에게 요청할 때 이 4가지를 담으면 결과가 확 좋아집니다.

요소	내용	예시
맥락	무슨 프로젝트인지	"할 일 관리 웹앱을 만들고 있어"
목표	무엇을 원하는지	"할 일 목록 화면을 만들어줘"
조건	구체적 요구사항	"체크박스로 완료 표시, 마감일 표시"
스택	어떤 기술로	"React랑 Tailwind로"

❌ 나쁜 프롬프트

"할 일 화면 만들어줘"

→ AI가 마음대로 만듭니다. 내 프로젝트와 안 맞는 결과가 나옵니다.

✅ 좋은 프롬프트

나는 할 일 관리 웹앱을 만들고 있어. (맥락)
할 일 목록을 보여주는 화면 컴포넌트를 만들어줘. (목표)
- 각 할 일은 제목, 마감일, 완료 체크박스를 표시
- 완료된 항목은 회색 취소선 처리
- 데이터는 GET /todos API로 받아옴 (조건)
React 함수형 컴포넌트 + Tailwind CSS로 작성해줘. (스택)

💡 설계 문서를 활용하세요! Day 1~3에서 만든 명세서·ERD·API 명세를 AI에게 그대로 붙여넣고 "이 설계대로 만들어줘"라고 하면 정확도가 크게 올라갑니다.

2. 단계적으로 시키기 — 한 번에 다 시키지 마라

초보자가 가장 많이 하는 실수: "앱 전체를 만들어줘"

AI는 만들어줍니다. 하지만 여러분이 이해 못 하는 코드 덩어리가 나오고, 버그가 생기면 손도 못 댑니다.

올바른 방법: 작게 쪼개서

1단계: "할 일 하나를 보여주는 카드 컴포넌트 만들어줘"
2단계: "그 카드를 목록으로 반복해서 보여주는 컴포넌트 만들어줘"
3단계: "여기에 API에서 데이터 받아오는 기능 추가해줘"
4단계: "완료 체크 시 서버에 PATCH 요청 보내는 기능 추가해줘"

💡 Day 1에서 배운 애자일이 여기서도 적용됩니다. 작게 만들고, 확인하고, 다음으로. 매 단계 동작을 확인하세요.

3. AI 코드 검토하기 — 그대로 믿지 마라

AI는 자신감 있게 틀린 코드도 줍니다. 받은 코드는 반드시 검토하세요.

검토 체크리스트

동작하나? 일단 실행해본다
내 API 주소와 맞나? AI가 임의로 지은 주소일 수 있음 (/todos인데 /api/tasks로 썼다든지)
내 데이터 구조와 맞나? ERD의 칸 이름과 일치하는지 (title인데 name으로 썼다든지)
이해되나? 한 줄씩 무슨 일을 하는지 설명할 수 있나?

⚠️ 이해 못 하는 코드는 위험합니다. 모르는 부분은 AI에게 "이 코드 한 줄씩 설명해줘" 라고 물어보세요. 이게 진짜 공부가 됩니다.

4. 막혔을 때 — 에러 해결 루틴

코드가 안 돌아갈 때 AI를 가장 잘 쓰는 법.

에러 해결 4단계

1. 에러 메시지를 "전체" 복사한다 (일부만 X)
2. AI에게: "이 에러가 났어. [에러 전문 붙여넣기]
   관련 코드는 이거야. [코드 붙여넣기]
   원인이 뭐고 어떻게 고쳐?"
3. AI가 준 수정안을 적용한다
4. 그래도 안 되면 → 무엇을 시도했는지 알려주고 다시 물어본다

좋은 질문 vs 나쁜 질문

❌ "안 돼요"
❌ "에러 났는데 어떻게 해요?"

✅ "TypeError: Cannot read property 'map' of undefined 에러가
   할 일 목록 렌더링할 때 났어. todos가 undefined인 것 같은데,
   API 호출 코드는 이거야: [코드]. 어떻게 고쳐?"

💡 정보를 많이 줄수록 정확한 답이 옵니다. 사람 멘토에게 물어볼 때도 똑같습니다.

5. 실습 — 첫 컴포넌트 만들어보기

오늘 실제로 AI와 함께 화면 하나를 만들어봅니다.

🛠 실습 순서

1. 내 프로젝트에서 "가장 단순한 화면" 하나를 고른다
   (예: 할 일 목록, 로그인 폼, 메인 페이지)

2. 좋은 프롬프트 4요소를 갖춰 AI에게 요청한다
   - 맥락 + 목표 + 조건 + 스택
   - Day 3 API 명세를 함께 붙여넣기

3. 받은 코드를 실행해본다

4. 검토 체크리스트로 점검한다
   - API 주소 맞나? 데이터 구조 맞나? 이해되나?

5. 안 맞는 부분은 AI에게 수정 요청한다
   "주소를 /todos로 바꿔줘", "title 필드명으로 통일해줘"

6. 동작하면 → git commit & push!

✍️ 막힐 때 보세요

AI가 너무 복잡한 코드를 줘요 → "더 간단하게, 초보자도 이해할 수 있게 다시 써줘"라고 요청하세요.

여러 파일로 쪼개서 줬는데 어디 둘지 모르겠어요 → "각 코드를 어느 파일에 넣어야 하는지 폴더 경로까지 알려줘"라고 물으세요.

자꾸 다른 답을 줘요 → 맥락이 부족한 겁니다. 프로젝트 설명과 설계 문서를 매번 같이 주세요.

6. 오늘의 체크리스트

좋은 프롬프트 4요소(맥락·목표·조건·스택)를 안다
"한 번에 다" 대신 작게 쪼개서 시켜야 함을 이해했다
AI 코드를 검토하는 4가지 기준을 안다
에러 해결 시 정보를 충분히 주는 법을 안다
AI와 함께 첫 화면 컴포넌트를 만들고 커밋했다 ← 가장 중요!

7. 다음 시간 예고

Day 6 — 프론트 기초 + 화면 뼈대 만들기

HTML/CSS 핵심 패턴을 익히고, 와이어프레임을 실제 레이아웃으로
오늘 배운 바이브코딩으로 전체 화면 뼈대를 잡습니다
준비물: 첫 컴포넌트가 올라간 내 저장소

📌 숙제: 오늘 만든 컴포넌트의 코드를 한 줄씩 AI에게 설명 듣고, 이해 안 되는 부분을 정리해 오세요.

AI를 잘 쓰는 사람과 못 쓰는 사람의 차이는 "얼마나 명확히 시키는가"입니다. 명확함이 곧 실력입니다. 🎯