Cursor 하나로 주말에 사이드 프로젝트 완성한 이야기
토요일 아침 9시에 시작해서 오후 4시에 실제 서비스가 배포되었습니다. Cursor AI로 코딩한 시간은 약 5시간, 나머지 2시간은 아이디어 정리와 디자인 다듬기에 썼습니다. 만든 것은 '일일 감사 일기' 웹앱으로, 매일 감사한 일 3가지를 기록하면 월간 통계와 워드클라우드를 보여주는 서비스입니다. 프로그래밍 경험이 거의 없는 마케터 출신이 이 정도를 만들 수 있었던 건, Cursor의 바이브코딩 덕분입니다.
이 글에서는 아이디어 구상부터 Cursor 설정, 프롬프트 대화 과정, 실수와 해결, 최종 배포까지의 전체 과정을 시간순으로 공유합니다. 바이브코딩에 관심은 있지만 '나도 할 수 있을까?' 고민하는 분들에게 현실적인 참고가 되길 바랍니다. 결론부터 말하면, 생각보다 훨씬 쉽고 재미있었습니다.
09:00-10:00 — 아이디어 정리와 Cursor 셋업
사이드 프로젝트의 성패는 첫 1시간에 결정됩니다. 아이디어를 너무 크게 잡으면 주말 안에 끝나지 않습니다. 핵심 규칙은 '기능 3개 이하'입니다. 저는 노트앱에 이렇게 정리했습니다: 핵심 기능 — ① 감사 일기 입력 (텍스트 3개) ② 달력 뷰로 기록 확인 ③ 월간 통계. 로그인은 Google OAuth로 간단하게, 디자인은 따뜻한 톤의 미니멀 스타일로 정했습니다.
Cursor는 cursor.com에서 다운로드하여 설치합니다. VS Code와 거의 동일한 인터페이스이므로 낯설지 않습니다. 설치 후 가장 먼저 할 일은 Cmd+L(Mac) 또는 Ctrl+L(Windows)을 눌러 AI 채팅을 여는 것입니다. 여기에 프로젝트의 첫 프롬프트를 입력합니다:
새 프로젝트를 시작하자.
Next.js 14 App Router + TypeScript + Tailwind CSS + Supabase를 사용해.
"일일 감사 일기" 웹앱을 만들 거야.
- Google OAuth 로그인
- 매일 감사한 일 3가지를 텍스트로 입력
- 달력 뷰에서 날짜별 기록 확인
- 월간 통계 (총 기록 수, 연속 기록 일수)
- 디자인: 따뜻한 톤, 미니멀, 모바일 우선
프로젝트 구조부터 만들어줘.Cursor가 프로젝트 폴더 구조, package.json, 기본 설정 파일들을 자동 생성합니다. 이 과정에서 터미널에 npm install을 실행하라고 안내하면 그대로 따릅니다. Supabase 프로젝트도 supabase.com에서 새로 만들고, URL과 anon key를 .env.local 파일에 붙여넣으면 준비 끝입니다. 여기까지 약 30분.
10:00-12:00 — 핵심 기능을 대화로 구현하기
핵심 기능 구현은 Cursor와의 대화로 진행됩니다. 실제로 주고받은 프롬프트를 공유합니다. 먼저 데이터베이스 설계: "Supabase에 gratitude_entries 테이블을 만들어줘. user_id, entry_date, item1, item2, item3 컬럼이 필요해. RLS 정책도 설정해줘." Cursor가 SQL과 Supabase 설정 코드를 모두 생성합니다.
-- Cursor가 생성한 SQL
create table gratitude_entries (
id uuid default gen_random_uuid() primary key,
user_id uuid references auth.users(id) on delete cascade,
entry_date date not null default current_date,
item1 text not null,
item2 text not null,
item3 text not null,
created_at timestamptz default now(),
unique(user_id, entry_date)
);
alter table gratitude_entries enable row level security;
create policy "Users manage own entries"
on gratitude_entries for all
using (auth.uid() = user_id);다음으로 입력 폼: "오늘의 감사 일기를 입력하는 페이지를 만들어줘. 3개의 텍스트 입력 필드가 있고, 각 필드에 플레이스홀더로 예시를 보여줘. 저장 버튼을 누르면 Supabase에 저장되고 성공 애니메이션을 보여줘." 달력 뷰: "react-calendar 라이브러리를 사용해서 달력 페이지를 만들어줘. 기록이 있는 날짜에 초록색 점을 표시하고, 날짜를 클릭하면 그날의 감사 내용을 보여줘."
중간에 에러가 두 번 발생했습니다. 첫 번째는 Supabase Auth 콜백 URL 설정 누락이었는데, 브라우저 에러 메시지를 그대로 Cursor에 붙여넣으니 "Supabase 대시보드 > Authentication > URL Configuration에서 Site URL과 Redirect URL을 설정하세요"라고 정확한 해결책을 알려줬습니다. 두 번째는 달력 라이브러리의 타입 에러였는데, "이 에러를 수정해줘"라고만 말하니 자동으로 해결했습니다. 에러 해결도 바이브코딩의 일부입니다.
14:00-16:00 — 디자인 다듬기부터 배포까지
기능이 완성된 후에는 디자인을 다듬는 시간입니다. 이 과정이 바이브코딩에서 가장 재미있는 부분입니다. "배경색을 따뜻한 베이지(#FFF8F0)로 바꿔줘", "입력 카드에 부드러운 그림자를 추가해줘", "저장 성공 시 꽃가루가 떨어지는 confetti 효과를 넣어줘", "모바일에서 보기 좋게 반응형으로 조정해줘" — 이런 요청을 하나씩 던지면 Cursor가 즉시 반영합니다.
프롬프트 하나로 기대 이상의 결과가 나온 순간도 있었습니다. "월간 통계 페이지에 감사 키워드를 분석해서 워드클라우드처럼 보여줘"라고 요청했는데, Cursor가 텍스트에서 명사를 추출하고 빈도별로 크기를 다르게 표시하는 컴포넌트를 만들어줬습니다. 처음 기획에 없던 기능인데, 프롬프트 하나로 30분 만에 추가되었습니다.
배포는 Vercel이 가장 간단합니다. GitHub에 코드를 올리고 Vercel 대시보드에서 Import 버튼을 클릭하면 끝입니다. Cursor에게 "GitHub에 올리는 방법을 알려줘"라고 물으면 git 명령어를 알려줍니다:
# GitHub 저장소 생성 후
git init
git add .
git commit -m "initial commit: gratitude journal app"
git remote add origin https://github.com/username/gratitude-app.git
git push -u origin main
# Vercel에서 Import → 환경변수 설정 → Deploy
# 약 1분 후 https://gratitude-app.vercel.app 에서 확인
자주 묻는 질문 (FAQ)
Q. Cursor 무료 플랜으로도 사이드 프로젝트를 만들 수 있나요? A. Cursor는 무료 플랜에서 AI 채팅 50회, 자동완성 2,000회를 제공합니다. 간단한 프로젝트는 가능하지만, 이 글 수준의 프로젝트는 부족할 수 있습니다. Pro 플랜(월 $20)을 추천하며, 2주 무료 체험이 있으니 먼저 시도해보세요.
Q. 사이드 프로젝트로 수익을 낼 수 있나요? A. 충분히 가능합니다. Stripe 결제를 연동하면 구독형 서비스로 전환할 수 있습니다. "Stripe 결제를 추가해줘. 무료/프리미엄(월 $5) 2단계 요금제로"라고 Cursor에게 요청하면 결제 기능이 추가됩니다. 인디해커 커뮤니티에서는 바이브코딩으로 만든 SaaS로 월 $1,000-10,000을 버는 사례가 점점 늘고 있습니다.
Q. 사이드 프로젝트 아이디어가 없는데 어떻게 하나요? A. 자신의 불편함에서 시작하세요. 매일 반복하는 귀찮은 작업, 엑셀로 관리하고 있는 것, 친구에게 자주 묻는 것을 앱으로 만들면 됩니다. 습관 트래커, 경비 기록기, 북마크 관리자, 팀 점심 메뉴 투표 앱 등 작고 구체적인 것부터 시작하세요. 첫 프로젝트는 완성하는 경험 자체가 목표입니다.
이 글이 도움이 되셨다면 공유해 주세요.
