안녕하세요, 기획부터 끝까지?? 해보고자 시작했던 프로젝트가 약 2개월이 되면서 마무리를 하였습니다. 실제 오픈까지는 체크할 부분들이 있지만, 결제까지 연동을 완료했습니다!!!
https://www.gpters.org/nocode/post/create-payment-service-connecting-asFqK74g376RVbA
간단한 프로젝트 소개
프로젝트의 시작은, 공부를 하다보면 문제.정답.해설 등이 있는데, 문제와 정답이 있는 상황에 해설을 내가 원하는 내용으로 입력하고 그것을 웹으로 구현하면 많은 장점이 있을 것 같다?라는 생각에서 시작되었습니다.
전체적인 프로젝트 구성
프론트엔드(대시보드, 문제, 북마크, 오답노트 등)
백엔드 (PDF 첨부 -> 분석 -> 데이터베이스 저장 -> 홈페이지 자동업로드)
로그인 + 결제 (구독제)
대표적으로 3개의 기능들이 전부 다 반영이 되야되는 상황이었고, 어떻게 해결을 해야되는지 수많은 시행차고를 겪었습니다ㅜㅜ
해왔던 과정 중에 몇가지를 소개하자면
먼저 데이터베이스의 경우,
Supabase mcp를 사용하였고 프로젝트에 대한 내용을 설명하면서 데이터베이스 설계 및 직접 테이블에 입력을 해달라고 했습니다.
여기서 MCP 도구 중에 execute_sql 를 입력하면 쿼리를 생성해서 직접 데이터베이스에 연결하면서 입력 및 수정을 해줍니다. (하단의 이미지는 Supabase mcp 도구기능)
그 이후 데이터베이스를 계속 수정하기 위해서 별도 클로드 프로젝트 파일을 만들고,
필요한 URL, API키 등 관련된 내용을 프로젝트 지침에 설정하면서 계속계속X1000 수정했습니다.
결과적으로는 이렇게 데이터베이스는 수정이 되는데, 로그인기능부터 연결되는 데이터를 정하는게 어렵더라고요.
그리고 데이터테이블이 완성되면, 또 프론트엔드에 반영을 해야되는데 MCP로 연결하는 과정에서 많은 시간이 걸렸습니다..
이러한 상황을 겪다가, 주변에서 Replit은 자체적인 데이터베이스가 있고
supabase 와 연동이 된다는 소식을 듣고 프로젝트를 다시 PRD, TDD, 데이테이블 구조 등을 입력하면서 또 새로 작업을 했습니다. 다행히 명확하게 구현하고 싶은 것이 있다보니 진행하는데 큰 이슈는 없었습니다.
이미지에 있는 것처럼 모든 내용을 바이브코딩으로 만들었습니다.
peurojegteu-gihoeg-gaebalja-yeogryang-ganghwa-peulraesp-lkh6441.replit.app
결제: 토스페이먼츠 MCP
많은 분들이 궁금해하셨던, 결제서비스의 경우
claude mcp add -s user tosspayments-integration-guide npx -- -y @tosspayments/integration-guide-mcp@latest상단에 있는 MCP를 클로드코드에 설치해달라고 요청했습니다. 이이
이렇게 알아서 공식 사이트부터 직접 조사하면서 디버그 까지 완료하니
하단에 있는 이미지처럼 결제 기능이 추가되었습니다!
테스트 KEY로는 결제 테스트까지 가능하지만,
실제 결제까지는 별도로 가입비 + 연관리비 등
비용이 발생한다고 하네요ㅠㅠㅠㅠ
아직 심사까지는 신청을 못했지만
조만간 완료해서 런칭까지 해보겠습니다.
결과와 배운 점
간단한 MVP는 프론트엔드 AI + supabase로 시작을 할 수 있다는 것을 느꼈습니다.
또한, 그것도 어렵다면
레플릿으로 빠르게 런칭해보는 것도 좋을 것 같네요!!
참고로 레플릿은 결제금액 이상으로 사용하면
계속 비용이 발생하니 조심하세요...
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
(내용 입력)