React 코드에 지쳤나요? Svelte 5로 코드량은 절반, 성능은 두 배로(완전 튜토리얼)

왜 또 새로운 프레임워크를 배우기 시작했을까

Svelte 공식 문서를 열었을 때만 해도 내키지 않았습니다. 몇 년마다 새로운 프레임워크가 등장해 “이번에는 다르다”고 말하지만, 막상 보면 본질은 비슷한 경우가 많았습니다. React 프로젝트도 잘 돌아가는데 굳이 또 고생할 이유가 있을까요?

그런데 첫 번째 코드 예제를 보고 멈칫했습니다. 카운터 컴포넌트를 만들 때 React에서는 useState, setCount가 필요하고 state를 직접 수정하면 안 된다는 규칙도 기억해야 합니다. Svelte에서는 어떨까요? let count = $state(0)을 선언하고 바로 count++ 하면 끝입니다.

이런 “적을수록 더 많다”는 충격 때문에 세 시간 연속으로 튜토리얼을 봤습니다. 복잡해서가 아니라 오히려 너무 간단했기 때문입니다. 여러분도 “프레임워크 피로”를 느끼고 있다면, 이 글에서 Svelte 5의 “컴파일 타임 최적화”라는 사고방식을 함께 살펴보겠습니다. 이 개념은 프론트엔드 프레임워크를 바라보는 제 관점을 바꿨습니다.

Svelte란? 컴파일 타임 프레임워크의 본질

컴파일 타임과 런타임의 차이를 이해하기 쉽도록 일상적인 비유부터 들어 보겠습니다.

React는 배달 음식과 같습니다. 음식을 배달할 때마다 식기, 티슈, 포장 상자, 심지어 비닐봉지까지 따라옵니다. 이런 요소(Virtual DOM, reconciliation 알고리즘)는 런타임에 반드시 함께 번들로 포함되며, 실제로 사용하든 말든 가져와야 합니다. 그래서 “Hello World”만 작성해도 React 기본 패키지는 42KB입니다.

Svelte는 집밥과 같습니다. 재료를 준비하고(코드 작성), 바로 요리한 뒤(컴파일), 식탁에는 순수한 음식(네이티브 JS)만 올립니다. 추가 부담이 없어 최종 번들은 1.6KB에 불과합니다.

과장처럼 들릴 수 있지만 직접 테스트해 보니 실제로 그랬습니다. 동일한 Todo 앱을 React와 Svelte로 각각 작성한 뒤 측정한 최종 번들 크기는 다음과 같습니다.

초기 화면 로딩 속도로 비교하면 더 직관적입니다. 3G 네트워크에서 말입니다(웃을 일이 아닙니다. 아직도 3G를 사용하는 이용자가 많습니다).

300ms가 별것 아닌 것처럼 들리나요? 전자상거래 홈페이지나 뉴스 사이트에서는 이 차이가 이탈률 5~10%의 차이로 이어질 수 있습니다.

그렇다면 Svelte 5는 Svelte 4에서 무엇이 달라졌을까요? 핵심은 완전히 새로운 반응형 API인 Runes 시스템입니다. 번들 크기를 15~30% 더 줄이면서도 코드 가독성을 높였습니다.

그렇다고 React 프로젝트를 서둘러 다시 작성할 필요는 없습니다. Svelte는 React의 대체재가 아니라 서로 다른 철학을 실천하는 도구입니다. React가 “강력한 생태계와 유연성으로 모든 상황을 포용하겠다”고 말한다면, Svelte는 “극한의 성능과 간결함으로 한 가지 일을 제대로 하겠다”고 말합니다. 무엇을 선택할지는 상황에 달려 있습니다.

Runes 시스템 심층 분석: 컴파일러의 마법

Svelte 5의 핵심은 Runes입니다. 이름만 보면 게임 속 룬 시스템처럼 조금 과장되어 보이지만 실제 사용감은 정말 좋습니다.

Alibaba Cloud - 개발자 클라우드 1순위, Lighthouse 서버 15% 할인

15% 할인 받기 →광고

$state: 드디어 setter를 작성하지 않아도 됩니다

먼저 React 방식을 보겠습니다.

// React 방식: 매번 setter를 사용해야 한다는 점을 기억해야 함
const [count, setCount] = useState(0)
function increment() {
  setCount(count + 1) // 클로저 함정도 주의해야 함
}

이제 Svelte 5를 보겠습니다.

// Svelte 5 방식: 네이티브 JS를 작성하듯 사용
let count = $state(0)
function increment() {
  count++ // 이것으로 끝, 컴파일러가 반응성을 처리함
}

처음 $state를 사용했을 때는 setter가 어디 있는지 계속 찾았습니다. 나중에야 전혀 필요하지 않다는 사실을 알았습니다. 이 “마법”의 뒤에서는 컴파일러가 번거로운 일을 맡습니다. 컴파일 단계에서 코드를 분석해 의존성 추적과 업데이트 로직을 자동으로 삽입합니다.

실제 프로젝트에서는 코드량이 30~40% 줄었습니다. 특히 폼을 처리할 때 수많은 handleXXXChange를 작성할 필요가 없습니다.

$derived: 의존성을 자동으로 추적해 의존성 배열과 작별합니다

useMemo를 사용해 봤다면 의존성 배열 때문에 고생한 적이 있을 것입니다. 어떤 의존성을 빼먹으면 컴포넌트가 업데이트되지 않고, 너무 많이 넣으면 계속 다시 계산합니다.

Svelte의 $derived는 이런 문제를 직접 신경 쓸 필요가 없습니다.

// React 방식: 의존성 배열을 직접 관리
const doubled = useMemo(() => count * 2, [count])
const quadrupled = useMemo(() => doubled * 2, [doubled])
// Svelte 5 방식: 컴파일러가 자동으로 추적
let doubled = $derived(count * 2)
let quadrupled = $derived(doubled * 2)

복잡한 폼 계산을 처리할 때 특히 유용합니다. 예전에 입력 필드 열몇 개를 기준으로 최종 가격을 계산하는 견적 시스템을 만든 적이 있습니다. React 버전에서는 의존성 배열만 두 줄이었고 누락된 필드가 없는지 늘 걱정해야 했습니다. Svelte 버전에서는 컴파일러가 의존성 추적을 모두 처리해 줍니다.

쉽게 말해 계산 로직만 작성하면 반응형 업데이트는 컴파일러에 맡길 수 있습니다.

$effect: 부수 효과를 우아하게 관리하는 방법

useEffect는 아마 React Hooks에서 가장 이해하기 어려운 API일 것입니다. 의존성 배열, cleanup 함수, 실행 시점 등 초보자가 자주 혼동하는 요소가 많습니다.

Svelte의 $effect는 훨씬 직관적입니다.

// React 방식: cleanup 함수를 반환해야 함
useEffect(() => {
  const subscription = someAPI.subscribe()
  return () => {
    subscription.unsubscribe() // 정리 작업을 잊으면 안 됨
  }
}, [/* 또 등장한 의존성 배열 */])
// Svelte 5 방식: 컴파일러가 자동으로 정리
$effect(() => {
  const subscription = someAPI.subscribe()
  // 컴포넌트가 언마운트될 때 자동으로 정리되므로 직접 return할 필요 없음
})

실제 프로젝트에서 $effect를 API 폴링, WebSocket 연결, 로컬 스토리지 동기화에 사용했는데 모두 매끄러웠습니다. 가장 좋은 점은 컴파일러가 정리 로직을 보장하므로 메모리 누수를 걱정할 필요가 없다는 것입니다.

$props: 타입 안전한 컴포넌트 속성

눈에 잘 띄지 않지만 사용감이 가장 편한 기능일 수도 있습니다.

// React 방식
function TodoItem({ todo, onToggle }) {
  // PropTypes 또는 TypeScript로 직접 표기해야 함
}
// Svelte 5 방식: 구조 분해로 props를 바로 가져옴
<script>
  let { todo, onToggle } = $props()
  // TypeScript 지원 내장
</script>

큰 변화처럼 보이지 않지만 작성할 때는 무척 자연스럽습니다. Svelte의 TypeScript 지원은 공식 내장 기능이라 별도 설정도 필요 없습니다.

Svelte vs React/Vue: 경쟁이 아니라 선택의 문제

여기까지 읽으면 “그럼 Svelte로 바꿔야 할까?”라는 생각이 들 수 있습니다.

이런 비교를 종교 전쟁으로 만들지는 맙시다. jQuery로도 우아하게 작성된 프로젝트를 봤고, React로 엉망이 된 코드도 봤습니다. 프레임워크는 도구일 뿐이며 중요한 것은 팀과 프로젝트의 요구 사항입니다.

학습 곡선 비교

Svelte: HTML + CSS + JS로 구성되어 Web 표준에 더 가깝습니다. 갓 졸업한 신입에게 Svelte 공식 튜토리얼을 보여 줬더니 이틀 뒤에는 혼자 컴포넌트를 작성할 수 있었습니다.

Railway - 현대적인 배포 플랫폼, 번거로운 운영 없이 몇 분 만에 라이브

지금 시작 →광고

React: JSX, Hooks 규칙, 상태 불변성, reconciliation 원리 등을 익혀야 합니다. React를 제대로 이해하려면 최소 1~2주간 집중 학습이 필요합니다. “당신이 모를 수도 있는 React 팁 XX가지” 같은 글이 계속 나오는 것만 봐도 배울 내용이 깊다는 것을 알 수 있습니다.

Vue: 두 프레임워크의 중간쯤입니다. 템플릿 문법은 JSX보다 직관적이지만 디렉티브, computed, watch 같은 고유 개념도 있습니다.

성능

여기서는 솔직히 말해야 합니다. 작은 프로젝트에서는 성능 차이가 두드러지지 않습니다. Todo 앱을 React로 만들든 Svelte로 만들든 사용자는 차이를 느끼지 못합니다.

하지만 다음 상황에서는 차이가 뚜렷합니다.

1. 대규모 목록 렌더링: 전자상거래 상품 목록, 실시간 채팅 메시지. 데이터 10000개의 렌더링을 테스트한 결과 Svelte는 58 FPS를 유지했지만 React는 45 FPS였습니다.
2. 잦은 상태 업데이트: 실시간 대시보드, 주식 시세. Svelte의 직접 업데이트는 Virtual DOM diff보다 빠릅니다.
3. 모바일 저속 네트워크 환경: 번들 크기가 작을수록 절대적으로 유리합니다.

데이터는 2025년 최신 JS 프레임워크 benchmark에서 가져왔고 테스트 환경은 모두 표준화되어 있습니다. 다만 실제 프로젝트에서는 직접 측정해야 합니다.

생태계: 성숙함 vs 간결함

돌려 말하지 않겠습니다. Svelte 생태계는 분명 React보다 작습니다.

• npm 주간 다운로드: Svelte 50만 회 vs React 2000만 회
• StackOverflow 질문 수: Svelte 1.2만 개 vs React 50만 개
• 서드파티 컴포넌트 라이브러리: React는 수백 개, Svelte는 수십 개 수준

하지만 단점만 있는 것은 아닙니다. Svelte 커뮤니티는 작지만 매우 활발합니다. Discord에 질문을 올리면 Svelte 창시자인 Rich Harris가 직접 답해 줄 수도 있습니다. React 커뮤니티에서는 기대하기 어려운 참여감입니다.

또한 Svelte의 도구 체인은 현대적입니다. Vite가 기본으로 지원되고, 공식 풀스택 프레임워크 SvelteKit과 TypeScript 지원도 내장되어 있습니다. React처럼 수많은 Webpack loader를 설정할 필요가 없습니다.

언제 Svelte를 선택해야 할까?

간단한 판단 매트릭스를 만들어 봤습니다.

팀이 이미 React를 깊이 활용하고 있다면 심각한 성능 문제가 없는 한 전환을 권하지 않습니다. 하지만 신규 프로젝트나 소규모 팀이라면, 혹은 단순히 새로운 도구를 써 보고 싶다면 Svelte가 좋은 선택입니다.

30분 실전: Svelte 5로 Todo 앱 만들기

이론은 충분히 살펴봤으니 이제 직접 만들어 보겠습니다. 처음부터 Todo 앱을 작성하며 Runes 시스템의 힘을 느껴 보겠습니다.

프로젝트 구조

svelte-todo/
├── src/
│   ├── lib/
│   │   └── TodoItem.svelte  // 개별 Todo 컴포넌트
│   ├── App.svelte           // 메인 애플리케이션
│   └── main.js              // 진입점
└── package.json

핵심 코드: App.svelte

<script>
  // 이것이 Runes의 매력: 간결하면서 강력함
  let todos = $state([])
  let input = $state('')
  // $derived는 todos의 변화를 자동으로 추적하므로 의존성을 직접 관리할 필요 없음
  let remaining = $derived(
    todos.filter(t => !t.done).length
  )
  // Todo 추가: 일반 JS를 작성하듯 사용
  function addTodo() {
    if (input.trim()) {
      todos.push({
        id: Date.now(),
        text: input,
        done: false
      })
      input = '' // 반응형 업데이트로 화면이 자동 새로 고침됨
    }
  }
  // 완료 상태 전환
  function toggleTodo(id) {
    const todo = todos.find(t => t.id === id)
    if (todo) {
      todo.done = !todo.done // 직접 수정해도 됨
    }
  }
  // Todo 삭제
  function deleteTodo(id) {
    todos = todos.filter(t => t.id !== id)
  }
</script>
<!-- Svelte 템플릿: JSX가 아니라 HTML -->
<div class="app">
  <h1>내 할 일</h1>
  <div class="input-area">
    <input
      bind:value={input}
      placeholder="새 작업 추가..."
      onkeydown={(e) => e.key === 'Enter' && addTodo()}
    />
    <button onclick={addTodo}>추가</button>
  </div>
  <!-- 남은 작업 수는? $derived가 자동으로 업데이트 -->
  <p class="stats">
    완료할 작업이 {remaining}개 남았습니다
  </p>
  <ul class="todo-list">
    {#each todos as todo}
      <TodoItem
        {todo}
        onToggle={() => toggleTodo(todo.id)}
        onDelete={() => deleteTodo(todo.id)}
      />
    {/each}
  </ul>
</div>
<!-- 스타일은 기본적으로 scoped이므로 전역을 오염시키지 않음 -->
<style>
  .app {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  .input-area {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }
  input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  button {
    padding: 10px 20px;
    background: #0066cc;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .stats {
    color: #666;
    margin-bottom: 10px;
  }
  .todo-list {
    list-style: none;
    padding: 0;
  }
</style>

하위 컴포넌트: TodoItem.svelte

<script>
  // $props 구조 분해: 부모 컴포넌트가 전달한 데이터 가져오기
  let { todo, onToggle, onDelete } = $props()
</script>
<li class="todo-item">
  <label>
    <input
      type="checkbox"
      checked={todo.done}
      onchange={onToggle}
    />
    <span class:done={todo.done}>
      {todo.text}
    </span>
  </label>
  <button class="delete-btn" onclick={onDelete}>
    삭제
  </button>
</li>
<style>
  .todo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
  }
  label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }
  /* class:done은 Svelte의 문법 설탕 */
  .done {
    text-decoration: line-through;
    color: #999;
  }
  .delete-btn {
    padding: 5px 10px;
    background: #ff4444;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
  }
</style>

실행해 보기

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

http://localhost:5173에 접속하면 바로 사용할 수 있는 Todo 앱을 볼 수 있습니다.

핵심 포인트

이 작은 프로젝트는 Svelte의 핵심 장점을 몇 가지 보여 줍니다.

1. 자연스러운 반응형 흐름: setState나 dispatch 없이도 데이터가 바뀌면 화면이 자동으로 업데이트됩니다.
2. 상태 관리 라이브러리 불필요: Redux나 Context를 사용하지 않았지만 상태를 명확하게 관리합니다. 중소규모 프로젝트에는 충분합니다.
3. 스타일 격리: CSS는 기본적으로 컴포넌트 범위에만 적용되어 서로 간섭하지 않습니다.
4. 매우 작은 빌드 결과물: npm run build를 실행해 보면 최종 크기가 약 5KB에 불과합니다.

처음 사용할 때 바로 빠졌던 함정도 하나 있습니다. Svelte 4에서는 todos.push() 이후 업데이트를 트리거하려면 다시 할당해야 했습니다. 하지만 Svelte 5는 이 문제를 해결해 바로 push할 수 있습니다. Svelte 4와의 중요한 차이입니다.

간결하다고 해서 만만하게 보면 안 됩니다. 복잡한 프로젝트에서는 여전히 아키텍처를 제대로 설계해야 합니다. 하지만 적어도 Svelte에서는 상태 관리 패러다임과 씨름하는 대신 비즈니스 로직에 집중할 수 있습니다.

Vultr - 고성능 NVMe 클라우드 서버, 전 세계 32개 노드, Docker 원클릭 배포

요금 보기 →광고

생태계, 커뮤니티, 그리고 미래

생태계 현황

앞서 생태계가 React만큼 크지 않다고 했지만 필요한 요소는 모두 갖추고 있습니다.

• SvelteKit: Next.js와 비슷한 위치의 공식 풀스택 프레임워크로 SSR, SSG, API 라우트를 지원합니다.
• 컴포넌트 라이브러리: Svelte Material UI, Carbon Components, Skeleton UI 등이 있습니다.
• 도구 체인: Vite 기본 지원, Prettier, ESLint 플러그인이 모두 갖춰져 있습니다.
• 실제 도입 사례: Spotify의 내부 도구, Square의 판매자 관리 백오피스, 뉴욕타임스의 인터랙티브 차트, Apple의 일부 내부 프로젝트가 있습니다.

커뮤니티 규모는 분명 React보다 작지만 활동성은 높습니다. Discord에서는 Rich Harris와 다른 핵심 멤버들이 문제를 논의하고 제안을 받아들이는 모습을 자주 볼 수 있습니다. 대형 프레임워크에서는 얻기 어려운 참여감입니다.

학습 자료

• 공식 튜토리얼: 인터랙티브 방식이라 한 번 따라 해 보면 개념의 80%를 이해할 수 있습니다.
• Svelte 커뮤니티 Discord: 질문에 빠르고 수준 높은 답을 받을 수 있습니다.
• GitHub 예제 프로젝트: 공식 저장소에 실전 예제가 풍부합니다.
• 중국어 자료: 掘金과 知乎에도 수준 높은 글이 많이 올라와 있습니다.

향후 전망

제 개인적인 판단으로는 Svelte가 주류가 되지는 않겠지만 중요한 선택지로 남을 것입니다.

이유는 간단합니다. React의 생태계 진입 장벽이 너무 견고해 기업 프로젝트가 쉽게 전환하지 않을 것이기 때문입니다. 하지만 Svelte는 다음 분야에서 기회가 있습니다.

1. 성능에 민감한 프로젝트: 게임 UI, 실시간 데이터 대시보드, 모바일 앱.
2. 소규모 팀의 빠른 개발: 스타트업, 개인 프로젝트, 내부 도구.
3. 교육과 학습: Svelte의 간결함은 프론트엔드를 처음 배우기에 적합합니다.

Svelte 5의 안정성은 이미 검증되었고 TypeScript 지원도 계속 강화되고 있습니다. 프로덕션 환경에서도 안심하고 사용할 수 있습니다.

Svelte를 배운다고 이력서의 가치가 크게 오르지는 않겠지만 사고의 폭은 넓어집니다. 컴파일 타임 최적화 철학을 살펴본 뒤 다시 React를 작성하면 성능 최적화를 더 깊이 이해하게 됩니다.

정리: 이제 한번 써 볼 때입니다

길게 이야기했지만 하고 싶은 말은 하나입니다. Svelte는 주말 하루를 들여 알아볼 가치가 있습니다.

모든 프로젝트를 당장 다시 작성하라는 뜻은 아닙니다. 다음과 같이 시작해 보세요.

1. 이번 주말에 2시간 동안 공식 튜토리얼 따라 하기: 인터랙티브 방식이라 재미있습니다.
2. 작은 프로젝트 하나를 Svelte로 다시 만들기: 계산기, 날씨 앱 또는 예전에 만든 어떤 프로젝트든 좋습니다.
3. 팀에 서둘러 도입하지 않기: 먼저 충분히 익힌 뒤 팀의 상황에 맞는지 확인하세요.

프론트엔드 기술은 하루가 다르게 변하고 모든 프레임워크가 자신을 “혁명적”이라고 말합니다. 하지만 진정 배울 가치가 있는 것은 프레임워크 뒤의 사상입니다. Svelte의 컴파일 타임 최적화, 간결한 API 설계, 성능을 향한 극한의 추구는 어떤 프레임워크에서도 통하는 철학입니다.

마지막으로 솔직히 말하면 기술은 제품을 위해 존재하며 그 반대가 아닙니다. React로 해결할 수 있는 문제라면 Svelte로도 대부분 해결할 수 있습니다. 무엇을 선택할까요? 팀, 상황, 자신의 직감을 살펴보세요.

성능을 진지하게 추구하거나, 보일러플레이트 코드 작성에 지쳤거나, 단순히 새로운 것을 써 보고 싶다면 https://svelte.dev/tutorial을 열고 튜토리얼을 따라가 보세요.

고작 2시간입니다. 기껏해야 배달 음식 한 끼 값에 해당하는 시간을 낭비할 뿐입니다. 하지만 어쩌면 자신에게 정말 잘 맞는 도구를 발견할 수도 있습니다.