✅ [3편] 바이브 코딩으로 실전 돌입!

Cursor AI로 투표 시스템 구축하기

이제 진짜 실전입니다.
이전 편에서 Cursor IDE 환경 세팅과 프로젝트 실행까지 마쳤다면, 이번에는 Cursor AI의 힘을 빌려 실제 기능을 구현해볼 차례예요.

🤖 프롬프트, 직접 쓰기보다 AI에게 맡기자!

Cursor AI의 핵심은 프롬프트 기반의 바이브 코딩입니다.
하지만 정확하고 효과적인 코드를 받으려면 **프롬프트(지시문)**를 잘 작성하는 게 중요하죠.

그런데...
직접 쓰려고 하면 이렇게 되죠:

"음... VoteController 만들어줘?"
"어떤 식으로 써야 잘 이해하지?"

그래서 우리는 프롬프트조차도 AI에게 만들어달라고 요청합니다.
바로 ChatGPT의 도움을 받아서요! 🎯

🧑‍💻 ChatGPT에게 요청할 프롬프트 예시

아래처럼 간단히 설명해주면 됩니다:

✅ 요청 예시
“Spring Boot 기반으로 간단한 투표 시스템을 만들고 싶어.
필요한 엔티티, 컨트롤러, 서비스 구조로 나눠서 프롬프트를 작성해줘.
Cursor IDE에서 쓸 거야.”

이런 식으로 ChatGPT에게 "AI를 위한 프롬프트 작성을 요청"하면,
더 구조적이고 효과적인 프롬프트를 얻을 수 있어요.

그리고 그걸 Cursor AI에 복사해서 붙여넣으면…
✨진짜 개발이 AI의 손끝에서 시작되는 거죠.

---

다음 Step에서는 이렇게 만든 프롬프트를 Cursor에 붙여넣고,
실제로 투표 시스템의 기본 구조를 AI에게 구현시키는 과정을 보여드릴게요!

💡 Cursor와 ChatGPT, 두 AI를 잘 연결하면
"혼자 개발 → AI와 협업 개발"로 개발 패러다임이 바뀝니다.

 

 

✅ STEP 8. 투표 시스템 구축을 위한 프롬프트 만들기

이제 Cursor AI에게 요청할 프롬프트를 만들어볼 시간입니다.
물론! 이 프롬프트도 우리가 직접 고민하지 않아도 됩니다 😊
ChatGPT에게 “프롬프트를 대신 작성해줘” 라고 요청하면 되죠.

✍️ 프롬프트 요청 가이드

ChatGPT에게 아래와 같이 설명하면,
Cursor에서 사용할 수 있는 명확한 프롬프트를 만들어줍니다.

💬 ChatGPT 요청 예시:
“Cursor AI를 활용해서 CRUD가 가능한 투표 홈페이지를 로컬 환경에서 구동하려고 해.
프론트는 템플릿 엔진(Pebble) 기반으로 서버사이드 렌더링을 할 거고,
JavaScript와 함께 사용할 예정이야.
백엔드는 Spring Boot 기반이고, API도 같이 구성할 거야.
Cursor AI에 어떤 식으로 프롬프트를 전달하면 정확하게 코드가 나올 수 있을까?”

 

🎯 제가 ChatGPT로부터 받은 실제 프롬프트 예시

ChatGPT는 항상 동일한 답변을 주지는 않지만,
저는 아래와 같은 프롬프트를 추천받았습니다:

투표 홈페이지 CRUD 기능을 가진 웹 애플리케이션을 만드려고 합니다.
요구사항은 다음과 같습니다:

1. **백엔드 스택**: Spring Boot (Java), REST API
2. **프론트엔드 스택**: Pebble 템플릿 엔진 기반 서버사이드 렌더링, 필요 시 JavaScript 활용
3. **기능 요구사항**:
   - [ ] 투표 목록 조회 (홈페이지)
   - [ ] 투표 생성 (제목 + 항목들)
   - [ ] 투표 보기 (투표 상세 + 항목들 + 투표 버튼)
   - [ ] 투표하기 (항목 선택 후 제출)
   - [ ] 투표 결과 보기 (항목별 투표 수)

4. **기타 요구**:
   - Entity/DTO/Controller/Service/Repository 구조로 구성
   - Pebble 기반 HTML 템플릿 페이지 작성
   - 최소한의 CSS/JS 포함
   - 투표 항목은 다중 선택이 아닌 단일 선택
   - H2 Database 사용 (로컬에서 간편 테스트용)

이 요구사항을 기준으로 전체 프로젝트 구조를 생성해주세요.

💡 팁!
너무 많은 요구를 한 번에 전달하면 Cursor AI가 일부 코드만 생성하거나 누락되는 경우도 있어요.
그래서 ChatGPT는 단계별로 나눠서 프롬프트를 작성하는 방식을 추천하기도 했습니다.
예를 들어 "투표 생성 기능만 먼저 만들어줘" 식으로 요청하는 거죠.

✅ STEP 9. GPT에서 받은 프롬프트, Cursor AI에게 실행하기

이제 앞서 준비한 프롬프트를 Cursor AI에 입력하여 코드를 자동으로 작성하게 해봅니다.
이 과정을 통해 AI가 어떻게 코드 작성을 돕는지 직접 경험할 수 있습니다!

💻 코드 작성 시작하기

1. 프롬프트 입력:
   앞서 만든 프롬프트를 Cursor IDE 내에서 CMD + I 단축키로 AI 채팅창을 열고 입력합니다.
2. 자동 코드 생성:
   프롬프트를 입력하면, AI가 요청사항에 맞춰 자동으로 코드를 작성하기 시작합니다.

✅ 코드 반영하기

• 코드 작성 완료 후, 화면 하단에 "Accept" 버튼이 나타납니다.
• 이 버튼을 눌러 자동으로 생성된 코드를 소스에 반영합니다.

 

⚠️ 오류 발생 시 수정하기

코드 작성 후 실행을 해보면, 오류가 발생할 수도 있습니다.
이 경우, 오류를 수정하는 방법은 간단합니다!

1. 오류 발생:
   오류가 발생하면, 해당 오류가 표시된 영역을 선택합니다.
2. 수정 지시:
   선택한 오류 영역에서 CMD + L을 눌러 수정 지시를 내립니다.
3. 반복 실행:
   수정된 코드를 다시 실행해보고, 여전히 오류가 발생하면 같은 방법으로 반복해서 수정할 수 있습니다.

반복적인 수정 과정을 통해, 완벽하게 동작하는 프로그램을 완성할 수 있습니다!

💡 Tip: 반복적인 수정을 두려워하지 말고!

프로그램을 완성하는 데 있어 중요한 점은 한 번에 완벽한 코드를 얻을 수 없다는 것입니다.
오류를 수정하며 점진적으로 완성도를 높여가면 됩니다.

 

✅ STEP 10. 완성된 화면 🎉

Cursor AI를 이용해서 코드를 생성하고, 오류를 하나씩 수정해 나가다 보니
2~3시간 만에 아래와 같은 화면이 완성되었습니다!

물론, 아직 모든 기능이 완벽하게 동작하는 건 아니지만
중간에 발생하는 오류들을 하나씩 잡아가며 진행하면
혼자서도 충분히 완성 가능한 수준까지 만들어낼 수 있었습니다.

💬 느낀 점

처음엔 익숙하지 않았던 AI 기반 코딩,
막상 직접 해보니 생각보다 훨씬 수월하고 강력합니다.

오류도 그냥 넘어가는 게 아니라
어떤 부분이 문제인지 알려주고,
수정까지 함께 도와주는 AI 덕분에
개발 속도도 빠르고 스트레스도 적었어요.

🚀 결론: AI 코딩, 이제는 선택이 아닌 필수!

이제 AI를 도구로 활용하는 건
"잘하는 개발자"가 되기 위한 선택이 아니라 필수인 시대가 온 것 같습니다.

Cursor AI와 함께, 여러분도 새로운 방식의 코딩을 직접 체험해보세요! 😊