#1 초보를 위한 바이브코딩으로 랜딩페이지 만들기 (스벨트)
앞서 스벨트/스벨트킷으로 만든 프로젝트의 폴더 구조 등을 살펴봤습니다.
백물이불여일견이라고 실제로 바이브코딩으로 웹사이트를 하나 만들어서 배포까지 진행해 보고 차이가 무엇인지 알아보겠습니다.
여기서 사용한 AI는 구글의 제미나이와 안티그래비티 IDE입니다.
※ 안티그래비티가 업그레이드 되면서 클로드같은 채팅창만 있는 안티그래비티가 있고, 기존의 코드에디터인 IDE가 분리되었는데 여기서는 소스 코드 등을 보면서 확인하기 위해 IDE로 진행했습니다.
1. PRD, TRD 작성하기
프로젝트를 시작하기에 앞서 어떤 랜딩페이지를 만들 것인지 PRD(Product Requirement Document)를 작성할 필요가 있습니다.
자세할 수록 좋겠지만 그냥 간단하게 제시어를 주고 TRD(Technical Requirement Document)와 함께 제미나이에게 만들어달라고 했습니다.
헤드폰 신제품을 소개하는 랜딩 페이지를 만들거야.
1. 상단메뉴는 about, product가 있고
2. 상단엔 헤더, 하단엔 푸터가 들어가
3. about에는 헤드폰 회사 소개가 들어가고
4. product에는 헤드폰에 대한 간단한 제품 설명과 가격 등이 보여져
이 랜딩페이지는 스벨트를 이용해서 만들거야.
이 설명을 바탕으로 PRD.md와 TRD.md를 만들어줘
PRD.md
# Product Requirement Document (PRD) - New Headphone Landing Page
## 1. 프로젝트 개요 (Project Overview)
- **프로젝트명**: 신제품 헤드폰 출시를 위한 프로모션 랜딩 페이지
- **목적**: 신제품 헤드폰의 핵심 가치, 디자인, 스펙을 시각적으로 전달하고 소비자의 구매 전환 및 브랜드 인지도를 극대화함.
- **주요 타깃**: 음질과 디자인을 중시하고 최신 테크 기기에 관심이 많은 20~50대 소비자.
## 2. 핵심 기능 및 화면 구조 (Core Features & Structure)
랜딩 페이지는 단일 페이지(Single Page Application) 형태로 구성되며, 사용자는 상단 내비게이션을 통해 각 섹션으로 부드럽게 이동할 수 있어야 함.
### 2.1 상단 헤더 (Header / GNB)
- **로고**: 브랜드 로고 영역 (클릭 시 페이지 최상단으로 이동).
- **메뉴**: `About`, `Product` 2개의 핵심 메뉴로 구성.
- **인터랙션**: 스크롤 시 상단에 고정(Sticky)되어 언제든지 메뉴 이동이 가능해야 함.
### 2.2 About 섹션 (회사 및 브랜드 소개)
- **콘텐츠**: 헤드폰 제조사의 철학, 브랜드 스토리, 제품이 추구하는 혁신적 가치를 전달.
- **시각 요소**: 브랜드 이미지를 각인시킬 수 있는 고화질 시네마틱 배경 및 타이포그래피 활용.
### 2.3 Product 섹션 (제품 설명 및 가격)
- **제품 정보**: 신제품 헤드폰의 명칭, 핵심 요약 설명.
- **주요 스펙**: 액티브 노이즈 캔슬링(ANC), 배터리 수명, 고해상도 사운드 등 핵심 셀링 포인트 노출.
- **가격 및 구매**: 명확한 가격 표시 및 구매 페이지로 연결되는 Call-to-Action(CTA) 버튼 배치.
### 2.4 하단 푸터 (Footer)
- **콘텐츠**: 카피라이트, 이용약관, 개인정보처리방침, 소셜 미디어(SNS) 링크, 회사 기본 정보(주소, 연락처 등) 포함.
## 3. 사용자 경험 (UX) 및 디자인 요구사항
- **반응형 웹 디자인**: 데스크톱, 태블릿, 모바일 등 모든 디바이스 환경에서 레이아웃이 깨지지 않고 최적화되어야 함.
- **부드러운 스크롤 (Smooth Scroll)**: GNB 메뉴 클릭 시 해당 섹션으로 부드럽게 스크롤 이동되어야 함.
- **시각적 몰입감**: 제품의 프리미엄 감성을 살리기 위해 미니멀하면서도 고급스러운 톤앤매너 유지.
TRD.md
# Technical Requirement Document (TRD) - New Headphone Landing Page (Svelte)
## 1. 기술 스택 및 개발 환경 (Tech Stack & Environment)
- **프레임워크**: Svelte (v5.x 최신 안정 버전)
- **빌드 도구**: Vite (빠른 HMR 및 최적화된 번들링 지원)
- **스타일링**: Tailwind CSS (Utility-first 지향 및 반응형 스타일 구현)
- **라우팅**: 단일 페이지 어플리케이션(SPA) 구조로, 별도의 라우터 없이 컴포넌트 아키텍처 및 HTML 앵커 링크 기반 스크롤 내비게이션 활용
- **배포 및 패키지 관리**: npm / pnpm, 정적 호스팅(Vercel, Netlify, GitHub Pages 등)을 통한 배포
## 2. 프로젝트 아키텍처 및 디렉토리 구조 (Directory Structure)
Svelte 단독 환경에서 컴포넌트 기반 아키텍처를 명확하게 나누어 유지보수성을 극대화한 구조입니다.
```text
.
├── public/ # 빌드 시 그대로 복사되는 정적 자산 디렉토리
│ └── favicon.ico
├── src/
│ ├── assets/ # 이미지, 브랜드 로고 등 미디어 리소스
│ │ └── headphone-main.webp
│ ├── components/ # UI 컴포넌트 모음
│ │ ├── Header.svelte # 상단 고정 내비게이션 (About, Product)
│ │ ├── Footer.svelte # 하단 회사 정보 및 카피라이트
│ │ ├── About.svelte # 회사 철학 및 브랜드 소개 섹션
│ │ └── Product.svelte # 헤드폰 특징 정보, 스펙 리스트 및 가격 섹션
│ ├── data/
│ │ └── productData.js # 유지보수를 용이하게 하기 위한 제품 데이터 객체
│ ├── App.svelte # 루트 컴포넌트 (컴포넌트 조립 및 상태 관리)
│ └── main.js # 애플리케이션 진입점 (Entry Point)
├── index.html # 메인 HTML 템플릿
├── tailwind.config.js # Tailwind CSS 설정 파일
├── vite.config.js # Vite 빌드 설정 파일
└── package.json # 의존성 및 스크립트 정의
```
## 3. 핵심 컴포넌트별 기술 명세 (Component Specifications)
### 3.1 `App.svelte` (루트 컴포넌트)
- **기능**: 애플리케이션의 엔트리 포인트로서 상단 헤더, 메인 섹션들, 푸터를 결합하는 오케스트레이터 역할을 수행.
- **구조**:
```svelte
<script>
import Header from './components/Header.svelte';
import About from './components/About.svelte';
import Product from './components/Product.svelte';
import Footer from './components/Footer.svelte';
</script>
<div class="min-h-screen flex flex-col bg-stone-50 text-stone-900 antialiased">
<Header />
<main class="flex-grow">
<About />
<Product />
</main>
<Footer />
</div>
```
### 3.2 `Header.svelte` & `Footer.svelte` (레이아웃 구성)
- **`Header.svelte`**:
- `position: sticky; top: 0;` 속성과 고유의 `z-index`를 적용하여 스크롤 시 화면 상단에 항시 노출되도록 구현.
- `backdrop-blur-md bg-white/70`을 적용하여 시각적 투명 감성 및 프리미엄 무드 확보.
- 내비게이션 메뉴(`About`, `Product`)는 페이지 내 이동을 위해 고유 ID 기반의 앵커 링크(`<a href="#about">`, `<a href="#product">`)로 바인딩.
- **`Footer.svelte`**:
- 기업명, 대표자 정보, 주소, 연락처 등의 정적 텍스트 및 저작권 표시를 구조화하여 화면 최하단에 배치.
### 3.3 콘텐츠 섹션 (`About.svelte`, `Product.svelte`)
- **`About.svelte`**:
- 브랜드 정체성 및 톤앤매너를 시각적으로 전달하는 고화질 백그라운드 레이아웃.
- 헤더 고정형 레이아웃 특성을 고려하여, 앵커 링크 이동 시 상단이 잘리지 않도록 CSS 테일윈드 속성 `scroll-mt-20` (scroll-margin-top)을 필수 부여.
- **`Product.svelte`**:
- 헤드폰의 구체적인 제품 명칭, 상세 설명, 주요 스펙 리스트 및 공식 판매가격을 시각화.
- 데이터의 동적 확장 및 수정을 고려하여 `src/lib/data/productData.js`의 객체 데이터를 바인딩하여 렌더링.
- Svelte 고유의 `{#each features as feature}` 블록 문법을 활용하여 하이라이트 스펙 요소를 효율적으로 매핑.
- 하단에 즉각적인 구매 전환을 위한 뚜렷한 색상의 Call-to-Action(CTA) 버튼 연계.
## 4. 웹 최적화 및 UX 요구사항 (Performance & UX)
- **부드러운 내비게이션 (Smooth Scroll)**:
- 전역 스타일 시트(`index.html` 내 `<style>` 또는 공통 CSS 파일)에 `html { scroll-behavior: smooth; }`를 선언하여 별도의 자바스크립트 스크롤 라이브러리 탑재 없이 네이티브 환경에서 부드러운 화면 이동 보장.
- **번들 최적화 및 프리렌더링**:
- Vite의 빌드 파이프라인을 통하여 미사용 CSS 제거(Purge CSS 내장) 및 자바스크립트 경량 청크 분할을 통한 초기 구동 성능 최적화.
- **미디어 리소스 레이지 로딩 (Lazy Loading)**:
- 대용량 프리미엄 헤드폰 제품 이미지 노출 시, 초기 뷰포트 바깥의 영역은 `loading="lazy"` 속성을 적용하여 초기 로딩(FCP, LCP) 지표 대폭 개선.
- 이미지 포맷은 손실을 최소화하면서 압축률이 높은 `WebP` 혹은 `AVIF` 차세대 포맷 채택 권장.
## 5. 반응형 웹 가이드라인 (Responsive Web Design)
- Tailwind CSS의 반응형 프리셋 그리드 및 미디어 쿼리 속성 활용 (`sm:`, `md:`, `lg:` 접두사 사용).
- **모바일 뷰 (Mobile Layout)**:
- 단일 열(Grid-cols-1) 구조로 세로 정렬 및 터치 타깃 공간 확보를 위한 여백 확대.
- **데스크톱 뷰 (Desktop Layout)**:
- 화면 너비 확보 시 2열 그리드 구조(`lg:grid-cols-2`)로 자동 전환되어 좌측에는 고해상도 제품 이미지, 우측에는 가격 정보와 스펙 리스트 및 CTA 버튼이 배치되는 레이아웃 구현.
2. 안티그래비티에서 바이브코딩하기
PRD와 TRD도 제미나이가 생성해주었습니다.
안티그래비티 IDE로 가서 좌측의 탐색기 창에서 폴더를 하나 만들고(svelte-landingpage), PRD.md와 TRD.md를 복사해둡니다.
그리고 맨 우측의 에이전트 창에 PRD.md와 TRD.md를 참고해서 랜딩페이지를 만들어 달라고 입력을 합니다.
(저는 AI는 Gemini 3.1 Pro를 선택해서 진행했습니다만 Flash를 선택해도 크게 차이는 없습니다.)
※ 저는 안티그래비티에게 작업 전 반드시 작업계획을 세우라는 지시를 안티그래비티의 Rules에 넣어두었습니다.
아래의 지침을 만들어서 Global에 넣어두면 모든 작업에 적용됩니다.
채팅창 우측 상단의 Additional Options > Customization > Rules > Global
Gemini.md
# Antigravity Coding Guidelines
## 1. 작업 전 판단하기
- 구현 전에 요구사항과 목표를 먼저 확인한다.
- 실제 작업 전 반드시 작업계획을 먼저 제안한다. (한글로 보여준다.)
- 불명확한 부분은 추측하지 말고 질문하거나 가정을 명시한다.
- 여러 해석이 가능한 경우 선택한 이유를 간단히 설명한다.
- 더 단순한 해결 방법이 있으면 먼저 제안한다.
---
## 2. 단순한 구현 우선
- 요청받은 범위 안에서만 구현한다.
- 필요하지 않은 기능 추가를 하지 않는다.
- 단일 문제 해결을 위해 과도한 구조 변경이나 추상화를 하지 않는다.
- 코드는 가능한 짧고 명확하게 유지한다.
---
## 3. 기존 코드 존중
기존 코드 수정 시:
- 필요한 부분만 변경한다.
- 관련 없는 리팩터링이나 스타일 변경을 하지 않는다.
- 기존 프로젝트의 코드 스타일을 따른다.
- 내가 변경한 코드 때문에 생긴 불필요한 코드만 정리한다.
---
## 4. 목표와 검증 기준 설정
작업 전에 완료 기준을 정한다.
예:
- 기능 추가 → 동작 확인 방법 정의
- 버그 수정 → 재현 조건 확인 후 수정
- 코드 변경 → 빌드 또는 테스트 확인
완료 전에 반드시 결과를 검증한다.
---
## 5. 오류 분석 원칙
문제가 발생하면:
- 실제 오류 메시지와 로그를 먼저 확인한다.
- 기억에 의존한 해결책을 바로 적용하지 않는다.
- 원인을 확인한 후 최소한의 변경으로 수정한다.
---
## 6. 테스트 및 검증
코드를 변경했다면:
- 가능한 경우 테스트를 실행한다.
- 테스트 환경이 없다면 빌드 또는 실행 확인을 한다.
- 검증 결과를 사용자에게 알려준다.
---
## 7. 새 파일 작성 규칙
새로운 소스 파일을 생성할 때 첫 줄에 파일 역할을 설명하는 한 줄 주석을 작성한다.
예시:
// 사용자 인증 상태를 관리하는 Context Provider
# API 요청을 처리하는 클라이언트 모듈
-- 일별 집계 결과를 저장하는 테이블
설정 파일에는 적용하지 않는다.
---
## 8. 변경 기록 유지
규모가 있는 작업은 간단히 기록한다.
기록 내용:
- 변경 목적
- 주요 결정 사항
- 수정한 파일
- 테스트 결과
불필요한 문서화는 하지 않는다.
---
## 9. 답변 및 작업 방식
- 사용자가 요청한 내용에 집중한다.
- 필요 이상의 기능이나 코드를 추가하지 않는다.
- 작업 과정에서 알게 된 중요한 가정이나 제한사항은 공유한다.
- 완료 후 변경 사항과 검증 결과를 간단히 정리한다.
위의 작업 지침에 따라 안티그래비티는 프롬프트를 입력하면 작업 진행 전에 자신이 어떻게 작업할거라는 implementation_plan을 작성해서 보여주고 승인을 요청합니다. 여기서 수정이 필요하면 수정을 하고 진행하라고 하면 안티그래비티가 코딩을 시작합니다.
※ 제품명이나 가격, 제품 사진 등 상세한 정보는 주지 않았지만 안티그래비티가 이미지도 생성하고 임의의 제품명,가격 등으로 만들겠다고 제안합니다.
3. 작업 완료 확인하기
안티그래비티가 코딩을 마치고 어떻게 하면 테스트할 수 있는지까지 친절하게 안내해줍니다.
여기서도 그냥 채팅창에 브라우저에서 테스트해줘 라고 입력하면 안티그래비티가 내부서버를 실행하고 브라우저까지 띄워서 테스트를 한 뒤 화면까지 캡처해서 테스트 결과물을 보여주기까지 합니다.
이렇게 완성된 랜딩페이지입니다.
그럴싸하게 만들어주었습니다.
※ 상단의 히어로 섹션 배경이 검게 나와서 나중에 수정해 달라고 다시 요청해서 수정했습니다.
AI가 완벽한건 아니죠. (아래는 수정된 웹사이트)
자, 이렇게 코드에디터에서 코딩 한번 하지 않고 에이전트에게 프롬프트를 주는 것만으로 간단한 웹사이트를 하나 만들 수 있었습니다. 다음엔 이것을 내 로컬 컴퓨터에서가 아니라 인터넷에 올려 다른 사람들도 볼 수 있게 하는 배포 과정을 알아보겠습니다.
