오늘은 본격적으로 AI와 함께 코딩하는 '바이브 코딩(Vibe Coding)' 방법을 알아보겠습니다.

바이브 코딩을 도와주는 AI 에이전트는 다양하지만, 처음 프로젝트의 뼈대를 잡고 초기 개발을 진행할 때는 커서(Cursor)를 강력하게 추천합니다.

1. 왜 커서(Cursor)인가?

커서는 인기 코드 에디터인 VS Code를 기반으로 만들어진 AI 특화 개발 툴입니다. 기존 VS Code의 편리함을 그대로 유지하면서 강력한 AI 기능을 결합했죠.

최근 Cursor 2.0으로 업데이트되면서 자체 모델인 **'Composer'**가 추가되었는데, 성능과 속도가 매우 훌륭합니다.

⚠️ 주의: 무료 플랜의 변화 예전에는 무료 플랜(Hobby)에서도 할당량을 다 쓰면 개인 API 키(BYOK)를 연결해 계속 사용할 수 있었지만, 커서 2.0부터는 무료 플랜에서 Agent/Composer 모드 시 개인 API 키 사용이 제한됩니다. 하지만 초반 뼈대를 잡는 용도로는 무료 제공량만으로도 충분히 강력합니다.

2. 프로젝트 초기 세팅 및 AI 에이전트 실행

  1. 프로젝트 폴더 열기: 커서를 실행한 뒤 Open Folder를 눌러 지난 기획 단계에서 만든 프로젝트 루트 폴더(jichan)를 선택합니다.
  2. 문서 확인: 폴더 안에 기획해 둔 docs/기능.md, api.md, table.md 등의 파일이 있는지 확인합니다.
  3. AI에게 개발 요청하기 (Composer): Ctrl + I (또는 Cmd + I)를 눌러 Composer1을 선택하고 아래와 같이 구체적으로 요청합니다.

💡 프롬프트 예시 "Gradle, Java, Spring Boot, JPA, MySQL, React로 프로젝트를 만들어줘. 폴더는 /backend, /frontend로 나눠서 구성해주고 프로젝트 이름은 '지인찬스'야. /docs/에 있는 md 파일들을 참고해서 기능, API, 테이블을 설계해줘. 처리가 완료된 항목은 md 파일에 체크 표시(@checked)를 해줘."

3. 개발이 진행되는 동안 필요한 프로그램 설치

AI가 코드를 생성하는 동안, 로컬 환경에서 서버를 돌리기 위해 필요한 도구들을 설치해 둡니다.

  1. Node.js: 프론트엔드(React) 실행용 (기본 LTS 버전 추천)
  2. MySQL: 데이터베이스 (Free 버전인 Community Server와 Workbench 설치)
  3. IntelliJ IDEA: 백엔드 코드 확인 및 디버깅용 (Community 버전도 무방)

4. 코드 점검 및 실행하기

AI가 작업을 마쳤다면 docs 폴더의 md 파일들을 열어 누락된 기능이 없는지 확인합니다. 만약 빠진 부분이 있다면 추가로 요청하세요. "api.md 파일의 특정 부분이 누락된 것 같아. 다시 확인해서 반영해 줘."

🔧 설정 파일 수정

본격적인 실행 전, 백엔드의 설정 파일을 확인해야 합니다. /backend/src/main/resources/application.yml 파일에서 ${}로 비어있는 데이터베이스 접속 정보(URL, ID, PW) 등을 본인의 환경에 맞게 채워 넣습니다.
Mysql은 서버 실행 후 WorkBench로 DB 및 사용자를 생성한 뒤 그 정보로 사용합니다.

🚀 서버 실행하기

터미널을 열고 다음 명령어를 입력합니다.

Frontend (React):

cd frontend
npm install
npm run dev

Backend (Spring Boot):

cd backend
./gradlew bootRun

5. 문제가 생겼을 때?

만약 gradlew 파일이 없거나 설정 오류로 서버가 뜨지 않는다면 당황하지 마세요. 에러 메시지를 그대로 복사해서 Google Gemini에게 물어보면 해결 방법을 친절하게 알려줍니다.

제 프로젝트의 설정 파일 예시는 제 GitHub에서도 확인하실 수 있습니다.

서버가 정상적으로 떴다면, 이제 무료 허용량을 알뜰하게 사용하여 추가 기능들을 요청해 보세요! 다음 포스팅에서는 커서 2.0의 무료 사용량을 다 썼을 때 대처법에 대해 다뤄보겠습니다.

저작자표시 비영리 동일조건 (새창열림)

'사이드 프로젝트' 카테고리의 다른 글

AI와 함께하는 무료로 서비스 런칭하기 #3: 플러그인으로 바이브 코딩  (0) 2026.02.06
AI와 함께하는 무료로 서비스 런칭하기 #1: 서비스 기획 편  (0) 2026.02.06

티스토리툴바