코드를 몰라도 앱을 만들 수 있다면 어떨까요? 불과 2~3년 전만 해도 개발은 전공자들의 전유물이었지만, 지금은 달라졌습니다. 바이브 코딩(Vibe Coding)이라는 새로운 개발 방식이 등장하면서 비전공자도, 기획자도, 디자이너도 자신만의 서비스를 직접 만들어 내고 있습니다.
바이브 코딩이란 AI에게 원하는 것을 자연어로 설명하고, AI가 코드를 생성하면 이를 검토하고 수정하는 방식의 개발을 말합니다. 복잡한 문법을 외울 필요 없이, 내가 만들고 싶은 것을 글로 쓰면 AI가 코드로 변환해 줍니다. 오늘은 바이브 코딩의 핵심 도구인 Cursor를 중심으로, 완전 비전공자도 따라할 수 있는 실전 가이드를 소개합니다.
바이브 코딩이란 무엇인가
2024년 초 OpenAI 공동창업자 안드레이 카르파시(Andrej Karpathy)가 처음 언급한 개념으로, 코드의 세부 구현보다는 전체적인 방향과 흐름을 AI와 함께 잡아가는 개발 스타일을 뜻합니다. 핵심은 세 가지입니다.
- 자연어 프롬프트로 코드 생성: “로그인 화면 만들어줘. 이메일과 비밀번호 입력 후 버튼 클릭하면 대시보드로 이동해”처럼 원하는 기능을 말로 설명합니다.
- 반복적인 피드백과 수정: AI가 만든 코드를 실행해 보고, 문제가 생기면 오류 메시지를 그대로 AI에게 붙여넣어 수정을 요청합니다.
- 코드 이해보다 맥락 관리: 모든 코드를 외울 필요는 없지만, 내 프로젝트의 전체 구조와 흐름은 파악하고 있어야 합니다.
바이브 코딩은 “코딩을 전혀 안 해도 된다”는 의미가 아닙니다. 오히려 AI와 협력하여 더 빠르고 효율적으로 결과물을 만들어내는 방식입니다. 기초적인 흐름을 이해하면 누구든 실제 작동하는 앱을 만들 수 있습니다.
Cursor AI 설치부터 첫 프로젝트까지
Cursor는 VS Code 기반의 AI 코드 에디터로, 현재 바이브 코딩에서 가장 널리 쓰이는 도구입니다. 설치와 첫 프로젝트 시작 방법을 단계별로 안내합니다.
1단계: Cursor 설치
cursor.com에 접속해 운영체제에 맞는 버전을 다운로드하고 설치합니다. 무료 플랜으로도 월 2,000회의 AI 요청이 가능해 입문자에게 충분합니다. 처음 실행하면 VS Code와 거의 동일한 화면이 나타나므로 익숙한 느낌을 받을 수 있습니다.
2단계: 새 프로젝트 폴더 열기
File – Open Folder를 눌러 내 컴퓨터에 새 빈 폴더를 만들고 엽니다. 예를 들어 “my-todo-app”이라는 이름의 폴더를 만들었다고 가정합니다.
3단계: AI에게 첫 번째 지시 내리기
Ctrl+Shift+I (Mac은 Cmd+Shift+I) 또는 화면 오른쪽의 채팅 아이콘을 클릭해 AI 채팅창을 엽니다. 이제 원하는 것을 자연어로 입력합니다.
할 일 목록(Todo List) 웹앱을 HTML, CSS, JavaScript로 만들어줘.
- 할 일 추가, 완료 체크, 삭제 기능 포함
- 깔끔한 카드 디자인, 다크 모드 지원
- 브라우저를 닫아도 목록이 유지되도록 localStorage 사용
- 반응형 레이아웃으로 모바일에서도 잘 보이게AI가 index.html, style.css, app.js 파일을 순서대로 생성해 줍니다. 파일을 수락(Accept)하면 자동으로 폴더에 저장됩니다. index.html을 더블클릭해 브라우저에서 열면 즉시 작동하는 앱을 확인할 수 있습니다.
좋은 프롬프트 작성법: AI를 제대로 활용하는 핵심
바이브 코딩에서 가장 중요한 기술은 AI에게 정확한 의도를 전달하는 프롬프트 작성입니다. 막연하게 요청하면 원하는 결과와 다른 코드가 나오고, 구체적으로 설명하면 한 번에 원하는 결과가 나옵니다.
나쁜 프롬프트 vs 좋은 프롬프트
아래 비교를 통해 차이를 확인해 보세요.
// 나쁜 프롬프트 (너무 모호함)
"로그인 만들어줘"
// 좋은 프롬프트 (구체적, 명확함)
"React로 이메일/비밀번호 로그인 폼을 만들어줘.
- 유효성 검사: 이메일 형식 확인, 비밀번호 8자 이상
- 오류 발생 시 각 입력 필드 아래에 빨간색으로 오류 메시지 표시
- 로그인 버튼 클릭 시 /api/login에 POST 요청
- 로딩 중에는 버튼을 비활성화하고 스피너 표시
- 디자인은 Tailwind CSS 사용"효과적인 프롬프트의 4가지 요소
- 기술 스택 명시: HTML/CSS/JS인지, React인지, Python인지 명확히 적습니다.
- 기능 목록 나열: 필요한 기능을 불릿 포인트로 하나씩 나열합니다.
- UI/UX 힌트 제공: 색상, 레이아웃, 디자인 시스템(Tailwind, Bootstrap 등)을 언급합니다.
- 예외 상황 포함: 오류 처리, 빈 상태 화면, 로딩 상태 등 edge case를 포함하면 완성도가 높아집니다.
오류가 났을 때 대처법
코드를 실행했을 때 오류가 발생하면 당황하지 않아도 됩니다. 브라우저 콘솔(F12 – Console)에 나오는 오류 메시지를 그대로 복사해서 AI에게 붙여넣으면 됩니다.
아래 오류가 발생했어. 수정해줘:
TypeError: Cannot read properties of undefined (reading 'map')
at TodoList (app.js:24:18)이 방식으로 오류의 90% 이상을 해결할 수 있습니다. AI가 오류 원인을 분석하고 수정된 코드를 제안해 줍니다.
실전 예제: 30분 만에 가계부 앱 만들기
이제 실제로 활용할 수 있는 가계부 앱을 30분 안에 만드는 과정을 따라가 보겠습니다. 별도 서버나 데이터베이스 없이 브라우저만으로 작동하는 가계부입니다.
1차 프롬프트: 기본 구조 생성
순수 HTML, CSS, JavaScript로 가계부 앱을 만들어줘.
- 수입/지출 내역 추가: 날짜, 카테고리(식비/교통/쇼핑 등), 금액, 메모
- 전체 수입 합계, 지출 합계, 잔액을 상단에 카드 형태로 표시
- 내역 목록을 최신순으로 표시, 삭제 버튼 포함
- 모든 데이터는 localStorage에 저장
- 흰색 배경, 파란색 계열 색상, 깔끔한 디자인2차 프롬프트: 기능 추가
좋아. 이제 두 가지 기능을 추가해줘:
1. 카테고리별 지출 합계를 보여주는 간단한 표 (하단에 추가)
2. 날짜 범위로 내역을 필터링할 수 있는 입력창 (시작일, 종료일)두 번의 프롬프트만으로 실제로 사용할 수 있는 가계부 앱이 완성됩니다. 이 앱을 GitHub Pages나 Netlify에 올리면 무료로 어디서나 접근 가능한 개인 가계부 서비스가 됩니다.
바이브 코딩 도구 비교: 나에게 맞는 툴 선택하기
바이브 코딩 도구는 목적에 따라 선택하는 것이 중요합니다. 대표적인 세 가지 도구를 비교합니다.
Cursor (cursor.com)
로컬 환경에서 실제 파일을 관리하며 개발하고 싶은 분에게 적합합니다. VS Code에 익숙하다면 진입 장벽이 거의 없습니다. 복잡한 프로젝트, 여러 파일을 다루는 작업에 강점이 있습니다. 무료 플랜 이후 월 20달러의 Pro 플랜이 있습니다.
Bolt.new (bolt.new)
브라우저에서 바로 실행되는 풀스택 개발 환경입니다. 설치 없이 바로 시작할 수 있고, React, Vue, Svelte 등 다양한 프레임워크를 지원합니다. 만든 결과물을 한 클릭으로 Netlify에 배포할 수 있어 빠른 프로토타이핑에 최적입니다. 입문자에게 가장 추천하는 도구입니다.
Replit (replit.com)
교육용으로 강점이 있는 온라인 IDE입니다. Python, Node.js, Java 등 50가지 이상 언어를 지원하고, 만든 앱을 바로 Replit 서버에 배포할 수 있습니다. AI Agent 기능을 통해 바이브 코딩 방식으로 개발이 가능하며, 팀 협업 기능도 잘 갖춰져 있습니다.
세 도구 모두 무료로 시작할 수 있으니, 일단 Bolt.new로 가볍게 시작해보고 본격적으로 개발하고 싶을 때 Cursor로 넘어가는 것을 권장합니다.
핵심 요약 및 시작을 위한 체크리스트
바이브 코딩은 누구나 할 수 있는 개발 방식입니다. 오늘 배운 내용을 정리합니다.
- 바이브 코딩은 AI와 협력해 자연어로 코드를 생성하는 새로운 개발 방식입니다.
- Cursor, Bolt.new, Replit 중 목적에 맞는 도구를 선택하세요. 입문자에게는 Bolt.new를 추천합니다.
- 좋은 프롬프트가 좋은 코드를 만듭니다. 기술 스택, 기능 목록, 디자인 힌트, 예외 처리를 포함하세요.
- 오류가 나면 당황하지 말고 오류 메시지를 AI에게 그대로 붙여넣으세요.
- 30분에서 2시간이면 실제로 작동하는 앱 하나를 만들 수 있습니다.
바이브 코딩은 단순히 빠른 개발 방법이 아닙니다. 아이디어가 있는 모든 사람에게 개발의 문을 열어주는 패러다임의 전환입니다. 앞으로의 교육도 이 방향으로 빠르게 변화하고 있습니다. 두온교육에서는 이러한 AI 활용 능력, 바이브 코딩, 프롬프트 엔지니어링 등 미래 인재에게 필요한 역량 교육을 지속적으로 연구하고 소개하고 있습니다. 오늘 당장 Bolt.new를 열고 첫 번째 앱 만들기에 도전해 보세요.
