소개
안녕하세요.
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를 완성해줍니다.
한국 MP3 플레이어 - 스크린 샷
받은 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
