Ⅰ. 초기 세팅
1. Firebase Studio
(편의성을 위해 클라우드 코드 서비스 이용)
- New Workspace 만들기
- Simple HTML 선택 후 워크스페이지 이름 설정
2. Gemini CLI 연결
- Gemini CLI 웹사이트에서 명령어 복사
- firebase studio 터미널에 붙여넣기
# 1. gemini cli 설치
npm install -g @google/gemini-cli
# 2. 제미나이 실행 명령어
gemini 
로그인까지 하면 터미널에서 바로 제미나이를 사용할 수 있음!
Gemini, Claude, Codex 등 원하는 AI CLI를 선택할 수 있다.
3. Github랑 연동하기
- New Repository 만들기
- gemini cli 명령어에 다음과 같이 명령어 작성
- 로그인과 인증 모두 받으면 자동적으로 push 됨!
Ⅱ. Cloudflare로 클라우드 서비스 연동 후 배포
많은 클라우드 서비스들이 있지만 이번에는 Cloudflare Page를 사용할 예정이다. 무료로 사용할 수 있는 클라우드 중 가장 bandwidth가 넓기 때문!
- Cloudflare 로그인 및 회원가입 진행
- 'create application' 클릭
- 맨 마지막에 있는 Get Started 클릭! (위에 있는 것들 누르면 돈이 나갈 수도 있음)
- Import an existing Git repository 버튼 클릭 후 깃 레포지토리랑 연결
- 원하는 repo를 선택 후 Save and Deploy 클릭
- 배포 성공!
즉, Firebase에서 웹코드 작성 → Git으로 버전 관리 → Cloudflare로 배포
Ⅲ. 구글 애드센스 추가
구글 애드센스 → 사이트 → 코드 붙여넣기
(사이트에 광고를 게재하려면 다음 코드를 복사하여 사이트에서 각 페이지의 코드를 붙여넣거나 ads.txt 생성 후 복붙)구글이 알아서 확인 후 검토 요청
(웹사이트의 개발자 도구에서 코드가 삽입되었는지도 확인할 수 있음)검토는 웹사이트마다 걸리는 시간이 달라질 수 있음.
Ⅳ. 도메인 사기
이제 구글 애드센스에 등록하려고 했는데 cloudflare에서 배포한 .pages.dev는 안 받아준다고 함. 그래서 도메인을 사기로 결정!
한번 사두면 앞에 도메인만 고쳐서 여러개의 웹사이트를 만들 수 있기 때문에 이왕 하는 겸 사기로 했다.
1. Hosting.kr에서 도메인 사기
- Hosting.kr 이나 가비아 같은 사이트에서 도메인을 살 수 있음!
- 접근성을 고려해서 .com으로 결정했고 가격은 다음과 같다.
- Cloudflare → Domain → 방금 산 도메인 입력
다시 도메인을 샀던 사이트(가비아/호스팅케이알)로 돌아가서 네임서버 변경해주기
위에서 알려준 2개의 서버를 Hostingkr로 가서 붙여넣기 하면 됨
네임서버 업데이트 후 cloudflare에 알리면 알아서 검토 후 승인해줌 (체크표시 뜨면 성공!)
2. 웹사이트에 적용하기
다시 cloudflare로 돌아와서 내 프로젝트 → Custom Domains
아까 샀던 도메인을 입력 후 Activate domain 클릭
| Verifying | Active |
|---|---|
 |
 |
Verifying이 끝나면= Active로 전환됨!
이제
https://(내도메인).com검색하면 배포했던 사이트가 뜰 것임!!!
Ⅴ. 구글 애드센스 심사
- 코드 스니펫 다 추가하고 사이트 확인 받으면 다음과 같은 화면이 뜸
일주일 이내로 검사 결과가 나옴!
심사에서 재검토가 필요하다면 메일로 이렇게 날라옴...
회고
웹사이트를 배포까지 해본 건 처음이었는데 생각보다 어렵지 않아서 놀랐다. CLI도 너무 되어 있어서 자연어로 명령어를 입력하면 원하는 결과가 나오는 게 확실히 개발 환경이 많이 바꼈다는 것을 느낄 수 있었다.
확실히 금방 대충 만들었더니 구글 애드센스에서 거절하는게...😵
돈 주고 산 도메인이 아까우니 품질 좋은 사이트로 업그레이드 하던가 포폴용 주소로 사용해야 겠다.
참고문헌
"바이브 코딩 기초, 수익형 웹 사이트 만들고 돈 벌기", 조코딩
https://youtu.be/wUFtsYHQOpI?si=NHHQZ7WXW4sfZavf
'개인 프로젝트' 카테고리의 다른 글
| Calculator App in Android Studio(3) (0) | 2025.12.02 |
|---|---|
| Calculator App in Android Studio(2) (0) | 2025.12.02 |
| Calculator App in Android Studio(1) (0) | 2025.12.02 |