AI Product Builder 1주차

👋 1주차 오리엔테이션

70만 구독자를 기념하여 초심으로 돌아가 준비한 풀 커리큘럼입니다. AI 기술의 발전으로 더 이상 큰 팀이 필요하지 않으며, 혼자서도 충분히 가치 있는 서비스를 만들 수 있습니다.

📋 1주차 목차

• 왜 지금 1인 프로덕트 빌더의 시대인가?
• IT 프로덕트의 큰 그림
• 웹 개발 기초 (HTML, CSS, JavaScript)
• 배포 - 전 세계에 공개하기
• 외부 서비스 연동 (DB, 댓글, AI)
• 광고 수익화 (Google AdSense)

🚀 왜 지금 1인 창업인가?

바이브 코딩(Vibe Coding)의 시대

AI의 발전 속도는 인간의 학습 속도를 뛰어넘고 있습니다. 이제 코딩은 '엄밀한 논리 설계'가 아닌 '직관과 느낌(Vibe)'으로 하는 시대가 되었습니다.

• ICPC 대회: AI가 인간보다 더 많은 문제를 풀어냄 (12문제 전체 해결)
• 스케일링 법칙: AI 발전은 멈추지 않고 계속 가속화 중
• 스택 오버플로우: ChatGPT 출시 후 급격히 하락

바이브 코딩 도구

• Cursor: AI 기반 코드 에디터
• Claude Code: Anthropic의 터미널 AI 도구
• GitHub Copilot: 코드 자동 완성
• Bolt/Replit: 원클릭 앱 생성

🌊 경계의 붕괴

• 개발: ChatGPT, Cursor, Claude Code 등이 코드 작성
• 디자인: Stitch(구글), 나노바나 등이 UI/에셋 생성
• 마케팅: AI가 타겟팅 및 광고 소재 자동 생성
• 음악: Suno AI가 배경음악 생성

따라서 한 분야의 전문가보다는 AI를 도구로 활용해 전체 프로덕트를 총괄할 수 있는 제너럴리스트가 유리한 시대입니다.

성공 사례: 린(Lean) 스타트업

• Cursor AI: 20명으로 연간 1,450억 매출
• Base44: 1인 소유, 6개월 만에 1,100억에 매각

📜 코딩의 진화 역사

코딩은 점점 더 쉬워져 왔습니다. 기계 친화적에서 인간 친화적으로 진화해 왔고, 이제는 자연어로 코딩하는 시대입니다.

코딩 역사 타임라인

• 천공 카드: 구멍을 뚫어 프로그래밍
• 애니악 (1947): 19,000개 진공관 연결 (버그의 유래)
• 어셈블리어: 기계어에 가까운 프로그래밍
• 자바: 객체지향 언어 등장
• 파이썬: print("Hello World")
• AI 시대: "헬로월드 만들어 줘" 한마디로 완성

🏗️ IT 프로덕트의 큰 그림

프론트엔드 (Front-end)

사용자가 직접 보고 상호작용하는 화면입니다.

• 웹: 브라우저에서 동작 (HTML, CSS, JS)
• 앱: 스마트폰에 설치 (iOS, Android)
• 게임: 유니티, 언리얼 엔진

백엔드 (Back-end)

서버에서 돌아가는 보이지 않는 시스템입니다.

• 서버: 요청을 처리하는 컴퓨터
• 데이터베이스: 데이터 저장소
• API: 프론트와 백엔드를 연결

💻 본격 웹 개발 (Frontend Basic)

웹의 3요소

AI가 코드를 짜주더라도 큰 그림을 알면 훨씬 수월합니다. 웹 프론트엔드는 다음 세 가지로 구성됩니다.

• HTML (뼈대): 웹 페이지의 구조를 잡는 마크업 언어. (ex: 제목, 버튼, 입력창)
• CSS (꾸미기): HTML 뼈대에 옷을 입히는 역할. (ex: 색상, 크기, 배치)
• JavaScript (동작): 웹 페이지를 살아 움직이게 하는 논리. (ex: 클릭 시 팝업, 데이터 전송)

실습: 저녁 메뉴 추천 사이트

메모장을 켜고 index.html 파일을 만든 뒤, AI에게 코드를 요청해 붙여넣기만 하면 됩니다. 복잡한 IDE 설치 없이도 브라우저에서 바로 결과물을 확인할 수 있습니다.

🔧 Git & GitHub 버전 관리

핵심 개념

• Repository (저장소): 프로젝트 폴더
• Commit: 변경사항 저장 (스냅샷)
• Push: 로컬 → 원격 저장소로 업로드
• Pull: 원격 → 로컬로 다운로드

GitHub 연동

GitHub는 Git 저장소를 온라인으로 호스팅하는 서비스입니다. Cloudflare Pages와 연동하면 Push만으로 자동 배포됩니다.

🌐 배포 - Cloudflare Pages

내 컴퓨터(localhost)에 있는 파일은 나만 볼 수 있습니다. 다른 사람도 접속할 수 있게 하려면 '배포'가 필요합니다.

서버와 클라우드

과거에는 내 컴퓨터를 24시간 켜둬야 했지만, 이제는 클라우드 서비스를 이용합니다. 24시간 돌아가는 데이터 센터의 컴퓨터를 빌려 내 파일을 올려두는 것입니다.

Cloudflare Pages 장점

• 무료: 정적 사이트 무제한 호스팅
• 자동 배포: GitHub Push시 자동 업데이트
• SSL/HTTPS: 보안 인증서 자동 발급
• 글로벌 CDN: 전 세계 빠른 로딩 속도

🔌 외부 서비스 연동 (API)

활용 가능한 외부 서비스

• 지도: 네이버/구글 맵 API
• 결제: 토스 페이먼츠, PG사 API
• 생성형 AI: OpenAI API, Claude API
• 데이터베이스: Supabase, Firebase
• 댓글: Disqus, Giscus
• 분석: Google Analytics

실습 예시

'저녁 메뉴 추천 사이트'를 만들며, AI로 이미지를 생성하거나 외부 데이터를 가져오는 방법을 실습합니다.

💰 수익화 - Google AdSense

Google AdSense 연동

• 가입: Google AdSense 계정 생성
• 심사: 사이트 콘텐츠 품질 심사 (1~2주 소요)
• 설치: 광고 코드를 HTML에 삽입
• 수익: 클릭/노출당 수익 발생

글로벌 수익화 전략

특히 영어로 서비스를 만들어 배포하면 글로벌 트래픽을 통해 더 높은 광고 단가(CPC)를 기대할 수 있습니다.

• 웹: 글로벌 결제 가능 (Polar, Stripe)
• 앱: Google Play, App Store 글로벌 배포
• 게임: Steam, Epic Games 글로벌 유통