소개
안녕하세요.
15기 문과생도 n8n -> 16기 갑자기 Cursor 스터디에 합류한 샘알토란입니다.
n8n -> Cursor로 갑자기 바꾼 이유는 회사에서 IDE로 개발할 일이 갑자기 생겨...
취미 + 일 일치를 위해.. 했습니다.
n8n으로 할게 많은데... 쌓여있는데....
진짜 시간을 아껴 쪼개고 쪼개고 해야할 것 같습니다.
그러다보니 정말 시간이란걸 어떻게 쪼개쓰지?
시간을 알차게 사용하는게 좋은데..
오늘은 이거 꼭 하고 싶은데..
요즘 조금 무리를 해서 컨디션이 조금 떨어지다보니
의욕도 떨어지더라구요
제가 어릴적에 게임을 정말 좋아했는데요.
갑자기 이런 생각이 들었습니다.
현실을 게임으로 만들면 어떨까?
게임 ~~~ 현실..
이렇게 하니 하나가 떠올랐습니다.
[일!일!퀘!스!트!]
하고나면 재밌는 보상이 펑펑~!
일상도 이렇게 만들면 뭔가 의욕이 생기지 않을까? 라는 생각으로
그래서 만든 일일퀘스트 웹앱을 Cursor로 딸깍 해보았습니다.
진행 방법
1차시도 : Cursor 그러나 shadcn/ui가 곁들인...
2차 시도 : Lovable + Cursor +Supabase 그러나 shadcn ui MCP를 곁들인..
3차 시도 : v0 + Cursor (현재진행형)
1차 시도
먼저 Cursor에 개발을 앞서 PRD Builder를 통해 PRD를 잘 빚어줍니다.
아래와 같은 프롬프트로 PRD Builder에게 요청했습니다.
하루 10개의 실행 일기를 작성하는 실행일기노트 웹앱을 만들고 싶어.Daily로 작성하는 일일 실행 노트 일간 실행력 계산, 월간 실행력 계산, 나의 실행 성장 곡선을 볼 수 있고 나의 실행력을 객관화 하기 위해 보여주는 데쉬보드 동기부여가 될 수 있도록 실행에 대한 명언을 보여주는 명언을 매일매일 다르게 웹앱을 키면 볼 수 있도록 했으면 좋겠어.
이렇게 세 개가 핵심 기능이고, 여러사람들과 동기부여를 할 수 있도록 커뮤니티기능도 나중에 추가하고싶어.개인 일일 실행노트는 Notion API를 활용해 개인DB와 연동될 수 있도록 해주고.Notion을 쓰지 않는 사람을 위해 Supabase DB도 연결하면 좋겠어.디자인은 깔끔한 Shadcn UI 스타일로 진행할 예정이고 이 웹앱애 대한 PRD를 작성할 수 있도록 도와줘 부족한 점이 있다면 지금 나에게 질문해그랬더니 뚝딱 멋진 PRD를 완성해줍니다.
받은 PRD를 prd.md로 만들어 Cursor에 넣고 했지만
결과는..망했습니다.
처참한 디자인.. localhost:5173으로 남겼습니다.
2번 째 시도
이번에는 동일한 PRD를 Lovable에 제출하였습니다.
와우 손 볼 곳이 한 두곳이 아니지만
그래도 어느정도 나온 것 같습니다
그럼 이제 shadcn ui를 접목시켜봅니다. 저는 sleek한 디자인이 좋거든요.
아 shadcn ui는 이런것입니다.
제가 이 디자인에 매료되어서 병에 걸렸습니다.
깃헙에서 87.5k의 Stars를 자랑하는 오픈소스 ui입니다.
왠지 이렇게 깔끔하게 만들고 싶었습니다.
그래서 shadcn ui MCP 설치
Smithery를 탐색중 shadcn ui components를 찾고 가져오는 MCP가 있어서
옳커니! 이거다! 하고 가져오고 당장 설치해서 Cursor에게 부탁했습니다.
결과는..
처참해서 스샷조차 남지 않았습니다.
Lovable + Cursor에서 조작한 shadcn ui MCP의 결과는...
미적 감각이 남다르더라구요.
3차 시도 (현재 진행 형)
마지막으로는 v0.dev + Cursor로 진행하였습니다.
왜 갑자기 v0를 사용하였니? 라고 물으신다면
shadcn ui 병때문인데요. (왜요.. 깔끔하면 이쁘잖아요..)
회사에서 한가롭게 shadcn ui docs를 읽고있는데 이런게 보이더라구요
Open in v0
어? v0? 들어봣는데
네 토요일 오프라인 모임에서 피터님이 알려주신 바로 그 v0였습니다.
그래서 v0로 다시시도
v0는 shadcn ui가 좀 더 Lovble에 비하여 잘 적용되었습니다.
둘이 친한가 봅니다.
그래서 나온 프로토타입
이것이 되겠구요 무려 다크모드도 지원합니다..
v0 자체에서 추가적으로 바이브코딩이 되어서 검색, 설정 등 여러가지를 넣었으나
무료사용자가 끝내 마무리는 짓진 못했습니다.
그래서 Github -> Cursor로 옮겨 dev brunch를 만들고 계속 진행
하루 목표에 보상/제약을 걸고
해내면 보상! 실패하면 제약을 실행해야하는 시스템을 구축중입니다.
아직 로컬 개발중으로 배포하면 링크 연결해두겠습니다 ^^
게임 같은 이펙트와, 경험치 쌓이는게 보이니 정말 게임같군요.
앞으로 로그인, 실행력 커뮤니티 등 더 추가 해볼 생각입니다.
결과와 배운 점
Lovable, v0, bolt 왜 전부 다 쓰는지 어느정도 알게되었습니다.
PRD를 작성하면서 바이브코딩을 해도 자꾸 튀는 개발 때문에
어떻게 더 중심을 잡을 수 있을까? 고민이 됩니다.DB연결, 로그인 기능, 커뮤니티 기능 등 실제 사용할 수 있는 웹앱으로 진화할 예정입니다.
나중에 같은 요소로 핸드폰 어플을 만들면 좋을것 같다는 생각이 드네요.
뽀모도로 타이머 기능도 탑재해보고 싶습니다.
도움 받은 글 (옵션)
PRD Builder GPTs
