---
title: "Svelte 5 드디어 출시 — 'Runes'로 리액티비티 완전히 갈아엎음"
published: 2026-03-24T07:58:00.000Z
canonical: https://jeff.news/article/111
---
# Svelte 5 드디어 출시 — 'Runes'로 리액티비티 완전히 갈아엎음

Svelte 5가 공식 출시되면서 기존 반응형 선언 방식을 싹 날리고 'Runes'라는 새로운 API를 도입했음. $state(), $derived(), $effect() 같은 함수 기반 문법으로 바뀌었고, 성능도 Svelte 4 대비 2배 빨라졌다고 함. Apple, Spotify 같은 대기업들도 이미 마이그레이션 시작했다니 ㄹㅇ 레전드급 업데이트.

- **Svelte 5** 공식 출시, 기존 `$:` 반응형 선언 문법 완전 제거
- 새로운 **Runes** API: `$state()`, `$derived()`, `$effect()` 함수 기반으로 전환
- **렌더링 성능 2배 향상** + 번들 사이즈도 대폭 감소
- **Apple, Spotify** 등 대기업 이미 마이그레이션 진행 중
- 창시자 **Rich Harris** "예측 가능성과 디버깅 용이성 대폭 개선" 강조

---

## 상세 내용

### Runes란?
**Runes(룬)**는 Svelte 5에서 새롭게 도입된 반응형 프리미티브(reactive primitive)임. 기존 Svelte의 달러 사인(`$:`) 문법을 완전히 대체하고, 더 명시적이고 조합 가능한(composable) API를 제공함.

주요 함수:
- **`$state()`** — 반응형 상태 선언
- **`$derived()`** — 파생 상태 (기존 `$: derived = ...` 대체)
- **`$effect()`** — 사이드 이펙트 처리 (기존 `$: { ... }` 대체)

### 왜 바꿨냐?
Svelte 창시자 **Rich Harris**에 따르면, 기존 달러 사인 문법이 암묵적(implicit)으로 동작해서 예측하기 어렵고 디버깅도 힘들었다고 함. Runes는 함수 호출 형태라 "이게 반응형이다"라는 게 코드에서 명확하게 보임.

### 성능 개선
- **렌더링 속도**: Svelte 4 대비 **2배 빠름**
- **번들 사이즈**: 기존 대비 대폭 감소 (구체적 수치 미공개)

### 커뮤니티 반응
반응이 개 긍정적임. 특히 **Apple**과 **Spotify** 같은 대기업들이 이미 Svelte 5 마이그레이션을 시작했다는 게 확인됨. 커뮤니티에서도 "드디어 React의 hooks처럼 명시적이 됐다"는 평가가 많음.

## 핵심 포인트

- Runes API로 반응형 시스템 전면 개편
- Svelte 4 대비 렌더링 2배 성능 향상
- Apple·Spotify 등 대기업 마이그레이션 시작

## 인사이트

솔직히 Svelte가 '마법 같은 컴파일러' 이미지로 진입장벽이 낮았는데, Runes 도입으로 React hooks랑 비슷한 패턴이 돼서 오히려 다른 프레임워크 개발자들한테 더 친숙해질 수도 있을 듯. 번들 사이즈 + 성능 다 잡으면 진짜 갓갓이긴 한데, 기존 Svelte 4 코드베이스 마이그레이션 비용이 관건임 ㄷㄷ