Svelte가 쉬운 이유부터 이해하기
먼저 작은 예시로 감을 잡기
Svelte는 프론트엔드 프레임워크입니다. 버튼, 입력창, 목록, 상품 카드 같은 화면 조각을 컴포넌트로 만들고, 그 컴포넌트를 조합해 웹 애플리케이션을 만듭니다.
처음에는 아래 코드만 봐도 충분합니다.
<script>
let count = $state(0);
</script>
<button onclick={() => count += 1}>
{count}번 클릭했습니다
</button>
<style>
button {
padding: 12px 16px;
border-radius: 8px;
}
</style>이 코드는 버튼을 누를 때마다 숫자가 1씩 증가하는 컴포넌트입니다. HTML을 알고 있다면 <button>을 바로 알아볼 수 있습니다. CSS를 알고 있다면 <style> 안의 코드도 낯설지 않습니다. JavaScript를 알고 있다면 count += 1이 숫자를 증가시키는 코드라는 것도 이해할 수 있습니다.
새롭게 보이는 부분은 $state(0) 정도입니다. 이것은 Svelte 5에서 "이 값이 바뀌면 화면도 함께 바뀌어야 한다"는 뜻으로 사용하는 문법입니다. 지금은 외우지 않아도 됩니다. 중요한 점은 Svelte가 완전히 새로운 언어를 강요하지 않는다는 것입니다. 이미 알고 있는 HTML, CSS, JavaScript 위에 화면 개발에 필요한 작은 규칙을 더합니다.
이 책은 바로 이 지점에서 시작합니다. 문법을 먼저 외우기보다, Svelte가 어떤 방식으로 화면을 다루는지 이해하면 뒤의 개념이 훨씬 자연스럽게 연결됩니다.
AI 생성 이미지
Svelte는 브라우저보다 빌드 시점에 더 많은 일을 한다
Svelte를 이해하는 첫 번째 열쇠는 "컴파일"입니다.
컴파일은 사람이 작성한 코드를 브라우저가 실행하기 좋은 코드로 바꾸는 과정입니다. Svelte에서는 .svelte 파일에 컴포넌트를 작성합니다. 그러면 Svelte 컴파일러가 이 파일을 분석해서 JavaScript와 CSS로 변환합니다. 공식 소개에서도 Svelte는 컴파일러를 사용해 간결한 컴포넌트를 작성하게 하고, 브라우저에서 해야 할 일을 줄이는 UI 프레임워크라고 설명합니다.1
비유하자면 이렇습니다.
일반적인 방식에서는 브라우저가 화면을 보여 주는 중에도 "무엇이 바뀌었지?", "어디를 다시 그려야 하지?"를 계속 판단해야 합니다. 반면 Svelte는 개발자가 작성한 컴포넌트를 미리 읽고, 어떤 값이 바뀔 수 있는지 빌드 과정에서 파악합니다. 그리고 실제 실행 시점에는 필요한 부분을 바꾸는 코드가 동작하도록 만들어 둡니다.
예를 들어 버튼의 숫자만 바뀌는 화면이라면, Svelte는 "숫자가 바뀔 때 이 텍스트 부분만 갱신하면 된다"는 식의 코드를 만들어 낼 수 있습니다. 개발자는 선언적으로 코드를 작성하지만, 결과물은 브라우저가 실행하기 좋은 형태에 가깝습니다.
여기서 "선언적"이라는 말이 나옵니다. 어렵게 느껴질 수 있지만 뜻은 단순합니다.
<button>{count}</button>이 코드는 "버튼 안에는 count 값을 보여 줘"라고 말합니다. 개발자가 직접 "기존 텍스트를 찾아라", "텍스트 노드를 바꿔라" 같은 DOM 조작 코드를 매번 작성하지 않습니다. Svelte가 컴파일 과정에서 그런 일을 대신 준비합니다.
그래서 Svelte는 초보자에게 부담이 덜합니다. 화면을 바꾸기 위해 복잡한 내부 구조를 먼저 배울 필요가 적습니다. HTML에 값을 끼워 넣고, 값이 바뀌면 화면도 바뀐다는 흐름부터 익히면 됩니다.
Virtual DOM을 중심으로 생각하지 않아도 된다
React나 Vue를 공부하다 보면 Virtual DOM이라는 말을 자주 만납니다. Virtual DOM은 실제 브라우저 화면 구조를 JavaScript 객체로 표현한 것입니다. 상태가 바뀌면 새 Virtual DOM을 만들고, 이전 것과 비교해서 실제 DOM의 어느 부분을 바꿀지 결정합니다.
이 방식은 많은 문제를 해결했습니다. 개발자는 직접 DOM을 세세하게 조작하지 않고, 상태에 따라 화면이 어떻게 보여야 하는지만 작성할 수 있게 되었습니다.
하지만 초보자에게는 추가로 이해해야 할 층이 생깁니다.
상태가 바뀐다
컴포넌트가 다시 계산된다
Virtual DOM이 만들어진다
이전 결과와 비교한다
실제 DOM에 반영한다
Svelte는 이 흐름을 중심 개념으로 삼지 않습니다. Svelte 공식 블로그는 Virtual DOM이 선언적 UI를 만들기 위한 유일한 방법은 아니며, Svelte는 빌드 시점에 컴포넌트를 분석해 필요한 갱신 코드를 만들 수 있다고 설명합니다.2
초보자 입장에서는 이 차이가 큽니다. Svelte를 배울 때는 "가상의 화면 트리를 만들고 비교한다"는 모델보다, "내가 작성한 컴포넌트가 컴파일되어 필요한 DOM 업데이트 코드가 된다"는 모델로 이해하면 됩니다.
물론 Svelte를 쓴다고 해서 내부 동작을 전혀 몰라도 된다는 뜻은 아닙니다. 다만 출발점이 다릅니다. 처음부터 프레임워크의 실행 구조를 머릿속에 크게 그릴 필요가 적고, 다음과 같은 감각으로 시작할 수 있습니다.
<p>안녕하세요, {name}님</p>name이 바뀌면 {name}이 들어간 자리도 바뀝니다. Svelte는 이 관계를 컴파일 과정에서 읽고, 실행할 JavaScript 코드를 준비합니다.
이 단순한 감각이 중요합니다. 이후에 $state, $derived, $effect 같은 Svelte 5의 runes 문법을 배울 때도 핵심은 같습니다. 값과 화면의 연결을 명확하게 표현하면, Svelte가 그 연결을 실행 가능한 코드로 바꿉니다.
HTML, CSS, JavaScript에 작은 확장을 더한다
Svelte가 배우기 쉬운 또 다른 이유는 파일 구조입니다. Svelte 컴포넌트는 대체로 세 부분으로 나뉩니다.
<script>
let name = $state('수진');
</script>
<h2>{name}님의 장바구니</h2>
<style>
h2 {
color: #333;
}
</style><script>에는 JavaScript를 씁니다. 가운데에는 HTML과 비슷한 마크업을 씁니다. <style>에는 CSS를 씁니다.
이 구조는 웹을 처음 배울 때의 흐름과 가깝습니다.
HTML은 화면의 구조를 만든다.
CSS는 모양을 정한다.
JavaScript는 동작을 만든다.
Svelte는 이 기본 지식을 버리라고 하지 않습니다. 대신 컴포넌트라는 단위 안에 세 가지를 함께 놓습니다. 그리고 값 표시, 조건부 렌더링, 반복, 이벤트 처리 같은 화면 개발에 필요한 문법을 조금씩 추가합니다. MDN의 Svelte 소개도 Svelte가 익숙한 HTML, CSS, JavaScript에 가까운 방식으로 작업하며, 비교적 적은 확장 문법을 사용한다고 설명합니다.3
예를 들어 목록을 보여 주는 코드는 이렇게 생겼습니다.
<script>
let todos = $state(['책 읽기', '운동하기', '메일 확인']);
</script>
<ul>
{#each todos as todo}
<li>{todo}</li>
{/each}
</ul>{#each}는 Svelte의 반복 문법입니다. JavaScript의 배열을 HTML 목록으로 펼쳐 보여 줍니다. 처음 보면 새 문법이지만, 의미는 어렵지 않습니다. "todos 배열의 각 todo를 li로 보여 줘"라는 뜻입니다.
이처럼 Svelte의 문법은 대부분 화면을 만들 때 자주 필요한 작업과 직접 연결되어 있습니다. 그래서 문법을 배울 때도 "이걸 왜 쓰지?"라는 의문이 비교적 적습니다. 버튼 클릭, 목록 출력, 입력값 연결, 조건에 따른 화면 변경처럼 실제 화면에서 바로 만나는 문제를 해결하기 때문입니다.
작은 위젯부터 전체 앱까지 사용할 수 있다
Svelte는 반드시 큰 프로젝트에서만 쓰는 도구가 아닙니다. 작은 위젯 하나에도 사용할 수 있고, 전체 웹 애플리케이션에도 사용할 수 있습니다.
예를 들어 다음과 같은 작은 기능부터 시작할 수 있습니다.
블로그 글 아래의 좋아요 버튼
상품 카드의 수량 선택 UI
관리자 페이지의 필터 입력창
가격 계산기
할 일 목록
이런 기능은 화면의 일부만 동적으로 바꾸면 됩니다. Svelte는 컴포넌트 단위로 UI를 만들기 때문에 작은 영역에 적용하기 좋습니다.
반대로 규모가 커져도 사용할 수 있습니다. 상품 목록, 장바구니, 로그인, 주문 내역, 관리자 페이지처럼 여러 화면이 이어지는 애플리케이션도 만들 수 있습니다. 이때는 Svelte만으로 컴포넌트를 만들고, SvelteKit을 함께 사용해 라우팅과 데이터 로딩 같은 앱 전체의 구조를 다룹니다.
중요한 것은 시작점입니다. 처음부터 "완성된 대형 서비스"를 목표로 잡으면 배울 것이 너무 많아 보입니다. 이 책에서는 작은 코드 조각에서 출발합니다. 버튼 하나, 입력창 하나, 목록 하나를 만들고, 그것을 할 일 앱과 상품 카드로 확장합니다. 그다음 장바구니와 간단한 SvelteKit 앱으로 연결합니다.
이 순서로 배우면 Svelte가 단순한 문법 모음이 아니라, 화면을 작은 단위로 나누고 다시 조립하는 방법이라는 것을 자연스럽게 이해할 수 있습니다.
Svelte와 SvelteKit은 역할이 다르다
처음 Svelte를 검색하면 Svelte와 SvelteKit이 함께 나옵니다. 둘의 차이를 헷갈리기 쉽습니다. 간단히 나누면 다음과 같습니다.
Svelte는 컴포넌트를 만드는 도구입니다. 버튼, 카드, 목록, 입력 폼 같은 UI 조각을 작성합니다. .svelte 파일을 컴파일해서 브라우저가 실행할 JavaScript와 CSS로 바꿉니다.
SvelteKit은 애플리케이션을 만드는 도구입니다. 여러 페이지를 어떻게 연결할지, 주소에 따라 어떤 화면을 보여 줄지, 서버에서 데이터를 어떻게 가져올지, 빌드와 배포를 어떻게 할지 같은 문제를 다룹니다. SvelteKit 공식 문서도 Svelte를 컴포넌트 계층으로, SvelteKit을 라우팅과 렌더링 방식 등을 제공하는 애플리케이션 프레임워크 계층으로 구분합니다.4
비유하면 Svelte는 벽돌을 잘 만드는 방법이고, SvelteKit은 그 벽돌로 집의 구조를 세우는 방법입니다.
이 책의 순서도 이 역할에 맞춥니다.
먼저 Svelte를 배웁니다. 컴포넌트가 무엇인지, 값이 바뀌면 화면이 어떻게 바뀌는지, props로 데이터를 어떻게 전달하는지, 이벤트와 폼을 어떻게 다루는지 익힙니다.
그다음 SvelteKit을 배웁니다. 페이지 라우팅, 레이아웃, 데이터 로딩, 서버 기능, 폼 액션 같은 애플리케이션 기능을 다룹니다.
이 순서가 중요한 이유는 SvelteKit이 Svelte 위에 올라가기 때문입니다. 컴포넌트를 이해하지 못한 상태에서 라우팅과 서버 기능을 먼저 배우면 각 개념이 따로 놀기 쉽습니다. 반대로 Svelte의 사고방식을 먼저 익히면 SvelteKit은 "컴포넌트를 여러 페이지와 서버 기능으로 확장하는 방법"으로 보입니다.
이 장에서 기억할 것
Svelte는 쉬운 척하는 도구가 아닙니다. 실제로 복잡한 웹 애플리케이션을 만들 수 있는 프레임워크입니다. 다만 출발점이 친숙합니다.
HTML로 구조를 만들고, CSS로 스타일을 입히고, JavaScript로 동작을 추가합니다. 여기에 Svelte가 값과 화면을 연결하는 문법을 더합니다. 그리고 컴파일러가 그 코드를 브라우저에서 실행하기 좋은 JavaScript와 CSS로 바꿉니다.
그래서 Svelte를 배울 때 가장 먼저 가져야 할 생각은 이것입니다.
Svelte는 새로운 세계를 통째로 외우게 하는 도구가 아니라, 내가 아는 웹 기술을 컴포넌트 중심으로 정리해 주는 도구다.
다음 장에서는 실제 개발 환경을 만들고 첫 Svelte 화면을 띄웁니다. 그때 이 장에서 본 구조가 코드로 다시 나타날 것입니다. <script>, HTML 마크업, <style>을 한 파일 안에 놓고, 작은 값을 화면에 연결하는 것부터 시작하겠습니다.
참고
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.