Svelte 튜토리얼 — Lily Design System

만들 것

작은 문의 폼 — 레이블이 있는 입력, 제출 버튼, 양방향 바인딩, 실제 키보드 및 스크린 리더 동작 — 먼저 꾸미지 않은 상태로, 그다음 스타일을 입혀서 약 10분 안에 만듭니다.

시작하기 전에

git, Node 22 이상, pnpm 10 이상이 필요합니다. Svelte 5 프로젝트라면 무엇이든 괜찮습니다 — 새로 만든 npx sv create 앱이면 충분합니다.

1단계 — 코드 가져오기

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-headless
pnpm install
pnpm test        # vitest — thousands of component cases
pnpm run storybook   # browse all 571 components

컴포넌트는 다음 위치에 있습니다: src/lib/components/{Name}/, 컴포넌트마다 디렉터리 하나가 있고 그 안에 .svelte 파일, 테스트, 스토리, 문서가 나란히 있습니다. 필요한 디렉터리를 앱에 복사하거나, 저장소에 의존해 바로 import하세요.

2단계 — 첫 번째 컴포넌트

<script>
  import Button from "#lib/components/Button/Button.svelte";

  function save() { console.log("saved"); }
</script>

<Button onclick={save}>Save</Button>

렌더링하는 요소: <button class="button" type="button">. props에는 타입이 지정되어 있습니다: type, disabled, pressed (렌더링하는 요소: aria-pressed (토글 버튼에서는 label ( aria-label 재정의용), 추가 특성은 루트로 펼쳐집니다.

3단계 — 작은 폼 구성하기

<script>
  import Form from "#lib/components/Form/Form.svelte";
  import Field from "#lib/components/Field/Field.svelte";
  import TextInput from "#lib/components/TextInput/TextInput.svelte";
  import Button from "#lib/components/Button/Button.svelte";

  let name = $state("");
</script>

<Form label="Contact form" onsubmit={handleSubmit}>
  <Field label="Full name" required>
    <TextInput id="name" label="Full name" bind:value={name} required />
  </Field>
  <Button type="submit">Save</Button>
</Form>

Field 은 보이는 label 을 중첩된 레이블 컴포넌트가 아니라 별도의 prop으로 받습니다 — 한 번만 전달하면 Field, 그리고 TextInput의 대응하는 label 이 접근 가능한 이름을 제공합니다. TextInput's value 는 $bindable 룬 prop이므로 bind:value 를 쓰면 바로 양방향 바인딩이 됩니다.

2026-08-29 확인 완료: 이 스니펫 그대로를 다음을 통해 컴파일하고 svelte/server 올바르게 연결된 레이블이 하나뿐임을 확인했습니다 <label for> — 이전 초안에서는 별도의 Label 안의 Field를 중첩해서, 렌더링 결과는 두 개의 레이블(하나는 비어 있음)이 렌더링되었습니다. Field 가 label prop. 문의 폼 조합 라우트 도 같은 패턴이며, 실제 e2e 및 axe 테스트로 검증됩니다.

작동 확인: 앱을 실행하면 폼이 밋밋해 보입니다 — 의도한 대로이며 스타일은 앞으로 입힙니다. Tab키를 눌러 보세요. 포커스가 모든 컨트롤을 따라 이동하고, 레이블이 읽히며, 제출도 동작합니다. 동작은 완성되었고, 모양은 당신 몫이며 다음 단계입니다.

4단계 — 스타일 입히기

위의 모든 것은 순수한 구조로 렌더링되며 스타일을 기다립니다. 클래스 훅에 스타일을 입힙니다 — .button, .text-input, .label, .field — 전역 스타일시트에서, 또는 준비된 테마를 다음에서 링크합니다: app.html:

<link rel="stylesheet" href="/themes/dark.css" />

인스턴스별 조정은 다음을 통해 합니다: class prop으로 하며, 기본 훅에 덧붙습니다: <Button class="wide"> 렌더링 결과: class="button wide".

5단계 — 전체가 동작하는 모습 보기

SvelteKit 예제 앱 은 같은 카탈로그를 완전히 스타일링하여 라이브 데모, Playwright e2e 테스트, axe-core 접근성 기준선과 함께 보여 줍니다:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-sveltekit-examples
pnpm install && pnpm run dev

다음 단계

테마 적용 — Svelte theme-picker 헬퍼로 하는 런타임 전환.
환경설정 헬퍼 — 언어와 텍스트 크기.
컴포넌트 카탈로그 — 컴포넌트별 props, ARIA, 키보드.

진행하다가 궁금한 점이 있다면 도움말 페이지 에 답이 많이 있습니다. 어떤 단계가 더 명확해질 수 있다면 알려 주세요 . 기꺼이 튜토리얼을 개선하겠습니다.