#2 초보를 위한 바이브코딩으로 랜딩페이지 만들고 배포하기 (스벨트킷)

2026.07.08 - [Svelte_SvelteKit] - #1 초보를 위한 바이브코딩으로 랜딩페이지 만들기 (스벨트)

#1 초보를 위한 바이브코딩으로 랜딩페이지 만들기 (스벨트)

 

앞서 순수 스벨트로 랜딩페이지를 만들어봤습니다.

이번엔 스벨트의 프레임워크인 스벨트킷으로 똑같이 만들어 보고 차이점을 알아보겠습니다.

 

https://youtu.be/O3lT3cHZCCw

 

---

 

1. PRD, TRD 만들기

 

PRD는 지난 편과 동일합니다.

다만 TRD는 이번에는 스벨트킷으로 만들거라 제미나이에게 수정을 요청했습니다.

 

TRD.md

# Technical Requirement Document (TRD) - New Headphone Landing Page

## 1. 기술 스택 및 환경 설정 (Tech Stack & Environment)
- **프레임워크**: SvelteKit (v2.x 이상 최신 안정 버전)
- **스타일링**: Tailwind CSS v4 (또는 v3 최신 버전) - Utility-first CSS 프레임워크 활용
- **빌드 도구**: Vite (SvelteKit 기본 내장)
- **배포 및 호스팅 플랫폼**: Vercel / Netlify / Cloudflare Pages (정적 호스팅 환경에 최적화)

## 2. 프로젝트 아키텍처 및 디렉토리 구조 (Directory Structure)
SvelteKit의 파일 기반 라우팅과 컴포넌트 아키텍처를 기반으로 확장 가능하고 유지보수가 용이하도록 아래와 같이 구조화합니다.

```text
src/
├── lib/
│   ├── assets/               # 이미지, 로고, 아이콘 등 정적 미디어 리소스
│   ├── components/           # 재사용 가능한 UI 컴포넌트
│   │   ├── Header.svelte     # 상단 GNB (로고, About/Product 메뉴)
│   │   ├── Footer.svelte     # 하단 푸터 (기업 정보 및 소셜 링크)
│   │   ├── About.svelte      # 회사/브랜드 스토리 소개 섹션
│   │   └── Product.svelte    # 헤드폰 제품 상세 정보, 스펙 및 가격 섹션
│   └── data/
│       └── productData.js    # 제품 스펙, 가격 등 콘텐츠 관리를 위한 정적 데이터 객체
└── routes/
    ├── +layout.svelte        # 전역 레이아웃 (Header와 Footer 배치)
    ├── +page.js              # SSG(정적 페이지 생성) 설정을 위한 스크립트
    └── +page.svelte          # 각 섹션 컴포넌트를 조립하여 렌더링하는 메인 엔트리
```

## 3. 핵심 컴포넌트별 세부 기술 명세 (Component Specifications)

### 3.1 전역 레이아웃 및 내비게이션
- **`+layout.svelte`**
  - 서비스 전체의 뼈대를 담당하며, 페이지 전환 시에도 유지되는 구조 정의.
  - 상단에 `<Header/>` 배치, 중앙에 `<slot />`을 통한 메인 콘텐츠 로드, 하단에 `<Footer/>` 배치.
- **`Header.svelte`**
  - **스타일링**: `position: sticky; top: 0; z-index: 50;`을 적용하여 스크롤 시 상단 고정. 반투명 배경(`backdrop-blur-md bg-white/80`)을 사용하여 고급스러운 UI 연출.
  - **라우팅/이동**: 단일 페이지 내 이동을 위해 HTML 앵커 태그(`href="#about"`, `href="#product"`) 사용.

### 3.2 메인 콘텐츠 섹션
- **`About.svelte`**
  - `<section id="about">` 컨테이너로 정의.
  - **이동 보정**: 상단 헤더가 고정되어 있어 앵커 스크롤 시 콘텐츠 상단이 헤더에 가려지는 문제를 방지하기 위해 CSS `scroll-margin-top: var(--header-height);` 속성(예: `scroll-mt-20`) 필수로 적용.
- **`Product.svelte`**
  - `<section id="product">` 컨테이너로 정의.
  - **데이터 바인딩**: 외부 데이터 파일(`src/lib/data/productData.js`)에서 제품명, 요약 설명, 가격(문자열 포맷), 스펙 리스트 배열을 임포트하여 구조화.
  - **렌더링**: Svelte의 `{#each}` 블록을 사용하여 스펙 요소를 동적으로 반복 출력. 구매 전환 유도를 위한 Call-to-Action(CTA) 버튼 요소 포함.

## 4. 웹 최적화 및 사용자 경험 (Performance & UX)
- **정적 웹사이트 생성 (SSG 최적화)**
  - 동적 서버 처리가 필요 없는 정적 랜딩 페이지이므로, `src/routes/+page.js` 파일 내에 `export const prerender = true;`를 명시하여 빌드 타임에 미리 완전한 HTML을 생성하도록 처리. (초기 로딩 속도 향상 및 SEO 최적화)
- **시각적 애니메이션 및 부드러운 스크롤**
  - 자바스크립트 기반 스크롤 이벤트 오버헤드를 방지하기 위해 전역 CSS 스타일(`src/app.css`)의 `html` 태그에 `scroll-behavior: smooth;`를 설정하여 앵커 메뉴 클릭 시 부드러운 이동 구현.
- **이미지 최적화**
  - 고해상도 헤드폰 이미지로 인한 로딩 지연을 막기 위해 차세대 포맷(`WebP`, `AVIF`)을 기본 적용.
  - 스크롤 시 뷰포트에 도달할 때 로드되도록 대용량 미디어 요소에 `loading="lazy"` 속성 부여.

## 5. 반응형 레이아웃 대응 (Responsive Design)
- Tailwind CSS의 반응형 중단점(Breakpoints)인 `sm(640px)`, `md(768px)`, `lg(1024px)`를 사용하여 모바일 우선(Mobile-first) 마크업 적용.
- **Header**: 모바일 환경에서는 햄버거 메뉴 레이아웃으로 전환되거나 간소화된 텍스트 링크 형태로 대응.
- **Product 섹션**: 모바일 기기에서는 단일 열(Grid-cols-1)로 세로 배치, 데스크톱 기기(lg 이상)에서는 이미지와 제품 상세 정보가 좌우로 나뉘는 2열(Grid-cols-2) 구조로 화면 크기에 맞게 자동 전환되도록 구현.

 

스벨트와는 폴더 구성이 조금 다른 것을 알 수 있습니다.

 

 

2. 안티그래비티에 요청하기

 

이번에는 새롭게 sveltekit-landingpage 라는 폴더를 만들고 앞서 작성한 PRD.md와 TRD.md를 복사해 넣어두고 안티그래비티에게 두 파일을 참고해서 랜딩페이지를 만들라고 요청합니다.

이번에도 안티그래비티가 어떻게 만들겠다는 implementation_plan을 먼저 작성해서 보여주고 사용자의 승인을 요청합니다.

 

implementation_plan.md

# 헤드폰 랜딩 페이지 구현 계획 (Implementation Plan)

제공된 PRD와 TRD 문서를 바탕으로 SvelteKit과 Tailwind CSS를 사용하여 반응형 단일 랜딩 페이지를 구축하기 위한 기술적인 작업 단계를 정리한 계획입니다.

## 사용자 검토 필요 (User Review Required)

> [!WARNING]
> 프로젝트 셋업 위치를 확인해주세요. 프로젝트는 현재 디렉토리(`c:\Users\ethan\Documents\sveltekit-landingpage`)에 직접 초기화되며, 이곳에 `package.json`과 `src` 폴더가 생성됩니다. 만약 새로운 하위 폴더에 생성하기를 원하신다면 말씀해주세요.

## 확인 질문 (Open Questions)

> [!IMPORTANT]
> 1. **이미지/에셋 리소스**: 제품 이미지나 배경 이미지로 사용할 구체적인 에셋이 준비되어 있으신가요? 아직 없다면, 고화질 시네마틱 배경 및 제품 이미지로 사용할 수 있는 무료 이미지(예: Unsplash)의 URL을 임시로 적용하겠습니다.
> 2. **Tailwind 버전**: 현재 SvelteKit의 기본 생태계 도구들과의 호환성을 고려했을 때 Tailwind CSS v3 버전이 가장 안정적입니다. v3 버전으로 셋업을 진행해도 괜찮으실까요?

## 제안된 변경 사항 (Proposed Changes)

### 1. 프로젝트 초기화 및 환경 설정

SvelteKit 프로젝트를 초기화하고 Tailwind CSS를 설치합니다.

#### [NEW] `package.json`, `svelte.config.js`, `tailwind.config.js`, `postcss.config.js`
Tailwind CSS와 SvelteKit 빌드를 지원하기 위한 환경 설정 파일들이 생성됩니다.

#### [NEW] `src/app.css`
글로벌 CSS 파일입니다. Tailwind 디렉티브(directives)와 부드러운 스크롤(smooth scrolling) 규칙을 포함합니다:
```css
html {
  scroll-behavior: smooth;
}
```

### 2. 레이아웃 및 라우팅 설정

#### [NEW] `src/routes/+layout.svelte`
`app.css`를 임포트하고 `<Header>`, `<slot />`, `<Footer>`를 포함하는 전역 레이아웃 컴포넌트입니다.

#### [NEW] `src/routes/+page.js`
빠른 성능과 SEO 최적화를 위해 SSG(Static Site Generation, 정적 페이지 생성)를 활성화합니다.
```javascript
export const prerender = true;
```

#### [NEW] `src/routes/+page.svelte`
메인 페이지 컴포넌트로, `<About>` 섹션과 `<Product>` 섹션을 조립하여 화면에 렌더링합니다.

### 3. 정적 데이터 분리

#### [NEW] `src/lib/data/productData.js`
`Product.svelte` 컴포넌트에서 사용될 제품 상세 정보(이름, 요약, 가격, 기능 리스트 등)를 담은 정적 데이터 파일입니다.

### 4. UI 컴포넌트 개발

#### [NEW] `src/lib/components/Header.svelte`
상단에 고정되는 네비게이션 바(`position: sticky; top: 0`)입니다. 고급스러운 느낌을 주기 위해 반투명 블러 효과(`backdrop-blur`)를 적용하고 `#about`과 `#product` 섹션으로 부드럽게 이동하는 링크를 포함합니다.

#### [NEW] `src/lib/components/Footer.svelte`
페이지 하단의 푸터 영역으로, 저작권, 약관, 회사 정보 등을 표시합니다.

#### [NEW] `src/lib/components/About.svelte`
시네마틱 배경 이미지와 브랜드 스토리를 전달하는 히어로(Hero)/About 섹션입니다. 상단 고정 헤더에 의해 컨텐츠가 가려지지 않도록 `scroll-mt-20`과 같은 마진을 적용합니다.

#### [NEW] `src/lib/components/Product.svelte`
`productData.js`의 데이터를 기반으로 제품 기능과 스펙을 보여주는 섹션입니다. 모바일 환경에서는 1열(`grid-cols-1`), 데스크톱 환경에서는 2열(`lg:grid-cols-2`)로 배치되는 반응형 레이아웃을 가지며, 눈에 띄는 구매 유도(CTA) 버튼을 배치합니다.

## 검증 계획 (Verification Plan)

### 자동화 테스트 (Automated Tests)
- `npm run build` 명령어를 통해 SvelteKit 애플리케이션이 SSG 모드에서 정상적으로 빌드되는지 확인합니다.
- `npm run dev` 명령어를 통해 실행 시 에러가 없는지 확인합니다.

### 수동 검증 (Manual Verification)
- 헤더의 메뉴 링크를 클릭했을 때 각 섹션으로 부드럽게 스크롤되는지 테스트합니다.
- 상단 고정 헤더가 각 섹션의 콘텐츠를 가리지 않는지 여백(`scroll-margin-top`)을 확인합니다.
- 데스크톱, 태블릿, 모바일 등 다양한 화면 크기에서 반응형 레이아웃이 올바르게 전환되는지 검증합니다.

※ 위 마크다운 파일을 포맷된 형태로 좀 편하게 보려면 안티그래비티에 확장프로그램을 설치해도 되지만  https://markdownlivepreview.com/ 을 이용하면 편리합니다.

 

작업계획대로 진행하라고 승인을 내립니다.

 

 

3. 최종 결과물 확인하고 수정하기

 

이번엔 히어로섹션에서 이미지도 문제없이 보이지만 내용이 영어로 나왔습니다.

그리고 스벨트킷의 라우팅을 경험해 볼 수 없는 싱글 페이지 랜딩페이지로 나왔습니다.

역시나 TRD에서 좀더 확실하게 명시를 해줘야 AI도 실수를 하지 않습니다.

 

 

 

---

 

본문을 한글로 수정해 달라고 하자 안티그래비티가 소스코드를 수정했고 한글로 잘 나옵니다.

그렇지만 전체적인 사이트 분위기는 스벨트로 만들었을 때와 비슷해졌습니다.

 

 

---

 

다음으로 스벨트킷 프레임워크의 페이지 라우팅 기능을 알고 싶기 때문에 별도의 about, product 페이지를 만들어달라고 하자, 3가지 제안을 해옵니다. A로 진행하기로 합니다.

 

 

이렇게 하니 routes 폴더 밑에 about과 product 폴더를 새로 만들고 그 안에 +page.svelte 파일도 각각 생성했습니다.

지금은 소개 메뉴를 누르면 그냥 메인 페이지에 있는 히어로 섹션만 보여주는 페이지가 나와버립니다.

좀더 그럴싸하게 만들기 위해 소개 페이지에는 임의의 회사 소개를 하도록 수정 요청합니다.

이에 더해 제품 페이지에서도 제품의 스펙을 좀더 자세하게 보여주도록 수정합니다.

 

---

아래는 각각 메인과 소개, 제품 페이지입니다.

상단 메뉴를 클릭해보면 웹페이지 전체를 불러오는 것이 아니라 헤더와 푸터는 그대로 있고 메인 내용만 레고블록처럼 교체가 되어서 깜빡임없이 빠르게 보여주는 것을 알 수 있습니다.

 

 

4. 깃허브에 올리기

 

CI/CD를 위해 깃허브에 새로운 리포지토리(sveltekit-landingpage)를 만들고 동기화시킵니다.

 

 

새 리포지토리를 만들면 다음과 같은 화면이 나오는데 안티그래비티에게 동기화하라고 시킬 수도 있고, 직접 터미널을 열어서 하단의 git 3줄을 실행해도 됩니다.

 

 

 

 

---

 

5. Vercel에 배포하기

 

 

Vercel 사이트의 대시보드에서 Add New를 눌러 깃허브에 있는 sveltekit-landingpage를 import 합니다.

 

 

 

다음 페이지에서 Deploy를 눌러 빌드합니다.

 

 

 

최종적으로 빌드와 배포가 끝났습니다.

 

 

이제 사이트에 방문해 보면 제대로 랜딩페이지를 볼 수 있습니다.

 

https://sveltekit-landingpage.vercel.app/

Aura Pro - 궁극의 청취 경험