SvelteKit × Cloudflare Workers

정적의 속도와
동적의 확장성을
하나의 웹사이트에.

콘텐츠 페이지는 빠르게, 데이터가 필요한 기능은 유연하게. SvelteKit과 Cloudflare 기반으로 바로 확장할 수 있는 홈페이지 템플릿입니다.

반응형 기본 제공 접근 가능한 UI D1 마이그레이션
web-template.dev

배포

운영 준비 완료

정상

런타임

Workers

데이터베이스

D1

UI

shadcn

정적 페이지

빌드 시 미리 생성

빠름

동적 경로

Workers와 D1으로 실행

준비됨

마지막 배포가 성공적으로 완료되었습니다

Svelte 5

현대적인 프론트엔드

Workers

엣지 런타임

D1

서버리스 SQL

Drizzle

타입 안전 스키마

핵심 기능

처음부터 운영을 생각한 기본 구성

화면을 만드는 순간부터 데이터 변경과 배포까지, 실제 홈페이지 운영에 필요한 흐름을 담았습니다.

빠른 정적 페이지

소개와 콘텐츠 페이지는 미리 생성해 빠르게 전달하고 검색엔진에 최적화합니다.

필요한 곳만 동적으로

폼, API, 사용자별 데이터처럼 서버가 필요한 경로만 Workers에서 처리합니다.

D1 데이터베이스

Drizzle 스키마와 검토 가능한 SQL 마이그레이션으로 로컬과 운영 환경을 관리합니다.

일관된 UI 시스템

shadcn-svelte 컴포넌트와 공통 디자인 토큰으로 화면을 빠르고 일관되게 확장합니다.

Cloudflare 배포

SvelteKit 애플리케이션과 정적 자산을 하나의 Worker로 간결하게 배포합니다.

운영을 고려한 기본값

타입 검사, 테스트, 빌드와 명시적인 마이그레이션 단계를 기본 흐름으로 제공합니다.

아키텍처

페이지의 성격에 맞는 실행 방식

모든 페이지를 같은 방식으로 처리하지 않습니다. 변하지 않는 콘텐츠는 미리 만들고, 데이터가 필요한 요청만 서버에서 처리합니다.

콘텐츠 중심 경로

빌드 시 생성해 빠르고 안정적으로 전달

데이터 중심 경로

Workers에서 실행하고 D1에 안전하게 접근

요청 흐름

하나의 애플리케이션, 두 가지 전달 방식

정적 콘텐츠

서비스 · 포트폴리오 · 소개

미리 생성

동적 데이터

폼 · API · 데이터 조회

Workers + D1

Cloudflare 글로벌 네트워크

작업 흐름

세 단계로 완성하는 홈페이지

템플릿의 구조는 유지하고, 브랜드와 필요한 기능에 집중하세요.

01

콘텐츠를 교체합니다

브랜드 문구, 색상과 필요한 섹션을 프로젝트에 맞게 수정합니다.

02

기능을 연결합니다

필요한 동적 경로와 D1 스키마를 추가하고 로컬에서 검증합니다.

03

안전하게 배포합니다

마이그레이션을 먼저 적용한 뒤 Worker와 정적 자산을 배포합니다.

제작 준비 완료

좋은 기본 구조에서 시작하세요.

디자인 시스템, 데이터베이스와 배포 흐름을 갖춘 템플릿으로 다음 홈페이지를 더 빠르게 완성할 수 있습니다.

프로젝트 시작
web/template

SvelteKit과 Cloudflare로 만든 재사용 가능한 홈페이지 템플릿