소개
바이브코딩으로 웹사이트를 처음부터 끝까지 구현해보고 싶었습니다.
진행 방법
-클로드코드(opus 4.5 - pro요금제)
-Firebase Studio(개발)
-CloudFlare(무료 배포)
-github(코드 저장)
-Resend(이메일 API)
-토스페이먼트(결제시스템)
-Supabase(DB, 로그인, OAuth)
-Gemini(레포트와 상품 이미지 생성)
-Google Cloud(구글로그인)
작업순서
Serverless 설정(React + vite)
바이브 디자인
결제 시스템 구현
이메일 전송
데이터베이스 설정
회원 가입/로그인
소셜 로그인, 마이페이지
구독형 서비스 구현
작업내용
파이어베이스 스튜디오 가입 - 깃 허브 레포지토리 생성 -클로드 코드 설치
cloudflare 가입 및 깃 허브 연결하기
프롬프트: 일단 화면부터 만들고 싶은데 소상공인을 위한 상품 상세페이지 서비스를 만들꺼야. 제품 사진과 상품설명, 가격을 입력하는 화면 만들어줘제미나이 api 문서 링크와 내 api 키 값 주고
-프롬프트: 이 사이트와 내 api 키 값을 참조해서 최신 데이터로 업데이트 해
-프롬프트 : preview 환경도 만들어줘
-프롬프트: 로컬 실행해
-프롬프트: 사진 올릴 때 드래그 앤 드롭 되도록 만들어바이브 디자인하기
-https://stitch.withgoogle.com/
-프롬프트: 소상공인을 위한 상세페이지 자동생성 웹사이트 만들고 싶어. 상품 사진, 상품명, 상품설명, 가격을 넣으면 AI가 작성된 보고서의 내용을 토대로 상세페이지를 만들어 주는 사이트야만들어진 디자인을 다운로드해서 소스와 이미지를 클코에 업로드한다.
-프롬프트: @code.html @screen.png 코드와 이미지를 참고하여 메인 페이지를 만들어줘.
-프롬프트: 버튼과 메인페이지 이미지가 안나타나. 생성된 상세페이지(3x3)에서 이미지 생성에 실패했습니다. 라고 나와 이 문제를 해결해줘결제 시스템 붙이기
-처음엔 Polar을 붙였는데 중간에 진행이 안되어 토스로 변경했다가 포스원으로 했다가 최종토스로 진행
-https://docs.tosspayments.com/guides/v2/get-started/llms-guide
프롬프트: [가이드문서] 이 문서를 참고해서 토스결제시스템을 만들어줘이메일 전송 기능 구현하기
-이메일 전송 -https://resend.com/ 가입하기
-도메인 등록(가비아) - localshopaihub.com
-화면 상단 우측 -> docs 클릭 -> api reference -> 우측 네모 클릭 -> llms-full.ext 복사
-firebase studio 작업폴더에서 resend.txt 생성 -> 붙여넣기
프롬프트: @resend.txt 의 API 이용해서 결과 리포트를 이메일로 전달해주려고 해. 기능 구현해줘.로그인, 회원가입 기능 구현하기
Supabase 가입 및 프로젝트 생성
-프롬프트: 회원가입, 로그인 기능을 구현하고 싶어. [https://supabase.com/docs/reference/cli/introduction] supabase를 이용해서 구현해줘. 구현했으면 테스트해줘.
-login_plan.md 생성
-프롬프트: @login_plan.md - md파일을 토대로 구현해줘.로그인 화면 - supabase의 Authentication 사용
-Sing in / providers - Emain 클릭 - Secure password change 켜기 - Minimum password length - 8자리로 수정 - Password Requirements - 대,소문자. 특수문자 사용하게 설정 - save
1. 인증 이메일이 발송되지 않는 곳에서 멈춤 -> 아침에 테스트하니 잘됨 -> 이유 rate limits에 걸림
2. 치명적 단점
-Supabase의 Rate Limits(속도제한) - 시간당 2명 가입하면 끝(무료이기때문에)
-SMTP 설정으로 이 문제를 해결한다.
-RESEND 연결해서 3,000건까지 늘린다.소셜 로그인 기능 구현(구글)
- supabase - Authentication - Sign In / Providers - Auth Providers - Google - 구글에서 설정하고 온다https://supabase.com/docs/guides/auth/social-login/auth-google : supabase의 구글 로그인 문서
구글클라우드플랫폼 - 새프로젝트 생성 - 상단 프로젝트 선택 - 새프로젝트 - localshop 생성
Google Auth Platform console 프로젝트 신규 생성
OAuth 클라이언드 만들기 - 웹 어플리케이션 - 승인된 JavaScript 원본 - https://localshop-ai-hub-firebase.pages.dev, https://localshopaihub.com 입력 - 승인된 리디렉션 URI - https://cabouajfhmzipojlvcrp.supabase.co/auth/v1/callback 입력 -> 이거는 -supabase - Authentication - Sign In / Providers - Auth Providers - google - Callback URL (for OAuth) 에서 가져온다. -구글 클라이언트 ID가 생성됨 - 복사해서 - subabase - Authentication - googel - ID에 붙여넣고, 클라이언트 보안 비밀번호 를 복사한 후에 subabase - Authentication - googel - Client Secret (for OAuth) 에 붙여넣는다.
환경 세팅을 모두 마친 후에
프롬프트: https://supabase.com/docs/guides/auth/social-login/auth-google - 구글 로그인 기능 구현해줘보안관련해서는 수시로 아래 문장으로 점검한다
프롬프트: 지금 보안취약점 점검해줘마이페이지 구현 -
프롬프트: 마이페이지 기능 구현해줘. 내 정보, 비번 재설정, 탈퇴 이런거 구현해회원탈퇴는 supabase 의 접근 권한을 가지고 삭제 함수를 실행 해야한다.
프롬프트: 삭제 함수를 만들어 진행해supabase Access Token 생성방법 -Dashboard - Account - Access Tokens 에서 생성
-회원탈퇴는 DB 접근 권한을 가져야 한다.여기까지 구현함 -> 지금은 테스트 결제 시스템임
최종 결과물
https://localshopaihub.com/
결과와 배운 점
-배운점: 웹사이트를 처음부터 끝까지 만들어 봤다는데 의미가 있습니다. 더 나아가 수익화까지 연결하려고 합니다. 해보니 바이브코딩이 어떤 건지 조금 감이 잡히는 것 같습니다. 그냥 해보는 것 보다 목표를 정해두고 하니 몰입도가 높아지는 것 같습니다.
-후기: 클로드코드 pro 요금제를 쓰다 보니 데이터 사용량이 금방 소진하게 되어 프 롬프트를 신중하게 사용하게 됩니다. 상위 버전 사용은 좀 더 개발을 본격화하게 되면 진행해야 할 것 같습니다.
-감사합니다.
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
[조코딩의 1인 창업가 부트캠프]
https://www.youtube.com/watch?v=cjmMNlOMBdg
