바이브 코딩 시작 전 꼭 알아야 할 핵심 개념 4가지

바이브 코딩 시작 전 꼭 알아야 할 핵심 개념 4가지

바이브 코딩은 AI에게 대략적인 방향과 느낌(Vibe)만 던져주면 코드를 알아서 짜주는 방식을 말합니다.
예전에는 직접 코드를 작성해야 했다면 이제는 요구사항을 설명하고 결과물을 만들어가는 방식으로 개발할 수 있습니다.
프로그램은 식당과 비슷합니다.
우리가 식당 구조를 알고 있어야 AI에게 정확히 일을 시킬 수 있습니다.

 

---

바이브 코딩

바이브 코딩(Vibe Coding)은 프로그래밍 문법을 직접 하는 대신에 사람이 일상적인 프롬프트로 AI에게 원하는 느낌(Vibe)과 기능만 지시하여 소프트웨어를 개발하는 방식을 뜻합니다.
전 OpenAI의 공동 창립자이자 AI 연구원인 안드레 카파시(Andrej Karpathy)가 처음 제시한 용어입니다.

 

바이브 코딩
자연어 중심 개발	같이 원하는 느낌과 의도를 말하면 AI가 즉시 이해하고 코드를 짜냅니다.
신속한 프로토타이핑	웹 서비스나 앱 제작을 단 몇 시간, 심지어 몇 분 만에 완성합니다.
대화형 피드백 루프	개발 프로세스가 주고받는 대화로 단순화됩니다.
디렉터로의 역할 전환	결과물이 올바른지 검증하고 기획과 감독 역할이 중요해집니다.
비전문가 진입 가능	아이디어만 있다면 직접 만들어 배포할 수 있습니다.

 

 

바이브 코딩 5가지 핵심

 

---

웹사이트 구조

웹사이트 구조를 식당에 비유하면 이렇습니다.

 

웹사이트 구조
웹사이트	식당
프로트엔드	매장
백앤드	주방
상태	손님 상황
DB	대형 냉장고
API	배달 기사
에러로그	문제 기록장

 

반응형

한눈에 이해하는 웹사이트 구조 식당 비유

 

---

매장과 주방

AI에게 일을 시킬 때는 매장과 주방을 나누어 지시해야 합니다.

프론트엔드 = 손님이 보는 매장
웹사이트에서 눈에 보이는 파란색 버튼, 예쁜 로고, 글자 레이아웃 같은 영역입니다.
AI에게 매장 인테리어를 시키는 것입니다.

백엔드 = 안 보이는 주방
음식을 만들고 주문을 확인하는 주방입니다.
주문 확인, 회원가입 처리, 결제 계산, 재고 관리 등을 처리합니다.

 

 

바이브 코딩 핵심 개념 매장과 주방

 

---

손님 상황

식당은 현재 조건과 손님의 현재 상태를 계속 기억해야 합니다.
식당이 영업 시작 전일 때의 안내문과 재료가 모두 소진되었을 때의 안내문은 달라야 합니다.
웹사이트도 로그인하기 전과 로그인에 성공한 후의 조건에 따라 달라져야 합니다.

 

손님 상황

손님이 들어옴 → 자리에 앉음 → 메뉴를 봄 → 주문함 → 음식 기다림 → 식사함 → 계산함 → 나감

로그인 안 함 → 로그인 화면 보여줌

로그인 완료 → 마이페이지 보여줌

장바구니 비어 있음 → 빈 장바구니 화면

상품 있음 → 상품 목록 보여줌

바이브 코딩 핵심 개념 손님 상황

 

---

배달기사와 대형 냉장고

DB = 내부 데이터를 보관하는 대형 냉장고
식당에는 재료를 보관하는 대형 냉장고가 있습니다.
이게 데이터베이스(DB)입니다.

 

DB

회원 정보

주문 기록

상품 목록

리뷰 데이터

 

API = 외부와 연결하는 식재료 배달 배달기사
식당에 재료가 부족하면 외부에서 가져와야 합니다.
이때 배달기사가 가져옵니다.
이것이 API입니다.

API

날씨 정보 가져오기

결제 시스템 연결하기

지도 정보 가져오기

문자 발송하기

 

 

바이브 코딩 핵심 개념 배달 기사와 대형 냉장고

 

---

문제 기록장

주문이 안 들어갔거나 음식이 잘못 나왔거나 등의 문제가 발생했을 때 기록을 봐야 합니다.
이것이 에러 로그입니다.

손님이 언제 주문했는지 어떤 메뉴를 눌렀는지 어디서 막혔는지 등의 기록이 있어야 문제를 찾을 수 있습니다.
손님이 메뉴를 주문했는데 결제 단계에서 실패했고 이런 에러가 발생했습니다라고 AI에게 알려야 빠르게 해결할 수 있습니다.

 

바이브 코딩 핵심 개념 문제 기록장

 

---

AI에게 첫 주문 넣기

이제는 AI 요리사에게 직접 첫 주문을 할 차례입니다.

 

[AI] - 바이브 코딩 프롬프트 작성법 AI에게 첫 주문 넣기

바이브 코딩 프롬프트 작성법 AI에게 첫 주문 넣기

 

---

재주문하기

주문했는데 음식이 잘못 나왔다면 상황에 맞게 피드백을 주어야 합니다.

[AI] - 바이브 코딩 디버깅 AI에게 재주문하는 법

바이브 코딩 디버깅 AI에게 재주문하는 법

 

---

AI가 헷갈리기 시작할 때 새 주문 넣는 법

AI와 오래 대화를 나누다 보면 똑같은 실수를 반복할 때가 있습니다.
그럴 때 새 대화방을 열어 새 주문을 넣어야 할 타이밍이 있습니다.

 

[AI] - 바이브 코딩 문맥 초기화 AI가 헷갈리기 시작할 때 새 주문 넣는 법

바이브 코딩 문맥 초기화 AI가 헷갈리기 시작할 때 새 주문 넣는 법

 

---

요약

1. 웹사이트 = 식당
2. 프로트엔드 = 매장
3. 백앤드 = 주방
4. 상태 = 손님 상황
5. DB = 대형 냉장고
6. API = 배달 기사
7. 에러로그 = 문제 기록장