구름 바이브코딩 1주차: 워밍업, Cursor 설치, 웹앱 빌드, Gemini API 활용, 웹데이터 스크래핑

25.09.12 / JUN

• D01 (09.05 금): Cursor 설치 / 싱글 HTML / 심플 아이디어 기능 구현
• D02 (09.08 월): v0, bolt를 이용해서 랜딩 페이지 UI 디자인 / 커서로 싱글 HTML / Github에 앱 배포, 웹 브라우저에서 결과 확인 / 텍스트 뷰어 >> 뉴스 뷰어
• D03 (09.09 화): 싱글 HTML / 멋진 바이브코딩 아이디어 메모 >> GPT로 기술명세서 작성 >> GPT로 핵심 기능 8줄 요약 >> Cursor에서 코드 빌드 / 커서 유료 결제 / API 활용 기능 구현 (유튜브)
• D04 (09.10 수): 싱글 HTML에서 멀티 파일 웹앱으로 확장 / API 활용 기능 구현 (뉴스, 날씨, 주식 등) / 기술일지 작성 (Github, 노션, 워드프레스, 블로그) / ChatGPT API 키 생성
• D05 (09.11 목): ChatGPT API, Gemini API + 오픈 API를 활용한 웹앱 구현 / 런타임으로서 Node.js, WP(PHP) 활용 시작
• D06 (09.12 금): 파이썬 데이터분석 모델 구현 / 웹 스크래핑 및 데이터 전처리 / GPT 에이전트 모드, Make, Zapier로 AI 에이전트, 업무자동화 입문 / 예시 프로젝트: 카카오톡딜 인기 상품 목록을 정기 수집하는 AI 에이전트 구현

---

Day1.P1: Cursor & GPT 심플 프로젝트

준비1. 크롬 브라우저에서 구글 계정 로그인

바이브코딩 전과정에서 다양한 도구의 접속에 필요한 인증 시간을 최소화하며 실습을 진행하려면 크롬 브라우저에서 구글 계정으로 로그인 상태를 유지하는 것을 권장합니다.

준비2. Cursor 다운로드, 설치

1. Random Quote Generator (나만의 명언 생성기)

목표: 버튼을 누를 때마다 명언/격언이 랜덤으로 나타나는 웹앱

핵심 기능

• ChatGPT API 호출 → 짧은 명언/격언 1줄 받아오기
• 버튼 클릭 이벤트로 새 문구 갱신
• 심플한 카드 디자인 (v0 스타일링 추가 가능)

2. AI Lunch Picker (오늘의 점심 메뉴 추천)

목표: 오늘 점심 메뉴를 AI가 추천해주는 간단한 앱

핵심 기능

• 버튼 클릭 → ChatGPT 호출 → “오늘 점심 추천 메뉴 1가지 + 짧은 코멘트” 출력
• 옵션: 한식/중식/일식/양식 카테고리 선택 후 추천
• 화면에 음식 이미지(Unsplash API 또는 v0 이미지 위젯) 함께 출력

3. AI Mini Blog Card (나의 미니 블로그 카드)

목표: 자기소개 & 한 줄 블로그 글을 카드 UI로 보여주는 웹페이지

핵심 기능

• 이름, 직업, 관심사 입력 폼
• ChatGPT가 2~3문장 소개 글 생성
• 카드 스타일 UI에 삽입 (사진 + 텍스트)
• 하단에 뉴스레터 구독(beehiiv/스티비) iframe 붙여보기

⏱ 실행 팁

• Cursor에서 각 프롬프트를 그대로 붙여넣고 Enter → index.html 자동 생성 확인
• 수정/미세조정은 “Refactor this section to …” 식으로 대화형 지시
• 결과물은 즉시 브라우저로 열어 확인 → 마지막엔 GitHub Pages/Vercel 배포까지!

---

Day2.P1: GPT & v0로 나의 AI 포트폴리오 랜딩 페이지 생성

v0와 bolt는 바이브코딩 업계에서 생성형 UI 디자인 도구로 널리 활용되고 있습니다.

V0
https://v0.app/

BOLT
https://bolt.new/

1. 과정 소개

• 주제: 나의 AI 포트폴리오 1페이지 빌드
• 도구: ChatGPT + v0 + 뉴스레터 툴(beehiiv/스티비)
• 학습 목표
  • AI 도구를 활용한 실전 웹페이지 제작
  • 개인 브랜딩 랜딩 페이지 완성
  • 뉴스레터 구독 폼 삽입 → 수익화 경험

2. 아이디어 정리

• 먼저 나의 브랜드 아이덴티티를 구체화
• 체크리스트
  • 이름/브랜드명
  • 한 줄 슬로건
  • 대표 서비스/전문성
  • 연락처(이메일, 링크)
• Tip: 간단명료하게 작성 (3~5문장 이내)

Avada | WordPress & eCommerce 웹사이트 테마 (1M 다운로드)
https://themeforest.net/item/avada-responsive-multipurpose-theme/2833226

3. ChatGPT 카피라이팅

• 목표: 랜딩 페이지용 텍스트 작성
• 포함 요소
  • Hero 섹션: 이름 + 슬로건
  • About Me: 간단한 자기소개
  • Portfolio: 3가지 강점
  • CTA: 뉴스레터 구독 유도
• 실습 프롬프트 예시 “너는 스타트업 브랜드 마케터야.
  ‘나의 AI 포트폴리오’ 주제로 랜딩 페이지 카피라이팅 작성…”

4. v0로 페이지 생성

• ChatGPT가 만든 텍스트 → v0에 입력
• v0 프롬프트 구조
  • Hero (이름/슬로건)
  • About Me (문단 소개)
  • Portfolio (카드형 섹션)
  • Newsletter 폼 삽입
• 디자인 스타일
  • 깔끔/현대적
  • Responsive / Mobile-friendly
  • 주요 색상: 블루 + 라이트 그레이

---

Day2.P2 바이브 인사이트: 정적 웹사이트 배포

1) GitHub Pages — 완전 무료 + 가장 쉬운 배포

• 완전 무료로 정적 사이트를 깔끔하게 서비스 가능. 커스텀 도메인과 HTTPS 지원
• 브랜치/폴더를 배포 소스로 지정하면, 푸시할 때마다 자동 배포

1. GitHub에 새 레포 만들고 index.html 업로드
2. 레포 Settings → Pages로 이동 → Source: main / /root 선택 후 저장
3. 잠시 후 사이트가 https://<username>.github.io/<repo>로 활성화됩니다. (커스텀 도메인은 CNAME 설정)

참고: GitHub Pages는 정적 파일(HTML/CSS/JS) 을 그대로 퍼블리시합니다. Jekyll 등 빌드가 필요하면 GitHub Actions 워크플로를 써도 됩니다.

2) Cloudflare Pages — 무료로 빠른 글로벌 CDN + 자동 배포

• Free 플랜에서 무제한 사이트 / 무제한 정적 요청 / 무제한 대역폭, 월 500 빌드, 프로젝트당 최대 100개의 커스텀 도메인 지원. CI 없이도 직관적인 배포가 가능
• Cloudflare의 엣지 네트워크를 통한 전 세계 빠른 응답. (개발자 플랫폼 요금 페이지 참고)
• Git 연동(깃허브/깃랩) 후 리포 선택 → 프레임워크 None(정적) → 빌드 없이 / 배포.
• 커스텀 도메인은 Cloudflare DNS에서 레코드 연결.

3) Netlify / Vercel / Surge — “한 줄 배포”가 장점

• Netlify: Free(영구 무료) 플랜 제공. 깃 연동/끌어다 놓기 배포, 간단 리다이렉트/폼 등도 쉬움
• Vercel: Hobby(무료) 플랜으로 개인 프로젝트 배포에 적합. 자동 HTTPS, 프리뷰 URL

초간단 “첫 배포” 체크리스트 (GitHub Pages 예시)

1. index.html/style.css/app.js 준비
2. GitHub 새 레포 → 파일 업로드
3. Settings → Pages → Source: main// 저장 → 배포 URL 확인
4. 필요 시 CNAME로 커스텀 도메인 연결(선택)

JUN 명언생성기 (깃허브 호스팅)
https://junsang-dong.github.io/random-quote/

---

Day3.P1: 인터넷에 존재하는 무궁무진한 정보원 – API 활용

🎯 바이브코딩 친화적인 공개 API 추천

바이브코딩(VibeCoding) 실습용으로 활용하기 좋은 공개 API를 소개합니다. 이들 공개 API는 설치/인증 절차가 간단하고, 무료로 호출 가능하며, 재밌는 결과가 바로 눈에 보여서 좋습니다. 무엇보다 대충 만들어도 잘 작동합니다.

YouTube Data API 활용 쇼츠 추천 앱 구현

• 설명: 유튜브 동영상 검색, 조회수, 채널 정보 확인 가능.
• 활용 아이디어: “오늘 가장 핫한 영상” 리스트 웹앱, 특정 키워드 기반 영상 검색기.

---

Day4: 커서로 오픈 API 기반 웹앱 서비스 구현

P1. GPT, Claude, Gemini 등과 웹앱 구현 아이디어 회의

“입문자 친화적인 공개 API 중에서
[News API]에 대해 설명해주고 관련 링크도 알려줘”

1. 📰 News API

• 설명: 전 세계 주요 언론사의 최신 뉴스 기사를 가져올 수 있음.
• 활용 아이디어: 특정 키워드(예: “AI”, “스타트업”) 뉴스 모아보기 앱 만들기.

2. 🎬 The Movie Database (TMDB) API

• 설명: 영화, 드라마, 배우, 평점 데이터 제공.
• 활용 아이디어: 인기 영화 추천 웹앱, 배우 검색 서비스, 랜덤 영화 추천 카드.

“커서에서 The Movie Database (TMDB) API를 이용해서 기분에 따라 영화를 추천하는 웹앱을 빌드하는 모범적인 프롬프트를 헤드라인과 그 아래 6개의 블릿기호 문장으로 작성 부탁해”

3. 🎵 Spotify API

• 설명: 음악 트랙, 아티스트, 앨범, 플레이리스트 정보 제공.
• 활용 아이디어: “내 기분에 맞는 노래 추천” 서비스, 특정 가수의 인기곡 순위 출력.

4. 🐱 Cat Facts API (또는 Dog API)

• 설명: 귀여운 고양이/강아지 랜덤 사진, 재미있는 사실 제공.
• 활용 아이디어: 버튼 누르면 고양이 사진/사실 출력 → 간단하고 재밌음.

5. 🌤️ OpenWeather API

• 설명: 전 세계 날씨 데이터 제공.
• 활용 아이디어: “내 위치 날씨 앱”, “내일 우산 챙겨야 할까?” 웹서비스.

6. 📚 Open Library API

• 설명: 전 세계 책 정보, 작가, 표지 이미지 검색 가능.
• 활용 아이디어: “읽고 싶은 책 검색기”, “랜덤 도서 추천 서비스”.

👉 고양이·강아지 API 같은 “클릭하면 바로 반응이 보이는 API”가 가장 재미있고 성취감이 커요.
👉 조금 익숙해지면 날씨 API나 뉴스 API를 활용해서 실생활과 연결된 미니 프로젝트로 확장해보세요.

---

P2. 커서에서 API 기반의 웹앱 빌드 및 깃허브 페이지에 배포

“커서에서 News API 기반의 웹앱을 빌드하는 모범적인 프롬프트를 헤드라인과 그 아래 6개의 블릿기호 문장으로 작성 부탁해”

커서 프롬프트 예시 (간단명세서형): News API 기반 오늘의 뉴스 웹앱 만들기

• HTML, CSS, JavaScript로 간단한 웹앱을 만들어주세요.
• 상단에 “오늘의 뉴스”라는 제목을 표시하고, 하단에는 한국 주요 헤드라인 5개를 카드 형태로 보여주세요.
• 각 뉴스 카드는 제목, 간단한 설명, 기사 링크를 포함하세요.
• 디자인은 심플하고 가독성이 좋은 레이아웃(예: 중앙 정렬, 카드 스타일)로 해주세요.
• JavaScript fetch()를 사용해 News API (/v2/top-headlines?country=kr)에서 데이터를 불러오도록 해주세요.
• YOUR_API_KEY 부분은 제가 직접 넣을 수 있도록 placeholder로 남겨주세요.
• 코드는 실행하면 바로 브라우저에서 확인할 수 있는 완성형으로 작성해주세요.

! 완성된 코드는 브라우저에서 확인한 뒤 커서에서 오류를 수정하고 기능과 디자인 요소를 보완하세요.

! 모든 것이 완벽해보인다면, 깃허브 페이지에 업로드하세요. 이 때 API가 외부에 노출되지 않도록 매우 주의하세요.

P3. 첫 번째 바이브코딩 작업 내역을 기술일지에 정리

! 블로그, 노션, 워드프레스에 오늘의 첫 번째 프로젝트 내역을 입력하세요.

---

Day5: Cursor와 LLM API로 세계관 확장

• 커서에 최신 개발자 문서 첨부
• ChatGPT API 웹앱 구현
• ChatGPT API + 오픈 API를 활용한 웹앱 구현
• Node.js, WP(PHP) 프로젝트 시작
• 매일 아침 7시에 [미션]을 수행하는 에이전트 구현

📚 예시: GPT API 기반 뉴스 핵심 요약기

• 사용자가 입력한 뉴스 전문 텍스트 또는 URL을 ChatGPT API에 전달하여 핵심 내용을 요약합니다.
• 결과는 한 줄 제목 + 네 개의 블릿 요약 문장 형식으로 구성되며, 가독성을 높입니다.
• 요약 결과는 화면에 카드 스타일로 출력되며, 복사 버튼을 누르면 클립보드에 저장됩니다.
• 사용자가 요청한 요약 내용은 LocalStorage에 자동 저장되어 아래 리스트에서 이전 결과 확인 가능하게 합니다.
• 전체 코드는 입문자도 이해할 수 있도록 HTML, CSS, JS 단일 파일로 구현하고 주석을 포함합니다.

Cursor용 프롬프트

You are an expert front-end engineer.
Build a single-file web app called “뉴스 핵심 요약기” using only HTML, CSS, and JavaScript.

Goal:
User pastes a news article or blog text (or URL), clicks a “요약하기” button, and sees a summarized result in the format:

• 1 sentence headline
• 4 bullet-point key sentences

Requirements:

• Input: multiline textarea for text or URL, “요약하기” button
• On click, send prompt to ChatGPT API (input API key in top bar)
• Prompt format: “다음 내용을 한 줄 제목과 4개의 핵심 문장으로 요약해줘. [본문]”
• Output card:
• 제목 (bold)
• • 요약 문장 1
• • 요약 문장 2
• • 요약 문장 3
• • 요약 문장 4
• “복사하기” 버튼 (copies 전체 요약 결과)
• 이전 요약 기록은 localStorage에 저장되고 하단에 리스트 형식으로 표시
• 전체 디자인은 mobile-first, card 스타일, 깔끔한 폰트와 여백 사용
• ChatGPT API key는 상단 입력창에 저장하고 localStorage에 보존
• 코드 전체를 단일 HTML 파일로 작성하고, 초보자가 이해하기 쉬운 주석을 포함할 것

Now generate the full index.html file with all functionality and styling included. Use plain JavaScript (no frameworks), and include helpful comments throughout.

---

D6. 바이브코더를 위한 데이터 스크래핑 및 분석

강의 주제: Python을 활용한 데이터 스크래핑부터 예측까지의 전 과정 실습
대상: Python 입문~초급 수준의 바이브코딩 수강생
도구: Google Colab (또는 VS Code + Jupyter), Pandas, Matplotlib, Seaborn, Scikit-learn, BeautifulSoup, Requests

주제	주요 실습
웹에서 데이터 수집하기	크롤링, requests, BeautifulSoup
데이터 전처리	결측치, 이상치, 타입 변환
탐색적 데이터 분석	통계, 분포, 상관관계 파악
시각화로 인사이트 찾기	그래프 그리기, 트렌드 확인
지도학습 예제	회귀/분류 간단 실습
비지도학습 예제	K-means 군집화
데이터 기반 예측 실습	미래 예측/추정

UCI 데이터셋 | 해군함정 가스터빈 추력기 유지보수
https://archive.ics.uci.edu/dataset/316/condition+based+maintenance+of+naval+propulsion+plants

Kaggle 데이터셋 | 벤츠 친환경 제조를 위한 출고검사 최적화
https://www.kaggle.com/competitions/mercedes-benz-greener-manufacturing

쿠파일럿 | 쿠팡 데이터 스크래핑 및 분석
https://www.coupilot.net/

SubReddit | Raddit 관심 카테고리 분석
https://subredditstats.com/r/kpop

Playboard | 유튜브 채널, 영상 인기도 분석
https://playboard.co/

---

✅ 1. 데이터 스크래핑

• 목표: 웹에서 표 형태의 데이터를 자동으로 가져오기
• 실습:
  • requests.get(url) 로 HTML 불러오기
  • BeautifulSoup 으로 table, div, span 등에서 텍스트 추출
  • Pandas read_html() 도 병행 사용
• 예시:
  • 네이버 금융 주식시세
  • 서울시 실시간 미세먼지 데이터
• 확장: 뉴스 제목/링크 수집 → 감성분석 데이터로 활용 가능

✅ 2. 데이터 전처리

• 목표: 수집한 데이터를 분석 가능한 형태로 정리
• 실습:
  • df.info(), df.describe(), df.isnull().sum()
  • 결측치 처리: fillna(), dropna()
  • 이상치 확인: boxplot(), quantile()
  • 데이터 타입 변환: astype(), to_datetime()
• 예시: 웹에서 가져온 미세먼지 데이터 or CSV 파일로 실습

✅ 3. 탐색적 데이터 분석 (EDA)

• 목표: 데이터를 요약하고 통찰 얻기
• 실습:
  • value_counts(), groupby(), pivot_table()
  • 상관관계 확인: corr(), heatmap()
  • 기준 변수별 통계 비교
• 예시:
  • 지역별 미세먼지 평균
  • 요일별 유동 인구수 비교
  • 제품별 매출 분포

✅ 4. 시각화 실습

• 목표: 데이터 인사이트를 그래프로 표현
• 실습:
  • matplotlib.pyplot, seaborn 사용
  • 막대그래프, 선그래프, 히스토그램, 상관관계 heatmap
• 예시:
  • 시간대별 미세먼지 변화
  • 제품별 매출 추이
  • 연도별 사용자 수 시계열

✅ 5. 지도학습 실습

• 목표: 지도학습의 개념과 간단한 적용
• 실습:
  • Scikit-learn train_test_split, LinearRegression, LogisticRegression
  • 예측값 시각화
• 예시:
  • 면적/가격으로 집값 예측
  • 미세먼지 농도 → 경고등급 분류

✅ 6. 비지도학습 실습

• 목표: 비지도 모델(K-means)을 통한 데이터 분류
• 실습:
  • KMeans(n_clusters=3)
  • 시각화: scatter()
• 예시:
  • 고객 데이터를 3그룹으로 나누기
  • 기사 키워드 기반 유사도 군집화

✅ 7. 예측 모델 실습

• 목표: 전체 데이터를 바탕으로 미래 예측 체험
• 실습:
  • 선형회귀 모델 학습 → 미래값 예측
  • 실측값 vs 예측값 시각화
• 예시:
  • 주차별 매출 예측
  • 다음 달 미세먼지 농도 추정

📦 추가 파일/데이터 예시

• seoul_air.csv : 서울시 미세먼지 데이터
• sales_data.csv : 월별 제품 매출 데이터
• population_by_day.csv : 요일별 유동 인구

🧪 실습 결과 제출 방식 (선택)

• 각 세션별 결과를 Google Colab에서 셀 단위로 실행
• 결과를 .ipynb 또는 .html로 내보내기
• 또는 Streamlit을 활용해 1페이지 대시보드 구성

---

Cursor 기반 실습 아이디어 TOP 5

(데이터 수집 + 분석 + 웹앱 UI까지 경험 가능한 프로젝트)

1. 📰 “오늘의 실시간 뉴스 키워드 분석기”

• 데이터 수집: 네이버/다음 뉴스 헤드라인 크롤링 (BeautifulSoup)
• 분석: 키워드 추출 + 워드카운트 + 워드클라우드
• 웹앱 UI: 사용자가 버튼 클릭 시 오늘의 뉴스 키워드와 워드클라우드 시각화
• 흥미 요소: 매일 다른 결과 → 뉴스 요약 블로그에도 활용 가능

2. 🌤️ “내 도시의 미세먼지 트래커”

• 데이터 수집: 공공 데이터 포털(서울시, 환경부) 미세먼지 API
• 분석: 시간대별 평균, PM10/PM2.5 비교, 최고/최저 구역 분석
• 웹앱 UI: 도시 선택 → 그래프와 수치 정보 출력 (Matplotlib 또는 Chart.js 활용)
• 흥미 요소: 지역 기반 개인화 + 시각화 → 실제 유용한 앱 느낌

3. 🎬 “유튜브 쇼츠 인기 키워드 요약기”

• 데이터 수집: YouTube Data API로 인기 쇼츠 제목 수집
• 분석: 제목에서 자주 쓰인 단어 분석 + 인기 채널 요약
• 웹앱 UI: 키워드 트렌드 시각화, 인기 쇼츠 5개 썸네일 표시
• 흥미 요소: 트렌드 민감한 주제 + 눈에 보이는 결과 → 공유 가치 높음

4. 🛍️ “가짜 리뷰 탐지기 (리뷰 요약 + 감성 분석)”

• 데이터 수집: 쿠팡 또는 아마존 리뷰 크롤링
• 분석: ChatGPT API로 요약 + 감성분석 (긍/부정)
• 웹앱 UI: 제품명 입력 → 요약된 리뷰 5개 + 긍/부정 그래프 출력
• 흥미 요소: 쇼핑에 바로 활용 가능 + AI 요약 기능 경험

5. 📈 “나만의 생활비 소비 분석기”

• 데이터 수집: 사용자가 .csv 또는 Google Sheet 불러오기
• 분석: 항목별 소비, 월별 추이, 카테고리별 비중 분석
• 웹앱 UI: 업로드 → 자동 분석 보고서 + 파이차트 시각화
• 흥미 요소: 자기 데이터로 실습 가능 + 자동 리포트 느낌

✅ 공통 특징

• 모두 Cursor에서 Python + HTML/CSS/JS + ChatGPT API 조합으로 구현 가능
• 1~2시간 내 MVP 구현 → 수업 시간 안에 “작동하는 것” 만들기 가능
• 입문자가 좋아하는 즉각적 반응 / 실생활 연계 / 시각화 결과 중심

---

바이브코더에게 추천하는 흥미로운 스크래핑 웹사이트

1. 📰 네이버 뉴스 랭킹

• URL: https://news.naver.com/main/ranking/popularDay.naver
• 스크래핑 포인트:
  • 실시간 인기 뉴스 제목
  • 언론사, 댓글 수, 기사 링크 등
• 왜 추천하나?
  • 한국어 뉴스로 친숙하고
  • 리스트 구조가 규칙적이라 BeautifulSoup 입문에 매우 적합
• 활용 예시: 오늘의 뉴스 키워드 워드클라우드 / 감성 분석 실습

2. 🎬 IMDb 영화 인기순위

• URL: https://www.imdb.com/chart/moviemeter
• 스크래핑 포인트:
  • 인기 영화 순위, 제목, 연도, 평점, 링크
• 왜 추천하나?
  • 영화라는 흥미로운 주제 + 정돈된 <table> 구조
  • 영어 기반이지만 구조가 명확해 연습용으로 좋음
• 활용 예시: 인기 영화 트렌드 그래프 / ChatGPT로 줄거리 요약

3. 💰 코인마켓캡 (CoinMarketCap)

• URL: https://coinmarketcap.com/
• 스크래핑 포인트:
  • 암호화폐 이름, 시가총액, 24시간 변동률, 가격
• 왜 추천하나?
  • 실시간 변화하는 데이터
  • 숫자/퍼센트 처리, 정렬 등 다양한 분석 가능
• 주의사항: 일부 데이터는 JavaScript 렌더링이므로 requests보다는 Selenium으로 접근 권장

---

이 포스트는 구름 바이브코딩 교육생 특화 포스트입니다. / 첫 포스팅: 25.09.05 / 포스트 문의: JUN (naebon@naver.com)