AI 시대, 이제 코딩을 몰라도 나만의 앱과 웹사이트를 만들 수 있습니다. ‘바이브 코딩(Vibe Coding)’은 AI에게 자연어로 원하는 결과물을 설명하고, AI가 코드를 생성하면 그 흐름(바이브)을 따라가며 개발하는 새로운 패러다임입니다. 이 글에서는 대표적인 바이브 코딩 도구인 Cursor, Bolt, Replit을 활용해 실제로 웹 애플리케이션을 만드는 과정을 단계별로 안내합니다.
바이브 코딩이란 무엇인가
바이브 코딩은 2025년 초 Andrej Karpathy가 처음 제안한 개념으로, 기존의 ‘한 줄 한 줄 코드를 작성하는’ 방식 대신 AI와 대화하며 원하는 결과물을 만들어가는 개발 방식입니다. 개발자가 아닌 일반인도 “회원가입 기능이 있는 블로그를 만들어줘”처럼 말하면, AI가 전체 코드 구조를 설계하고 파일을 생성합니다.
핵심은 ‘완벽한 코드 이해’가 아니라 ‘AI가 만든 결과물의 흐름을 읽고, 수정 방향을 지시하는 능력’에 있습니다. 마치 건축주가 설계사에게 “여기 창문 하나 더 넣어주세요”라고 요청하는 것과 비슷합니다. 코드를 직접 쓰지 않아도, 무엇을 원하는지 명확하게 전달할 수 있다면 누구나 개발자가 될 수 있는 시대가 열린 것입니다.
도구별 특징과 선택 가이드
Cursor – 프로 개발 환경에서의 AI 코딩
Cursor는 VS Code를 기반으로 만들어진 AI 코드 에디터입니다. 기존에 VS Code를 사용해본 경험이 있다면 거의 동일한 인터페이스에서 AI 기능을 추가로 사용할 수 있어 진입 장벽이 낮습니다. 가장 큰 장점은 프로젝트 전체 맥락을 이해한다는 점입니다.
Cursor 시작하기 (5분 가이드):
1단계: cursor.com에서 앱을 다운로드하고 설치합니다.
2단계: 새 프로젝트 폴더를 열고, Ctrl+L (Mac: Cmd+L)로 AI 채팅창을 엽니다.
3단계: 다음과 같이 프롬프트를 입력합니다.
React와 Tailwind CSS를 사용해서 할 일 관리 앱을 만들어줘. 기능: 할 일 추가, 완료 체크, 삭제, 날짜별 필터링 디자인: 깔끔한 카드 UI, 다크모드 지원4단계: AI가 생성한 코드를 ‘Apply’ 버튼으로 적용합니다.
5단계: 터미널에서 npm run dev로 실행하고 결과를 확인합니다.
수정이 필요하면 “완료된 항목은 회색으로 표시하고 아래로 이동시켜줘”처럼 추가 지시를 내리면 됩니다.
Bolt.new – 브라우저에서 바로 개발
Bolt.new는 설치 없이 브라우저에서 바로 앱을 만들 수 있는 서비스입니다. 컴퓨터에 개발 환경을 구축할 필요가 전혀 없어서, 비전공자에게 가장 추천하는 도구입니다. 프롬프트 한 줄로 전체 웹앱이 생성되고, 실시간 미리보기를 보면서 수정할 수 있습니다.
Bolt.new 활용 예시:
포트폴리오 웹사이트를 만들어줘. - 메인 히어로 섹션에 내 이름과 소개 - 프로젝트 갤러리 (카드형, 호버시 설명 표시) - 연락처 폼 (이름, 이메일, 메시지) - 반응형 디자인, 모바일 최적화 - 색상 테마: 네이비 + 골드이렇게 입력하면 30초 안에 완성된 포트폴리오 사이트가 나타납니다. 마음에 들지 않는 부분은 “히어로 섹션 배경을 그라데이션으로 바꿔줘”, “프로젝트 카드에 기술 스택 태그를 추가해줘”처럼 대화하듯 수정하면 됩니다.
Replit Agent – 아이디어에서 배포까지 한번에
Replit은 온라인 코딩 환경으로 유명했는데, 여기에 AI Agent 기능이 추가되면서 바이브 코딩의 핵심 플랫폼이 되었습니다. 가장 큰 강점은 데이터베이스 설정, 서버 구성, 배포까지 AI가 자동으로 처리해준다는 점입니다.
Replit Agent로 SaaS 만들기:
간단한 설문조사 플랫폼을 만들어줘. - 사용자가 설문을 만들 수 있음 (객관식, 주관식, 별점) - 고유 링크로 설문 공유 가능 - 응답 결과를 차트로 시각화 - 로그인은 이메일 인증 방식Replit Agent는 이 요청을 받으면 데이터베이스 스키마 설계, API 엔드포인트 생성, 프론트엔드 UI 구현, 배포 설정까지 순차적으로 진행합니다. 중간중간 “이렇게 진행해도 될까요?”라고 확인을 받으며 작업하기 때문에, 원하지 않는 방향으로 흘러가는 것을 방지할 수 있습니다.
효과적인 프롬프트 작성법
바이브 코딩에서 가장 중요한 스킬은 ‘프롬프트 엔지니어링’입니다. 같은 도구를 써도 프롬프트를 어떻게 쓰느냐에 따라 결과물의 품질이 크게 달라집니다. 다음은 실전에서 검증된 프롬프트 작성 원칙입니다.
원칙 1: 구체적으로 설명하라
“예쁜 웹사이트 만들어줘”보다 “네이비 배경에 화이트 텍스트, 왼쪽에 사이드바가 있는 대시보드 레이아웃”이 훨씬 좋은 결과를 만듭니다.
원칙 2: 기능을 목록으로 나열하라
장문의 설명보다 기능을 하나씩 목록으로 정리하면 AI가 빠짐없이 구현합니다.
원칙 3: 한번에 하나씩 수정하라
여러 수정사항을 한꺼번에 요청하면 충돌이 생길 수 있습니다. “버튼 색상을 파란색으로 바꿔줘”를 적용한 뒤, “버튼에 호버 애니메이션을 추가해줘”를 따로 요청하는 것이 안정적입니다.
원칙 4: 에러가 나면 에러 메시지를 그대로 붙여넣어라
AI는 에러 메시지를 읽고 원인을 파악하는 데 매우 뛰어납니다. “안 돼요”보다 에러 로그를 복사해서 “이 에러를 해결해줘”라고 하면 거의 대부분 즉시 수정됩니다.
원칙 5: 레퍼런스를 제공하라
“노션처럼 생긴 메모 앱”, “인스타그램 피드 같은 레이아웃”처럼 잘 알려진 서비스를 레퍼런스로 제시하면, AI가 의도를 정확히 파악합니다.
실전 프로젝트: 랜딩페이지 30분 만에 완성하기
이론만으로는 부족합니다. 실제로 바이브 코딩으로 랜딩페이지를 만들어보겠습니다. Bolt.new를 사용하며, 소요 시간은 약 30분입니다.
Step 1 – 기본 구조 생성 (5분)
온라인 코딩 교육 서비스의 랜딩페이지를 만들어줘. 섹션 구성: 1. 히어로: "코딩, AI가 가르쳐드립니다" 헤드라인 + CTA 버튼 2. 특징 소개: 아이콘 카드 3개 (1:1 맞춤, 실전 프로젝트, 수료증) 3. 커리큘럼: 아코디언 형태로 주차별 내용 4. 수강 후기: 카드 슬라이더 5. 가격 플랜: 3단 비교 테이블 6. FAQ: 아코디언 7. 푸터: 연락처, SNS 링크 디자인: 모던, 보라+화이트 컬러, 부드러운 스크롤 애니메이션Step 2 – 디자인 다듬기 (10분)
생성된 결과를 보면서 하나씩 수정합니다. “히어로 배경에 파티클 애니메이션을 넣어줘”, “가격 플랜에서 추천 플랜에 뱃지를 달아줘”, “모바일에서 메뉴를 햄버거 아이콘으로 바꿔줘” 등 시각적 요소를 개선합니다.
Step 3 – 기능 추가 (10분)
“CTA 버튼 클릭시 신청 폼 모달이 뜨게 해줘”, “폼 제출시 이메일 알림이 가게 Emailjs를 연동해줘”, “스크롤 시 네비게이션 바가 고정되게 해줘” 등 실제 사용에 필요한 기능을 추가합니다.
Step 4 – 최종 점검 및 배포 (5분)
모바일, 태블릿, 데스크톱에서 각각 확인하고, Bolt.new의 배포 기능으로 바로 공개합니다. 커스텀 도메인 연결도 가능합니다.
핵심 요약
바이브 코딩은 코딩 실력이 아니라 ‘무엇을 만들고 싶은지 명확하게 표현하는 능력’이 핵심입니다. Cursor는 복잡한 프로젝트에, Bolt.new는 빠른 프로토타이핑에, Replit은 풀스택 서비스 구축에 각각 강점이 있습니다. 프롬프트는 구체적으로, 수정은 한번에 하나씩, 에러는 그대로 복붙하는 것이 실전 노하우입니다.
두온교육에서는 이러한 바이브 코딩 실습을 포함한 AI 활용 교육을 진행하고 있습니다. 비전공자도 30분 안에 자신만의 웹 서비스를 만들어볼 수 있는 실전 중심 커리큘럼으로 구성되어 있으니, AI 시대의 새로운 개발 역량에 관심이 있다면 두온교육의 바이브 코딩 과정을 확인해보시기 바랍니다.
