[1주차] 5주 완성 AI Product Builder, 1인 창업가 부트캠프
조코딩 채널 | 70만 구독자 기념 무료 라이브 강의 (약 7.5시간) 영상: https://www.youtube.com/watch?v=-iEIOXh9DCs
📋 목차
- 오프닝 & 부트캠프 소개
- 왜 지금 1인 프로덕트 빌더의 시대인가
- IT 프로덕트의 큰 그림
- 웹 개발 기초 (HTML, CSS, JavaScript)
- 배포 (Deployment) — Cloudflare Pages
- 고급 개발 환경 세팅
- AI 코딩 도구 설치 및 연동
- GitHub 연동 & CI/CD 파이프라인 구축
- 외부 서비스 활용
- 광고 수익화 (Google AdSense)
- 학습 리소스 & 마인드셋
- 5주 커리큘럼 전체 로드맵
1. 오프닝 & 부트캠프 소개
라이브 현황
- 약 3,000명 이상이 동시 시청으로 시작, 끝까지 약 950~1,000명이 꾸준히 시청
- 총 약 7시간 30분 진행 (오후 1시~밤 10시, 중간 휴식 포함)
부트캠프 구성
- 5주 완성: 매주 토요일 오후 2시 라이브
- 해커톤: 별도 일정으로 오프라인 해커톤 진행 예정 (주말), 알림 신청 가능
- 다시보기: 라이브 종료 후 약 2시간 무료 공개, 이후 멤버십(유료) 전환
- 이벤트: 자기 사이트를 만들어 SNS에 인증 포스팅하면 메가커피 아이스 아메리카노 50명 추첨 (다음 주 라이브에서 추첨)
조코딩이 바라는 비전
- 이 강의를 통해 K-앱, K-웹서비스 같은 새로운 카테고리가 탄생하길 기대
- K-팝, K-뷰티, K-콘텐츠처럼 한국에서 글로벌로 뻗어나가는 소프트웨어 제품을 만드는 사람들을 양성하고 싶음
- "여기 계신 분 중에 유니콘이 나옵니다"
2. 왜 지금 1인 프로덕트 빌더의 시대인가
핵심 메시지: AI가 모든 것을 바꿨다
샘 알트만(OpenAI CEO)의 예측
- "조만간 한 명이 운영하는 1조원 가치 기업이 나온다"
- 이전에는 물리적으로 불가능했지만, AI가 개발·디자인·마케팅을 모두 대체할 수 있게 되면서 현실이 됨
순다 피차이(Google CEO)
- "AI로 인해 어느 때보다 더 창의적으로 표현할 수 있는 시대. 목표를 더 크게 상상하세요"
- 조코딩이 Google I/O에서 직접 만나 인터뷰한 내용
AI 스케일링 법칙 — 아직 한계가 안 왔다
- 앤트로픽 공동창업자 다리오 아모데이: 스케일링 법칙은 여전히 성립, 내부적으로 둔화 징후 없음
- 즉, AI는 앞으로 더 똑똑해질 것이 확실함
- "다들 스케일링 법칙이 끝났다, 한계에 봉착했다고 하는데, 당사자인 앤트로픽에서 아직 아무 문제 없다고 말하고 있다"
AI가 코딩을 대체하고 있다는 구체적 증거
ICPC 국제 프로그래밍 대회 (2024)
- AI가 12문제 전부 풀었고, 대부분 1트에 성공
- 인간 1등팀(중국팀)은 11문제 풀었음
- "전 세계 최고의 프로그래머들을 AI가 이겼다. 이게 무슨 뜻이냐? 코딩 능력으로 인간이 AI를 이기는 건 이제 사실상 불가능하다"
스택 오버플로우의 몰락
- ChatGPT 출시 전후 트래픽 급감 그래프를 보여줌
- "예전에는 코딩하다 모르면 스택 오버플로우에서 검색→복붙하는게 개발자의 일과였는데, 이제는 그것도 구시대적"
- 구글 검색 자체도 AI 때문에 위기
스탠포드 대학교 CS146S
- 코딩을 직접 가르치는 대신, AI로 제품을 만드는 법을 가르치는 정규 강의 개설
- "아이비리그 최고 대학에서도 이제 코딩 교육이 아니라 AI 활용 교육으로 전환"
바이브 코딩(Vibe Coding)
- 안드레이 카르파시(전 테슬라 AI 디렉터, OpenAI 공동창업자)가 만든 용어
- 자연어로 AI에게 지시해서 코딩하는 방식
- "코드를 읽지도 않는다. 그냥 뭐 해줘 하고 딸깍 누르면 된다"
"AI를 안 쓰고 코딩하는 것은 돌도끼 들고 사냥하는 원시인과 같다. 총이 있는데 돌도끼를 쓸 이유가 없다."
1인 창업이 가능한 실제 사례들
Cursor AI
- 직원 약 20명으로 연간 매출 ~1,450억원(1억 달러) 달성
- AI 코딩 에디터를 만든 회사
Base44
- 1인 소유 바이브 코딩 플랫폼
- 설립 6개월 만에 8천만 달러(~1,100억원)에 매각
- "혼자서 6개월 만에 1,100억을 번 거다. 이게 가능한 시대"
린 리더보드(Lean Leaderboard)
- 소수 인원으로 대규모 매출을 내는 AI 네이티브 기업 목록을 보여주는 사이트
- 직원 1인당 매출이 전통 기업과 비교할 수 없을 정도로 높음
래퍼(Wrapper) 전략 — 핵심 인사이트
- 현재 잘나가는 AI 서비스 대부분은 래퍼(Wrapper)
- OpenAI, Google, Anthropic 등이 만든 AI 모델을 가져다가 예쁘게 포장한 것
- K-뷰티 비유: 한국 화장품이 글로벌에서 잘 팔리는 이유는 성분(원료)이 특별해서가 아니라, 포장·마케팅·브랜딩을 잘해서
- 원료는 대부분 비슷한데 래핑(포장)의 차이
- AI 서비스도 마찬가지: 같은 API를 쓰더라도 UI/UX와 포지셔닝으로 차별화
- 성공에 인원수·기술력·전문성·퀄리티는 비례하지 않음
- "빠르게 고객 니즈에 맞는 제품을 출시하고, 계속 고쳐나가는 것"이 핵심
AGI와 시간적 해자(Moat)
- AGI가 오면 누구나 뭐든 만들 수 있게 됨
- 하지만 지금 시작하면 시간적 해자(moat)가 있음
- 이미 유저를 확보하고, 브랜드를 구축하고, 데이터를 쌓아놓은 사람이 유리
- 나중에 AGI가 와서 다 만들 수 있어도, 먼저 시작한 사람의 유저 베이스를 따라잡기 어려움
- "시간이 없습니다. AGI가 오면 누구나 딸깍 한 번에 모든 걸 만들 수 있게 됩니다. 지금이 기회입니다."
3. IT 프로덕트의 큰 그림
프론트엔드 vs 백엔드 — 레스토랑 비유
| 구분 | 프론트엔드 (Client) | 백엔드 (Server) |
|---|---|---|
| 역할 | 사용자가 보는 화면 | 보이지 않는 뒷단 처리 |
| 예시 | 로그인 화면, 버튼, UI | DB 조회, 인증, 데이터 처리 |
| 비유 | 레스토랑의 홀 (손님이 앉아서 주문하는 곳) | 레스토랑의 주방 (요리하는 곳, 손님은 못 봄) |
로그인 예시로 설명
- 사용자가 화면(프론트엔드)에서 ID/PW 입력
- 전송 버튼 누름 → 데이터가 백엔드(서버)로 전달
- 백엔드에서 DB를 조회하여 ID/PW가 맞는지 확인
- 맞으면 "로그인 성공" 응답을 프론트엔드로 보냄
- 프론트엔드가 성공 화면을 보여줌
모든 IT 프로덕트의 공통 구조
- 구글, 인스타그램, ChatGPT, 넷플릭스, 게임 전부 동일한 구조:
- 프론트엔드 (사용자 화면)
- 백엔드 (서버 처리)
- 수익화 (광고 또는 결제)
- "구조를 알면 뭐든 만들 수 있다. 전부 같은 원리."
수익화의 두 가지 축
- 광고 수익: 구글 애드센스 등으로 배너/자동 광고 삽입 → 클릭/노출에 따라 수익
- 결제 수익: 구독(Subscription), 일회성 결제, 글로벌 결제(Polar, Stripe)
- 구독 모델: MRR(월간 반복 매출), ARR(연간 반복 매출)
- 이번 1주차에서는 광고 수익을 다루고, 결제는 3~4주차에서 다룰 예정
4. 웹 개발 기초 (HTML, CSS, JavaScript)
프론트엔드 3요소 — 건물 비유
| 언어 | 역할 | 건물 비유 | 설명 |
|---|---|---|---|
| HTML | 뼈대(구조) | 철근·콘크리트 | 웹페이지의 구조를 정의. 제목, 문단, 이미지, 버튼 등 |
| CSS | 꾸미기(디자인) | 외장·인테리어·페인트 | 색상, 크기, 위치, 글꼴, 레이아웃 등 스타일링 |
| JavaScript | 동작(로직) | 전기·엘리베이터·자동문 | 클릭하면 뭔가 동작, 데이터 처리, 상호작용 |
- "건물의 뼈대(HTML)만 있으면 콘크리트 건물이고, 여기에 페인트 칠하고 인테리어 하면(CSS) 예뻐지고, 엘리베이터나 자동문을 달면(JavaScript) 움직인다"
- "사실 이걸 다 알 필요 없다. AI가 다 해주니까. 하지만 큰 그림은 알고 있으면 AI에게 더 잘 시킬 수 있다"
HTML 기초 태그
<h1>큰 제목</h1>
<h2>중간 제목</h2>
<p>문단 텍스트</p>
<a href="https://example.com">링크</a>
<img src="이미지주소" alt="설명">
<button>버튼</button>~: 제목 크기 (h1이 가장 큼): 문단(paragraph)- 태그는 여는 태그(
)와 닫는 태그()로 구성
실습 1: 메모장으로 웹사이트 만들기 ("상남자의 방법")
조코딩이 "상남자의 방법"이라고 부른 가장 원시적인 웹 개발:
- 메모장 열기 (Windows: notepad, Mac: 텍스트 편집기)
안녕
- 파일 → 다른 이름으로 저장 → 파일 이름을
index.html로 지정 - 중요: 확장자가
.html이어야 함 (.txt아님!) - 인코딩: UTF-8 선택 (한글 깨짐 방지)
- 저장된 파일을 크롬 브라우저에서 더블클릭 → "안녕"이 크게 표시됨
실습 2: ChatGPT로 로또 번호 추첨기 만들기
- ChatGPT에 프롬프트: "로또 번호 생성기 웹사이트 만들어줘. HTML/CSS/JavaScript 하나의 파일로"
- 생성된 전체 코드를 복사
- 메모장의
index.html내용을 전부 지우고 붙여넣기 - 저장 후 브라우저에서 열기 → 로또 번호 추첨기 완성!
- "야, 코딩 한 줄도 안 했다. ChatGPT한테 시켰더니 로또 번호 추첨 사이트가 나왔다. 이게 2025년의 개발이다."
- 다크모드/라이트모드 토글도 추가 가능: "다크모드 추가해줘"라고 한 마디만 하면 됨
크롬 개발자도구 — 웹의 구조를 엿보기
- 열기: F12 키 또는 마우스 우클릭 → "검사(Inspect)"
- 활용법:
- HTML 구조를 실시간으로 볼 수 있음
- 텍스트나 스타일을 임시로 수정 가능 (본인 화면에서만!)
- 뉴스 사이트 제목을 바꿔서 캡처하는 장난도 가능 (조코딩 유머: "뉴스 조작 가능합니다ㅋㅋ")
- "이거로 뉴스를 조작할 수 있다! 라고 하면 좀 그런데, 실제로는 본인 화면에서만 바뀌는 거지 실제 뉴스가 바뀌는 건 아니다"
- 프론트엔드 코드는 누구나 볼 수 있음 → "프론트엔드는 어차피 공개된 코드"
"코딩에서 가장 어려운 것은 회원가입과 환경 세팅이다. 나머지는 AI가 다 해준다. 닉네임 정하는 게 제일 헬이다."
5. 배포 (Deployment) — Cloudflare Pages
배포란?
- 내 컴퓨터에서만 보이는 HTML 파일을 전 세계 누구나 접속할 수 있게 인터넷에 올리는 것
- 쉽게 말해: 내 웹사이트에 주소(URL)가 생겨서 다른 사람도 볼 수 있게 만드는 것
Cloudflare Pages를 선택한 이유
무료 플랜에서 무제한 대역폭(Unlimited Bandwidth) 제공 — 60억 명이 동시 접속해도 비용 0원
- "전 세계 60억 인구가 동시에 내 사이트에 접속해도 공짜다. 이게 진짜다."
- 글로벌 CDN이 기본 포함되어 전 세계 어디서든 빠르게 로딩
- 커스텀 도메인도 연결 가능 (무료 도메인도 제공:
프로젝트이름.pages.dev)
다른 배포 옵션과의 비교
| 서비스 | 무료 대역폭 | 특징 |
|---|---|---|
| Cloudflare Pages ✅ | 무제한 | 정적 사이트 최적, 글로벌 CDN |
| Vercel | 제한 있음 | Next.js 등 프레임워크와 연동 좋음, 트래픽 많으면 비쌈 |
| Netlify | 100GB/월 | 비슷하나 대역폭 제한 |
| Replit | 유료 구독 | 쉽지만 비쌈 |
Cloudflare Workers vs Pages — 중요한 차이!
조코딩이 라이브 중 실수로 Workers에 배포했다가 나중에 수정한 에피소드:
| Cloudflare Pages | Cloudflare Workers | |
|---|---|---|
| 역할 | 정적 파일(HTML) 전달 — "파일 보내주기" 끝 | 코드를 실행(연산) — "일을 한다" |
| 비용 | 무제한 무료 | 사용량에 따라 과금 |
| 속도 | 더 빠름 (단순 전달) | 느릴 수 있음 (연산 필요) |
| 용도 | HTML/CSS/JS 정적 사이트 | Next.js SSR, 서버리스 함수, AI API 등 |
| 비유 | 택배 기사 (물건 전달만) | 공장 (물건 만들어서 보냄) |
결론: 워커스 쓰지 마세요. 페이지 쓰세요. 정적 웹사이트에서는 Pages가 무조건 맞다.
- Vercel은 Workers와 비슷한 포지션 (서버 사이드 처리 가능하지만 비쌈)
배포 방법 (Pages — 드래그 앤 드롭)
- Cloudflare Dashboard 가입 & 로그인
- Workers & Pages → Create Application 클릭
- ⚠️ 주의: "Looking to deploy Pages?" → Get started 클릭 (Workers가 아닌 Pages!)
- Drag and drop 방식 선택
- 프로젝트 이름 입력 (영어, 예:
product-builder-test) - Create Project 클릭
index.html파일을 폴더에 넣어서 업로드 (단일 파일이 아닌 폴더를 드래그)- 새 폴더 만들기 →
index.html넣기 → 폴더를 드래그 앤 드롭 - 파일 이름은 반드시
index.html이어야 인식됨 - Deploy Site 클릭
프로젝트이름.pages.dev주소로 전 세계 접근 가능!
업데이트 방법
- 프로젝트 대시보드 → New Deployment → 수정된 파일 재업로드
- 또는 GitHub 연동 후 자동 배포 (아래 섹션 참조)
삭제 방법
- 프로젝트 → Settings → 맨 아래 Permanently delete → 프로젝트 이름 입력 후 삭제
6. 고급 개발 환경 세팅
Firebase Studio (클라우드 IDE)
- Google이 제공하는 브라우저 기반 개발 환경 (VS Code와 유사)
- 설치 불필요 — 구글 계정으로 로그인하면 바로 사용
- 구성: 파일 탐색기(왼쪽) + 코드 에디터(중앙) + 터미널(하단) + AI 입력창(우측)
- "설치가 가장 귀찮으니까 클라우드에서 바로 쓰는 것. 이게 귀찮아서 이거 쓰는 거다"
- ⚠️ "이게 구글이 언제까지 서비스할지 모른다. 라이브 중에 빨리 이용하는 게 좋다"
대안
- VS Code 로컬 설치 (직접 컴퓨터에 설치)
- GitHub Codespaces (브라우저 IDE)
- Replit (쉽지만 비쌈)
터미널 기초
- 터미널 = 명령어를 텍스트로 입력하는 창
- GUI(마우스 클릭)가 아닌 CLI(텍스트 명령)로 컴퓨터를 제어
- 기본 명령어:
ls: 현재 폴더의 파일 목록 보기cd 폴더명: 폴더 이동clear: 화면 지우기- "개발자들은 마우스 클릭을 싫어한다. 무조건 터미널로 명령해서 자동으로 연결되는 걸 좋아한다"
7. AI 코딩 도구 설치 및 연동
세 가지 AI 코딩 CLI 도구
Firebase Studio의 터미널에서 세 가지 AI 코딩 도구를 설치·연동:
| 도구 | 실행 명령 | 연동 계정 | 추천 대상 | 비용 |
|---|---|---|---|---|
| Gemini CLI | gemini |
구글 계정 로그인 | 무료 사용량 최대 | 무료 (구글 계정만 있으면) |
| OpenAI Codex CLI | codex |
ChatGPT 유료 구독 | ChatGPT Plus/Pro 구독자 | 유료 구독 필요 |
| Claude Code | claude |
Anthropic 계정 | 현 시점(2025.1) 코딩 성능 최고 | 유료 구독 필요 (Pro/Max/Team) |
설치 과정 (터미널에서)
- 각 도구의 npm 설치 명령 실행
- 로그인: 브라우저 인증 링크가 뜨면 클릭 → 계정 승인 → 인증 코드 복사 → 터미널에 붙여넣기
- 기본 설정으로 진행 (엔터)
추천 기준
- 공짜로 쓰고 싶다 → Gemini CLI (구글 계정만 있으면 무료)
- ChatGPT 이미 구독 중 → Codex CLI
- 2025년 1월 시점 최고 성능 → Claude Code
- 오픈소스 관심 → OpenAI Codex (오픈소스지만 설정이 좀 더 복잡)
"돈 낼 거면 클로드 코드. 무료로 많이 쓰고 싶으면 Gemini CLI. 지금까지 한 모든 과정이 빵원(0원)이다."
Claude Code에 대한 조코딩의 평가
- "확실히 클로드가 좀 더 믿음직하다. 아직은."
- 라이브 중 Gemini CLI가 렉 걸리거나 맛이 갈 때 Claude Code로 전환하니 바로 잘 동작
- "근데 한 달 뒤에 바뀔 수 있다. AI 업계 변화 속도가 너무 빠르다"
DeepSeek에 대한 언급
- "딥시크는 이 세 개에 비해서 다 떨어진다" (2025년 1월 기준)
도구 간 전환
- "하나의 AI 설치하면 다른 AI한테도 쓸 수 있다"
- 각 도구는 동일한 터미널에서 실행하되 명령어만 다름
- 가끔 AI가 렉 걸리면 다른 AI로 전환해서 작업 계속 가능
8. GitHub 연동 & CI/CD 파이프라인 구축
GitHub이란?
- 코드 버전 관리 저장소 — 졸업 논문 비유
최종.hwp,최종_진짜최종.hwp,최종_진짜진짜최종.hwp같은 파일명 지옥 대신- 체계적으로 어떤 변경이 언제 있었는지 기록·관리
- 커밋(commit): 하나의 변경 기록 (어떤 파일이 어떻게 바뀌었는지 diff로 확인 가능)
- 브랜치(branch): 여러 버전을 가지치기해서 관리 (이번에는 main 하나로 "상남자식"으로 진행)
GitHub Repository 만들기
- github.com 가입 & 로그인
- 우측 상단 + 버튼 → New repository 클릭
- Repository name:
product-builder-lecture등 자유 입력 - Public 선택 (프론트엔드 코드는 어차피 공개된 코드이므로 Public 추천)
- Private도 가능: AI가 GitHub 로그인을 자동으로 해주므로 상관없음
- Create repository 클릭
AI에게 GitHub 업로드 시키기
- 원래 방법:
git init,git add .,git commit -m "message",git remote add origin,git push등의 명령어를 직접 입력 - 현대적 방법: AI에게 시키기
(터미널에서 Gemini/Claude에게)
"GitHub 레포지토리 https://github.com/아이디/product-builder-lecture 만들었는데 여기에 내 코드 올려줘"- AI가 자동으로:
- git 초기화
- GitHub 로그인 (브라우저 인증)
- 코드 커밋 & 푸시
- 완료!
- "이걸 인간이 하고 있다는 게 구시대적이다. 직접 긴 명령어를 쓸까라는 생각을 했는데, 그런 시대가 아니다."
- "아, 너무 옛날 코딩을 할 뻔했다"
GitHub 로그인 인증 과정
- AI가
gh auth login실행 → 브라우저에서 인증 코드 입력 → GitHub 계정 승인 - 2차 인증(2FA) 설정되어 있으면 추가 인증 필요
GitHub 연동 안 될 때
- AI에게 "원격 저장소 직접 추가해"라고 시키면 됨
- 오류 발생 시: AI에게 오류 메시지를 그대로 붙여주고 "이거 왜 안 돼? 고쳐줘"
- 채팅에서 시청자가 알려준 꿀팁: 연필 모양 → Change Account Sub 설정
CI/CD — GitHub + Cloudflare Pages 자동 배포 연동
"CI/CD"라는 어려운 용어가 있지만 쉽게 말하면: 코드 수정 → GitHub에 올리면 → 자동으로 사이트에 배포되는 구조
연결 방법
- Cloudflare Dashboard → Workers & Pages → Create Application
- Pages → Get Started 클릭
- Import an existing Git repository 선택 (드래그 앤 드롭이 아님!)
- GitHub 계정 연결 (Cloudflare에 GitHub 접근 권한 부여)
- All repositories 또는 특정 repository만 선택 가능
- 연결할 Repository 선택 (예:
product-builder-lecture) - Build settings:
- Branch: main
- Build command: 비우기 (정적 HTML이므로 빌드 불필요)
- 빌드가 필요한 건 React/Next.js 같은 프레임워크 사용 시
- Save and Deploy 클릭
연동 후 워크플로우
Firebase Studio에서 AI에게 "다크모드 기능 추가해서 git 푸시로 배포까지 진행해"
→ AI가 코드 수정
→ git commit & push
→ Cloudflare Pages가 자동 감지 → 자동 배포
→ 실제 사이트에 바로 반영!- "명령어 딱 한 줄로 기능 추가부터 배포까지 다 됐다. 몇 초 만에."
- "이제 파일 다운받아서 올리는 건 구시대적이다. 개발자들은 마우스로 클릭하는 거 싫어한다."
실시간 시연: 다크모드/라이트모드 기능 추가
"다크모드, 화이트모드 기능 추가해서 git으로 배포까지 진행해"- Gemini CLI에 이 한 줄만 입력
- AI가 HTML/CSS/JavaScript 수정 → git commit → git push → 자동 배포
- 사이트 새로고침 → 다크모드 토글 버튼 바로 반영!
요약 슬라이드 — 세 가지 연동 완료
[Firebase Studio] ←→ [GitHub] ←→ [Cloudflare Pages]
(개발) (버전관리) (배포)- Firebase Studio: 코드 작성 + AI 코딩 도구(Gemini/Codex/Claude)
- GitHub: 코드 버전 관리 (변경 이력 추적)
- Cloudflare Pages: 전 세계 무료 배포
- "이 세 가지가 유기적으로 싹 다 연결돼 있다. AI한테 '이거 고쳐줘'하면 코드 수정 → 버전 관리 → 배포까지 한 번에 다 해준다."
- "대기업 개발자와 같은 세팅을 했고, 여러분이 더 빨리 달릴 준비가 됐다"
- "여기까지 하셨다면 가방 매고 로켓 달은 것. 이제 달릴 준비만 하면 된다"
저녁 메뉴 추천 사이트 — 실시간 시연
세팅 완료 후 실제로 새 서비스를 만들어 본 시연:
"로또 사이트를 메뉴 저녁 메뉴 추천 사이트로 만들어서 깃허브 배포까지 진행해"- AI가 코드 수정 → 배포 → 몇 초 만에 "오늘 저녁 뭐 먹지?" 사이트 완성
- 추천받기 버튼 클릭 → 피자, 순대국, 된장찌개, 삼겹살, 햄버거 등 랜덤 추천
글로벌 영어 버전 추가
"글로벌 영어 페이지도 만들어서 배포해"- 한 줄 명령으로 한국어/영어 토글 페이지 생성 및 배포 완료
- "아르헨티나 친구한테 이 주소 보내면 바로 글로벌 서비스로 이용 가능"
이미지 첨부하기
- 쉬운 방법: 인터넷 이미지 URL 복사 → AI에게 "피자는 이 이미지 반영해"
- 직접 업로드: 이미지 파일을 Firebase Studio에 드래그 앤 드롭 →
@파일명으로 참조 - 최신 개발자 마인드: "인터넷에서 음식 이미지 검색해서 넣어줘"라고 AI에게 시키면 됨
- 조코딩: "아, 제가 너무 옛날 개발자 스타일로 생각해버렸다. 이미지를 직접 찾아서 넣으려 했는데, 그냥 AI한테 시키면 되는 거였다"
- 시청자 제안: "이미지를 나노바나로 생성해서 넣어줘"가 진짜 최신 방법
- "아, 언러닝이 필요하다. 예전 개발자를 하다 보니까 구시대적으로 생각할 때가 있다"
9. 외부 서비스 활용
왜 외부 서비스를 쓰는가?
- 개발자들은 모든 코드를 직접 짜지 않음 — 잘 만들어진 걸 가져다 씀
- 라이브러리, SDK, API 등 용어는 다양하지만 본질은 같음: 남이 만든 거 갖다 쓰기
- "개발자의 짤": 코드를 베꼈다고 하면 "나도 베꼈는데? 걔도 베꼈는데?" — 다 갖다 씀
left-pad 사건 — 외부 의존성의 위험
- left-pad: 공백 추가하는 11줄짜리 JavaScript 라이브러리
- 수많은 npm 패키지가 이 작은 라이브러리에 의존
- 개발자가 분쟁 때문에 npm에서 패키지를 삭제해 버림
- → npm 전체가 마비 — 의존하던 모든 프로젝트가 빌드 실패
- 교훈: 외부 서비스에 지나치게 의존하면 위험할 수도 있지만, 그래도 직접 다 만드는 건 너무 비효율적
9-1. 폼(Form) 서비스 — Formspree
개념
- 기업 웹사이트에 흔한 "제휴 문의", "파트너 신청" 같은 폼
- 직접 구현하려면 백엔드 서버 + DB가 필요
- Formspree를 쓰면 백엔드 없이도 폼 데이터를 이메일로 받을 수 있음
[사용자] → [내 프론트엔드 사이트] → [Formspree 백엔드] → [내 이메일로 알림]실습
- formspree.io 가입
- New Form 생성 → Endpoint URL 획득
- AI에게 시키기:
"Formspree로 제휴 문의 받을 수 있는 간단한 폼 만들어줘. 엔드포인트: https://formspree.io/f/xxxxx"- AI가 HTML 폼 생성 → 배포 → 실제 제출 시 이메일로 알림 수신
가격
- 무료: 50건/월까지 제출 가능
- 유료: 월 구독으로 제출 수 확대
크몽 외주 비교
- 크몽에서 "반응형 기업 홈페이지 + 문의하기 폼" 외주 가격: 110만원
- "여러분 방금 딸깍 한 번에 110만원짜리 작업을 끝냈습니다"
- "크몽 가입해서 등록하면 외주 받아서 돈 벌 수도 있다"
9-2. 댓글 시스템 — Disqus
개념
- 댓글 기능을 직접 구현하려면 백엔드(DB 저장, 조회, 삭제 등) 필요
- Disqus는 외부 댓글 위젯을 내 사이트에 삽입하는 서비스
실습
- disqus.com 가입
- Admin → New Site 생성
- "I don't see my platform, install manually" 선택
- 제공되는 코드 스니펫 복사
- AI에게:
"Disqus로 댓글 기능 구현해서 페이지 밑에 붙여줘"
(코드 스니펫 붙여넣기)- AI가 자동으로 HTML에 Disqus 위젯 삽입 → 배포
Disqus 비용 & 한계
- 무료 플랜: 광고 포함
- 유료 구독: 광고 제거 + 추가 기능
- 조코딩 의견: "5주차까지 배우시면 이런 외부 서비스 안 쓰고 직접 구현 가능. 이건 좀 구시대의 산물"
- 하지만 빠르게 만들 때는 유용: "아, 직접 만들기 귀찮아. 그냥 붙여. 약간 이런 느낌"
다크모드 호환 이슈
- Disqus 댓글이 다크모드에서 글씨가 안 보이는 문제 발생
- 해결: AI에게 "이거 텍스트가 안 보여. 고쳐줘" → 자동 수정
9-3. AI 기능 — Teachable Machine
Teachable Machine이란?
- 구글이 제공하는 교육용 온디바이스 AI 모델 학습 도구
- 브라우저에서 이미지/소리/포즈를 학습시켜 간단한 AI 모델 생성
- 2019년부터 있었던 서비스 (조코딩 채널의 "레전드의 시작")
- 완전 무료: 모델 학습, 클라우드 호스팅, 서빙 모두 공짜
동물상 테스트 만들기
- teachablemachine.withgoogle.com 접속
- 이미지 프로젝트 → 표준 → 생성
- 클래스 정의: "강아지", "고양이"
- 각 클래스에 이미지 업로드 (최소 3장 이상 — 많을수록 정확)
- 1장: 매우 부정확
- 3장: 꽤 정확 (99% 확률로 판별)
- "데이터를 세 배 늘리니까 아주 정확해졌다"
- 모델 학습시키기 클릭
- 모델 내보내기 → TensorFlow.js → 업로드 → 클라우드 URL 획득
- AI에게:
"강아지 고양이 구분하는 모델을 만들어서 동물상 테스트하는 사이트를 만들어줘"
(모델 URL + 샘플 코드 붙여넣기)- AI가 동물상 테스트 페이지 생성 → 사진 업로드하면 "강아지상 95.8%" 등 판별
온디바이스의 의미
- AI 모델이 사용자의 브라우저(클라이언트)에서 직접 실행
- 서버 비용 0원 — 아무리 많은 사람이 써도 공짜
- "이것도 무제한 공짜다. 왜냐면 돌아가는 건 사용자 컴퓨터에서 돌아가니까"
조코딩의 동물상 테스트 실적
- 하루 최대 $4,417(~600만원) 광고 수익
- 인스타 스토리 12.6만 명 공유 (글로벌 챌린지 형태로 바이럴)
- 앱스토어 2등까지 올라감
- 태국 등 해외 언론에도 보도
- 운영비: 0원 (Cloudflare Pages + 온디바이스 AI)
- 글로벌 결제도 추가 (Polar로 $4.99에 프리미엄 판매)
관련 영상
- 조코딩 채널에서 "동물상 테스트", "AI 티처블 머신" 검색
- 2019년에 찍은 40만 조회 영상이 아직 유효 (UI가 거의 안 바뀜)
10. 광고 수익화 (Google AdSense)
Google AdSense란?
- 웹사이트에 구글이 자동으로 광고를 배치해주는 서비스
- 광고주 모집, 광고 배치, 수익 정산을 구글이 대행
- 직접 광고주를 찾는 것(직거래)과 대비: "배너 만들어 놓고 광고주 모집합니다 할 필요 없이, 구글이 알아서 해줌"
수익 구조
광고주 $1 지불
→ Google Ads (구글 광고 플랫폼)에서 15% 수수료
→ Google AdSense에서 17% 수수료
→ 퍼블리셔(사이트 운영자)에게 $0.68 지급 (약 68%)- 구글이 약 32% 가져가고, 사이트 운영자가 68% 수령
- 구글 광고 매출(2024년 1~3분기): 2,124억 달러 — 이게 구글의 메인 수익원
- "근데 요즘 AI가 검색을 대체하면서 구글 광고 시장도 위기"
직접 광고 vs 애드센스
| 직접 광고 (직거래) | Google AdSense | |
|---|---|---|
| 광고주 모집 | 직접 연락, 계약 | 구글이 자동 매칭 |
| 수익률 | 100% (수수료 없음) | 68% (구글 수수료 32%) |
| 편의성 | 매우 번거로움 | 완전 자동 |
| 적합 대상 | 대형 사이트, 특정 분야 | 중소 규모 사이트 |
실제 수익 사례
조코딩 동물상 테스트
- 하루 최대: $4,417 (~600만원, 환율 1,400원 기준)
- 최근 월 평균: ~$262 (~37만원)
- 최근 3년 누적: ~$12,700 (~1,800만원 → 연 ~600만원)
- "하루 만 원씩 꾸준히 들어온다. 큰 돈은 아니지만 기분 좋다"
- 지금도 하루 약 $7~8씩 꾸준히 수익 발생
구독자 성공 사례
- 일주일 만에 1천만 원: 카카오 AdFit(광고) 활용, 국내 서비스
- 3일 만에 1천만 원: 22살 구독자, 웹 서비스 하나로 달성
- 퍼스널 컬러 테스트 구독자: 검색 1등, 1억 뷰 이상
- "저보다 잘 되신 분도 많다. 이번 강의 보시는 분들 중에서도 나올 것"
애드센스 등록 절차
- Google AdSense 가입
- 결제 정보 입력 필요 (수익금 받을 계좌)
- 가입 가이드: 강의 자료 노션 페이지에 링크 제공
- 사이트 추가
- 왼쪽 메뉴 → 사이트 → 새 사이트 추가
- Cloudflare Pages URL 입력 (커스텀 도메인 없어도 됨)
- 소유권 확인 코드 삽입
- AdSense가 제공하는 코드 스니펫 + ads.txt 등
- AI에게 시키기:
"이 사이트에 구글 애드센스를 추가할 거야. 제공하는 정보를 기반으로 광고 추가해줘."
(코드 스니펫 + ads.txt 내용 붙여넣기)- AI가
태그에 메타 태그 삽입 + ads.txt 파일 생성 + 배포까지 자동 - "사람이 직접 코드 넣을 필요 없다. AI가 다 해준다"
- 소유권 확인: 배포 완료 후 AdSense에서 "확인" 클릭 → "확인됨"
- 사이트 품질 최적화 (검토 요청 전)
- 검토 요청: 며칠~4주 소요
애드고시(AdSense 심사) — AI로 해결
기존 문제
- AdSense 심사가 매우 까다로움 ("애드고시"라 불림)
- "가치가 별로 없는 콘텐츠", "콘텐츠 없음" 등으로 거부당하는 경우 다수
- 예전에는 컨텐츠 추가, SEO 최적화 등을 사람이 직접 해야 했음
AI로 해결하는 방법
- 고품질 사이트 가이드 활용
- 구글 애드센스 한국 공식 블로그에 "고품질 사이트를 만들기 위한 도움말" 1편, 2편 게시
- ⚠️ 사람이 읽을 필요 없음! → AI에게 링크를 주고 읽게 하기
- AI에게 최적화 시키기:
"고품질 사이트를 만들기 위한 도움말 참고해서 에드센스를 무조건 통과할 수 있는 최적의 사이트로 만들어"
(도움말 URL 1, 도움말 URL 2 붙여넣기)- AI가 자동으로 수행하는 것들:
- 개인정보처리방침 페이지 생성
- 사이트 소개(About) 페이지 추가
- SEO 메타 태그 최적화
- 사이트 구조 개선
- 콘텐츠 품질 향상
- 승인 체크리스트 자동 검토 & 보완
"애드고시는 옛날 말이다. AI 시대에 끝났다. AI가 다 최적화해준다. 더 빡세졌다는 의견도 있지만, 양질의 사이트 만드는 것 자체가 AI로 쉬워졌으므로 결국 더 쉬워진 셈."
광고 배치 & 자동화
- AdSense 승인 후 → 광고 탭에서 설정 가능
- 자동 광고: 켜 놓으면 구글이 알아서 최적 위치에 광고 삽입
- 빈도(광고 밀도) 조절 가능
- 광고 위치 수동 지정도 가능 (AI에게 시켜서 배너 코드 삽입)
GDPR 동의 메시지
- 유럽 경제 지역(EEA), 영국, 스위스 사용자에게는 쿠키 동의 팝업 필요
- 글로벌 진출 시 나중에 추가하면 됨 (일단은 "나중에 알림")
도메인 관련 FAQ
- 커스텀 도메인 필수인가? 아니다.
pages.dev무료 주소로도 구글 검색 상단 가능 - 구독자 사례: 무료 도메인으로도 검색 1등 달성
- 도메인 변경하면? 새로 심사 받아야 함 (도메인 기준 승인)
- 하나의 도메인 승인 후 서브 페이지/서비스 추가하면 별도 승인 불필요
- "도메인은 돈 벌어서 사면 된다"
11. 학습 리소스 & 마인드셋
공부가 필요한가?
- 결론: AI 시대에 몰라도 된다. 하지만 알면 AI를 더 잘 시킬 수 있다.
- "귀족이 취미로 과학 공부하듯, 심심하니까 공부나 해볼까 느낌으로 보면 된다"
- 조코딩: "지적 허영심을 채운다는 느낌으로 보시면 됩니다"
추천 학습 사이트
Codecademy
- 실습 기반으로 미션을 깨면서 HTML/CSS/JavaScript 학습
- 무료로 사용 가능 (유료 결제 하지 마세요!)
- 영어지만 브라우저 번역으로 한국어 가능
W3Schools
- HTML/CSS/JavaScript 참고 문서
- "좀 옛날 부산물 같은 느낌이지만 아직 유효"
일론 머스크의 발언
- "지금 대학 갈 이유를 모르겠다. AI가 개인 교사가 될 것"
- 조코딩 동의: "모르는 거 나오면 AI한테 물어보면 바로 답변 받는다. 미리 알고 있을 필요가 없다"
--dangerously-skip-permissions 옵션 주의
- Claude Code 등에서 모든 권한 승인을 생략하는 옵션
- 편하지만 위험: AI가 할루시네이션으로
rm -rf ~같은 명령을 실행할 수 있음 (홈 디렉토리 전체 삭제!) - Firebase Studio 안에서는 괜찮음 (격리된 환경)
- 로컬 컴퓨터에서는 주의 필요
레플릿(Replit) 언급
- 가입 하나로 모든 것이 연결되어 있어 편리
- 하지만 비쌈
- 커스터마이징이나 Cloudflare Pages 같은 무료 배포와 연동하려면 오히려 불편할 수 있음
AI 업계 변화 속도에 대한 유머
- "알코올 하면 이렇게 되고, 약 하면 이렇게 되고, Trying to keep up with AI 뉴스 하면 이렇게 된다" (짤 소개)
- "1년 뒤에 이 영상 보시는 분들은 '아직도 그거 쓰세요?' 할 수 있다"
- "내년에 보면 여기 나온 도구들 중 망한 게 있을 수도 있다"
12. 5주 커리큘럼 전체 로드맵
| 주차 | 주제 | 핵심 내용 |
|---|---|---|
| 1주차 ✅ | 웹 개발 기초~수익화 | HTML/CSS/JS, Cloudflare Pages 배포, Firebase Studio + AI 코딩 도구, GitHub 연동, CI/CD, 외부 서비스(Formspree/Disqus/Teachable Machine), 광고(AdSense) |
| 2주차 | 유입과 성장 | SEO(검색엔진 최적화), 데이터 분석, 바이럴 구조, 마케팅, SNS 바이럴 전략 |
| 3주차 | AI 서비스 + 결제 | React, 서버리스 백엔드, AI API(래퍼), 글로벌 결제(Polar) |
| 4주차 | SaaS 구축 | DB(Supabase 예정), 회원가입/로그인(Auth), 구독 서비스(MRR/ARR), 반복 매출 구조 |
| 5주차 | 확장과 운영 | 퍼포먼스 마케팅, 앱 전환, 미국 법인 설립/Stripe, 엑싯 전략 |
- 오프라인 해커톤: 별도 일정, 주말 진행 예정
- 백엔드 DB: Supabase 예정 (Firebase보다 저렴하고 Auth 연동 좋음)
🔧 사용 도구 총정리
| 카테고리 | 도구 | 비용 | 비고 |
|---|---|---|---|
| AI 대화 | ChatGPT / Gemini / Claude | 무료~유료 | 어디든 질문 가능 |
| AI 코딩 CLI | Gemini CLI / Codex CLI / Claude Code | 무료~유료 | 터미널에서 직접 코딩 |
| 개발 환경 | Firebase Studio | 무료 | 브라우저 IDE (구글 계정) |
| 로컬 IDE | VS Code | 무료 | 로컬 설치 |
| 배포 | Cloudflare Pages | 무료 (무제한) | 정적 사이트 전용 |
| 서버리스 | Cloudflare Workers | 무료 티어 있으나 과금 가능 | 연산 필요 시 |
| 버전 관리 | GitHub | 무료 | Public/Private 모두 가능 |
| 폼 백엔드 | Formspree | 무료 50건/월 | 제휴 문의 등 |
| 댓글 | Disqus | 무료 (광고 포함) | 5주차 이후 직접 구현 가능 |
| 온디바이스 AI | Teachable Machine | 무료 | 이미지 분류 모델 학습 |
| 광고 수익 | Google AdSense | 무료 | 심사 통과 필요 |
| 글로벌 결제 | Polar | 수수료만 | 3주차에서 다룰 예정 |
비용 요약
지금까지 한 모든 과정에서 돈 드는 것: 없음. 전부 무료. 유일한 유료 요소: AI 코딩 도구의 유료 구독 (하지만 Gemini CLI는 구글 계정만으로 무료)
✅ 실행 액션 아이템
지금 당장 할 것 (세팅)
- Google 계정 확보
- Cloudflare 가입
- GitHub 가입 & Repository 생성 (Public)
- Firebase Studio 접속 (Google 계정)
- AI 코딩 도구 최소 1개 설치 (Gemini CLI 추천 — 무료)
- GitHub ↔ Cloudflare Pages 연동 (CI/CD)
- Google AdSense 가입 & 결제 정보 입력
1주차 과제 (이벤트 연계)
- 나만의 웹사이트 하나 완성 (주제 자유: 메뉴 추천, 로또, 동물상 등)
- Cloudflare Pages에 배포
- 외부 서비스 1개 이상 붙이기 (댓글, 폼, AI 등)
- AdSense 등록 및 검토 요청
- SNS에 완성 사이트 인증 포스팅 → 메가커피 50명 추첨 이벤트 참여
- 쓰레드, 인스타그램, 링크드인 등 어디든
- 조코딩 태그하면 좋아요 눌러줌 (팔로워 3.5만+ 계정)
장기 목표
- 5주 과정 완주
- 글로벌 타겟 서비스 기획
- 결제 시스템 구현 (3주차)
- 구독 모델 구축 (4주차)
- 미국 법인 설립 & Stripe 연동 (5주차)
- 오프라인 해커톤 참가
💡 핵심 마인드셋 & 명언 모음
세팅이 가장 어렵다
"코딩은 없다. 세팅이 가장 큰 일이다. 세팅만 끝나면 진짜 끝난다." "회원가입, 닉네임 정하는 게 헬이다. 나머지는 딸깍이다." "여기까지 따라오신 분들이 해자를 구축한 것이다. 일반인은 이 세팅을 못 한다."
딸깍의 시대
"오늘날 개발자가 할 일: 뭐 해줘 → 딸깍. 뭐 해줘 → 딸깍. 이것만 반복하면 된다." "한 시간에 하나씩 사이트를 만들 수 있다. 이 구조만 만들어 놓으면."
속도 > 퀄리티
"퀄리티보다 속도. 완벽한 제품보다 빠른 출시와 반복 개선." "래핑(포장)을 잘하는 사람이 이기는 시대."
비용 제로
"운영비 0원, 전 세계 누구나 접속 가능, AI가 모든 개발을 해주는 시대. 지금 시작하지 않을 이유가 없다." "전 세계 60억 인구가 동시 접속해도 공짜. 싹 다 공짜."
AI와 언러닝
"AI를 안 쓰고 코딩하는 것은 돌도끼 들고 사냥하는 원시인과 같다." "옛날 개발자를 하다 보니까 구시대적으로 생각할 때가 있다. 언러닝이 필요하다." "이미지를 직접 찾아서 넣으려 했는데, 그냥 AI한테 '인터넷에서 찾아서 넣어줘' 하면 되는 거였다."
구시대 vs 현대
"파일 다운받아서 올리는 건 구시대적. git 명령어 직접 치는 것도 구시대적. 그냥 AI한테 시키면 된다." "CI/CD라는 어려운 용어 쓰면 무섭게 느껴지는데, 그냥 코드 짠 거를 저장해서 관리하고 세상에 내보이는 걸 연결한 것일 뿐이다."
돈 버는 시대
"돈 벌기 좋은 시대다. 진짜 너무 돈 벌기 좋은 시대다." "여기까지 따라오셨으면 돈 버는 일만 남았다." "110만원짜리 외주 작업을 딸깍 한 번에 끝냈다."
[1주차 - 보완] 5주 완성 AI Product Builder, 1인 창업가 부트캠프
📺 영상: https://www.youtube.com/watch?v=Elb03BpovBg 📅 1주차 본 강의 다음날 진행된 보완 라이브 (조코딩 뉴스 직후 이어서 진행)
📌 개요
1주차 본 강의(약 7시간 분량)에서 웹개발 개요 → 배포 → API → 광고 수익화까지 진행한 뒤, 구글 애드센스 심사에서 거절을 받음. 이 보완 라이브에서는 거절 사유를 분석하고 AI(Claude Code)를 활용해 실시간으로 사이트를 개선하는 과정을 보여줌. 추가로 애드센스 통과 꿀팁, 모바일 바이브 코딩, Claude 전화 코딩 등 트렌드도 소개.
이전 라이브(조코딩 뉴스)에서 자동으로 넘어오도록 설정해 두었기 때문에, 뉴스를 보던 시청자들이 자동으로 이 라이브로 합류함.
1. 구글 애드센스 거절 — 무슨 일이 있었나
1-1. 거절 경위
- 1주차 본 강의 마지막에 예제 사이트("점심 뭐 먹지?" 메뉴 추천 서비스)에 구글 애드센스를 신청함
- 애드센스는 "애드 고시"라는 별명답게, AI 시대에 맞춰서 심사가 더 빡세졌다고 판단
- 결과: 거절 — "사이트 페이지를 참고해 달라"는 안내와 함께 문제 수정 요구
1-2. 구체적인 거절 사유
구글 애드센스 심사 결과 페이지에 명시된 문제점:
- "콘텐츠가 없거나 가치가 낮은 콘텐츠" 포함
- 아직 준비 중인 페이지 존재
조코딩이 분석한 실질적 원인:
- 실질적 콘텐츠가 거의 없음 — 버튼과 폼(입력창)만 존재하는 예제 수준 사이트
- 영어 페이지 미존재 — 다국어 지원 없음
- 유용한 정보 부족 — 누가 봐도 예제/토이 프로젝트처럼 보임
- 개인정보처리방침 등 기본 페이지는 있었지만 그래도 떨어짐 → AI 시대에 더 까다롭게 심사하는 것으로 추정
1-3. 시청자 반응
- 일부 시청자는 승인을 받았다고 보고 — "전 승인 됐고 준비 중입니다"
- 조코딩: "이거 사실 좀 랜덤해요. 사이트가 이쁘게 잘 됐으면 승인해 줄 거고, 대충 AI 딸깍한 거 같으면 막는 거 같다"
- 2차 도메인(서브도메인)으로 뚫은 시청자도 있음 — 도메인 하나 뚫어 놓으면 앞에 붙인 서브도메인으로 좀 더 쉽게 통과 가능
"애드 고시": 구글 애드센스 승인이 워낙 까다로워서 마치 고시(국가시험)처럼 어렵다는 의미의 인터넷 용어
2. AI로 사이트 개선하기 — 실시간 시연
2-1. 개발 환경 세팅
- Firebase Studio (구 IDX) 접속 — 클라우드 개발 환경
- "product-builder-week1"이라는 이름으로 프로젝트를 이미 생성해 놓은 상태
- 새 환경으로 접속해도 코드나 세팅이 그대로 유지됨 — "노트북에서 다른 환경으로 접속해도 똑같이 돼요. 그래서 되게 좋죠"
- Claude Code 연결 확인
- 이미 설치되어 있었고, 연결도 끊기지 않고 유지되어 있었음
- "저 다 갔다 오면 끊길 줄 알았더니 잘 남아 있네요"
- "한 번 세팅해 놓으면 그냥 계속 쓰면 될 것 같습니다"
2-2. Claude Code에 지시하기
거절 사유와 관련 링크를 전부 Claude에게 전달:
- 구글 애드센스 거절 메시지 내용 복붙
- 구글 고품질 정책 링크 (한글 버전 포함)
- 기타 관련 링크들 — "혹시 모르니까 이전 것도 다 넣어 줄게요"
- 홈페이지에 있는 참고 링크들 전부 추가
실제 프롬프트 (한국어 자연어):
"위 내용을 참고하여 구글 애드센스에 무조건 통과할 수 있도록 정말 풍부하고 진짜 완벽한 사이트로 만들어 줘. 실제로 무조건 통과가 돼야 하니까 똑바로 다 만들어라"
- 조코딩 강조: "이건 진짜 한글로 명령하면 됩니다", "아무렇게나 시키면 됩니다", "이 가이드(링크)가 사실 이게 중요한 거니까 '진짜 똑바로 만들어라'라고 시켜보도록 하겠습니다"
2-3. Claude가 자동으로 수행한 작업
Claude Code가 코드를 파악한 뒤 자동으로 진행한 내용:
- 문제 분석 결과 출력:
- "실질적 콘텐츠가 거의 없음"
- "버튼과 폼만 존재"
- "영어 페이지들 미존재"
- "콘텐츠 가치가 낮음, 유용한 정보 부족"
- → "본격적으로 모든 페이지를 풍부한 콘텐츠로 개선하겠습니다"
- 여러 페이지를 병렬로 생성 — 동시에 여러 작업 진행
- 이미지 자동 생성:
- Pollinations AI / 나노바나 통합 API를 통해 이미지 자동 생성
- "야, 이거 자동으로 폴리네이션 AI로 알아서 이미지도 생성해 주는 걸 볼 수 있습니다"
- "AI 떡볶이" 같은 음식 이미지도 AI가 생성
- API 키도 안 넣었는데 공짜로 동작 — Gemini(Firebase Studio)가 알아서 넣어준 기능
- 조코딩: "이거 제가 한 게 아니라 Gemini가 알아서 넣어 준 기능이어서 저 처음 봅니다"
- 풍부한 콘텐츠 페이지 추가:
- 랜딩 페이지 개선 — "저녁 메뉴 추천 서비스 오신 거 환영합니다", "메뉴 추천 받기" 등
- 음식 선택 팁 — "계절에 맞는 제철 음식을 먹어라", 영양 균형 정보
- 계절별 추천 메뉴
- 자주 묻는 질문(FAQ) — "회원가입이 필요한가요? → 필요하지 않습니다", "요금이 있나요? → 무료입니다", "모바일에서도 되나요? → 물론입니다"
- 푸드 팁스(Food Tips) 페이지 — 한글 + 영어
- CSS도 업데이트
- 개인정보처리방침 페이지 유지/개선
- 댓글 기능도 포함
- 최종 결과: 컨텐츠 4,600% 증가 (Claude가 자체 보고)
- Git 커밋 & 푸시:
- "GitHub의 푸시까지 다 해 줘"라고 추가 지시
- 자동으로 커밋, 푸시 완료 → GitHub에 1분 전 업데이트로 확인됨
- 사이트에도 바로 반영 — "약간 쓸데없이 멋있어졌습니다"
전체 작업 시간: 약 17분 동안 Claude가 계속 돌아가며 작업
2-4. 개선 후 사이트 모습
- 랜딩 페이지가 "좀 멋있어진" 형태로 변경
- 각종 콘텐츠 페이지 추가 (팁, FAQ, 계절별 메뉴 등)
- 이미지가 AI 생성으로 채워짐
- 한글 + 영어 다국어 지원
2-5. 재심사 요청
- 구글 애드센스 페이지에서 "수정했다" 체크 → 검토 요청
- 며칠 이내에 결과 나올 예정
- 조코딩: "이것도 좀 허접해 보여서 통과는 안 될 거 같다는 생각도 드는데... 너무 예제여 가지고"
3. 🍯 애드센스 통과 꿀팁 — "억지 블로그" 기법
3-1. 핵심 전략
조코딩이 "개꿀팁"이라고 강조한 방법:
- 사이트에
/blog페이지를 새로 만든다 - 서비스와 직접 관련 없어도 블로그 글 15~20개를 채워 넣는다
- 콘텐츠가 풍부해 보이므로 애드센스 심사 통과
- 통과 후 블로그 페이지를 삭제해도 광고는 계속 유지됨
3-2. 실제 사례: 동물상 테스트(Animal Face) 사이트
- 조코딩이 이전에 만든 동물상 테스트 사이트 — 현재도 애드센스 잘 나오고 있음
- 당시에는 AI가 없었기 때문에 Fiverr(해외 프리랜서 플랫폼)에 의뢰
- "라이팅(Writing)" 카테고리에서 블로그 글 작성자에게 의뢰
- 약 10~15건의 블로그 글을 받아서
/blog페이지에 넣음 - 동물상 테스트와 아무 관련 없는 AI 관련 글 등 — "그냥 AI에 대한 글 써 주세요 해가지고 뭐 아무 글이나 막 써 주셨는데 그런 게 승인이 됐습니다"
- 통과 후 블로그 페이지를 없앴는데 광고는 그대로 유지 → 현재까지 잘 붙어 있음
3-3. AI 시대에는 더 쉬워짐
- "이제는 그럴 필요가 없죠. 블로그 의뢰를 왜 해요? 그냥 딸깍하면 무한정 생기는데"
- AI로 블로그 글 20개를 한 번에 생성 가능
- 예시 프롬프트:
"음식 블로그 페이지를 만들어서 각 음식에 대한 설명과 유래, 역사, 레시피까지 싹 다 블로그로 정리해 줘. 그리고 진짜 있는 맛집 검색해서 그 맛집 리스트 주소도 추가해 줘."
3-4. 왜 이 방법이 통하는가
- 애드센스는 원래 블로그에 많이 붙임 (티스토리 블로그 등)
- 통과 기준이 콘텐츠의 양과 질에 크게 좌우됨
- 블로그 글이 많으면 → "아, 이 콘텐츠 풍부하네" → 통과
- 광고를 사이사이에 넣기도 좋음
3-5. 추가 팁들
- 랜딩 페이지 추가 — 소개글, How it Works, FAQ 등
- 예시로 Claude 사이트, Resend 등의 랜딩 페이지를 보여줌
- 한글 + 영어 다국어 지원
- 개인정보처리방침 등 기본 페이지 구비
- 진짜 기능이 있는 서비스일수록 통과 확률 ↑
- 나노바나 스튜디오: 만들자마자 통과됨 — "아무래도 기능이 그래도 좀 있는 편이어서 그런가?"
- 한글+영어 해 놓고 기능 두 가지 넣었는데도 통과
- 안 되는 도메인은 수백 번 해도 안 될 수 있음
- 결론: 어느 정도 잘 만든 서비스면 통과됨, 너무 예제/토이 프로젝트처럼 보이면 안 됨
4. 개발 환경 & 도구 상세
4-1. Firebase Studio (구 IDX)
- 클라우드 개발 환경 — 어디서든 동일 세팅 유지
- 노트북, 다른 컴퓨터 등 어디서 접속해도 코드/환경이 그대로
- Claude Code, Gemini CLI 등을 한 번 설치하면 계속 유지
4-2. Claude Code
- AI 코딩 에이전트 (CLI) — 터미널에서 자연어로 지시
- 한글로 아무렇게나 시키면 됨
- 코드 파악 → 문제 분석 → 수정 → 이미지 생성 → Git 커밋/푸시까지 자동
웹 버전(claude.ai)에서의 장시간 작업
- 조코딩: "웹에서 하면 되게 잘 됩니다"
- 실제 사례: AI 버튜버(V-Tuber) 관련 작업을 웹에서 시킴
- 미니맥스 작곡 API 연결 등 큰 작업을 Claude 안에서 시켜 놓으면 알아서 진행
- 테스트 코드까지 자동으로 작성
- 작업 완료 후 커밋 → Pull Request 자동 생성
- GitHub과 통합되어 머지(Merge)까지 처리
- "긴 작업도 온라인에서 Claude에서 돌리면 되더라고요"
4-3. Gemini CLI
- Google AI 코딩 도구
- 설치: 터미널에서
npm install -g @anthropic-ai/gemini-cli(정확한 명령은 공식 문서 참조) - 설치 후 엔터 쭉 누르면 구글 로그인 화면이 뜸
- 링크를 통해 구글 계정 연동
- 모델 선택:
/model명령어로 사용할 모델 변경 가능 - 기본값이 2.5인 경우 →
/model로 원하는 모델(예: Gemini Pro 등)로 변경 - "슬래시 모델 누르면 어떤 모델을 쓸지 선택할 수 있습니다"
- Claude Code와 거의 비슷한 인터페이스
4-4. Pollinations AI / 나노바나
- 무료 이미지 생성 API
- API 키 없이도 사용 가능 (오픈소스 AI 플랫폼)
- Gemini가 자동으로 나노바나 이미지 생성 코드를 넣어줌
- 단, 한도가 적을 수 있음 ("인기 엄청 많아졌네요, 요즘")
4-5. 터미널 명령어를 몰라도 되는 시대
- 시청자 질문: "npm 버전 어떻게 확인하나요?"
- 조코딩: Claude에 질문을 그냥 붙여 넣으면
npm -v,node -v등 알아서 실행해 줌 - "이제는 터미널 명령어 아무것도 몰라도 됩니다"
5. 흥미로운 트렌드 소개 (조코딩 뉴스에서 다룬 내용)
5-1. 모바일 바이브 코딩
- 비행기에서, 길거리에서, 클럽에서까지 코딩하는 사례들
- "이븐 코드 at the 클럽" — 춤추다가 코드 한 번 하고, 또 춤추고
- "클럽에서 이제 코딩을 하러 갈 수가 있겠습니다"
- 관련 사례와 링크는 조코딩 뉴스 라이브에서 확인 가능
5-2. Claude 전화 코딩 (Call Me)
- Claude Code + 전화 API(Twilio 등) 연동
- Claude가 직접 전화를 걸어줌
- 사용 시나리오:
- 러닝하면서 "이거 데이터베이스 뭐 쓸까?" → Claude가 찾아보고 "SQL 쓸게" → "오케이 써" → 알아서 작업
- 작업 끝나면 또 전화해 주고, 작업 막히면 또 전화해 주고
- 오픈소스로 공개되어 있음
- 구조: 폰 프로바이더(전화 API) 연결 → 전화번호 설정 → Claude Code에서 MCP(Model Context Protocol)로 연결
- "실제로 됩니다. 실제로 오픈소스로 공개돼 있고 API, Twilio 이런 거 전화 API랑 연결하게 돼 있더라고요"
5-3. 리누스 토발즈도 바이브 코딩
- Linux와 Git을 만든 전설적 개발자 리누스 토발즈도 바이브 코딩으로 개발한다고 밝힘
- 조코딩: "개발자들의 스승님인 리누스 토발즈도 바이브 코딩으로 개발한다라고 해서 굉장히 화제가 됐죠"
- "AI 안 쓰면 진짜 코딩은 진짜 뒤쳐질 것 같아요"
- 취업 관련 질문에도 "AI 코딩으로 해도 합격 가능한가요?" → "그럴 것 같습니다. 요즘 AI를 안 쓰면 안 되거든요"
6. Claude Code 활용 심화 — 시청자 Q&A
Q: 클로드 코드로 여러 에이전트 만들어서 몇 시간 동안 스스로 개선하면서 발전하던데, 그런 건 어떻게 하나요?
A: 가장 쉬운 방법은 Claude 웹 버전(claude.ai)에서 하는 것.
- 큰 작업을 시켜 놓으면 알아서 진행
- 테스트 코드 작성 → 테스트 실행 → 문제 없으면 커밋 → PR(Pull Request) → 머지까지 자동
- GitHub과 통합되어 있어서 풀 리퀘스트도 자동으로 보냄
Q: 자주 사용하는 스킬 추천해 주실 수 있을까요?
A: 조코딩: "저는 스킬을 잘 안 쓰긴 합니다. 그냥 시킵니다. 생으로 시키고 있습니다. 근데 그래도 잘해서 사실 생으로 시켜도 못 하는 것은 없더라고요. 그냥 웬만하면 잘해 주긴 합니다."
7. 부트캠프 운영 정보 & 과제
7-1. 강의 일정
- 매주 토요일 무료 라이브 강의 진행
- 라이브는 전부 무료로 시청 가능
- 편집본(다시보기)은 무료 + 멤버십으로 나눠서 업로드 예정
- 7시간 분량 편집이 필요 → "아마 한 주 더 걸릴 것 같다"
- 초반 영상들은 무료로 풀 계획
7-2. 1주차 커리큘럼 범위
- 웹개발 개요 → 웹개발 배포 → API → 광고 수익화까지 모두 완료
- "1주차 과정 하나만 딱 들으셔도 여기까지 진행하실 수 있습니다"
7-3. 과제 제출 이벤트
- 1주차 수업 마지막에 과제가 있었음
- 과제 제출자 중 추첨으로 50명에게 메가커피 기프티콘 증정
- 라이브 때 추첨 예정
- 과제 제출 폼: 50자 제한이 있어서 일부 시청자는 Bitly 단축 URL로 제출
- 수정 후 재제출 가능
- 라이브 시점 기준 23명 제출 → "아직 27분은 더 들어오셔도 100% 당첨입니다. 지금까지 당첨 확률 100%"
7-4. 향후 계획
- 주차별로 서비스를 점점 완성시켜 나갈 예정
- 프론트엔드 + 백엔드 + 기능이 잘 돌아가는 "진짜 서비스"를 만든 뒤 애드센스를 확실하게 붙이는 것을 보여줄 예정
- 오프라인 해커톤도 진행 예정
- 나머지 주차에도 "아주 훌륭한 강의들이 있다"
8. 나노바나 스튜디오 — 애드센스 통과 성공 사례
조코딩이 최근에 직접 만들고 애드센스 통과에 성공한 사이트:
- 나노바나 스튜디오 (nanovana studio)
- 만들자마자 애드센스 통과됨
- 특징:
- 실제 기능이 있는 서비스 (이미지 생성 등)
- 한글 + 영어 다국어 지원
- 기능 두 가지 정도 포함
- 콘텐츠가 엄청 많진 않았지만 기능이 있어서 통과
- 현재 애드센스 광고가 "덕지덕지" 잘 나오고 있음
- 교훈: 진짜 기능이 있는 서비스는 콘텐츠가 적어도 통과될 수 있음
9. 여담 & 기타
- 조코딩이 이미지 로딩 속도에 대해: "이미지를 사실 미리 만들어 놓고 보여주는 게 나은데, 이미 정해진 거니까"
- Claude가 음식 관련 컨텐츠를 만들면서 짜장면 이미지 등을 자동 생성 → "야, 짜장면 나오니까"
- 나노바나의 이미지 생성 한도가 적다는 언급 — 최근 인기가 많아져서
- "안 되는 도메인은 수백 번 해도 안 되기도 함" — 시청자 의견에 동의
- 시청자 질문 중 "로봇 춤추다가 실수로 동료 로봇 발로 차서 넘어질 뻔" → 조코딩: "그게 뭐죠? 잘 모르겠습니다" (웃음)
✅ 액션 아이템
- 애드센스 거절 시 → Claude에게 거절 사유 + 가이드라인 링크 전부 전달하여 자동 개선
-
/blog페이지 생성 → AI로 관련/비관련 블로그 글 15~20개 자동 생성하여 콘텐츠 보강 (통과 후 삭제 가능) - 랜딩 페이지 추가 — 소개글, How it Works, FAQ, 계절별 추천 등
- 다국어 지원 — 최소 한글 + 영어
- 개인정보처리방침 등 기본 페이지 구비
- 서비스 완성도를 높인 후 애드센스 재심사 요청 (진짜 기능이 있으면 통과 확률 ↑)
- Firebase Studio + Claude Code 환경 한 번 세팅해두면 어디서든 동일 환경으로 작업 가능
- Gemini CLI 설치 →
/model로 원하는 모델 선택 - Claude 웹 버전에서 장시간 작업 시키기 — 테스트 코드, PR, 머지까지 자동
- 과제 제출하기 (추첨 50명 메가커피 기프티콘)