# 바이브코딩으로 프론트엔드, 백엔드, 결제 시스템까지 완성하기

- 작성자: [성실한 거위](https://community.clauders.ai/member/imported-member-as7iDmOTS7)
- 공간: [에이전트 / 노코드 자동화](https://community.clauders.ai/automation)
- 게시: 2026-02-03
- 연재: [Claude Code 업무 자동화](https://community.clauders.ai/series/claude-code-work-automation) 1/1편
- 태그: #클코자동화
- 주소: https://community.clauders.ai/automation/post/%EB%B0%94%EC%9D%B4%EB%B8%8C%EC%BD%94%EB%94%A9%EC%9C%BC%EB%A1%9C-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EB%B0%B1%EC%97%94%EB%93%9C-%EA%B2%B0%EC%A0%9C-%EC%8B%9C%EC%8A%A4%ED%85%9C%EA%B9%8C%EC%A7%80-%EC%99%84%EC%84%B1%ED%95%98%EA%B8%B0-4145bfe6-59e3-807b-8d16-6674579dab45

---

## 소개

바이브코딩으로 웹사이트를 처음부터 끝까지 구현해보고 싶었습니다.

## 진행 방법

-클로드코드(opus 4.5 - pro요금제)  
-Firebase Studio(개발)  
-CloudFlare(무료 배포)  
-github(코드 저장)  
-Resend(이메일 API)  
-토스페이먼트(결제시스템)  
-Supabase(DB, 로그인, OAuth)  
-Gemini(레포트와 상품 이미지 생성)  
-Google Cloud(구글로그인)

**작업순서**

1. Serverless 설정(React + vite)
2. 바이브 디자인
3. 결제 시스템 구현
4. 이메일 전송
5. 데이터베이스 설정
6. 회원 가입/로그인
7. 소셜 로그인, 마이페이지
8. 구독형 서비스 구현

**작업내용**

1. 파이어베이스 스튜디오 가입 - 깃 허브 레포지토리 생성 -클로드 코드 설치
2. cloudflare 가입 및 깃 허브 연결하기

```
프롬프트: 일단 화면부터 만들고 싶은데 소상공인을 위한 상품 상세페이지 서비스를 만들꺼야. 제품 사진과 상품설명, 가격을 입력하는 화면 만들어줘
```

```
제미나이 api 문서 링크와 내 api 키 값 주고
-프롬프트: 이 사이트와 내 api 키 값을 참조해서 최신 데이터로 업데이트 해
-프롬프트 : preview 환경도 만들어줘
-프롬프트: 로컬 실행해
-프롬프트: 사진 올릴 때 드래그 앤 드롭 되도록 만들어
```

1. 바이브 디자인하기  
   -[https://stitch.withgoogle.com/](https://stitch.withgoogle.com/)

```
-프롬프트: 소상공인을 위한 상세페이지 자동생성 웹사이트 만들고 싶어. 상품 사진, 상품명, 상품설명, 가격을 넣으면 AI가 작성된 보고서의 내용을 토대로 상세페이지를 만들어 주는 사이트야
```

1. 만들어진 디자인을 다운로드해서 소스와 이미지를 클코에 업로드한다.

```
-프롬프트: @code.html @screen.png 코드와 이미지를 참고하여 메인 페이지를 만들어줘.
-프롬프트: 버튼과 메인페이지 이미지가 안나타나. 생성된 상세페이지(3x3)에서 이미지 생성에 실패했습니다. 라고 나와 이 문제를 해결해줘
```

1. 결제 시스템 붙이기  
   -처음엔 Polar을 붙였는데 중간에 진행이 안되어 토스로 변경했다가 포스원으로 했다가 최종토스로 진행  
   -[https://docs.tosspayments.com/guides/v2/get-started/llms-guide](https://docs.tosspayments.com/guides/v2/get-started/llms-guide)

```
프롬프트: [가이드문서] 이 문서를 참고해서 토스결제시스템을 만들어줘
```

1. 이메일 전송 기능 구현하기  
   -이메일 전송 -[https://resend.com/](https://resend.com/) 가입하기  
   -도메인 등록(가비아) - [localshopaihub.](http://localshopaihub.com)com  
   -화면 상단 우측 -> docs 클릭 -> api reference -> 우측 네모 클릭 -> llms-full.ext 복사  
   -firebase studio 작업폴더에서 resend.txt 생성 -> 붙여넣기

```
프롬프트: @resend.txt 의 API 이용해서 결과 리포트를 이메일로 전달해주려고 해. 기능 구현해줘.
```

1. 로그인, 회원가입 기능 구현하기
2. Supabase 가입 및 프로젝트 생성

```
-프롬프트: 회원가입, 로그인 기능을 구현하고 싶어. [https://supabase.com/docs/reference/cli/introduction] supabase를 이용해서 구현해줘. 구현했으면 테스트해줘.
-login_plan.md 생성
-프롬프트: @login_plan.md - md파일을 토대로 구현해줘.
```

1. 로그인 화면 - 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건까지 늘린다.
```

1. 소셜 로그인 기능 구현(구글)  
   - supabase - Authentication - Sign In / Providers - Auth Providers - Google - 구글에서 설정하고 온다
2. [https://supabase.com/docs/guides/auth/social-login/auth-google](https://supabase.com/docs/guides/auth/social-login/auth-google) : supabase의 구글 로그인 문서
3. 구글클라우드플랫폼 - 새프로젝트 생성 - 상단 프로젝트 선택 - 새프로젝트 - localshop 생성
4. Google Auth Platform console 프로젝트 신규 생성
5. OAuth 클라이언드 만들기 - 웹 어플리케이션 - 승인된 JavaScript 원본 - [https://localshop-ai-hub-firebase.pages.dev](https://localshop-ai-hub-firebase.pages.dev), [https://localshopaihub.com](https://localshopaihub.com) 입력 - 승인된 리디렉션 URI - [https://cabouajfhmzipojlvcrp.supabase.co/auth/v1/callback](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 - 구글 로그인 기능 구현해줘
```

1. 보안관련해서는 수시로 아래 문장으로 점검한다

```
프롬프트: 지금 보안취약점 점검해줘
```

1. 마이페이지 구현 -

```
프롬프트: 마이페이지 기능 구현해줘. 내 정보, 비번 재설정, 탈퇴 이런거 구현해
```

1. 회원탈퇴는 supabase 의 접근 권한을 가지고 삭제 함수를 실행 해야한다.

```
프롬프트: 삭제 함수를 만들어 진행해
```

1. supabase Access Token 생성방법 -Dashboard - Account - Access Tokens 에서 생성  
   -회원탈퇴는 DB 접근 권한을 가져야 한다.
2. 여기까지 구현함 -> 지금은 테스트 결제 시스템임
3. 최종 결과물  
   [https://localshopaihub.com/](https://localshopaihub.com/)

## 결과와 배운 점

-배운점: 웹사이트를 처음부터 끝까지 만들어 봤다는데 의미가 있습니다. 더 나아가 수익화까지 연결하려고 합니다. 해보니 바이브코딩이 어떤 건지 조금 감이 잡히는 것 같습니다. 그냥 해보는 것 보다 목표를 정해두고 하니 몰입도가 높아지는 것 같습니다.

-후기: 클로드코드 pro 요금제를 쓰다 보니 데이터 사용량이 금방 소진하게 되어 프롬프트를 신중하게 사용하게 됩니다. 상위 버전 사용은 좀 더 개발을 본격화하게 되면 진행해야 할 것 같습니다.

-감사합니다.

## 도움 받은 글

[조코딩의 1인 창업가 부트캠프]

[https://www.youtube.com/watch?v=cjmMNlOMBdg](https://www.youtube.com/watch?v=cjmMNlOMBdg)