Blazor 튜토리얼 — Lily Design System

만들 것

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

시작하기 전에

git과 .NET SDK 8 이상이 필요합니다. Blazor 프로젝트라면 무엇이든 괜찮습니다 — Blazor Web App, Server, WebAssembly 모두 됩니다.

1단계 — 코드 가져오기

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-blazor-headless
dotnet build
dotnet test      # bUnit — 1,400+ cases across the catalog

컴포넌트는 다음 위치에 있습니다: src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — 컴포넌트마다 Razor 파일 하나입니다. Blazor 앱에서 그 프로젝트를 참조하거나(또는 파일을 복사하고) @using LilyBlazorHeadless.Components 를 다음 파일에 추가합니다: _Imports.razor.

2단계 — 첫 번째 컴포넌트

<Button OnClick="Save">Save</Button>

렌더링하는 요소: <button class="button">. 공통 매개변수 규칙: Label ( aria-label 재정의용), CssClass (기본 훅에 덧붙음), ChildContent, 그리고 [Parameter(CaptureUnmatchedValues = true)] 특성 스플래팅으로 추가 HTML 특성이 그대로 전달됩니다.

3단계 — 작은 폼 구성하기

<Form OnSubmit="HandleSubmit">
  <Field Label="Full name" Required="true">
    <TextInput Id="name" Label="Full name" @bind-Value="name" Required="true" />
  </Field>
  <Button Type="submit">Save</Button>
</Form>

@code {
  private string name = "";
}

Field 은 보이는 Label 을 중첩된 레이블 컴포넌트가 아니라 별도의 매개변수로 받습니다 — 한 번만 전달하면 Field, 그리고 TextInput의 대응하는 Label 이 접근 가능한 이름을 제공합니다.

2026-08-29 확인 완료: 이전 초안에서는 별도의 Label 컴포넌트를 Field안에 중첩했는데, 그러면 두 개의 레이블(하나는 비어 있음)이 렌더링되었습니다. Field 가 Label 매개변수 — 컴포넌트 소스를 확인하다가 발견했습니다. Form 자체에는 Label 매개변수가 없으므로, 이전 초안의 <Form> 사용법은 존재하지 않는 특성을 지어내는 대신 해당 부분을 뺀 형태로 고쳤습니다. 문의 폼 조합 라우트 도 같은 패턴이며, 실제 e2e 및 axe 테스트로 검증됩니다.

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

4단계 — 스타일 입히기

클래스 훅에 스타일을 입힙니다 — .button, .text-input, .label, .field — 다음 위치에서: app.css, 또는 준비된 테마를 다음 위치에서 링크합니다: App.razor / index.html:

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

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

Blazor Web 예제 앱 은 스타일과 데모를 갖춘 전체 카탈로그를 보여 주며, Playwright e2e 테스트도 있습니다:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-blazor-web-examples
dotnet run --project src/LilyBlazorWebExamples

다음 단계

테마 적용 — Blazor theme-picker 헬퍼(NuGet의 Razor 클래스 라이브러리)로 하는 런타임 전환.
환경설정 헬퍼 — 언어와 텍스트 크기.
컴포넌트 카탈로그 — 컴포넌트별 props, ARIA, 키보드.

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