프론트엔드
플랫폼 팀 없는 오픈 소스 기반의 디자인 시스템 구축 회고
두줄요약
전담 플랫폼 팀 없이 Mantine 기반 디자인 시스템을 구축·운영한 과정을 정리했습니다. 패키징, 버전 관리, 문서화와 협업 체계로 생산성과 UI 일관성을 높였습니다.
문제 상황
- 여러 세대의 디자인 시스템 혼재로 인한 UI 일관성 저하와 컴포넌트 탐색·재사용 비용
- 피그마 에셋·스토리북 부재, 불명확한 인터페이스, 수작업 QA로 인한 개발·디자인 병목
- 전담 플랫폼 팀 없이 디자인 시스템을 직접 구축·운영해야 하는 조직 여건
해결 방법
- Mantine 기반 UI를 자체 디자인 시스템 레포지토리에서 래핑하고, Anima·story.to.design으로 피그마 에셋 생성 보완
- 시스템 룰 우선, 필수 상황만 커스터마이징, 오픈 소스 기능 최대 활용이라는 운영 원칙 합의
- ThemeProvider 전역 커스터마이징 우선 적용과 불가 사례의 컴포넌트 패키지 단위 직접 확장
구조와 흐름
- 컴포넌트별 패키지와 통합 패키지 병행, peer dependency 기반 의존성 관리
- Turborepo 모노레포에서 Tsup·Vite 빌드, Changesets와 GitHub Action 기반 버전 관리·npm 배포
- Storybook Control·MDX·README·Changelog 제공과 Jira·Confluence·Code Owner 기반 협업 이력 관리
성능/운영 포인트
- 공식 문서와 실제 구현 간 간극을 줄이기 위해 메이저 업데이트는 서비스 단에서 처리하는 방향 전환
- Chromatic 대신 PR별 Storybook 프리뷰 생성으로 QA 비용 조정
- Emotion 제거, 디자인 토큰·다크 모드, Mantine 업데이트 기반 반응형 기능 고도화 계획
