소개
시도하고자 했던 것과 그 이유를 알려주세요.
수익화가 일어나는 웹서비스를 처음부터 끝까지 만들어보고 싶었습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.
Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.
Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)
-Firebase Studio: [https://firebase.studio/](https://firebase.studio/)
-Github: [https://github.com/](https://github.com/)
-Claude code : https://code.claude.com/docs/en/setup
-cloudflare : https://www.cloudflare.com/ko-kr/
조코딩의 바이브 코딩 3일차 내용을 따라했습니다. 아래 내용은 직접 실행한 내용을 순서대로 작성했습니다.
1. 파이어베이스 스튜디오 가입
-Firebase Studio: [https://firebase.studio/](https://firebase.studio/)
-new workspace 생성
-react + vite 선택
-typescript 선택
-도메인 구매했다고 함 - 수익화하기 위해
-생성됨
2. 실제 웹 흐름 만들기 - 깃허브 레포지토리 생성
-Github: [https://github.com/](https://github.com/)
-private로 설정 - 수익화 할 것이기 때문애
3. firebase에서 클로드코드 설치하기
- https://code.claude.com/docs/en/setup
- npm install -g @anthropic-ai/claude-code
- claude
- claude 계정 연결하기
4. 깃허브에 해당 레포지토리 생성하기
-레포지토리 생성
-생성된 레포지토리 주소를 복사해서 클로드에게 git push 하라고 한다
5. cloudflare 연결하기
- 가입하기(무료)
- build - workers & pages - create app - pages(get staart) 선택 - git repository 연결 - 재부팅 - 다시 연결 - begin
- build 셋팅 - 프레임워크 - react(vite) 선택 - save deploy
6. cloudflare studio -> githug -> cloudflare Pages 까지 react에 대한 셋팅 완료
7. firebase studio 에서 클코 - 바이브코딩으로 프론트엔드 화면 만들기
8. 프롬프트: 일단 화면부터 만들고 싶은데 소상공인을 위한 상품 상세페이지 서비스를 만들꺼야. 제품 사진과 상품설명, 가격을 입력하는 화면 만들어줘
9. 다음작업
- react에서 만든 사진, 상품정보를 AI(제미나이)한테 넘긴다
- 컨설팅과 생성된 사진을 AI가 react에게 넘겨주면 끝.
10. cloudflare pages functions 사용하기(종량제 - jam stack)
- 외부 서비스와 연결하려면 api키를 사용하기 위해 백엔드 사용
- jam stack를 쓰는 이유
- 트래픽 폭탄을 감당하기 쉬움
- 보안이 미친 듯이 좋아짐
- 개발자 경험(dx)이 좋음
11. 개발 순서
1. 돈 될만한 아이디어
2. React를 왜 쓰는가
3. Serverless - AI API
4. 바이브 디자인
5. 글로벌 결제
6. 이메일 전송
7. 서비스 고도화(글로벌, 다국어적용)
12. serverless에 붙일 AI API 사용하기
- JSON: 자료구조. 키, 값의 패턴으로 표현
13. 프롬프트: cloudflare pages functions를 사용해서 gemini API를 통해 상세페이지 컨설팅 보고서를 받고 싶어. 코드 써줘.
14. https://aistudio.google.com/api-keys 에서 api 키 생성
- 결제 설정 - 결제 계정 연결(무료 300달러 제공, 3달)
- api 키 복사
15. 제미나이 api 문서 링크와 내 api 키 값 주고
-프롬프트: 이 사이트와 내 api 키 값을 참조해서 최신 데이터로 업데이트 해
-프롬프트 : preview 환경도 만들어줘
-프롬프트: 로컬 실행해
-프롬프트: 사진 올릴 때 드래그 앤 드롭 되도록 만들어
16. 에러가 발생하면 개발자코드(ctrl + shift + i) 열어서 에러코드 확인 후 클코에 알려주면 해결해준다.
결과와 배운 점
결과 : 프론트엔드에서 사용자가 해당 값을 입력하면 백엔드 AI가 결과값을 가져오는 것 까지 성공했습니다. 다음 작업으로 바이브 디자인으로 웹페이지를 꾸미고 백엔드 작업으로 글로벌 결제 수단을 붙여 보겠습니다.
배운 점 : 모르면 따라하면서 전문가가 하는 걸 배우는 게 가장 빠르고 쉬운 방법 같습니다. 지금도 왜 이렇게 하는지 완전하게 이해하지 못했지만 완성하는데 의의를 두고 끝까지 만들어 보겠습니다.
감사합니다.
도움 받은 글 (옵션)
-조코딩의 [3주차] 바이브 코딩, 1인 창업가 부트캠프 (AI Product Builder)
https://www.youtube.com/watch?v=X9cna-h9mC4
