옷을 좋아하는 사람의 고민에서 시작한 중고 의류 거래 플랫폼 MVP 제작기 (1편)
소개
👕 옷을 좋아하지만 신상품 가격은 항상 부담스럽고, 기존 중고거래 플랫폼들은 번거롭고 불편했습니다.
특히 사기 및 이용자 서로간의 불신 등 다양한 문제 때문에 거래 자체가 어렵게 느껴지는 경우도 많았죠. 이 고민을 해결해보고 싶었던 것 같습니다? 그래서 '신뢰할 수 있는' 인플루언서 기반 중고 의류 거래 플랫폼을 만들어보기로 했습니다.
mvp는, 지인들이 탐낼만한 중고 의류 및 패션 잡화 등을 직접 업로드하여 그들로부터 어떠한 반응을 얻거나 거래 요청을 받아낼 수 있는 형태 정도로 생각하였습니다...
진행 방법
✅ vooster.ai로 PRD, TRD 최소 리소스로 완성
vooster.ai를 활용해서 제품 요구 사항(PRD)과 기술 요구 사항(TRD)을 최소한의 노력으로 정리했습니다.
✅ 태스크 생성 및 cursor mcp 연동
vooster가 미리 작성한 기획서 내용을 참고하여 개발에 필요한 태스크들을 알아서 작성해줍니다.
한국어 텍스트가 포함 된 채팅 페이지의 스크린 샷
이후 prd와 trd를 모두 수정하고, 기존에 작성된 태스크들을 모두 삭제했음;;;
cursor에 vooster.ai mcp를 연결해줍니다.
컴퓨터 화면에서 한국 앱의 스크린 샷
사전에 프로젝트를 생성해 놓지않은채, 연결을 시도했다가 애를 먹기도했다.
✅ 태스크 수행(본격적인 바이브코딩 시작...?)
별다른 추가 설계 및 디자인 작업 없이, 바로 cursor에게 태스크 수행 요청
(해줘..)
커서와의 연동(mcp)을 통해, vooster.ai에 등록되어있는 1번 태스크를 수행했다. (실제 사용을 위해서는 .env.local 파일에 Supabase 프로젝트 정보를 설정해야한다고 커서가 안내해줌)
한국 캘린더 앱의 스크린 샷
cursor가 특정 태스크를 수행하면, vooster.ai 대시보드에도 자동으로 진행상황이 반영된다.
✅ local 서버에서 결과물을 체크 및 UI/UX 수정 작업 진행
'해줘'로만 진행한 결과물 1차 체크..
한국어 웹 사이트의 홈페이지
😅엥?? 싶었던 결과....
양산형 랜딩페이지 같았던 '홈' 탭
불필요한 탭(홈, 시세 등)이 구현됌
외 각종 에러발생
무언가 잘못됌을 크게 깨달은 후, 추가 태스크 생성과 좀 더 세심한? 지시로 cursor에게 개선 요청
검은 색 화면에서 한국어의 스크린 샷
이런저런~ 사유로, 수정이 필요하다고말하니, cursor가 알아서 md파일을 생성하고 그에 맞는 액션을 취해줌
결과물 2차 체크...
여전히 노답이지만, 불필요하다고 생각되는 탭들은 제거되었고 조금?은 의류 거래 플랫폼과 같은 형태로 변모함...
🗒️ 다음 목표
prd, trd 업데이트 (프로젝트 내 prd.mdc 파일이 업데이트되지않으니 cursor가 잘못된 방향으로 개발 및 태스크를 진행함)
늦었지만, 기능명세서 및 와이어프레임(화면설계) 만들어보기
supabase 프로젝트 설정 (실제 데이터베이스 연결)
UI/UX 개선 및 실 데이터 업로드
(주제 변경..?)
결과와 배운 점
🎉 아직 완성된 플랫폼은 아니지만, 초기 기획과 개발 세팅을 ai를 활용하여 굉장히 빠르게 완료할 수 있었습니다.
vooster 와 cursor가 많은 도움을 주는 것은 맞지만, 개발지식이 부족한 초보자라면 가급적 바이브코딩 강의 영상이나 지피터스 사례글들을 참고하여 최소 기능 개발을 초점에 두고 기획~개발을 단계별로 시작하는것이 좋아보입니다
시간 아끼겠다고 무작정 "해줘"를 시전하는 것보다, 개발의 기본 프로세스를 어느정도 학습한 후 Ai도구를 활용하면 결과도 시간 절약 측면에서도 훨씬 좋을 것 같습니다
진짜 내가 직면한 '문제'(예: 현업에서 나 혹은 팀원들이 어려움을 겪는 문제 등)를 주제로 선정하지 못했던만큼 코딩이나 스터디 자체에 많은 시간을 할애하지 못했던 것 같습니다
mvp 완성 전후로 주제를 변경하게 될 수 있을 것 같습니다
(만들어놓은것은 다음 기수에...?)
도움 받은 글
커서맛피아님의 YouTube 라이브 영상
vooster.ai 공식 노션 가이드
