생애 첫 바이브코딩: VoosterAI와 Cursor로 만든 독서 정리 웹사이트
소개
📚 책을 읽고 난 뒤 인상 깊은 문구를 노션에 정리하곤 했는데, 이 과정이 좋으면서도 시간을 많이 잡아먹는다는 아쉬움이 있었습니다.
그래서 나의 시간을 조금이라도 절약할 수 있는 작은 아이디어에서 이번 프로젝트를 시작하게 되었어요.
그리고 무엇보다 이번은 생애 첫 바이브코딩 시도였습니다! 😆
커서맛피아님의 바이브코딩 영상(링크)을 보고 이대로라면 따라할 수 있겠다는 용기를 얻었어요.
저는 바이브코딩으로 필요한 모든 것이 처음이었어요. (아래 사용 기술 모두)
하지만, 유튜브 동영상 보며 VoosterAI 회원가입, cursor 설치 및 결제, supabase 회원가입, easynext 세팅, VoosterAI에서 PRD, TRD 작성하며 바이브코딩 바이브 느끼는데 3시간
cursor에게 일시키고 디버깅하기 2시간. 총 5시간으로 초기 프로젝트 완성
진행 방법
사용 도구 및 기술
🔥 VoosterAI
머릿속 아이디어를 자연어로 풀어 PRD(FRD 포함) 문서를 작성하고, 구조를 검토하는 데 사용.
🖥 Cursor
AI 기반 코딩 에디터로 이번에 처음 사용.
🚀 EasyNext
EasyNext 템플릿으로 Next.js 프로젝트를 빠르게 셋업.
📚 알라딘 API
책 데이터를 연동하기 위해 사용.
🖥 Supabase
Database
구현 흐름
VoosterAI를 통해:
아이디어는 있는데 "어디서부터 시작해야할까?" 막막했는데, VoosterAI가 물어보는대로 대답하니 술술 풀리는 느낌이었어요.
PRD, TRD까지 빠르게 작성했어요.
PRD(프로젝트 기획)
TRD(기술 설계)
Cursor에서:
기본 프로젝트 세팅 : easynext 템플릿을 불러오기
cursor rules 세팅
VoosterAI 의 MCP 연결
VoosterAI에게 task 작업을 순차적으로 수행하도록 시키기
잠시 놀기
Vooster AI 의 MVP 버전 완료된 태스크 100% 달성
결과와 배운 점
<책 관리>
<인용구 관리>
✅ VoosterAI 덕분에 머릿속에서만 뱅뱅 돌던 아이디어를 문서로 뽑아내면서 구체적으로 설계할 수 있었습니다.
✅ 처음 해본 바이브코딩이었지만, "일단 부딪쳐보자!" 하고 시작하니 생각보다 훨씬 빠르게 화면을 띄울 수 있었어요.
✅ 바이브코딩 눈으로 보기만 할때보다, 역시 해보니 너무 재밌있었어요.
