Lily란 무엇인가요?

한눈에 보기

Lily는 웹 컴포넌트 카탈로그이며, 각 컴포넌트는 여덟 가지 헤드리스 방식(HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks, Web Components)으로 구현되어 있습니다. 여기에 스타일을 입히는 방법을 보여 주는, 바로 쓸 수 있는 예제 앱도 함께 제공합니다.

헤드리스 버전에는 CSS가 전혀 없습니다. 시맨틱 HTML, ARIA 역할과 상태, 키보드 지원, 다국어화에 맞춘 속성을 제공하고, 시각 디자인은 여러분이 맡습니다.

설계 원칙

접근성

모든 컴포넌트는 시맨틱 HTML에서 출발합니다. ARIA는 HTML만으로는 패턴을 표현할 수 없는 곳에만 덧붙입니다. 컴포넌트는 WCAG 2.2 AAA를 목표로 하며, 색상, 간격, 포커스, 키보드 탐색을 모두 고려합니다.

조합 가능성

Lily는 서로 맞물리는, 하나의 목적에 집중한 작은 컴포넌트를 선호합니다. 복합 패턴이 계속 반복해서 나타납니다.

• Nav → List → ListItem — 이동 경로, 목차, 아코디언 메뉴, 트리 메뉴, 페이지 나누기에 사용합니다
• Form → Field → Input — 레이블, 힌트, 오류가 있는 모든 폼 레이아웃에 사용합니다
• Table → Head/Body/Foot → Row → Data — 표, 달력, 간트 차트, 칸반 보드에 사용합니다
• Bar → BarButton — 도구 모음, 탭 모음, 작업 표시줄, 액션 바, 메뉴 바에 사용합니다
• Picker → PickerButton — 색상 선택기, 평점 선택기, 테마 선택기에 사용합니다

다국어화

사용자에게 보이는 문자열은 하나도 하드코딩되어 있지 않습니다. 레이블, 플레이스홀더, 오류 메시지, 버튼 문구가 모두 매개변수입니다. 여러분의 번역 시스템을 연결하면 Lily는 여러분이 쓰는 어떤 언어로도 말합니다.

헤드리스

헤드리스 컴포넌트에는 CSS가 없고, <style> 블록도, 여러분이 선택하지 않은 디자인 토큰도 없습니다. 각 루트 요소에 케밥 케이스 클래스 이름이 하나 붙어 있어서, 시맨틱 CSS, Tailwind, CSS-in-JS 등 원하는 방식으로 스타일을 지정할 수 있습니다.

바로 쓸 수 있는 예제

예제 앱은 실제 사용을 위해 컴포넌트에 스타일을 입히는 방법을 보여 줍니다. 어떤 디자인 토큰을 설정하고, 어떤 변형을 더하고, 페이지를 어떻게 구성하는지 알 수 있습니다. 단순한 샌드박스가 아니라 SvelteKit, Next.js, Nuxt, Blazor, Eleventy로 만든 본격적인 앱입니다.

영감의 원천

Lily는 일부러 폭넓게 고른 디자인 시스템들에서 패턴과 표현을 가져옵니다.

• NHS UK Design System
• GOV.UK Design System
• U.S. Web Design System (USWDS)
• ONSdigital design system
• Design System AU (Australian Government)
• Mozilla Protocol
• Adobe Spectrum
• Ant Design
• Wonderflow Wanda
• DaisyUI
• shadcn/ui
• Reuters graphics components

라이선스

Lily는 BSD, MIT, Apache-2.0, GPL-2.0, GPL-3.0의 멀티 라이선스입니다. 프로젝트에 맞는 라이선스를 고르세요. 어느 것도 맞지 않는다면 연락해 주세요.

연락처

프로젝트 리드: Joel Parker Henderson — joel@joelparkerhenderson.com

버그를 찾았거나, 아이디어가 있거나, 컴포넌트를 기여하고 싶으신가요? GitHub에서 이슈나 풀 리퀘스트를 열어 주세요.