로컬 LLM + RAG 기반 AI 채팅봇 만들기 # 32 - SvelteKit 소개 및 환경 설정

로컬 LLM + RAG 기반 AI 채팅봇 만들기

4.1 SvelteKit 소개 및 환경 설정

이제 백엔드 구현을 완료했으므로,
프론트엔드에서 사용자가 직접 AI 챗봇과 상호작용할 수 있도록 UI를 구축해야 합니다.
이번 단계에서는 SvelteKit을 활용한 프론트엔드 환경 설정을 진행하겠습니다.

---

1) SvelteKit이란?

✅ SvelteKit 개요

SvelteKit은 Svelte 기반의 풀스택 프레임워크로,
빠른 성능과 간단한 코드 구조를 제공하여 인터랙티브 웹 애플리케이션을 쉽게 개발할 수 있도록 지원합니다.

✅ 왜 SvelteKit을 선택했는가?

• 컴파일 기반 프레임워크 → 실행 속도가 빠르고, 성능 최적화가 쉬움
• 반응형(Reactivity) 지원 → 상태 관리가 간편하며, 사용하기 쉬움
• SSR(Server-Side Rendering) 및 CSR(Client-Side Rendering) 지원
• SvelteKit은 Ktor 백엔드와 API 연동이 용이함

---

2) SvelteKit 설치 및 프로젝트 초기화

✅ ① Node.js 설치 확인

SvelteKit을 사용하려면 Node.js가 필요합니다.
다음 명령어를 입력하여 Node.js가 설치되었는지 확인합니다.

node -v
npm -v

📌 버전 예시

v18.16.0
9.5.1

---

✅ ② SvelteKit 프로젝트 생성

터미널에서 다음 명령어를 실행하여 SvelteKit 프로젝트를 생성합니다.

npm create svelte@latest svelte-chatbot

이후 나타나는 프롬프트에서 다음과 같이 선택합니다.

설정	선택 값
프로젝트 타입	Skeleton project
TypeScript 사용 여부	Yes
ESLint 설정 여부	Yes
Prettier 설정 여부	Yes
Playwright 테스트 추가	No

설정이 완료되면 프로젝트 디렉터리로 이동합니다.

cd svelte-chatbot

---

✅ ③ 프로젝트 패키지 설치

SvelteKit 프로젝트에 필요한 패키지를 설치합니다.

npm install

설치가 완료되면 개발 서버를 실행하여 프로젝트가 정상적으로 동작하는지 확인합니다.

npm run dev

📌 정상 실행 시 출력 예시

Local: http://localhost:5173
Network: use --host to expose

웹 브라우저에서 http://localhost:5173에 접속하면 Svelte 기본 페이지가 표시됩니다.

---

3) Tailwind CSS 적용

SvelteKit의 UI를 손쉽게 구성하기 위해 Tailwind CSS를 적용합니다.

✅ ① Tailwind CSS 패키지 설치

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

✅ ② Tailwind CSS 설정 파일 수정 (tailwind.config.cjs)

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{html,js,svelte,ts}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

✅ ③ 글로벌 스타일 파일 수정 (src/app.postcss)

@tailwind base;
@tailwind components;
@tailwind utilities;

---

4) API 연동을 위한 환경 변수 설정

✅ ① .env 파일 생성

프로젝트 루트 디렉토리에 .env 파일을 만들고, Ktor 백엔드 API URL을 추가합니다.

touch .env

VITE_API_BASE_URL=http://localhost:8080

✅ ② 환경 변수 불러오기 (src/lib/config.ts)

export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;

---

5) 프로젝트 기본 구조 정리

📌 디렉토리 구조

svelte-chatbot/
 ├── src/
 │   ├── lib/         # API 및 설정 파일
 │   ├── routes/      # 페이지 컴포넌트
 │   ├── components/  # 재사용 가능한 UI 컴포넌트
 │   ├── styles/      # 스타일 파일
 │   ├── app.html     # 기본 HTML 템플릿
 │   ├── app.postcss  # 글로벌 스타일 (Tailwind)
 ├── .env            # 환경 변수 파일
 ├── package.json    # 프로젝트 설정
 ├── tailwind.config.cjs # Tailwind 설정
 └── vite.config.js  # Vite 설정

---

6) SvelteKit 설치 및 초기 설정 요약

단계	실행 명령어
SvelteKit 프로젝트 생성	npm create svelte@latest svelte-chatbot
패키지 설치	npm install
개발 서버 실행	npm run dev
Tailwind CSS 설치	npm install -D tailwindcss postcss autoprefixer
환경 변수 설정	.env 파일 추가

---

7) 다음 단계

이제 SvelteKit을 설치하고, Tailwind CSS를 적용하여 UI 개발을 준비했습니다.
다음으로 4.2 챗봇 UI 설계 및 Tailwind CSS 적용을 진행하여
사용자가 AI 챗봇과 대화할 수 있는 채팅 인터페이스를 구성하겠습니다! 🚀