소개
안녕하세요. 이런저런 개발을 할 일들이 있어서 다양한 AI 및 노코드 플랫폼을 이용하다가, 직접 서비스 기획부터 데이터 설계, 홈페이지 구성, 자동화 까지 풀스텍으로 서비스를 준비해보고자 시작한 프로젝트 입니다. (7월 중으로 오픈 예정..?!)
7~8번을 만들고 삭제하는 과정을 반복하다 보니 데이터 설계부터 보이는 화면까지는 구성을 했는데 홈페이지에서 결제를 만드는건 또 다른 문제더라고요.. 그래서 서비스를 Replit으로 옮기려다가 비용 및 시간 등 고려할 부분들이 있었는데 영상에 나온 토스페이먼츠로 결제까지 직접 작업을 해보려고 합니다!!
(영상 참고 )
https://youtu.be/9Y5pKd5nqUs?si=vqSOIL_w03MWrC3x
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
백엔드: supabase
프론트엔드: V0
문제 자동 등록: python+supabse mcp
<<1단계 개발 과정>>
백엔드
비개발자에 데이터 설계를 해본 경험이 없다보니 처음에는 AI로 제가 구상하려고 했던 아이디어를 준 다음에 구조를 설계해달라고 했습니다. 그리고 어느정도 나오면 supabase mcp로 직접 데이터 설계를 해달라고 요청했습니다. 그 이후로 데이터 구조를 변경 및 삭제할 일이 많았는데 supabase mcp를 활용해서 변경하면서 계속 구조를 설계했습니다 (아직도 로그인 기능을 추가 중이라 수정 중이네요)
프론트엔드
수 많은 AI 중에서 V0를 선택한 이유는, 직관적이고 몇번 사용해봤다는 이유입니다ㅎㅎ 당시 구성할 때 다른 AI로 동일한 프롬프트로 요청을 했는데 그 중에서 V0가 가장 괜찮더라고요!! 그래서 선정
(프롬프트는 별도로 없습니다.. 그냥 물어보고 그 내용으로 PRD를 작성했습니다!!)
<<2단계 개발 과정>>
백엔드로 supabase를 만들었고, 프론트트 코드도 나온 상황이라 커서로 연결하는 과정을 시 작했습니다. 둘 다 준비가 되어서 금방 끝날 줄 알았는데 보이는 화면이나 추가 기능을 만들다보니 점점 안되겠더라고요. 그때마다 playwright mcp를 사용하면서 웹디버깅을 수정하였고, 동시에 데이터베이스도 수정하는 과정x1000 을 겪었습니다.
여기서 배운건 각 페이지가 어떤 기능들이 있고, 폴더관리가 정말 중요하더라고요...
처음엔 무조건 해줘해줘, 안되는데?? 이렇게 간단한 바이브코딩으로만 하다보니 렌딩페이지 정도는 나오지만, 그 이후에 저도 헷갈리는 상황이 생겨서 삭제하고 또 만들고 삭제하고ㅠㅠ 이런 과정을 겪었습니다.
그러다 클로드코드를 만났고, 커서 환경에서 클로드코드를 사용하기 시작했습니다.
맥은 모르겠지만, 윈도우에서 클로드코드를 사용하실 분들은 WSL 환경으로 변경 후 클로드코드를 사용하시면 됩니다!!
북마크 기능
학습 대시보드 기능
=====
현재까지는 이렇게 구현을 한 상황입니다.
==========
그 다음으로 영상에 나오는 결제 구현까지 진행 중인데,
그건 마무리하고 다음 게시글로 작성해보겠습니다!!
진행상황.1
진행상황 2
--
WSL 환경에서 Rails를 설치하였고,
하단의 이미지처럼 서버까지는 구현했네요.
다음 게시글에 결제 mcp를 만드는 과정에 대해서 사례글을 작성해보겠습니다!!
결과와 배운 점
서비스를 준비하면서 배운 점이라면, 아이디어만 있으면 무엇이든 해볼 수 있다?라는 것을 배운 것 같습니다. 그리고 직접 만드는 것보다는 나와있는 것을 잘~~ 활용하는 것이 빠른 MVP를 만드는 방법이라고 생각됩니다!