2024년부터 ‘바이브 코딩 (vibe coding)’ 이라는 말이 퍼지기 시작했다. 문법이나 알고리즘을 외우지 않고, AI 에게 ‘이런 느낌의 앱을 만들어줘’ 라고 말하면 실제로 동작하는 코드가 나오는 시대다. 이 글은 코드를 한 번도 안 짜본 일반인이 한 달 안에 자기 앱을 배포하는 현실적인 경로를 다룬다.
바이브 코딩이란 무엇인가
Andrej Karpathy (전 Tesla AI 디렉터) 가 X 에 쓴 표현이다. “나는 코드를 보지 않고 그냥 말한다. 동작하는 한 그게 뭐든 상관없다.” 이게 바이브 코딩의 정의다. AI 가 70% 이상의 코드를 쓰고, 사람은 ‘방향’ 과 ‘판단’ 만 한다.
과거에 ‘노코드’ 라고 불리던 흐름과 다르다. 노코드는 정해진 블록 안에서만 만들 수 있다. 바이브 코딩은 진짜 코드를 쓰지만 사람이 직접 안 쓸 뿐이다. 자유도가 훨씬 높다.
도구 — 무엇으로 시작하나
- Cursor: AI 가 내장된 VS Code 포크. 일반인이 가장 빠르게 진입 가능. 유료 ($20/월) 지만 14일 무료 체험.
- Claude Code: 터미널 기반. 복잡한 작업·여러 파일 동시 수정에 강함. 본 사이트도 이걸로 만들었다.
- v0.dev (Vercel): UI 컴포넌트 한정. 디자인을 그림으로 보여주면 React 컴포넌트로 만들어줌. Next.js 와 호환 100%.
- Replit Agent: 브라우저에서 바로 코딩 + 배포. 설치 0. 가장 ‘일반인 친화적’.
- Lovable: 한 줄로 풀스택 앱 생성. UI/UX 가 깔끔하지만 커스터마이즈가 약함.
처음이라면 Cursor + Claude Sonnet 또는 Replit Agent 를 추천한다. 전자는 로컬 작업, 후자는 ‘설치 자체가 부담’ 인 사람용.
첫 번째 앱 — 무엇을 만들까
욕심내지 마라. 첫 앱은 ‘하나의 입력 → 하나의 출력’ 으로 끝나는 도구가 좋다. 다음 중 하나를 골라라:
- 퇴근 시간 카운트다운 페이지
- 오늘 점심 메뉴 랜덤 추첨
- BMI 계산기
- 한국식 나이 ↔ 만 나이 변환기
- 월급 실수령액 계산기
규칙: 데이터베이스 없이, 로그인 없이, 외부 API 없이 만들 수 있는 것. 이게 바이브 코딩 1단계다.
실전 흐름 — 주말 1박 2일 코스
토요일 오전: 환경 셋업 (2시간)
- Cursor 설치 (cursor.com)
- Node.js LTS 설치 (nodejs.org)
- GitHub 가입 + Git 설치
- Vercel 가입 (배포용, 무료)
토요일 오후: 첫 프로젝트 (4시간)
Cursor 에서 새 폴더를 열고 다음과 같이 채팅:
Next.js 15 App Router로 BMI 계산기를 만들어줘.
- 키(cm)와 몸무게(kg) 입력
- BMI 자동 계산 (저체중/정상/과체중/비만 분류)
- Tailwind CSS로 모바일 우선 디자인
- 다크모드 토글 포함AI 가 만든 파일을 그대로 받아들이지 말고 한 번씩 직접 읽어보라. 이해 안 가는 부분은 “이 코드가 뭘 하는지 한 줄씩 설명해줘” 라고 다시 물어라. 이해의 깊이가 다음 프로젝트의 속도를 결정한다.
일요일 오전: 디자인 다듬기 (3시간)
- 색상 톤을 통일 (Tailwind 의 emerald, slate 활용)
- 모바일 320px 너비에서 안 깨지는지 확인 (Cursor 에서 ‘모바일에서 어떻게 보이는지 확인해줘’)
- 로딩 상태, 에러 상태 추가
일요일 오후: 배포 (1시간)
- GitHub 에 push (Cursor 안에서 commit 도 도와줌)
- Vercel 에 import → 자동 빌드/배포
- 도메인 연결 (선택, $10/년)
일요일 저녁이면 인터넷에 ‘내가 만든 앱 URL’ 이 떠 있다.
주의 — 바이브 코딩의 함정
- 보안: AI 는 잘못된 코드를 자신 있게 쓴다. 인증·결제·DB 처리는 반드시 사람이 검토. 노출되면 안 되는 키 (.env) 는 절대 GitHub 에 올리지 마라.
- 스케일: 사용자 1명에게 동작하는 코드와 1만 명에게 동작하는 코드는 다르다. 처음에는 작게 시작.
- 의존성: AI 가 추천한 라이브러리가 유지보수가 끊긴 패키지일 수 있다. npm 다운로드 수, 마지막 업데이트 날짜 확인.
- 코드 품질의 함정: ‘동작은 하는데 왜 그런지 모르겠는 코드’ 가 쌓이면 디버깅이 지옥. 매주 한 번은 ‘AI 야 이 코드의 잠재적 문제를 찾아줘’ 같은 셀프 리뷰.
다음 단계 — 바이브에서 진짜 개발자로
바이브 코딩은 시작점일 뿐 종착역이 아니다. 한두 개 앱을 배포한 뒤에는:
- JavaScript / TypeScript 기초 1~2주 빠르게 보기
- HTTP, REST, JSON 의 의미만 이해하기
- Git 기본 명령어 5개만 익히기 (clone, add, commit, push, pull)
- Stack Overflow 없이 에러 메시지 직접 읽기 연습
이 정도가 갖춰지면 ‘느낌으로 시키는 단계’ 에서 ‘구조를 보고 시키는 단계’ 로 올라간다. AI 가 못 하는 일이 보이기 시작하고, 그게 진짜 가치 있는 영역이다.
오늘 시작하라
한 달 후의 너는 ‘프로그래밍을 시작했어야 했다’ 고 후회하거나, ‘첫 앱이 떴네’ 라고 보고 있다. 둘 중 어느 쪽일지는 이번 주말의 6시간이 결정한다.
본 글은 입문 가이드이며, 상업 서비스 운영 전에는 보안·법률·세무 검토가 필요하다. 한국에서 결제 시스템을 붙일 경우 PG, 정보보호법 신고 의무도 함께 확인하라.