#2-1 초보를 위한 바이브코딩으로 만든 랜딩페이지 분석하기

2026.07.08 - [분류 전체보기] - #2 초보를 위한 바이브코딩으로 랜딩페이지 만들고 배포하기 (스벨트킷)

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

 

위에서 스벨트킷으로 만든 프로젝트의 폴더 구조를 한번 살펴보고 작동은 어떻게 하는 것인지 세부적으로 살펴보겠습니다.

 

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

Aura Pro - 궁극의 청취 경험

 

---

Aura Pro 프로젝트 구조 및 작동 원리 안내

안녕하세요! 이 문서는 코딩이나 SvelteKit 프레임워크에 익숙하지 않은 초보자분들도 Aura Pro 랜딩 페이지가 어떻게 구성되어 있고, 어떤 원리로 화면이 그려지는지 쉽게 이해할 수 있도록 돕기 위해 작성되었습니다.

---

📂 1. 프로젝트 폴더 구조 한눈에 보기

우리 프로젝트의 핵심 폴더인 src 내부의 구조는 다음과 같습니다.

sveltekit-landingpage/
├── src/
│   ├── app.html              # 웹사이트의 가장 기본이 되는 HTML 뼈대 파일
│   ├── app.css               # 웹사이트 전체의 디자인(Tailwind CSS) 설정 파일
│   │
│   ├── lib/                  # 부품(컴포넌트)과 데이터 보관소
│   │   ├── components/       # 화면을 조립하는 레고 블록들
│   │   │   ├── Header.svelte # 상단 메뉴바
│   │   │   ├── Footer.svelte # 하단 정보란
│   │   │   ├── About.svelte  # 메인 화면의 회사 소개 블록
│   │   │   └── Product.svelte# 제품 정보 블록
│   │   └── data/             # 텍스트, 스펙 등 데이터 보관소
│   │       └── productData.js# 제품 스펙, 가격 등 정보
│   │
│   └── routes/               # 웹사이트의 주소(URL)를 결정하는 곳
│       ├── +layout.svelte    # 모든 페이지에 공통으로 들어가는 도화지 (헤더/푸터)
│       ├── +page.svelte      # 기본 메인 페이지 (http://.../)
│       ├── about/            # 소개 페이지 (http://.../about)
│       │   └── +page.svelte  # 소개 페이지의 화면 내용
│       └── product/          # 제품 페이지 (http://.../product)
│           └── +page.svelte  # 제품 페이지의 화면 내용

---

⚙️ 2. 핵심 작동 원리 (쉽게 이해하기)

SvelteKit은 규칙이 아주 직관적입니다. 크게 3가지 역할로 나누어 생각하면 쉽습니다.

① 주소창을 담당하는 routes/ (라우팅)

SvelteKit에서는 폴더 이름이 곧 웹사이트의 인터넷 주소가 됩니다.

• 폴더 안에 +page.svelte 라는 특수한 이름의 파일을 만들면 화면에 짠! 하고 나타납니다.
• routes/+page.svelte ➔ 웹사이트에 처음 접속했을 때 보이는 메인 홈 페이지입니다.
• routes/about/+page.svelte ➔ 주소창에 /about을 쳤을 때 보이는 소개 페이지입니다.
• routes/product/+page.svelte ➔ 주소창에 /product를 쳤을 때 보이는 제품 페이지입니다.

② 공통 테두리를 그려주는 +layout.svelte

만약 페이지를 이동할 때마다 위쪽 메뉴바(Header)와 아래쪽 꼬리말(Footer)을 매번 다시 만들어야 한다면 무척 번거롭겠죠?
routes/+layout.svelte 파일은 모든 페이지에 공통으로 씌워주는 투명한 액자 같은 역할을 합니다.
이 파일 안에서 위에는 Header를, 아래에는 Footer를 고정해두고, 중간 영역(새로운 Svelte 5에서는 {@render children()} 구문)에 각 페이지(+page.svelte)의 내용물만 쏙쏙 갈아 끼워주는 원리입니다.

③ 레고 블록과 재료 창고 lib/ 폴더

페이지 안에 들어갈 내용물은 src/lib 폴더에 잘 정리해 둡니다.

• components/ (레고 블록): 화면의 특정 부분(예: 상단바, 제품 사진 영역)을 독립적인 블록(*.svelte 파일)으로 만들어 둡니다. 이렇게 하면 메인 페이지에서도 꺼내 쓰고, 개별 상세 페이지에서도 똑같은 블록을 그대로 재사용할 수 있습니다.
• data/productData.js (정보 창고): 제품의 가격, 상세 스펙, 이미지 주소 같은 글자 정보들을 보관합니다.
•  

💡 잠깐! 화면과 데이터를 따로 분리해서 관리하는 이유는 무엇일까요?

• • 유지보수의 편리함: 화면을 그리는 복잡한 코드(Svelte) 속에서 글자를 찾을 필요 없이, 데이터 파일만 열어서 가격이나 스펙을 아주 쉽게 수정할 수 있습니다.
  • 높은 재사용성: 똑같은 제품 정보가 여러 페이지(메인 화면, 장바구니, 상세 페이지 등)에 필요할 때, 일일이 다시 적지 않고 이 파일 하나만 불러와서 여러 번 재사용할 수 있습니다.
  • 확장성 (서버 연동 대비): 나중에 실제 상용 웹사이트처럼 데이터베이스(서버)에서 실시간으로 상품 정보를 받아오게 확장하더라도, 뼈대 코드를 고칠 필요 없이 부드럽게 연결할 수 있습니다.

---

🔄 3. 전체 작동 흐름 요약 (예시)

1. 사용자가 브라우저에서 상단 메뉴의 '제품' 버튼을 클릭하여 /product 주소로 이동합니다.
2. SvelteKit 프레임워크는 똑똑하게 routes/product/+page.svelte 파일을 찾아냅니다.
3. 이 파일은 공통 뼈대인 +layout.svelte (헤더와 푸터가 있는 곳) 중간 영역에 쏙 들어갑니다.
4. 페이지 안에서는 lib/components/Product.svelte 라는 저장된 레고 블록을 불러와 화면에 그립니다.
5. 이때, lib/data/productData.js 창고에서 최신 제품 스펙 데이터를 쫙 가져와서 블록 안의 글자들을 예쁘게 채워 넣습니다.
6. 헤더, 푸터, 그리고 최신 데이터가 반영된 제품 정보가 하나로 합쳐진 예쁜 웹페이지가 사용자 눈앞에 보여집니다! 🚀

---

🚀 4. 빌드 후에는 어떻게 변할까? (배포 원리)

우리가 지금까지 본 .svelte 파일들은 오직 '개발자들의 작업 편의'를 위한 파일들입니다. 실제 웹 브라우저는 이 파일을 이해하지 못하므로, 세상에 웹사이트를 공개(배포)하려면 번역 과정인 빌드(npm run build)를 거쳐야 합니다.

빌드 명령어를 실행하면 SvelteKit의 똑똑한 컴파일러가 마법을 부립니다:

1. 결과물 폴더 탄생: 개발할 때 쓰던 복잡한 폴더 구조(src/, lib/)는 모두 사라지고, 실제 서버에 올리기 위한 최종 결과물만 담긴 build (또는 Vercel 배포 시 .vercel) 폴더가 새로 만들어집니다.
2. 주소가 진짜 파일로 변신: routes/ 아래에 잡았던 주소들이 브라우저가 읽을 수 있는 진짜 HTML 파일(index.html, about.html, product.html)로 구워집니다.
3. 레고 블록의 결합(번들링): 여기저기 흩어져 있던 퍼즐 조각(Header.svelte, Product.svelte, 데이터 파일)들이 단 하나의 완성된 HTML과 최적화된 JavaScript 파일로 완벽하게 하나로 합쳐집니다. 배포 후에는 독립된 컴포넌트 파일이 존재하지 않습니다.
4. 압축과 최적화: 파일명들이 용량을 줄이고 로딩 속도를 극대화하기 위해 빈칸이 모두 삭제되고 app.a8f9b2.css 처럼 무작위 해시 이름이 붙은 채로 저장됩니다. 이렇게 하면 브라우저가 파일을 캐시하여 훨씬 빠르게 페이지를 띄울 수 있습니다.

💡 한 줄 요약:

조립하기 쉽게 나누어 두었던 레고 블록(.svelte)들이, 브라우저가 가장 빠르고 쉽게 읽을 수 있는 단단하고 얇은 단일 플라스틱 판(HTML/CSS/JS)으로 녹아서 하나로 합쳐진다고 생각하시면 됩니다!