조코딩 AI Product Builder 1주차 실습

1주차: 기획 → 첫 수익 - 개요 · 웹 개발 기초 · 배포 · API · 광고 수익화

 

[배포]

1. 간단한 html 파일 cloudflare 업로드 테스트

* cloudflare 도메인 계정도 공짜 
* 빌드 > 컴퓨팅 및 AI
* 이건 무제한 평생 꽁짜 
* 정적 웹 기준으로는 vercel 돈 좀 나감
* Workers 및 Pages > Create Application
* html 같은 정적 파일이면 static 파일 선택 
* 전세계 누구나 다 이용 가능 

 

 

 

2. FireBase Studio 사용 
* New workspace > Simple HTML

보통 VS Code 쓰긴하지만 연습용으로 사용

 

 

- 내장된 에이전트를 활용해서 간단한 로또 번호 추첨 html 파일 생성

 

 

3. geminicli 활용

클로드 코드가 현 시점 가장 성능 좋음. 공짜로 쓰기 좋은 geminicli 활용

설치하는 명령어 복사 후 Firebase 터미널에 설치

npm install -g @google/gemini-cli

 

복붙하면 설치된다. 설치 후 실행하는 명령어 'gemini' 라고만 입력하면 된다.

 

입력하면 인증 코드를 입력하라는 명령줄이 뜨는데, 나오는 링크를 타고 들어가서 인증코드를 복붙해주면 된다. 

 

성공한 화면

 

 

 

4. git 저장소 생성

깃 주소 복사하기

echo "# product-builder-lecture" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/jyeon-c/product-builder-lecture.git
git push -u origin main

 

를 쓰지않고.. !! AI에게 올려달라고 부탁한다 

 

git push는 연동후 내가 쳤다

성공적으로 올라간 모습

 

5. git과 cloudflare 연결

cloudflare에서 새로운 응용 프로그램 생성 > 하단에 Pages를 클릭 > 깃허브 연결

.pages여야 전세계 꽁짜!

 

연결 후 '저장 및 배포' 

배포가 완료됐으니 이제 페이지에 접속할 수 있다!

 

배포된 url로 들어가면 아까 생성한 페이지가 보이는걸 볼 수 있다. 

이제 기능 추가 후 git에 push만 하면 변경사항이 바로 적용되는걸 볼 수 있다. 

 

6. 기능 추가 후 배포

나는 보안상 계속 push까지는 안된다해서 내가했다..

push후 다시 링크를 들어가보면 변경 사항이 페이지에 바로 적용된것을 볼 수 있다!

 

 

6. 

[API]

1. 외부 서비스 활용 - Formspree

서버 없이도 외부 서비스 활용 가능 

 

https://formspree.io/

Custom Forms with No Server Code | Formspree

 

- Add New > A New Form

위 Firebase에서 저녁 메뉴 제휴 문의 폼으로 변경해달라, formspree 가능한 형태로 만들어 달라고 프롬프트를 입력한 뒤 위 endpoint를 코드 부분에 입력해준다. 

 

이렇게 폼 형태를 입력받을 수 있다. 

 

 - 댓글

Get Start

 

 

https://disqus.com/

Disqus – The #1 way to build your audience

shortname주고 Disqus 댓글 기능 구현해달라고 한 후 git push

이렇게 외부 서비스를 활용하여 댓글 기능을 구현할 수 있다. 

 

- AI 모델을 학습시키고 쉽게 활용할 수 있게 해주는 툴(Chat GPT 전의 AI)

 

https://teachablemachine.withgoogle.com/

Teachable Machine

 

표준 이미지 모델 선택. 

강아지와 고양이 사진을 넣고 학습시키기

 

사진 더 넣고 돌리면 잘나올거다!! 지금은 그냥 이런게 있다.. 이렇게 AI 모델을 학습시킬 수 있다!

모델 내보내기 하면 다운받을 수 있다. '모델 업로드' 클릭

이 주소를 복사해서 firebase에 

주소와 강아지 고양이 구분하는 모델을 만들었어. 이걸 이용해서 동물상 테스트하는 사이트를 만들어줘. 라고 입력

 

 

 

[광고 수익화]

- Google AdSense - 광고, stripe / Polar - 결제

Google AdSense 광고 붙이기 해보기

https://adsense.google.com/intl/ko_kr/start/

Google 애드센스 - 웹사이트에서 수익 창출하기

 

광고 배너 만들고 광고주 받아서 계약할수도 있다!

가입 방법: https://support.google.com/adsense/answer/10162?hl=ko

애드센스 가입하기 - Google 애드센스 고객센터

 

가입하고, 오늘 실습 진행한 페이지를 사이트 연결해줬다. 아마 부실해 거절 당할 수 있음. 

여기 코드 복사해서 firebase 로 가서 적용해달라하기.. 코드 적용 및 배포 후 '코드를 삽입했습니다.' 선택 확인 버튼 클릭

승인을 위한 보완과 최적화를 프롬프트로 입력. 

 

 

 

 

* 결과 링크

https://product-builder-lecture-88c.pages.dev/

Lotto Number Generator

 

 

* 참고 링크

https://www.cloudflare.com/ko-kr/

모든 곳에서 연결하고, 보호하고, 구축하기

 

https://firebase.studio/

Firebase Studio

 

https://geminicli.com/

Build, debug & deploy with AI

 

https://developers.openai.com/codex/cli/

Codex CLI

https://code.claude.com/docs/en/setup

Set up Claude Code - Claude Code Docs

 

https://opencode.ai/

OpenCode | The open source AI coding agent

 

https://www.youtube.com/@jocoding

조코딩 JoCoding