Project Concorde: Material UI 종속성 탈피 및 Headless UI 도입을 통한 컴포넌트 라이브러리 재구축 사례

핵심 기술: ePilot의 Project Concorde는 Material UI에 대한 높은 의존성을 줄이고, CSS Modules와 Headless UI 라이브러리(Radix UI Primitives, MUI Base)를 채택하여 유연하고 확장 가능한 새로운 컴포넌트 라이브러리 @epilot/concorde-elements를 구축한 사례를 공유합니다.

기술적 세부사항:
* Material UI 탈피 이유: 성능 오버헤드 감소(CSS Modules 선호), React 버전 제약 완화, 모던 CSS 기능 활용, Material UI 테마 객체 사용 제한.
* 초기 접근 방식: 37개 이상의 컴포넌트를 초기에는 완전히 처음부터 개발했으나, 점차적으로 Scalability 문제에 직면.
* 전략적 전환: Headless UI 라이브러리(Radix UI Primitives, MUI Base)를 도입하여 복잡한 로직과 상태 관리는 라이브러리에 맡기고, 스타일링 및 디자인 시스템은 자체적으로 구축하는 하이브리드 모델 채택.
* 주요 컴포넌트: Product Tile, Button, Link, Card, TextField, StepperInput, Image, ImageStepper, MobileStepper, DatePicker, Autocomplete 등.
* 핵심 원칙:
* 간결하고 확장 가능한 시스템: "하나의 공장을 통째로 교체하기보다 단일 유닛을 교체하는 것이 더 쉽다"는 철학.
* 표준화된 폴더 구조: 각 컴포넌트별 logic, styles, tests, types, index.ts 구조 유지.
* CSS 클래스 명명 규칙: Concorde- 접두사를 사용하여 쉬운 커스텀 스타일링 기반 마련.
* 디자인 토큰: CSS 변수(Custom Properties)를 사용하여 색상, 간격, 타이포그래피 등 일관된 디자인 시스템 구축 및 외부 확장을 용이하게 함.
* TypeScript 사용: 타입 안전성 확보 및 주석을 통한 문서화 역할 수행.

개발 임팩트:
* Material UI의 성능 오버헤드 감소 및 CSS Modules를 통한 최적화.
* Headless UI 도입으로 개발 속도 향상 및 재활용성 증대.
* 디자인 토큰 기반의 일관된 UI 및 테마 확장성 확보.
* TypeScript를 통한 코드 안정성 및 문서화 효율 증대.
* 결과적으로 더 현대적이고 유지보수 가능한 UI를 구축하며 개발팀의 역량 강화.

커뮤니티 반응: (원문에서 직접적인 커뮤니티 반응 언급 없음)

톤앤매너: 전문적이고 실용적인 기술 공유.