(1편, 작성 중..) 물류, 배송 경로 최적화 / 견적 산출기 개발 [vooster.ai + cursor]

소개

팀원들이 많은 리소스를 소모하고 있는 영역 중 하나인 '물류 경로 최적화 및 고객사 견적안 작성' 업무의 비효율성과 세일즈 경험을 개선하기 위해, 새로운 주제로 바이브코딩을 시작해보았다.

진행 방법

어떤 도구를 사용했고, 어떻게 활용하셨나요?

• vooster.ai

  • prd, trd, 사용자여정, curosr rule 세팅

• chat gpt & claude

  • 디자인가이드, 디자인시스템 md 파일 작성

  • 외, 각종 기획문서 교차 검수

ALT

웹 브라우저에서 한국어 스크린 샷

1. 본격적인 태스크들을 수행하기 전, 디자인가이드와 ia를 md파일로 작성하여 'docs' 경로에 두었다

ALT

한국 문자 메시지의 스크린 샷

2. 처음부터 UI를 어느정도 내가 원하는 형태로 구현하고 싶어서, (어디선가 본)프롬프트를 통해 디자인시스템 파일도 생성해주었다 (json파일을 docs 경로에 두려다가, md파일로 다시 생성함)

• cursor

  • vooster.ai mcp 연동 및 바이브코 툴 (이번엔 맛피아님의 라이브 영상을 최대한 참고하여 진행함; → 무작정 '해줘'를 시전하지 않았다)

• supabase (local)

  • 백엔드 구축

    

    ALT

    여러 언어가있는 컴퓨터 화면의 스크린 샷

1. 데이터 스키마 마이그레이션 파일 구축

2. supabase 서버 연동(하기 사진은 데이터베이스 구조)

   

   ALT

   가계도 템플릿의 예

• bolt -> 사용고려중

결과와 배운 점

배운 점과 나만의 꿀팁을 알려주세요.

1. 멀리 돌아가지않기 위해, AI가 작성해준 prd&trd를 mvp 관점과 나의 기획에 맞게 최대한 수정함

2. ui/ux를 어느정도 고민한 후 바이브코딩 시작 (디자인가이드&시스템을 미리 구축)

   

   ALT

   한국어 텍스트가있는 Google지도의 스크린 샷

3. 커서룰 및 docs 디렉토리를 생성하여, cursor가 개발 방향을 잃지않도록 세팅해주기

4. 데이터베이스(백엔드) 기반 구축할 때, 단순 '해줘'가 아닌 ai와의 대화를 통해 데이터 스키마에 대해 이해한 후 다음 스텝으로 넘어가기

   1. 내가 전혀 고려하지않았거나 불필요하다고 생각되는 데이터 필드를 삭제하거나, 필요하다고 생각되는 데이터를 추가하기도 함

      

      ALT

      한국 웹 사이트의 스크린 샷

과정 중에 어떤 시행착오를 겪었나요?

1. 기획을 나름 체계적으로 하였지만, 그것이 어떻게 잘 워킹하고있는지 확인 방법은 모르겠음..

2. local이 아닌, 웹 supabase에서 데이터베이스를 구축하려고했는데 cursor가 알아서 Supabase 로컬 서버를 실행하고 뚝딱뚝딱해버림;;

3. 데이터베이스 구축하자마자, supabase 내 Performance Advisor가 약 105개의 성능 경고를 날림;; (크리티컬한가요??)

4. tmap api를 활용하여 지도 기반 ui를 구축하려고하였으나, 에러 발생으로 지도 로드 불가 ㅠㅠ

   

   ALT

   'TOP'이라는 단어가있는 웹 페이지의 스크린 샷

도움이 필요한 부분이 있나요?

1. 지도ui 설정 (기본 화면을 지도를 베이스로 설정하고 싶음)

2. bolt 사용방식? (단계가 있다면? or 프로젝트를 이미 수행중인데 bolt 활용을 시작해도되는지?)

앞으로의 계획이 있다면 들려주세요.

• 백엔드 기반 구축

  • Supabase 백엔드 연동 (기반 시스템)

  • Tmap API 연동 (핵심 기능)

도움 받은 글 (옵션)

1. https://www.youtube.com/watch?v=Nsde13jyuDY&t=2546s

   (커서맛피아 유튜브 라이브)

2. https://www.youtube.com/watch?v=dJiD6O6DzO8&t=660s
   (게으른일잘러 유튜브영상)