Svelte 컴포넌트에 대한 아키텍처 의사결정 기록(ADR)

맥락

우리는 다음에 대한 전체 기능을 제공하는 Svelte UI 컴포넌트 라이브러리를 선택하고 있습니다:

• 테이블
• 차트
• 리스트
• 그리드
• 간트 차트

목표는 통합 용이성, 전체 기능 지원, 성능, 장기적 유지보수성 사이의 균형을 맞추는 라이브러리를 선택하는 것입니다. 검토 중인 선택지는 다음과 같습니다:

1. SVAR
2. Carbon
3. Flowbite
4. SkeletonUI
5. MeltUI
6. SvelteUI
7. shadcn-svelte

선택지 분석

1. SVAR

• 개요: SVAR는 디자인 시스템과 엔터프라이즈급 컴포넌트에 초점을 맞춘 Svelte용 현대적이고 기능이 풍부한 컴포넌트 라이브러리입니다.
• 장점:
  • 테이블, 폼, 차트를 포함한 전체 기능의 컴포넌트.
  • 내장 테마 지원으로 높은 사용자 정의 옵션.
  • 접근성과 반응성에 대한 내장 지원.
  • 커뮤니티 기여와 함께 잘 문서화됨.
• 단점:
  • 다른 더 단순한 라이브러리에 비해 무거울 수 있음.
  • 간트 차트와 고급 그리드 같은 특정 컴포넌트에 대한 제한적 지원.
• 적합한 경우: 전체 기능의 디자인 시스템이 필요한 엔터프라이즈급 애플리케이션.
• 테이블/차트 지원: 보통에서 좋음.
• 그리드/간트 지원: 최소.

2. Carbon

• 개요: Carbon Design System은 IBM의 오픈 소스 디자인 시스템으로 견고한 UI 컴포넌트 집합을 제공합니다.
• 장점:
  • 광범위한 문서와 함께 고품질의 세련된 디자인.
  • 매우 접근성이 좋고 반응형임.
  • 그리드, 테이블, 폼 컨트롤을 포함한 큰 컴포넌트 라이브러리.
• 단점:
  • Svelte에 초점을 맞추지 않아 통합이 번거로울 수 있음.
  • 완전한 Svelte 호환성을 위해 추가 사용자 정의가 필요할 수 있음.
  • 간트 차트나 복잡한 차트 같은 고급 컴포넌트에 대한 기본 지원 없음.
• 적합한 경우: 일관되고 세련된 UI가 필요한 대규모 프로젝트.
• 테이블/차트 지원: 좋음(차트 라이브러리 통합 포함).
• 그리드/간트 지원: 좋음(그리드 지원은 가능하지만 간트 차트는 없음).

3. Flowbite

• 개요: Flowbite는 Tailwind CSS로 구축된 컴포넌트 라이브러리로 다양한 컴포넌트와 UI 요소를 제공합니다.
• 장점:
  • Tailwind CSS 기반이어서 사용자 정의가 쉬움.
  • Svelte와 통합하고 사용하기 쉬움.
  • 테이블, 차트, UI 컨트롤 같은 풍부한 컴포넌트를 제공.
• 단점:
  • 고급 기능(예: 간트 차트나 복잡한 그리드)이 부족함.
  • 네이티브 차트 컴포넌트가 없으며 외부 라이브러리에 의존함.
• 적합한 경우: Tailwind CSS 통합에 초점을 맞춘 빠른 개발이 필요한 프로젝트.
• 테이블/차트 지원: 좋음(서드파티 차트 라이브러리와의 통합 필요).
• 그리드/간트 지원: 최소.

4. SkeletonUI

• 개요: SkeletonUI는 단순함과 미니멀리즘에 초점을 맞춘 Svelte용 경량 컴포넌트 라이브러리입니다.
• 장점:
  • 매우 가볍고 빠름.
  • 단순하고 직관적인 API.
  • 작은 프로젝트나 성능이 중요한 경우에 좋음.
• 단점:
  • 포함된 컴포넌트가 매우 적어 기능이 풍부하지 않음.
  • 고급 테이블/그리드/차트/간트 컴포넌트가 없음.
  • 제한적인 커뮤니티 지원과 덜 포괄적인 문서.
• 적합한 경우: 오버헤드가 최소인 경량 컴포넌트가 필요한 프로젝트.
• 테이블/차트 지원: 최소.
• 그리드/간트 지원: 최소.

5. MeltUI

• 개요: MeltUI는 단순함과 조합 가능성에 초점을 맞춘 Svelte용 접근성 높은 UI 컴포넌트 모음입니다.
• 장점:
  • 가볍고 완전히 사용자 정의 가능.
  • 기본으로 좋은 접근성 기능.
  • 현대적이고 미니멀한 디자인.
• 단점:
  • 다른 라이브러리에 비해 기능이 덜 풍부함.
  • 고급 그리드와 테이블 컴포넌트가 없음.
  • 간트 차트나 복잡한 차트 옵션이 없음.
• 적합한 경우: 접근성과 성능을 우선하는 미니멀한 디자인.
• 테이블/차트 지원: 최소.
• 그리드/간트 지원: 최소.

6. SvelteUI

• 개요: SvelteUI는 우아한 UI로 현대적인 웹 앱을 구축하도록 설계된 Svelte용 포괄적이고 사용자 정의 가능한 UI 컴포넌트 라이브러리입니다.
• 장점:
  • 테이블, 그리드, 차트, 폼을 포함한 포괄적인 컴포넌트 집합.
  • 라이트 모드와 다크 모드를 모두 지원.
  • 사용자 정의가 매우 쉽고 확장하기 쉬움.
  • chart.js나 d3.js 같은 차트 라이브러리에 대한 내장 통합.
• 단점:
  • 더 단순한 컴포넌트 라이브러리보다 무거울 수 있음.
  • 간트 차트 같은 더 복잡한 기능을 위해 외부 라이브러리를 통합하는 설정이 일부 필요함.
• 적합한 경우: 포괄적이고 사용자 정의 가능한 컴포넌트 집합이 필요한 프로젝트.
• 테이블/차트 지원: 우수(차트 라이브러리 지원).
• 그리드/간트 지원: 좋음(그리드 컴포넌트 제공, 간트는 외부 통합 필요).

7. shadcn-svelte

• 개요: 유틸리티 우선 디자인에 초점을 맞추고 현대적이고 스타일이 적용된 컴포넌트를 제공하는 ShadCN의 Svelte 버전입니다.
• 장점:
  • Tailwind CSS 위에 구축된 유틸리티 우선 디자인으로 사용자 정의가 쉬움.
  • 풍부한 컴포넌트 집합과 기본으로 완전히 스타일이 적용됨.
  • 다른 라이브러리와 통합하기 쉬움.
• 단점:
  • 고급 UI 요소 면에서 일부 다른 라이브러리만큼 기능이 완전하지 않음.
  • 테이블, 차트, 그리드에 대한 내장 지원이 없음.
  • 간트 차트에 대한 기본 지원이 없음.
• 적합한 경우: 유틸리티 우선의 사용자 정의 가능한 접근 방식이 필요한 중소 규모 프로젝트.
• 테이블/차트 지원: 최소.
• 그리드/간트 지원: 최소.

결정

권장 선택지: SvelteUI

• 근거: SvelteUI는 테이블, 차트, 그리드, 폼에 대한 요구를 충족하는 균형 잡히고 포괄적인 컴포넌트 모음을 제공합니다. 사용자 정의가 매우 쉽고, 다른 차트 라이브러리(chart.js, d3.js 등)와 잘 통합되며, 경량 성능과 기능 풍부함 사이의 균형이 좋습니다. 간트 차트에 대한 기본 지원은 제공하지 않을 수 있지만 서드파티 통합으로 쉽게 확장할 수 있어 전체 기능의 확장 가능한 솔루션에 이상적입니다.

  • 장점:

    • 우수한 테이블과 차트 지원.
    • 완전한 그리드와 레이아웃 컴포넌트.
    • 사용자 정의가 가능하고 외부 차트 라이브러리와 잘 통합됨.
    • 좋은 커뮤니티와 문서.

  • 단점:

    • 일부 다른 미니멀 라이브러리보다 무거움.
    • 간트 차트 같은 복잡한 차트에는 외부 통합이 필요함.

대안: Flowbite 또는 Carbon(더 큰 엔터프라이즈 프로젝트의 경우)

• 세련된 Tailwind 기반 또는 더 일관된 디자인 시스템이 필요하다면 Flowbite(Tailwind CSS 포함) 또는 Carbon(엔터프라이즈급 솔루션용)이 적합한 대안일 수 있습니다. 그러나 더 복잡한 차트와 컴포넌트를 통합하는 데 추가 노력이 필요할 수 있습니다.

결론

요구사항(테이블, 차트, 리스트, 그리드, 간트에 대한 전체 기능)에 가장 잘 맞는 것은 SvelteUI이며, 프로젝트 요구와 디자인 선호에 따라 Flowbite와 Carbon이 그 뒤를 잇습니다.