프론트엔드
MDS(Musinsa Design System) 지속 가능한 디자인 시스템을 향한 여정
두줄요약
무신사는 디자인 시스템 MDS를 설계하며 중복 제거와 유지보수성 사이의 균형을 고민했습니다. Atomic Design, Compound Pattern, 자동화 스크립트를 통해 생산성을 높이고 운영 부담을 줄이려 했습니다.
문제 상황
- 프로젝트별 개별 컴포넌트 개발로 인한 디자인 일관성 부족
- 유사 컴포넌트 반복 개발과 디자이너·개발자 간 소통 비용 증가
- 디자인 시스템 도입 후에도 공통 컴포넌트 파편화와 구분 비용 발생
원인 분석
- 중복 코드와 수정 포인트 분산으로 유지보수 난이도 상승
- 공통 컴포넌트의 과도한 결합과 확장성 저하 우려
- Atom 단위 세분화 이후 상태 공유와 의존성 관리의 어려움
해결 방법
- 유지보수성을 핵심 기준으로 한 Headless UI 아키텍처 채택
- Atomic Design과 Compound Pattern, Radix UI 조합으로 컴포넌트 구조화
- Molecule 이상 단위에서 Slot Pattern, SlotProps, Render Props를 활용한 투트랙 전략 적용
성능/운영 포인트
- Babel로 SVG path에 vector-effect를 자동 주입해 수작업과 문서 관리 비용 절감
- ts-morph 스크립트로 아이콘 대량 수정 자동화
- 반복 작업 자동화로 개발 리소스를 절감하고 지속 가능한 운영 기반 마련