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

25.09.05 / JUN

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

🟦 미션 1 — Random Quote Generator (나만의 명언 생성기)

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

핵심 기능

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

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

👉 Cursor 프롬프트 (그대로 붙여넣기)

You are an expert front-end engineer and prompt-driven pair programmer.
Create a SINGLE-FILE web app named index.html that works by just opening it in a browser.

App: “Random Quote Generator”
Goal: On button click, show a new short quote (1–2 sentences). Works offline with a local quote list. Optionally, if an OpenAI API key is provided, fetch an AI-generated quote.

Requirements
- Tech: Pure HTML/CSS/JS in one file (no build tools). Mobile-friendly.
- UI
  - Centered card with: title, quote text area, author line (optional), “New Quote” button.
  - Minimal modern style (system font, soft shadow, rounded corners).
  - Footer: small text “Powered by VibeCoding • Offline first”.
- Behavior
  - Default: randomly pick from a local array of ~30 curated quotes (include various themes).
  - On “New Quote” click: instantly replace with another quote (avoid repeating previous).
  - Optional AI mode
    - If window.OPENAI_API_KEY is present, add a small toggle “AI mode”.
    - When AI mode ON: call OpenAI to generate a short original quote (not a famous attribution).
    - Add loading state and error handling fallback to local quotes.
- Accessibility: proper button roles, focus states, and keyboard activation (Enter/Space).

Implementation details
- Local quotes: provide ~30 items like { text: “…”, author: “…” } with 5–6 Korean quotes, rest English.
- Randomization: ensure no immediate repeats (track last index).
- AI mode
  - Add a small collapsed panel: input for API key (type=password), save to window.OPENAI_API_KEY in memory only.
  - Endpoint: https://api.openai.com/v1/chat/completions
  - Model: gpt-4o-mini
  - Prompt: “Write a brand-new, uplifting, 1–2 sentence quote in the style of modern motivational writing. Do not imitate or attribute to any real person.”
  - On failure: show a toast “AI quote failed. Showing local quote.” then fallback.
- No external libs. Inline CSS acceptable.

Acceptance criteria
- Works by opening index.html.
- Produces quotes from local list.
- AI mode works when key provided, otherwise hidden or togglable.
- Clean, readable code with comments.

Also include at the top of the file a short “How to use AI mode” comment with 3 steps.
Generate the complete index.html now.

🟦 미션 2 — AI Lunch Picker (오늘의 점심 메뉴 추천)

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

핵심 기능

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

성공 포인트: 생활 밀착형 & 재미있어서 학습자가 바로 공유하고 싶어함

👉 Cursor 프롬프트 (그대로 붙여넣기)

You are an expert front-end engineer and prompt-driven pair programmer.
Build a SINGLE-FILE web app (index.html) that runs by double-clicking it.

App: “AI Lunch Picker”
Goal: Suggest 1 lunch dish + a playful one-line comment. Offline defaults with local menu sets; optional OpenAI mode enhances suggestions.

Requirements
- Tech: One HTML file with CSS/JS embedded. No build step.
- UI
  - Title: “오늘의 점심 메뉴”
  - Category filter (chips or select): 전체, 한식, 중식, 일식, 양식
  - Button: “추천 받기”
  - Result card: 메뉴명 (bold), 한 줄 코멘트, optional emoji
  - Tiny toolbar: “AI mode” toggle + password input for API key (hidden unless toggled)
- Behavior
  - Offline mode: choose randomly from local menu pools (per category), then generate a witty comment from a small local template list.
  - If “AI mode” is ON AND API key present, call OpenAI to generate:
    - A single dish name (Korean or local language-friendly)
    - A fun 1-sentence remark (<= 80 chars)
  - Duplicates: Avoid suggesting the same dish twice in a row.
  - Loading state, error toast, graceful fallback to offline.
- Styling
  - Clean card UI, responsive, large tap targets.
  - Subtle divider and spacing; rounded corners.
- Accessibility: Keyboard accessible controls and ARIA labels.

Implementation details
- Categories and sample menus (at least 10 per category, Korean-friendly):
  - 한식: 비빔밥, 김치찌개, 제육볶음, … (10+)
  - 중식: 짜장면, 짬뽕, 탕수육, …
  - 일식: 라멘, 가츠동, 사시미 덮밥, …
  - 양식: 파스타, 샐러드, 버거, …
- Comment templates (offline): e.g., “지금 딱 어울리는 메뉴!”, “오늘은 이걸로 행복 지수 업!”, …
- OpenAI
  - Endpoint: https://api.openai.com/v1/chat/completions
  - Model: gpt-4o-mini
  - System prompt: “You are a concise lunch recommender.”
  - User prompt template: include selected category and ask for {dish, comment} JSON.
  - Parse JSON safely; validate fields.

Acceptance criteria
- Works locally with no key.
- Category filter affects suggestions.
- “AI mode” improves variety if key provided.
- Clear UX: one click -> result appears nicely.

At the very top, add a short “AI mode setup” comment with steps to paste the key into the in-page field. Produce full index.html code now.

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

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

핵심 기능

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

성공 포인트: 결과물이 실제 퍼스널 브랜딩에 활용 가능

👉 Cursor 프롬프트 (그대로 붙여넣기)

You are an expert front-end engineer and prompt-driven pair programmer.
Create a SINGLE-FILE personal “Mini Blog Card” web page (index.html) that runs standalone.

App: “My Mini Blog Card”
Goal: User enters name, role, interests → page generates a 2–3 sentence intro paragraph. Works offline with a local template; optional OpenAI mode for higher-quality copy. Include an embeddable newsletter area (beehiiv or Stibee).

Requirements
- Tech: one HTML file with inline CSS/JS. No frameworks.
- Layout
  - Left: input panel (Name, Role, Interests textarea, Language select: KR/EN)
  - Right: preview card (avatar placeholder circle, name, role, generated intro, newsletter embed area)
  - Top bar: title + tiny “AI mode” toggle + password input for API key
- Behavior
  - On “Generate Intro” button: If AI mode + key present, request a concise 2–3 sentence intro in the selected language; else use local template generator that mixes sentence fragments (ensure grammatically correct).
  - Live preview updates without page reload.
  - Provide “Copy Intro” button to copy the generated text.
- Styling
  - Minimal, modern card; white background, subtle shadow, rounded corners.
  - Mobile-friendly stacked layout.
- Newsletter
  - Provide two tabs inside the preview: beehiiv / Stibee.
  - Each tab shows a placeholder embed code area + short instructions:
    - beehiiv:
      <!--
      <div class="beehiiv-embed-form" data-form="YOUR_FORM_ID"></div>
      <script src="https://embeds.beehiiv.com/beehiiv-embed.js"></script>
      -->
    - Stibee:
      <!--
      <iframe src="https://stibee.com/embed/YOUR_FORM_ID" width="100%" height="400" frameborder="0"></iframe>
      -->
- Accessibility: label all inputs, announce copy success with aria-live region.

OpenAI integration
- Endpoint: https://api.openai.com/v1/chat/completions
- Model: gpt-4o-mini
- System: “You are a concise personal branding copywriter.”
- User prompt includes name, role, interests, language preference, and tone: “modern, friendly, confident.”
- Validate the response; if missing, fallback to offline generator.

Acceptance criteria
- Page runs locally. Offline generator produces coherent KR/EN intros.
- Copy button works.
- Newsletter embed placeholders are easy to swap.
- Clean code with short comments.

Add a top-of-file comment “How to deploy on GitHub Pages” (3 steps). Output the complete index.html now.

⏱ 실행 팁

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

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

1. 과정 소개

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

2. 아이디어 정리

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

3. ChatGPT 카피라이팅

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

4. v0로 페이지 생성

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

5. 뉴스레터 구독 폼 삽입

수익화 포인트: 구독자 확보
beehiiv 예시 코드

<div class="beehiiv-embed-form" data-form="YOUR_FORM_ID"></div>
<script src="https://embeds.beehiiv.com/beehiiv-embed.js"></script>

스티비 예시 코드

<iframe src="https://stibee.com/embed/YOUR_FORM_ID" width="100%" height="400"></iframe>

실습 미션: v0 코드의 Newsletter 섹션에 삽입

6. 프로젝트 제출 & 챌린지

제출: my-ai-portfolio.html (GitHub Pages, Vercel, Netlify)
챌린지(심화)
- 프로필 이미지/로고 삽입 (MidJourney, ChatGPT Image)
- Hero 섹션 배경 애니메이션 추가
- 구독 완료 시 환영 메시지 팝업 띄우기
오늘의 결과물: 개인 브랜드 랜딩 페이지 1종 완성!

Day1.P3 바이브 인사이트: 정적 웹사이트 배포

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

왜 좋나

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

3분 배포 절차

GitHub에 새 레포 만들고 index.html 업로드
레포 Settings → Pages로 이동 → Source: main / /root 선택 후 저장
잠시 후 사이트가 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 ✅ GitHub Docs
무료로도 빌드/도메인/대역폭 여유 + 글로벌 캐시: Cloudflare Pages ✅ pages.cloudflare.com
프리뷰/팀 협업/한 줄 배포 UX: Netlify 또는 Vercel ✅ Netlify Vercel
CLI로 초간단 10초 배포: Surge ✅ surge.sh+1

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

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

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

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

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

AX 실무활용 | Cursor, Code, v0를 이용한 바이브코딩 20제 마스터 (구름 / AI Fit-T / 80H)

2025 SW융합해커톤 세종 – 멘토링

GPT 인사이드 | GPT 무료버전과 유료버전 기능차이 및 Gemini와의 요금할인혜택 비교 (2025년 8월 현재)

AX 실무활용 | 효율적 경영지원을 위한 GPT, 노트북LM 활용 (KOITA / 8H)

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

🟦 미션 1 — Random Quote Generator (나만의 명언 생성기)

🟦 미션 2 — AI Lunch Picker (오늘의 점심 메뉴 추천)

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

⏱ 실행 팁

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

1. 과정 소개

2. 아이디어 정리

3. ChatGPT 카피라이팅

4. v0로 페이지 생성

5. 뉴스레터 구독 폼 삽입

6. 프로젝트 제출 & 챌린지

Day1.P3 바이브 인사이트: 정적 웹사이트 배포

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

왜 좋나

3분 배포 절차

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

왜 좋나

배포 요약

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

그렇다면 내게 가장 적합한 옵션은?

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

Leave a Reply Cancel reply

Related Posts

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

AX 실무활용 | Cursor, Code, v0를 이용한 바이브코딩 20제 마스터 (구름 / AI Fit-T / 80H)

2025 SW융합해커톤 세종 – 멘토링

GPT 인사이드 | GPT 무료버전과 유료버전 기능차이 및 Gemini와의 요금할인혜택 비교 (2025년 8월 현재)

AX 실무활용 | 효율적 경영지원을 위한 GPT, 노트북LM 활용 (KOITA / 8H)