[Svelte 시리즈 1편] 왜 Svelte가 재미있게 느껴질까

프론트엔드를 처음 접하는 학생에게는 결과가 빨리 보이는 도구가 필요합니다. 이 글은 그 출발선으로서 Svelte를 어떻게 바라봐야 하는지를 짧고 뚜렷한 문장으로 설명합니다.

이번 글에서 새로 나오는 용어

1. 프레임워크: 화면을 만드는 규칙과 도구를 묶어 둔 틀로, 같은 방식으로 작업하게 해 팀 속도를 높입니다.
2. 반응성: 변수 값이 바뀌면 자동으로 화면이 다시 그려지는 성질이라 클릭 결과가 바로 눈에 보입니다.
3. 컴포넌트: 특정 역할을 맡은 화면 조각으로, 카드나 배너를 블록처럼 반복해 붙일 수 있습니다.
4. props: 부모 컴포넌트가 자식에게 내려주는 값으로, 같은 컴포넌트를 다른 내용으로 재사용하게 돕습니다.

개념

프레임워크는 웹 화면을 만들 때 반복 구성을 묶어 둔 도구입니다. 같은 전개 규칙을 공유하면 팀 속도가 빨라집니다. 반응성은 상태(state) 값이 바뀌면 화면이 즉시 갱신되는 성질입니다. 실습자가 버튼을 눌렀을 때 반응이 바로 보이면 실험 의욕이 유지됩니다. 컴포넌트는 특정 역할을 맡은 화면 조각입니다. 안내 카드나 일정표를 컴포넌트로 나누면 수정 범위가 명확해집니다. Svelte는 이 구조를 한 파일에 모아 초반 진입 장벽을 낮춥니다.

코드

작은 소개 배너를 통해 Svelte의 기본 흐름을 확인합니다. props라는 이름의 외부 값 주입과 지역 변수, 클릭 이벤트를 동시에 볼 수 있습니다.

<script>
  export let project = "캡스톤 웹 서비스";
  let highlight = "설치 없이 실습 시작";
</script>

<section class="hero">
  <p>{project}</p>
  <strong>{highlight}</strong>
  <button on:click={() => alert('목표 정의 완료!')}>
    시작 미팅 열기
  </button>
</section>

스크립트 블록에는 JavaScript를 적고 아래에는 HTML을 둡니다. 버튼을 클릭하면 함수가 실행됩니다. 상태가 바뀌면 곧장 화면이 갱신됩니다. 이 짧은 흐름이 시리즈 전체의 기본 패턴입니다.

왜 중요한가

빠르게 변하는 웹 제품 환경에서는 아이디어를 곧바로 화면으로 옮겨야 합니다. 설치 절차가 가벼운 Svelte는 동아리 홍보 페이지나 학교 행사 안내 사이트를 단기간에 완성하게 돕습니다. 앞으로의 연재는 입문→조립→제품화→운영 순으로 확장됩니다. 한 개념당 한 번씩 실습을 수행해 손을 계속 움직이게 설계했습니다.

실습

• 따라 하기: 위 코드로 소개 배너를 만들고 프로젝트 이름만 바꿔 본다.
• 확장하기: 버튼 아래에 오늘 날짜를 new Date()로 표시해 본다.
• 디버깅: export let를 지웠을 때 어떤 오류가 뜨는지 확인한다.
• 완료 기준: 버튼 클릭 시 알림이 뜨고 프로젝트 문구가 정상 출력된다.

마무리

Svelte는 상태와 화면이 한눈에 연결되어 보여 손맛이 빠르게 느껴집니다. 다음 편에서는 단일 Svelte 파일이 어떤 구조를 가지는지 구체적으로 살펴보겠습니다.