[TOC] DaleUI 디자인 시스템: 테크 스택 선정 과정 A to Z 2부

[nhistory]

개발 생태계 구축 - 컴포넌트 개발부터 품질 관리까지

• 인트로

  • 1부 내용 요약 (React, TypeScript, Panda CSS 결정 과정)
  • 이제 이 기반 위에서 실제 컴포넌트를 효율적으로 개발하고, 품질을 보증하며, 사용자에게 잘 전달하기 위한 개발 생태계 구축 과정을 다룰 것을 소개

• 똑똑한 컴포넌트 설계: 헤드리스 UI 활용 (Radix UI)

  • 직접 모든 컴포넌트 로직을 만드는 것의 어려움 (상태 관리, 키보드 네비게이션, 접근성 등)
  • 헤드리스 UI 개념 소개 및 필요성 (스타일링과 로직 분리, 접근성 보장, 유연성)
  • Radix UI를 선택한 이유:
    • 높은 수준의 WAI-ARIA 접근성 표준 준수
    • 스타일링이 없어 Panda CSS와 완벽하게 통합 가능
    • 필요한 기본 컴포넌트 프리미티브 제공 (Checkbox, Radio Group 등)

• 개발과 소통의 중심: Storybook 생태계

  • 디자인 시스템에서 Storybook의 역할 (독립적 개발 환경, 시각적 문서화, 테스트 플랫폼)
  • DaleUI에서 사용하고 있는 다양한 Storybook 애드온 소개 (더 자세한 내용은 추가 블로그 글 작성)
    • Essentials: 개발 및 문서화의 기본
    • A11y: 개발 중 접근성 검증 자동화
    • Interactions & Test: 컴포넌트 동작 시나리오 시연 및 테스트
    • Themes: 다크/라이트 모드 등 테마 지원 구현 및 테스트
    • Designs: Figma 연동을 통한 디자인-개발 싱크
  • Storybook을 통해 얻는 이점 (개발 효율성, 협업 강화, 문서 자동화, 테스트)
    • 접근성 테스트 (Axe + Storybook Test Runner): 자동화된 CI/CD 파이프라인 내 접근성 검사.
    • 시각적 회귀 테스트 (Chromatic): 의도치 않은 UI 변경 감지 및 방지. (Storybook과의 강력한 연동, 리뷰 편의성)

• 빠르고 효율적인 개발 환경: Vite

  • 빌드 도구 및 개발 서버 선택의 중요성 (개발 경험, 빌드 속도)
  • Vite를 선택한 이유:
    • 빠른 개발 서버 구동 속도 (Native ESM 기반)
    • 빠른 HMR(Hot Module Replacement) 성능
    • 효율적인 프로덕션 빌드 (Rollup 기반)
    • 간결한 설정과 플러그인 생태계
  • vite-plugin-svgr 활용 (SVG 아이콘 관리 방식)

• 결론:

  • DaleUI를 구성하는 전체 기술 스택 요약 및 각 요소가 프로젝트 목표(한글 사용자, 오픈소스, 고품질 디자인 시스템) 달성에 어떻게 기여하는지 정리.
  • 기술 스택 결정 과정에서의 배운 점이나 교훈 공유.
  • 기술 스택은 진화하므로, 향후 개선 방향이나 고려 사항 언급.
  • 오픈소스 프로젝트로서 커뮤니티의 참여 독려 및 피드백 요청.

[DaleSeo]

• 다양한 Storybook 애드온, 왜 필요할까?

본 글에서는 아주 간단하게 언급만 하고, 애드온 하나씩 자세히 소개하는 후속 포스팅을 하면 좋을 것 같네요.

신뢰할 수 있는 컴포넌트: 다층적 테스트 전략

컴포넌트 테스팅에 대해서는 별도의 블로그 글에서 다뤄도 좋을 만큼 심오한 주제라고 생각합니다. 별도 섹션으로 두지 말고 앞에 나온 섹션에서 부가적으로 언급해주는 것도 나쁘지 않을 것 같습니다.

• React 섹션에서 Testing Library을 같이 언급
• Storybook 섹션에서 Chromatic을 같이 언급
• Vite 섹션에서 Vitest를 같이 언급

@nhistory 님, 처음부터 2부로 나누기 보다는 단일 포스팅으로 한번 작성을 해보고 너무 길면 쪼개면 어떨까요? 제가 피드백 드렸던 부분 반영해서 다이어트를 하면 단일 포스팅으로도 충분히 커버할 수 있지 않을까 하는 생각이 듭니다.

[DaleSeo]

@nhistory 자바스크립트 런타임으로 Bun을 쓰는 부분도 넣어주시면 흥미로울 것 같습니다! 😁

[nhistory]

Bun을 빼먹다니 ㅎㅎ 포함해서 같이 써보도록 하겠습니다 책 링크도 같이 넣으면 좋겠네요 👍

[DaleSeo]

네네 ㅋㅋ 프론트엔드 프로젝트라서 Bun으로 서버를 돌리는 것은 아니고, 의존성 설치, 개발 서버 구동 및 빌드, CI 측면에서 Bun의 역할을 다뤄주시면 좋을 것 같네요.