# AI 홈페이지 바이브 코딩

> 원하는 분위기와 레퍼런스를 전달하면 AI가 홈페이지 디자인과 코드를 자동 생성

- Canonical: https://heyratty.io/portfolio/ai-homepage-vibe-coding
- Category: 웹 개발, AI 자동화
- Client: B2B 기업
- Period: 2026.03
- Tech: Next.js, TypeScript, Tailwind CSS, GPT-4, Vercel
- Before → After: 2~4주 → 1~3일

## Challenge
원하는 분위기, 레퍼런스 사이트, 브랜드 정보를 전달하면 AI가 디자인과 프론트엔드 코드를 자동으로 생성하여 완성된 홈페이지를 제작합니다.

## Solution
기획서 작성부터 디자인·개발·배포까지의 전 과정을 AI가 주도하여 제작 기간을 획기적으로 단축합니다.

## Features
- **바이브 기반 디자인** — '미니멀', '다크 모던', '따뜻한 감성' 등 분위기 키워드로 디자인 방향을 설정합니다.
- **풀스택 코드 생성** — 디자인뿐 아니라 실제 배포 가능한 프로덕션 코드를 생성합니다.
- **반응형 자동 대응** — 모바일, 태블릿, PC 모든 디바이스에서 최적화된 레이아웃을 자동 적용합니다.
- **실시간 미리보기** — 생성 즉시 실제 URL에서 결과물을 확인하고 수정 요청할 수 있습니다.

## Flow
1. **홈페이지 정보 입력** — "IT 스타트업 홈페이지 만들어줘"
2. **AI 자동 생성** — 구조 설계 · 디자인 · 코드 구현
3. **즉시 배포** — 실제 URL로 바로 확인

## Results
- 홈페이지 제작: 기존 2~4주 → AI 자동화 1~3일
- 디자인+개발 통합: 별도 시안 작업 불필요
- 배포까지 원스톱: 추가 인프라 설정 불필요
- 수정 반영 속도: 디자인 변경 요청 → 수분 내 반영

## Contact
- Email: contact@heyratty.io
- Website: https://heyratty.io