바이브 코딩, 1인 창업가 부트캠프 (AI Product Bulider) 3주차

우와~ 2주차 과제 선물 또 받았다! 다들 멋진 아이디어가 많으신 것 같다.

나도 내 아이디어를 붙여서 활용하면 멋진 결과를 가질 수 있을 것 같다!!

 

1. 돈 될만한 아이디어(기획)

- 이미 증명이 된 부분을 늘리자 > 이미 돈 되는 시장

인건비때문에 비싼 부분을 공략하자

 

2. firebase로 React 프로젝트 생성 

- git은 private 리포지토리로 생성해준다. 

 

클로드 설치

• npm install -g @anthropic-ai/claude-code
• claude

제미나이 설치

• npm install -g @google/gemini-cli
• gemini

Cloudflare에서 pages 생성 후 저장소 연결

 

React(Vite) 선택 후 저장 및 배포 수행

 

- cloudflare에서 간단하게 만들 나는 어떤 화면을 만들거야! 이런 명령을 줘서 기본적인 화면을 생성한다.

 

3. Serverless

* cloud pages functions를 사용할 예정

백엔드를 함수 단위로 사용한다. 

cloudflare pages functions를 사용해서 OpenAI의 API를 통해 스타일 컨설팅 보고서를 받고 싶어. 코드 써줘

라고 입력해준다. 

이건 우리가 평소에 챗지피티에서 조건넣고 입력해줘서 받는 응답과 같다!

오픈AI API : https://platform.openai.com/docs/overview

>> 가입해야함

여기서 API 키를 만들어야한다(이전에 생성한 키가 있으면 그걸로 사용!)
+ 참고로 토큰 쓰는건 유료라서 결제 정보를 입력해야한다.

 

여기서 개발자 테스트도 가능하다. 

공식 API에서 최신 방식 확인해주고 최신 코드로 업데이트 해달라고 한다. 

... > Code 클릭해서 최신 응답 형태로 업데이트 해달라고 요청한다 

이미지도 Open AI 에서 생성 가능하다. 

> 참고로 모델은 개인회원 인정하고 gpt 5.1.mini로 바꿨다 .. 

 

- 이미지 탭으로 이동

(사진 첨부)

너는 최고의 헤어스타일리스트야. 3*3 그리드로, 어떤 헤어스타일인지 설명과 함께 첨부한 사진 속 사람이랑 최고로 잘 어울리는 헤어스타일 9개 생성해줘. 단 첨부한 사람의 얼굴은 절대 바꾸지말고 기존 얼굴 그대로 유지하고 헤어스타일만 바꿔.

code를 복사해서  저 코드 참고해서 결과 리포트에 헤어스타일도 추가해줘 라고 입력해준다. 

이런식으로 나노바나나도 붙이고 할 수 있다! 

 

4. 바이브 디자인

https://stitch.withgoogle.com/

Stitch - Design with AI

 

이 파일을 다운로드한 html 파일을 firebase 경로에 넣어주고, 해당 파일의 코드와 이미지를 참고해서 메인 페이지를 만들어달라고 요청한다. 

https://mobbin.com/

Mobbin — UI & UX design inspiration for mobile & web apps

>> 계속 결과가 제대로 안나와서 화났었는데 무료버전 gemini 2.5버전을 써서 지피티의 최신 모델을 불러올 수 없는게 문제였다!!!!!!!!!!!!!!!!!!!!!

유료 결제 클로드를 사용하는걸 추천한다.. 

얼굴이 사알짝 바뀌긴 했지만 이렇게 결과를 잘 가져온다!! 

 

 

5. 글로벌 결제

https://polar.sh/docs/merchant-of-record/acceptable-use

Acceptable use - Polar

여기 규정을 참고해서 절대 규정 위반이 되지 않도록 사이드를 만들어달라고 한다. 

이렇게 생긴다! polar를 이용해서 결제 붙일예정.. 

운세서비스 같은 거 하면 규정이 빡세서 안된다한다..!!

정산은 좀 천천히 들어온다고 한다. 한 5일? 

 

- 참고: stripe를 바로 쓸 수 있는 방법

Atlas로 미국 법인을 만드는 것. 이걸로 만들어서 미국 법인과 stripe를 연결해서 쓸 수 있다. (카드도 발급해준다)

이러면 미국 법인으로 돈이 들어가게된다. 이건 5주차때 더 자세하게 다루기로한다. 

 

- 결제를 조금 안전하게 할 수 있는 샌드박스 환경

https://sandbox.polar.sh/

Polar — Monetize your software with ease | Polar

이렇게 붙어있는 샌드박스 환경은 실제 돈이 나가지 않는다. 

polar에서 이 서비스 설명을 요구하는데 어떤 서비스인지 설명해달라고 한 후 붙여넣기해서 Setup한다. 

얼마 받을지도 AI에 물어보고 일회성, 가격 정보를 같이 전달해준다. 

한글로 하니까 안만들어줘서 영어로 바꿔서 다시 전송하니 생성됐다!

잘 생성된모습. go to dashboard로 이동해준다. 

제품이 등록된 모습! New Product로 직접 만들수도 있다. 

Documentation의 문서에서 llms-full.txt AI용 문서를 전체 복사해서 내 프로젝트 파일에 txt 파일로 추가해준다. 

 

Product ID를 복사해서 문서를 참고해서 결제 기능을 구현해달라고 요청한다. 

 

polar의 대시보드에서 Settings > Developers > 권한 설정을 해주어야한다. 

 

checkouts:read - 결제 상태 확인

checkouts:write - CHeckout 세션 생성

orders:read - 주문 정보 조회

refunds:write - 환불 처리

를 선택해준다. 

유효기간은 무제한으로 준다. (아니면 계속 갱신해야함..)

cloudflare의 변수 및 암호에서 비밀키로 추가!

이 카드번호로 결제 테스트도 수행할 수 있다. 

결제하기를 클릭하면 이렇게 결제 테스트 화면으로 이동할 수 있다!

결제 정보를 입력하고 pay 클릭

오오!! 결제가 정상적으로 완료됐나보다. 

 

리포트 다운받기와 공유 기능 추가 후 polar에도 샌드박스에서 만들었던것과 똑같은 제품을 하나 생성해준다. 

Settings에서 새로운 키를 발급받고, product id를 바꿔준다음에 다시 배포를 수행한다. 

아직 결제심사가 완료되지는 않았지만, 실제 polar와 연결했다!

이런식으로 할인 코드를 넣어서도 테스트 가능하다!

결제 심사를 받으려면 안전한 사람인지 확인하기 위해 Finish account setup도 설정해야한다.

 

등록!

한국인은 돈을 받을 수 있는 stripe 계정을 만들 수 있다. 

사업자 없이 개인도 가능하고, 외화 통장 아닌 일반 통장도 가능하다.

 

일단 개인으로 설정 완료 ! 

❯ 지금 결제가 실제로 일어날 것 같아. 그러니까 Terms of Service (서비스 약관) Refund Policy (환불 규정) Privacy Policy (개인정보처리방침) 이 페 각각 다 polar 와 이서비스 맞춤형으로 만들어줘

승인이 더 잘 되기 위해 이렇게 입력해준다. 

 

- 여기서 클로 세션 만료됐다.. MAX 쓰고싶은데 비싸..!!!

❯ 파비콘으로 반영해줘. 그리고 글로벌 규제 준수하도록 약관 다 완벽하게 보완해줘 (못함..)

 

6. 이메일 전송

결제 후 이메일 전송 처리해서 환불 처리도 문제 없이 수행할 수 있도록 함.

https://resend.com/

Resend · Email for developers

한달에 3000건의 이메일이 공짜 ! ai 최적화 txt도 제공하고 있다. 

가입 후 도메인을 붙인다. (한국은 지원 안해서 도쿄로!)

도메인 등록을 해야 외부 발송이 가능해진다. 

Docs > API Reference

 

해당 txt 파일을 복사해서 

> txt파일 경로 resend API 이용해서 결과 리포트를 이메일로 전달해주려고해. 기능 구현해줘.
polar 결제할 때 이메일 주소 받는걸 이용해서 전송하고, 별도로 받지말고 정확하게 작성한 이메일로 전송되며 이메일 주소가 잘못됐다고 활불해주지 않는다는 규정추가해. 그리고 리포트 생성이 실패할 경우 (텍스트, 이미지) 무조건 환불 자동으로 진행되도록 만들어. 즉, 오류가 발생하면 무조건적으로 환불을 해주는거야.

환불 API 마저 실패하면 rogiwim@gmail.com으로 환불 문의 하라는 이메일을 쓸 수 있도록 하는 페이지 만들어줘.

사진 용량이 너무 큰 경우 에러가 나던데 사진 압축하는거 추가해줘
https://mychatbot.kr/ 이 도메인에서 보내는거야. 
라고 입력해준다. 

 

- API 키 생성

 키를 생성하고 RESEND_API_KEY 변수 값으로 추가해준다. (cloudflare 환경변수에도 추가)

 

 

7. 다국어

- 글로벌 유저들이 쓸 수 있는 다국어 페이지로 만들어줘. 영어, 한국어로 해주고, 프롬프트도 영어, 한국어 버전을 나눠서 각 국가에 맞게 그 언어 프롬프트로 동작하게 해줘.

 

 

출처 및 강의 : https://www.youtube.com/@jocoding

조코딩 JoCoding