바이브 코딩이란 만들고 싶은 앱이나 웹사이트를 한국어로 AI에게 설명하고, AI가 작성한 코드를 일일이 읽지 않은 채 실제로 동작하는 화면을 보면서 대화로 고쳐 나가는 방식입니다. "예약 페이지를 만들어 주세요", "버튼을 더 크게 해 주세요"처럼 요청하면 되기 때문에 프로그래밍 경험이 없어도 작은 앱은 충분히 만들 수 있습니다. 아래에서 뜻과 유래, 실제 만드는 과정, 주의할 점을 차례로 살펴봅니다.
바이브 코딩의 뜻과 유래
이 말을 처음 쓴 사람은 OpenAI 공동 창업자이자 테슬라에서 AI 디렉터를 지낸 안드레이 카르파시(Andrej Karpathy)입니다. 그는 2025년 2월 X에 올린 글에서, AI에게 말로 지시하고 제안을 거의 그대로 받아들이며 "코드가 존재한다는 사실조차 잊는" 작업 방식을 vibe coding이라고 불렀습니다. 한국에서는 "바이브 코딩" 또는 붙여서 "바이브코딩"이라고 씁니다.
핵심은 코드를 쓰는 일에서, 설명하고 결과를 확인하는 일로 중심이 옮겨 간다는 점입니다. 문법을 외우는 능력보다, 원하는 것을 정확하게 설명하는 능력과 결과물이 맞는지 직접 확인하는 습관이 더 중요해집니다. 영어로 된 자세한 설명은 What is vibe coding에 있습니다.
실제 예시: 프롬프트 하나에서 앱 공개까지
VibeDream으로 만드는 과정을 예로 들어 보겠습니다. VibeDream 화면은 현재 영어로 되어 있지만, 채팅창에는 한국어로 그대로 입력할 수 있고 앱 안의 문구도 한국어로 만들어 달라고 요청할 수 있습니다. New Project를 누르고 아래처럼 붙여 넣거나, 마이크 버튼을 눌러 말로 설명합니다.
성수동에 있는 작은 꽃집 "오늘의 꽃" 예약 주문 페이지를 만들어 주세요.
손님이 휴대폰으로 꽃다발 종류(계절 꽃다발, 장미 꽃다발, 미니 꽃다발), 수령 날짜와 시간, 이름, 연락처, 카드 문구를 입력할 수 있게 해 주세요.
주문을 보내면 "예약이 접수되었습니다" 화면과 주문 내용을 보여 주세요.
분위기는 따뜻하고 차분하게, 연한 베이지 배경, 둥근 버튼, 큰 글씨로 해 주세요.
모든 문구는 한국어로 해 주세요.몇 초 안에 채팅 옆에 미리보기가 나타나고, AI가 작업하는 동안 화면이 채워집니다. 다 만들어지면 손님이 된 것처럼 모든 버튼을 눌러 보고, 일부러 연락처를 비운 채 주문을 보내 봅니다. 이상한 점이 보이면 한 번에 하나씩 고쳐 달라고 요청합니다.
- "휴대폰에서 보면 꽃다발 카드가 너무 붙어 있어요. 세로로 쌓고 간격을 넓혀 주세요."
- "지난 날짜는 고를 수 없게 하고, 내일부터만 선택되게 해 주세요."
- "주문 목록을 볼 수 있는 관리자 페이지를 만들고 비밀번호로 보호해 주세요."
원하는 대로 동작하면 Put it online을 누르고 공개할 이름을 정합니다. 보통 1~3분 안에 todaysflower.vibedreams.ai 같은 HTTPS 주소로 공개되며, 한 번 공개할 때 5크레딧이 듭니다. 내 도메인은 TXT 레코드와 CNAME 레코드를 추가해 연결할 수 있습니다. 다만 www가 없는 루트 도메인은 아직 지원하지 않아 www 주소를 연결합니다.
노코드, 일반 프로그래밍과 무엇이 다른가요
- 일반 프로그래밍: 코드를 직접 쓰고 모든 구조를 이해하며 관리합니다. 자유도가 가장 높지만 배우는 데 시간이 오래 걸립니다.
- 노코드: 미리 만들어진 블록을 끌어다 조립합니다. 배우기 쉽지만 도구가 지원하지 않는 기능은 만들기 어렵고, 보통 코드를 가져갈 수 없습니다.
- 바이브 코딩: 말로 설명하면 AI가 실제 코드를 씁니다. VibeDream에서는 앱은 React와 FastAPI로, 게임은 Phaser로 만들어지며, ZIP으로 내려받거나 GitHub에 동기화할 수 있습니다.
바이브 코딩으로 만들 수 있는 것
- 가게나 서비스 소개용 랜딩 페이지, 사전 신청을 받는 대기자 명단 페이지
- 예약 주문, 상담 신청, 설문 같은 입력 폼
- 가계부, 운동 기록장처럼 나와 가족을 위한 작은 도구
- 팀 재고표, 근무표 같은 사내용 도구
- 휴대폰과 컴퓨터에서 모두 즐길 수 있는 브라우저 게임
빈 화면에서 시작하기가 막막하다면 템플릿을 골라 채팅으로 내 상황에 맞게 바꾸는 방법도 있습니다. 회사나 가게 홈페이지를 만드는 과정은 홈페이지 만들기 가이드에서 따로 정리했습니다.
시작하는 방법과 요령
- 첫 문장을 정합니다. 누구를 위해 무엇을 하는 앱인지 씁니다. "꽃집 예약 주문"처럼 구체적일수록 결과가 좋아집니다.
- 화면과 입력 항목을 나열합니다. 첫 화면, 주문 폼, 완료 화면처럼 필요한 화면을 이름으로 알려 줍니다.
- 디자인은 말로 설명합니다. 색과 분위기를 적으면 충분하고, 참고하고 싶은 사이트의 스크린샷을 첨부해도 됩니다.
- 한 번에 하나만 고칩니다. 열 가지를 한꺼번에 요청하는 것보다 하나씩 확인하는 편이 실패가 적고 원인도 바로 찾을 수 있습니다.
- 오류는 그대로 붙여 넣습니다. 화면에 나온 오류 문구를 복사해 채팅에 붙이고 "이 버튼을 누르면 나와요"라고 덧붙입니다.
첫 프롬프트부터 공개까지 단계별로 더 알고 싶다면 영어 가이드 How to vibe code를 참고하세요.
주의할 점: 보안과 비용
바이브 코딩은 빠른 만큼 확인 과정을 건너뛰기 쉽습니다. 모르는 사람이 로그인하거나 개인정보를 입력하는 앱을 공개하기 전에는 아래 내용을 꼭 확인하세요.
- API 키 같은 비밀 값은 채팅이나 코드에 직접 쓰지 않습니다. VibeDream에서는 프로젝트의 Settings 탭에 넣고 서버에서만 읽습니다.
- 로그인과 데이터 저장은 AI에게 요청하면 앱 안에 만들어 줍니다. 채팅 아래의 Add login이나 Add database를 누르면 원터치로 설정할 수도 있습니다.
- 결제를 받으려면 내 Stripe 계정을 앱에 연결합니다.
- 이름이나 연락처를 받는다면 개인정보 처리방침을 함께 게시하세요.
- 크레딧은 메시지마다 쓰이므로, 목적이 분명한 짧은 요청이 더 오래 갑니다.
공개 전 점검 항목은 영어로 된 vibe coding security checklist에 정리되어 있습니다.
바이브 코딩 툴 고르는 법
바이브 코딩 툴로는 VibeDream 외에도 Lovable, Bolt, Replit, Cursor 등이 있습니다. Cursor는 코드를 직접 다루는 개발자용 편집기이고, 나머지는 대부분 브라우저 안에서 모든 작업이 끝납니다. 미리보기가 얼마나 보기 쉬운지, 공개까지 몇 단계가 필요한지, 코드를 가져갈 수 있는지, 요금 구조가 어떤지 네 가지를 비교하면 고르기 쉽습니다. 영어로 된 vibe coding tools 비교도 참고할 만합니다. VibeDream 요금제는 월 49달러에 60크레딧을 주는 All Access Mini부터 시작하며, 자세한 내용은 요금 페이지에서 볼 수 있습니다.