구름 바이브코딩 1주차: 워밍업 및 기초 프로젝트

구름 바이브코딩 W1
구름 바이브코딩 W1

25.09.10 / JUN

  • GVB01 09.05 금: 커서 설치 / 싱글 HTML / 심플 아이디어 기능 구현
  • GVB02 09.08 월: v0, bolt를 이용해서 랜딩 페이지 UI 디자인 / 커서로 싱글 HTML / Github에 앱 배포, 웹 브라우저에서 결과 확인 / 텍스트 뷰어 >> 뉴스 뷰어
  • GVB03 09.09 화: 싱글 HTML / 멋진 바이브코딩 아이디어 메모 >> GPT로 기술명세서 작성 >> GPT로 핵심 기능 8줄 요약 >> Cursor에서 코드 빌드 / 커서 유료 결제 / 기술일지 (Github, 노션, 워드프레스, 블로그) / 뉴스 수집 기능 구현
  • GVB04 09.10 수: 싱글 HTML / API 활용 기능 구현 (유튜브)
  • GVB05 09.11 목: PHP 프로젝트 / 유튜브 API를 활용한 워드프레스 플러그인 구현 및 배포
  • GVB06 09.12 금: 파이썬 데이터분석 모델 구현 / 웹 스크래핑 및 데이터 전처리

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

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

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

핵심 기능

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

성공 포인트: 첫 실행만으로 “내가 만든 동작하는 앱” 성취감 100%

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 지원
  • 브랜치/폴더를 배포 소스로 지정하면, 푸시할 때마다 자동 배포

3분 배포 절차

  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
  • Surge.sh: CLI 한 줄로 정적 폴더를 퍼블리시. 무료로 커스텀 도메인/기본 SSL 가능(프로 업그레이드 $30/월은 선택).
    • 설치: npm i -g surge → 배포: surge ./dist yourname.surge.sh

초간단 “첫 배포” 체크리스트 (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는 설치/인증 절차가 간단하고, 무료로 호출 가능하며, 재밌는 결과가 바로 눈에 보여서 좋습니다. 무엇보다 대충 만들어도 잘 작동합니다.

오픈 API 기반의 유튜브 채널 리서치 서비스인 플레이보드 https://playboard.co/en/

1. 📰 News API

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

2. 🎬 The Movie Database (TMDB) API

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

3. 🎵 Spotify API

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

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

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

5. 🌤️ OpenWeather API

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

6. 📺 YouTube Data API (전에 언급했던 것)

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

7. 📚 Open Library API

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

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

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

Views: 222

Leave a Reply

Related Posts