Svelte가 다시 뜨는 이유: 컴파일러가 React 피로감을 파고든다

86,000개 넘는 스타를 보유한 sveltejs/svelte가 오늘 하루 별 34개를 추가하며 GitHub 트렌딩에 다시 올랐다. 새로 나온 라이브러리도 아니고, 대형 스폰서 발표도 없었다. 그런데도 개발자들이 지금 Svelte를 찾는다. 이유가 있다.

이게 뭔가

웹 개발 프레임워크를 처음 접하는 사람에게 비유하자면 이렇다. React나 Vue는 통역사를 항상 데리고 다니는 방식이다. 브라우저가 페이지를 열 때마다 런타임(통역사)이 함께 로드되어 "지금 화면을 어떻게 바꿀까"를 실시간으로 계산한다.

Svelte는 다르다. 공식 문서가 선언하듯 "declarative components를 효율적인 JavaScript로 변환하는 컴파일러"다. 개발 단계에서 컴파일러가 이 계산을 미리 다 처리해버린다. 브라우저에 도달하는 건 이미 최적화된 순수 JavaScript — 통역사가 필요 없는 언어로 이미 번역된 문서다. 런타임 오버헤드가 없고 번들 크기가 작다.

왜 지금 뜨는가

두 가지 요인이 맞물렸다.

첫째, Svelte 5의 완성도다. 2024년 10월 출시된 Svelte 5는 "Runes"라는 새 반응성 시스템을 도입했다. $state, $derived, $effect — 달러 기호 접두사를 붙인 명시적 선언형 API다. 기존 Svelte의 "마법 같은 암묵적 반응성"이 초심자를 혼란스럽게 했다면, Runes는 그 마법을 투명하게 만들었다. 커뮤니티 반응은 긍정적이었고, 이후 꾸준히 레퍼런스가 쌓이고 있다.

둘째, React 생태계의 피로감이다. React 19와 Server Components 도입 이후 복잡성이 급격히 올라갔다. 작은 팀이 따라가기에 버거운 패러다임 변화, 늘어나는 보일러플레이트. Svelte 홈페이지의 슬로건 "web development for the rest of us"는 이 맥락에서 읽힌다 — 복잡한 추상화 없이 웹을 만들고 싶은 나머지 사람들을 위한 선택지.

핵심 기능

• 가상 DOM 없음: DOM을 외과적으로 직접 업데이트, 불필요한 재렌더링 없음
• Runes (Svelte 5): $state(상태), $derived(파생값), $effect(사이드이펙트)로 반응성을 명시적으로 제어
• 작은 번들: 런타임을 배포하지 않아 초기 로딩 속도 우위
• 내장 트랜지션·애니메이션: transition:fade, animate:flip 등을 서드파티 없이 사용 가능
• SvelteKit: Next.js에 대응하는 풀스택 프레임워크 — SSR, SSG, API 라우트 지원

누구에게 쓸모 있나

• React에 지친 프론트엔드 개발자: 적은 보일러플레이트, HTML/CSS/JS에 가까운 직관적 문법
• 성능 민감 프로젝트: 번들 크기와 런타임 비용이 중요한 랜딩 페이지, 임베디드 위젯
• 소규모 풀스택 팀: SvelteKit 하나로 프론트·백엔드를 커버하고 싶은 팀
• 웹 개발 입문자: 러닝 커브가 React보다 낮다는 평가가 지배적

시작하기

공식 레포지토리와 Svelte 공식 문서를 기준으로 한 설치 방법이다.

SvelteKit 포함 전체 프로젝트 (권장):

npx sv create my-app
cd my-app
npm install
npm run dev

Vite + Svelte만 (SvelteKit 없이):

npm create vite@latest my-app -- --template svelte
cd my-app
npm install
npm run dev

사용 예시

1. 반응형 카운터 — $state로 상태 선언, 클릭 시 DOM이 즉시 갱신된다

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  클릭 횟수: {count}
</button>

2. 파생 상태 — $derived로 count가 바뀔 때마다 doubled가 자동 재계산된다

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
</script>

<p>{count}의 두 배는 {doubled}</p>
<button onclick={() => count++}>+1</button>

3. 내장 트랜지션 — 외부 라이브러리 없이 fade 효과를 적용한다

<script>
  import { fade } from 'svelte/transition';
  let visible = $state(true);
</script>

<button onclick={() => (visible = !visible)}>토글</button>
{#if visible}
  <p transition:fade>나타났다 사라진다</p>
{/if}

한계·주의

• 생태계 규모: React 대비 서드파티 UI 킷·라이브러리가 적다. 특수 기능이 필요한 엔터프라이즈 프로젝트는 생태계 확인 필수.
• Svelte 4→5 마이그레이션 비용: Runes 패턴은 기존 코드와 공존 가능하지만, 스타일이 크게 달라 기존 프로젝트 전환에 리팩터링 비용이 발생한다.
• 인재 풀: 채용 시장에서 Svelte 경력자는 React 대비 여전히 적다. 팀 확장을 고려한다면 현실적인 제약이다.
• Vercel 연관성: SvelteKit의 핵심 기여자 Rich Harris는 Vercel 소속이다. 오픈소스 거버넌스와 특정 플랫폼 최적화 편향 가능성을 인지할 것.

단순함을 선택하는 데도 근거가 필요하다. Svelte는 그 근거를 착실히 쌓아가고 있다.