Lily를 단계별로 배우기
환영합니다! 모든 튜토리얼은 처음부터 시작해서 접근성 있고 스타일이 적용된 폼이라는 같은 작은 결과물을 약 10분 안에 만듭니다. 그래서 프레임워크를 같은 조건에서 비교할 수 있습니다. 그런 다음 테마 설정과 사용자 환경설정으로 더 깊이 들어가 보세요.
시작하기 전에
필요한 것은 놀랄 만큼 적습니다.
- HTML 튜토리얼 — 브라우저와 텍스트 편집기만 있으면 됩니다. 도구는 그게 전부입니다.
- Svelte, React, Vue, Angular, Nunjucks — git, Node 26, pnpm 10 이상.
- Blazor — git과 .NET SDK 8 이상.
헤드리스 컴포넌트가 처음이신가요? 제대로 오셨습니다. 각 튜토리얼은 진행하면서 무슨 일이 일어나는지 설명하고, 모든 단계에서 복사할 코드를 그대로 보여 줍니다.
처음부터 배포까지 네 단계
- 첫 컴포넌트(약 5분) — 아래에서 프레임워크를 고르고, 코드를 받아서 Button을 렌더링합니다.
- 조합하고 스타일 입히기(약 5분) — 레이블이 있는 폼을 만들고 케밥 케이스 클래스 훅에 맞춰 스타일을 입힙니다 (각 프레임워크 튜토리얼의 일부입니다).
- 테마 적용하기(약 15분) — 직접 작성한 CSS를 57가지 기성 테마 중 하나로 바꾸고, 사용자가 런타임에 전환할 수 있게 합니다: 테마 설정 튜토리얼
- 환경설정 존중하기(약 15분) — 환경설정 도우미로 언어와 글자 크기 선택을 추가합니다: 도우미 튜토리얼
프레임워크 고르기
HTML
클래스 훅이 있는 시맨틱 HTML을 복사해서 바로 시작하세요. 브라우저와 편집기만 있으면 됩니다.
Svelte
Svelte 5 룬, 스니펫, bind:value 양방향 바인딩.
React
value + onChange를 쓰는 함수 컴포넌트와 나머지 속성 전개.
Vue
v-model을 지원하는 Vue 3 단일 파일 컴포넌트.
Angular
시그널 입력과 [(value)]를 쓰는 Angular 독립 실행형 컴포넌트.
Blazor
매개변수, ChildContent, bUnit 테스트를 갖춘 Razor 컴포넌트.
Nunjucks
Eleventy와 모든 Node 템플릿 파이프라인에 쓸 수 있는 서버 렌더링 매크로.
고민되시나요? HTML부터 시작하세요. 다른 모든 프레임워크가 공유하는 클래스 훅 규약을 알려 주고, 파일에서 바로 실행됩니다.
더 깊이 들어가기
테마 설정
NHS, GOV.UK, USWDS, 라이트, 다크 등 57가지 기성 테마 중 하나를 연결하고, 직접 작성한 CSS로 덮어쓰고, theme-picker 도우미로 런타임 테마 전환을 추가합니다.
환경설정 도우미
theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker, date-time-picker로 테마, 언어, 글자 크기, 동작, 검색, 페이지 링크, 공유, 날짜·시간 입력을 사용자가 직접 조절하게 합니다. 영속성, SSR 안전성, 자동 RTL 감지를 갖춘 헤드리스 컨트롤입니다.