바이브코딩 뜻·시작법·도구 비교, AI 4개로 할 일 앱 24번 만들어 봤어요

바이브코딩은 코드를 직접 쓰지 않고, 만들고 싶은 것을 AI 에게 말로 설명해 프로그램을 만드는 방법이에요. "할 일 목록 웹앱 만들어 줘"라는 같은 부탁을 AI 4개에 3번씩 해 봤어요. 12번 모두 제대로 돌아가는 앱이 나왔어요. 한 번에 6~18초, 7~50원이었어요.

글쓴이 서순명(솔리드그루 이사, futureinfra.ai) · 운영사 솔리드그루(사업자등록번호 875-44-00335) · 문의 support@futureinfra.ai · 02-6933-6229 · 측정 2026년 10월 1일 서울 · 이해관계: 퓨쳐인프라는 AI 라우터·앱 호스팅·교육을 운영해요. 다른 회사 도구는 공식 페이지만 확인했어요.

바이브코딩이 뭐예요?

바이브(vibe)는 "느낌·분위기"라는 뜻이에요. 코드 한 줄 한 줄을 따지지 않고, 원하는 느낌을 말로 전하면 AI 가 코드를 써 줘요. 사람은 결과를 눌러 보고 "여기 고쳐 줘"라고 다시 말해요.

이 말은 2025년 2월 안드레이 카파시가 X(옛 트위터) 글에서 처음 썼어요. 카파시는 오픈AI 공동 창업자이고 테슬라에서 AI 를 이끌었던 사람이에요. 같은 해 11월 콜린스 영어 사전은 "vibe coding"을 2025년 올해의 단어로 뽑았어요(위키백과).

노코드와는 뭐가 달라요?

노코드는 정해진 블록을 끌어다 놓아 앱을 만드는 도구예요. 블록에 없는 기능은 만들기 어려워요. 바이브코딩은 AI 가 진짜 코드를 써요. 그래서 할 수 있는 범위가 넓고, 만든 코드를 내 것으로 가져갈 수 있어요. 대신 코드가 맞는지 확인하는 일은 사람 몫으로 남아요.

쉽게 말하면 노코드는 레고 세트, 바이브코딩은 목수에게 말로 주문하는 거예요. 목수는 뭐든 만들어 주지만, 다 만든 뒤 문이 잘 닫히는지는 내가 열어 봐야 해요.

바이브코더는 누구예요?

바이브코더는 바이브코딩으로 무언가를 만드는 사람이에요. 개발자일 수도 있고, 코딩을 한 번도 안 해 본 기획자·사장님·학생일 수도 있어요. 하는 일은 셋이에요. 만들 것을 말로 설명하고, 결과를 눌러 보고, 고칠 점을 다시 말해요.

개발자와 다른 점은 코드 문법보다 "무엇을 확인할지"에 힘을 쓴다는 거예요. 그래서 아래 실험도 코드를 읽지 않고, 버튼을 눌러 보는 방식으로 확인했어요. 바이브코더가 실제로 하는 일과 같아요.

정말 말만으로 돼요? AI 4개에 같은 부탁을 해 봤어요

직접 해 봤어요. 코딩을 모르는 사람이 칠 법한 부탁 한 문장을 AI 4개에 똑같이 보냈어요. 모델마다 3번씩, 모두 12번이에요.

할 일 목록 웹앱을 HTML 파일 하나로 만들어 줘. 할 일을 추가하고, 완료 체크하고, 삭제할 수 있어야 해. 새로고침해도 목록이 남아 있게 해 줘. 다른 파일이나 외부 라이브러리 없이 코드만 보내 줘.

받은 코드는 손대지 않고 todo.html 로 저장했어요. 파일을 더블클릭하면 크롬에서 바로 열려요. 사람이 하는 순서대로 눌러 본 화면이에요(Claude Sonnet 5.5 1회차).

12개 앱 모두를 이렇게 손으로 누르면 실수가 생겨요. 그래서 크롬을 자동으로 움직여 같은 순서로 눌러 보며 아래 7가지를 확인했어요. 기준은 먼저 정해 두었어요.

// 판정 코드 핵심(Node.js + Playwright, 실제로 돌린 judge.mjs 에서 줄임)
await page.goto(fileUrl);                        // ① 열기 — pageerror 가 0건이면 통과
for (const t of ["우유 사기", "책 읽기", "운동 30분"]) {
  await input.fill(t); await input.press("Enter"); // ② 추가(안 되면 '추가' 버튼)
}
await row("우유 사기").check();                   // ③ 체크 전후 상태(checked·줄긋기)가 바뀌나
await row("책 읽기").deleteButton.click();         // ④ 화면에서 사라지나
await page.reload();                             // ⑤ 추가·완료·삭제가 그대로인가
await input.fill("   "); await input.press("Enter"); // ⑥ 개수가 그대로인가
await add('<img src=x onerror="window.__x=1">');  // ⑦ window.__x 가 생기지 않나

결과는 12개 모두 ①~⑤를 통과했어요. 빈칸 막기와 태그 안전(⑥⑦)까지 통과한 앱도 12개였어요. 판정기가 엉터리가 아닌지 보려고, 일부러 허술하게 짠 앱도 넣어 봤어요. 그 앱은 ⑤⑥⑦에서 떨어졌어요.

이 판정에도 한계가 있어요. 자동으로 누르는 방식이라 디자인이 예쁜지, 휴대폰에서 쓰기 편한지는 보지 않았어요. 저장은 모두 브라우저 안(localStorage)이라, 다른 기기나 다른 브라우저에서는 목록이 따로 놀아요. ⑦은 흔한 공격 문구 한 가지만 넣어 본 것이라 "보안 검사를 통과했다"는 뜻은 아니에요.

생김새는 조금씩 달라요. GPT-5.6 Terra 는 새 할 일을 맨 위에 붙였고, 나머지는 아래에 붙였어요. Sonnet·DeepSeek 은 "남은 할 일 2개" 같은 숫자를 알아서 넣었어요. 완료한 일을 한꺼번에 지우는 버튼도 더했어요. 부탁하지 않은 기능도 AI 가 덧붙인다는 뜻이에요.

고쳐 달라고 하면 잘 고쳐요?

바이브코딩은 한 번에 끝나지 않아요. 써 보고 고쳐 달라는 일이 대부분이에요. 그래서 같은 대화를 이어 한 번 더 부탁했어요.

좋아. 여기에 할 일마다 마감일을 넣을 수 있게 해 줘. 마감일이 지난 할 일은 빨간 글씨로 보여 주고, 목록은 마감일이 가까운 순서로 정렬해 줘. 고친 전체 코드를 다시 보내 줘.

마감일이 2020년(지난 일)·2030년·2099년인 할 일을 일부러 순서를 섞어 넣었어요. 그리고 네 가지를 봤어요. 날짜 칸이 생겼나, 지난 일이 빨간 글씨인가, 가까운 순서로 줄을 섰나, 새로고침해도 그대로인가예요. 12개 중 11개가 모두 맞았어요.

틀린 하나는 DeepSeek 3회차였어요. 할 일 이름은 검은 글씨 그대로고, 그 밑의 날짜 줄만 빨갛게 바꿨어요. "빨간 글씨"를 어디까지로 볼지 AI 가 좁게 읽은 거예요. 이럴 땐 "할 일 이름까지 빨갛게"라고 한 번 더 말하면 돼요.

하나 더 있어요. Gemini 1회차는 마감일을 꼭 넣어야만 추가되게 바꿨어요. 마감일 없는 할 일은 못 넣게 된 거예요. 부탁에 없던 규칙이 생길 수 있으니, 고친 뒤에는 원래 되던 기능도 다시 눌러 보세요.

얼마나 걸리고 얼마 들어요?

처음 만들기는 9.1~15.1초 걸렸어요. 고쳐 달라기는 코드 전체를 다시 쓰느라 16.1~33.3초였어요. 돈은 모델 값 차이가 그대로 보였어요. 넷 중 가장 싼 DeepSeek 은 11원, 가장 비싼 쪽도 44원이었어요.

이 정도 앱은 어느 모델이든 됐어요. 차이는 값과 디자인 취향이었어요. 앱이 커지면(로그인·결제·여러 화면) 모델 차이가 더 크게 날 수 있어요. 이번 실험은 작은 앱 하나만 잰 결과예요.

어떤 도구로 시작해요?

위 실험은 AI 에게 직접 부탁하는 가장 간단한 방법이었어요. 실제로는 바이브코딩을 돕는 도구를 많이 써요. 크게 세 갈래예요.

값은 2026년 10월 1일 각 회사 공식 가격 페이지에서 봤어요. 클로드는 한국 부가세 10%가 들어간 값이고, 나머지는 세금이 따로 붙을 수 있어요. 코딩이 처음이면 브라우저형, 코드를 보며 배우려면 편집기형, 큰 일을 맡기려면 에이전트형이 편해요. 도구별 장단점과 무료 한도는 바이브코딩 플랫폼 비교 글에 정리했어요. 클로드 코드 쓰는 법은 클로드 코드 사용법·가격 글에 있어요.

처음이라면 어떻게 시작해요?

부탁(프롬프트)은 어떻게 써요?

이번 실험에서 잘 된 이유는 부탁에 확인할 기준이 다 들어 있었기 때문이에요. "추가·완료·삭제·새로고침해도 남게"처럼 눌러 보면 맞는지 알 수 있는 말로 쓰세요. "예쁘게", "알아서"만 쓰면 AI 마다 다른 걸 만들어요.

만든 앱을 인터넷에 올리려면요?

AI 가 만든 todo.html 은 내 컴퓨터에서만 열려요. 친구 휴대폰에서도 열리게 하려면 인터넷 주소가 있는 곳에 올려야 해요. 이걸 배포라고 해요.

러버블·볼트처럼 자기 주소에 바로 올려 주는 도구도 있어요. 다른 도구로 만들었거나, 내 도메인·데이터베이스가 필요하면 호스팅을 따로 써요. 퓨쳐인프라 앱 호스팅은 도커 이미지를 올리면 주소와 HTTPS(자물쇠 표시)가 같이 붙어요. 도커 이미지는 앱과 실행에 필요한 것을 한 상자에 담은 파일이에요.

쓰지 않을 때 앱을 정지하면 실행 요금(월 5,000원 몫)이 멈춰요. 자리 값 500원과 저장 공간 값은 지울 때까지 붙어요. 앱을 하나라도 쓰는 달에는 최소 3,300원이 나가요. 도커 이미지를 만드는 법과 다른 곳 값 비교는 도커 호스팅 비용 비교 글에 있어요.

바이브코딩, 조심할 점은요?

이번 할 일 앱은 모두 잘 됐지만, 늘 그렇진 않아요. 특히 남이 쓰는 앱을 올릴 때는 아래를 꼭 확인하세요.

코드를 하나도 모르면 문제가 생겼을 때 어디를 고쳐 달라고 할지 막막해요. 그래서 "무엇을 확인할지"를 먼저 정하는 습관이 코딩 문법보다 중요해요. AI 에게 "이 코드에서 보안상 위험한 부분을 찾아 줘"라고 따로 물어보는 것도 방법이에요.

어디서 배울 수 있어요?

혼자 해 보다 막히면 함께 해 보는 자리가 빨라요. 퓨쳐인프라 바이브코딩 교육은 각자 만들고 싶은 서비스를 가져와서 해요. 화면을 만들고, 실제 주소로 배포하는 데까지 함께 해 봐요. 문법을 외우는 수업이 아니라, 신청할 때 적은 내 아이디어로 실습해요.

자주 묻는 질문

바이브코딩 뜻이 뭐예요?

코드를 직접 쓰지 않고 AI 에게 말로 설명해 프로그램을 만드는 방법이에요. 2025년 2월 안드레이 카파시가 처음 쓴 말이에요.

코딩을 몰라도 바이브코딩을 할 수 있나요?

작은 앱은 돼요. 할 일 목록 앱을 AI 4개에 3번씩 부탁했더니 12번 모두 제대로 동작했어요. 다만 결과를 눌러 보고 확인하는 일은 사람이 해야 해요.

바이브코딩은 무료로 할 수 있나요?

러버블·볼트·커서는 무료로 시작할 수 있어요(한도 있음). AI 에 직접 부탁하면 한 번에 몇십 원이에요. 이번 실험에서는 한 번에 7~89원이 들었어요.

바이브코딩 도구는 뭐가 좋아요?

코딩이 처음이면 러버블·볼트, 코드를 보며 배우려면 커서, 큰 일을 맡기려면 클로드 코드가 맞아요. 유료는 월 $20~25부터예요.

만든 앱은 어떻게 다른 사람에게 보여 주나요?

인터넷 주소가 있는 곳에 올려요(배포). 퓨쳐인프라 앱 호스팅은 월 5,500원(부가세 포함)이고 주소와 HTTPS 가 자동으로 붙어요.

바이브코딩으로 만든 앱은 안전한가요?

확인이 필요해요. 비밀번호·키를 코드에 넣지 말고, 남이 입력한 글이 코드로 실행되지 않는지 시험해 보세요.

이 글의 숫자는 어디서 왔나요?

부록: 회차별 원자료