프로그래밍을 전혀 몰라도 AI와 대화하면서 소프트웨어를 만들 수 있는 시대가 왔습니다. 이른바 바이브 코딩(Vibe Coding)은 코드를 한 줄씩 직접 작성하는 대신, AI에게 자연어로 원하는 기능을 설명하면 AI가 코드를 생성해주는 새로운 개발 방식입니다. 그 중심에 있는 도구가 바로 Cursor AI입니다. 이 글에서는 Cursor를 활용해 실제로 웹 애플리케이션을 만드는 과정을 단계별로 안내합니다.
Cursor AI란 무엇인가
Cursor는 VS Code를 기반으로 만들어진 AI 통합 코드 에디터입니다. 일반적인 코드 에디터와 달리, 에디터 안에서 바로 AI와 대화하며 코드를 생성하고 수정할 수 있습니다. Claude, GPT-4o 등 최신 AI 모델을 내장하고 있어, 채팅창에 원하는 기능을 설명하면 프로젝트 전체 맥락을 이해한 상태에서 코드를 작성해줍니다.
기존 GitHub Copilot이 자동완성 수준이었다면, Cursor는 한 단계 더 나아가 파일 생성, 리팩토링, 버그 수정까지 대화형으로 처리합니다. 무료 플랜에서도 하루 일정 횟수의 AI 요청을 사용할 수 있어 부담 없이 시작할 수 있습니다. 공식 사이트(cursor.com)에서 다운로드한 뒤 설치하면, VS Code와 거의 동일한 인터페이스에서 바로 작업을 시작할 수 있습니다.
첫 번째 프로젝트: 할 일 관리 웹앱 만들기
바이브 코딩의 핵심은 무엇을 만들고 싶은지 명확하게 설명하는 것입니다. 간단한 할 일 관리(To-Do) 웹앱을 예시로 전체 과정을 살펴보겠습니다.
1단계: 프로젝트 폴더 생성
Cursor를 열고 빈 폴더를 하나 만들어 엽니다. 터미널에서 다음과 같이 실행합니다.
mkdir my-todo-app
cd my-todo-app2단계: AI에게 프로젝트 설명하기
Cursor의 AI 채팅창(Ctrl+L 또는 Cmd+L)을 열고 다음과 같이 입력합니다.
React와 Tailwind CSS를 사용해서 할 일 관리 웹앱을 만들어줘.
기능 요구사항:
- 할 일 추가, 완료 체크, 삭제 기능
- 로컬스토리지에 데이터 저장
- 완료된 항목은 취소선 표시
- 반응형 디자인으로 모바일에서도 잘 보이게
- 깔끔하고 모던한 UI이렇게 입력하면 Cursor가 필요한 파일 구조를 제안하고, 각 파일의 코드를 자동으로 생성합니다. Apply All 버튼을 눌러 제안된 코드를 모두 적용하면 됩니다.
3단계: 실행 및 확인
터미널에서 프로젝트를 실행합니다.
npm install
npm run dev브라우저에서 localhost 주소로 접속하면 AI가 만들어준 할 일 관리 앱이 동작하는 것을 확인할 수 있습니다. 여기까지 코드를 직접 작성한 부분은 단 한 줄도 없습니다.
효과적인 프롬프트 작성법
바이브 코딩에서 가장 중요한 기술은 코딩 능력이 아니라 프롬프트 작성 능력입니다. AI에게 얼마나 정확하고 구체적으로 설명하느냐에 따라 결과물의 품질이 크게 달라집니다.
나쁜 프롬프트 예시:
게시판 만들어줘이렇게 모호하게 요청하면 AI가 어떤 기술 스택을 쓸지, 어떤 기능이 필요한지, 디자인은 어떤 스타일인지 전부 추측해야 합니다.
좋은 프롬프트 예시:
Next.js 14 App Router와 Tailwind CSS로 게시판을 만들어줘.
- 글 목록 페이지: 제목, 작성자, 날짜 표시. 페이지네이션(10개씩)
- 글 작성 페이지: 제목, 내용(textarea), 작성자 입력 폼
- 글 상세 페이지: 제목, 내용, 작성일, 목록으로 돌아가기 버튼
- 데이터는 JSON 파일로 간단하게 저장
- 한국어 UI, 깔끔한 디자인구체적인 기술 스택, 각 페이지별 기능, UI 요구사항을 명시하면 AI가 훨씬 정확한 코드를 생성합니다. 또한 한 번에 모든 것을 요청하기보다 단계별로 나누어 요청하는 것이 좋습니다. 먼저 기본 구조를 만들고, 이후 여기에 다크모드 토글을 추가해줘, 검색 기능을 넣어줘처럼 점진적으로 기능을 확장하면 AI가 기존 코드와의 일관성을 유지하면서 기능을 추가합니다.
Cursor의 핵심 기능 활용하기
Cursor에는 바이브 코딩을 극대화하는 몇 가지 핵심 기능이 있습니다.
Composer 모드: Ctrl+I(Cmd+I)로 열 수 있는 Composer는 여러 파일을 동시에 생성하고 수정할 수 있는 강력한 기능입니다. 로그인 기능을 추가해줘라고 요청하면, 로그인 페이지 컴포넌트, 인증 로직, API 라우트, 상태 관리 코드를 한 번에 여러 파일에 걸쳐 생성합니다.
@ 멘션으로 컨텍스트 지정: 채팅에서 @파일명을 입력하면 해당 파일을 AI에게 직접 참조시킬 수 있습니다. @App.jsx 이 파일의 UI를 더 세련되게 바꿔줘처럼 특정 파일을 지목하면 더 정확한 수정이 가능합니다. @Web을 사용하면 웹 검색 결과를 참조하게 할 수도 있고, @Docs를 통해 공식 문서를 참조시킬 수도 있습니다.
인라인 편집 (Ctrl+K): 코드의 특정 부분을 선택한 후 Ctrl+K를 누르면, 선택한 영역만 AI에게 수정을 요청할 수 있습니다. 이 함수에 에러 처리를 추가해줘, 이 CSS를 애니메이션이 들어가도록 수정해줘처럼 부분 수정에 매우 유용합니다.
.cursorrules 파일 활용: 프로젝트 루트에 .cursorrules 파일을 만들어두면, AI가 항상 해당 규칙을 참조합니다. 예를 들어 다음과 같이 작성합니다.
이 프로젝트는 한국어 서비스입니다.
React + TypeScript + Tailwind CSS를 사용합니다.
컴포넌트는 함수형으로 작성하고, 주석은 한국어로 답니다.
변수명은 camelCase, 컴포넌트명은 PascalCase를 따릅니다.이렇게 해두면 매번 같은 지시를 반복하지 않아도 AI가 프로젝트 컨벤션을 자동으로 따릅니다.
실전 팁: 바이브 코딩으로 생산성 높이기
실제로 바이브 코딩을 하다 보면 몇 가지 노하우가 쌓이게 됩니다. 먼저, 에러가 발생하면 에러 메시지 전체를 복사해서 AI에게 보여주세요. 이 에러 고쳐줘라고 하면서 에러 메시지를 함께 붙여넣으면, AI가 원인을 분석하고 수정 코드를 바로 제시합니다. 대부분의 일반적인 에러는 이 방법만으로 해결됩니다.
다음으로, Git을 반드시 사용하세요. AI가 코드를 대규모로 수정할 때 간혹 기존에 잘 동작하던 부분을 망가뜨릴 수 있습니다. 기능 하나가 완성될 때마다 git commit을 해두면, 문제가 생겼을 때 언제든 이전 상태로 되돌릴 수 있습니다.
git init
git add .
git commit -m "할 일 관리 기본 기능 완성"또한, AI가 생성한 코드를 무조건 수락하지 마세요. 바이브 코딩이 코드를 몰라도 된다는 뜻은 아닙니다. AI가 제안하는 변경사항을 Diff 뷰에서 확인하고, 이해가 안 되는 부분은 이 코드가 무슨 역할을 하는지 설명해줘라고 물어보세요. 이 과정 자체가 훌륭한 학습이 됩니다.
마지막으로, 배포까지 AI에게 맡길 수 있습니다. 이 프로젝트를 Vercel에 배포하는 방법을 알려줘 또는 Netlify 배포 설정을 만들어줘라고 요청하면, 배포 설정 파일 생성부터 명령어 안내까지 해줍니다. Vercel의 경우 GitHub 저장소를 연결하면 코드를 push할 때마다 자동으로 배포되므로, 개발부터 배포까지 전 과정을 AI와 함께 완료할 수 있습니다.
핵심 요약
바이브 코딩은 AI를 파트너 삼아 자연어로 소프트웨어를 만드는 새로운 개발 패러다임입니다. Cursor AI를 사용하면 프로그래밍 경험이 없는 사람도 구체적인 프롬프트 작성만으로 실제 동작하는 웹 애플리케이션을 만들 수 있습니다. 핵심은 명확하고 구체적인 요구사항 전달, 단계적 개발, 그리고 AI의 결과물을 검토하는 습관입니다.
프로그래밍이 더 이상 전공자만의 영역이 아닌 시대, 바이브 코딩은 아이디어를 현실로 만드는 가장 빠른 방법입니다. 두온교육에서는 이러한 AI 시대의 디지털 역량 교육을 체계적으로 제공하고 있습니다. 바이브 코딩을 포함한 다양한 AI 활용 교육 과정을 통해, 누구나 기술의 변화에 발맞춰 성장할 수 있도록 돕고 있습니다.
