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

[nhistory]

React와 Panda CSS를 선택하기까지

• 인트로

  • DaleUI 디자인 시스템 프로젝트 소개 (한글 사용자를 위한 오픈소스 디자인 시스템 목표)
  • 기존 디자인 시스템이 있음에도 새로운 시스템을 만드는 이유 (DaleUI만의 차별점 또는 필요성)
  • 디자인 시스템의 성공을 좌우하는 기술 스택 선택의 중요성
  • 이 글 (1부)에서는 코어 프레임워크와 스타일링 솔루션이라는 가장 근본적인 기술 결정 과정을 다룰 것을 예고

• 첫 번째 갈림길: 웹 컴포넌트 vs. React

  • 초기 고려: 웹 컴포넌트 (Web Components)
    • 왜 웹 컴포넌트를 먼저 고려했는가? (프레임워크 독립성, 표준 기술, 장기적인 관점)
    • 고려 과정에서 느낀 웹 컴포넌트의 장단점 (장점: 호환성 / 단점: 개발 생태계, DX 등)
  • 방향 전환: React 도입 결정
    • 웹 컴포넌트 대신 React를 사용하기로 결정한 이유 (개발 생산성, 풍부한 생태계, 팀의 경험, 커뮤니티 지원)

• 코어 결정: React + TypeScript

  • 왜 React인가?
    • 여러 프레임워크 (Vue, Svelte 등) 중에서 React를 선택한 이유 (컴포넌트 기반 아키텍처, 방대한 생태계, 자료의 풍부함, 상대적 익숙함 등)
  • 개발 효율과 안정성 강화: TypeScript 도입
    • React + TypeScript 조합이 DaleUI 개발에 가져다 줄 기대효과 (간략하게 언급)
  • 단위/통합 테스트 (Vitest + Testing Library): 컴포넌트의 기능적 정확성 및 상호작용 검증. (Vite와의 시너지로 Vitest 선택)

• 핵심 과제: 최적의 스타일링 솔루션 찾기

  • 명확한 목표 설정: 빌드 타임 스타일링 우선
    • 디자인 시스템에서 스타일링이 왜 중요한가? (일관성, 성능, 유지보수)
    • 초기부터 런타임 CSS-in-JS (예: MUI, Chakra UI의 기본 방식)를 배제한 이유 (성능 오버헤드 우려, 번들 사이즈 증가, 예측 가능성 등)
    • 빌드 타임에 스타일을 생성하는 방식의 장점 강조 (제로 런타임, 정적 CSS 추출, 성능)
  • 빌드 타임 솔루션 비교: Panda CSS vs StyleX
    • 고려했던 주요 빌드 타임 스타일링 솔루션 소개 (Panda CSS, StyleX 등)
    • StyleX (Meta): 컴포넌트 중심의 스타일링과 예측 가능한 스타일 충돌 방지
    • Panda CSS: 유틸리티 기반 워크플로우를 제공하며, 개발자가 자유롭게 스타일을 조합할 수 있도록 설계
  • 최종 선택: Panda CSS
    • DaleUI가 Panda CSS를 선택한 결정적인 이유 (타입 안전성, 개발 경험, 설정 유연성, 디자인 토큰 관리 용이성 등 DaleUI의 지향점과 부합)
    • Panda CSS 도입으로 기대하는 효과

• 1부 마무리

  • 지금까지 결정된 핵심 기술 스택 (React, TypeScript, Panda CSS) 요약
  • 이러한 결정이 DaleUI의 기반을 어떻게 형성하는지 강조
  • 다음 2부에서는 이 기반 위에 컴포넌트 개발, 문서화, 테스트, 빌드 등을 위한 지원 도구와 생태계를 어떻게 구성했는지 이야기할 것을 예고하며 마무리. (2부 링크 포함)

[sounmind]

회의 중 피드백

• 초안 보다는 TOC 같다.
• 하지만 이렇게 TOC 먼저 작성하고 피드백 받는 게 좋은 것 같음.

[DaleSeo]

@nhistory 님, 체계적으로 블로그 글의 구조를 잡아주시니 좋네요. 벌써 기대가 됩니다 ㅋㅋ

• 개발 효율과 안정성 강화: TypeScript 도입

개인적으로 2025년에 새로운 React 프로젝트를 시작하는데 TypeScript를 안 쓰는 게 더 이상하지 않을까 하는 생각이 드네요 ㅎㅎ 업계에서 거의 당연하게 여겨지고 있는 부분이니 빼거나 아주 간단하게 언급만 하셔도 되지 않을까요?

[nhistory]

넵 의견 감사합니다 ㅎㅎ
간단히 언급하고 넘어가는 것으로 수정하였습니다 👍

[RiaOh]

오.. TOC만 보고도 벌써 기대됩니다!!

첫 번째 갈림길이 '웹 컴포넌트 vs. React'이고,
두 번째 갈림길은 프레임워크 Vue vs Svelte vs React,
세 번째 갈림길은 Panda CSS vs StyleX 였을까요~?ㅎㅎ

저도 몰랐던 기술 스택 선정 과정 글을 볼 생각에 벌써 설레네요!

[nhistory]

피드백 감사합니다. 흥미로운 과정이었는데 썰을 잘 풀어보겠습니다 ㅎㅎ

[Sunjae95]

단위/통합 테스트 (Vitest + Testing Library): 컴포넌트의 기능적 정확성 및 상호작용 검증. (Vite와의 시너지로 Vitest 선택)

2장에서 vite 섹션이 있는데 react 섹션에서 언급하는걸까요?

DaleUI가 Panda CSS를 선택한 결정적인 이유 (타입 안전성, 개발 경험, 설정 유연성, 디자인 토큰 관리 용이성 등 DaleUI의 지향점과 부합)

이번 포스팅에서 DaleUI가 Panda CSS 결정 이유가 너무 기대됩니다 👍

[nhistory]

네 테스트 관련 내용은 따로 블로그 글을 쓰는 게 좋을 것 같다는 달레님 의견이 있어서 여기서는 Testing Library 위주로 간단하게만 다룰려고 합니다.