웹 바이브 코딩20 min

1. 간단한 웹사이트 개발 (Landing Page)

Gemini 자연어 명령어만으로 단일 파일 랜딩 페이지 구축 및 배포

학습 목표 (Objective)

HTML/CSS/JS 코드를 작성하지 않고 Gemini 프롬프트만으로 반응형 웹사이트를 제작하고 실시간으로 프리뷰 및 GitHub Pages에 배포하는 전체 과정을 습득합니다.

단계별 실습 가이드(0/3 단계 완료)

STEP 01

Gemini 단일 파일 생성 프롬프트 작성

HTML, Tailwind CSS, JavaScript가 한 파일에 포함된 완전한 웹 페이지 코드를 요구합니다.

•요구사항 구체화: "SaaS 모던 디자인의 랜딩 페이지를 작성해줘. Tailwind CSS CDN을 사용하고, Dark/Light 모드 토글 및 모바일 네비게이션 포함"
•인터랙티브 기능: "Hero 섹션에 CTA 복사 버튼과 FAQ 아코디언 컴포넌트를 넣어줘"

STEP 02

Gemini Canvas에서 실시간 프리뷰 및 즉시 수정

생성된 코드를 Canvas 웹 화면에서 실시간으로 확인하며 디자인 색상, 폰트, 간격을 자연어로 수정합니다.

•디자인 수정: "배경색을 깊은 네이비 블루(#0f172a)로 바꾸고 버튼에 subtle hover 애니메이션 효과를 줘"
•콘텐츠 수정: "서비스 기능 소개 카드를 3개에서 4개로 늘리고 아이콘을 Lucide SVG 스타일로 변경해줘"

STEP 03

GitHub Pages를 통한 무료 웹 배포

완성된 index.html 코드를 GitHub 저장소의 main 브랜치에 올린 후 GitHub Pages 설정에서 1분 만에 전 세계 공개 웹사이트로 호스팅합니다.

Gemini 추천 프롬프트 (클릭하여 복사)

너는 프론트엔드 최고 마스터 개발자야. 아래 조건에 맞는 단일 파일 반응형 랜딩 페이지(index.html) 전체 코드를 생성해줘: 1. 디자인: Modern Dark Navy Theme (Slate-900), Tailwind CSS 4 CDN 활용 2. 헤더: 브랜드 로고, 네비게이션 메뉴 (Features, Pricing, Contact), 언어 선택기 3. Hero 섹션: Bold 헤드라인, 세부 설명, '무료 시작하기' CTA 버튼 (클릭시 모달 출력) 4. 기능 소개 카드: 3개의 반응형 카드 (아이콘 + 제목 + 설명) 5. FAQ 아코디언: 클릭시 열리고 닫히는 JavaScript 아코디언 3개 항목 6. 푸터: 저작권 표시, 이메일 주소 (ju9896012@gmail.com), 개인정보처리방침 링크 단 하나의 코드 블록으로 작성해줘!

GitHub Pages 배포 지침

GitHub 저장소 생성 ➔ index.html 커밋 ➔ Settings > Pages ➔ Source를 "main branch / root"로 설정하면 몇 초 후 내 도메인이 생성됩니다.

Gemini 핵심 기능 & 바이브 코딩 실전 마스터클래스