무신사 프론트엔드 개발팀, MDS 디자인 시스템 구축을 통한 생산성 및 유지보수 혁신 사례

핵심 기술

무신사 프론트엔드 개발팀은 기존 프로젝트의 비효율성을 해결하고 디자인 일관성 및 개발 생산성을 높이기 위해 MDS(Musinsa Design System)를 구축했습니다. 이를 위해 Headless UI 아키텍처를 채택하고, 유지보수성과 코드 중복 제거를 핵심 목표로 삼았습니다.

기술적 세부사항

• 문제점: 프로젝트별 컴포넌트 개별 개발로 인한 디자인 비일관성, 중복 개발, 높은 소통 비용.
• 해결 방안: 통일된 디자인 원칙 및 재사용 가능한 컴포넌트 라이브러리 개발 (MDS).
• 핵심 개발 철학: 유지보수성 최우선, 비즈니스 로직과 UI 분리.
• 아키텍처: Headless UI 라이브러리 아키텍처 채택.
  • Headless UI는 비즈니스 로직과 UI를 분리하여 유지보수성 향상.
  • 수정 포인트 단일화 및 예측 가능성 증대.
• 코드 중복 해결 전략:
  • 단순 최적화보다 유지보수성을 위한 중복 제거.
  • 중복 제거 기법 (Gzip, DB 정규화, SSOT)과 코드 중복의 차이점 설명.
  • 수정 포인트 단일화를 통한 유지보수 용이성 확보.
• 디자인 시스템 구축 방법론:
  • Atomic Design: 컴포넌트를 Atom, Molecule, Organism, Template, Page 단위로 분할하여 결합도를 낮추고 유연성 확보.
    • 단점: Atom 단위 세분화 시 상태 공유의 어려움.
  • Compound Pattern: 컴포넌트 간 결합도를 최소화하면서 상태 유지. Radix UI를 기본 컴포넌트로 채택.
  • Slot Pattern: Molecule 이상 단위에서 Atom Template으로 인한 중복 감소 및 확장성 확보.
    • Atom 컴포넌트가 많아질수록 SlotProps 데이터 증가, 하위 호환성 유지 어려움.
  • 투트랙 전략: 빠른 배포 시 Atom Template 공유, 다양한 곳에서 사용되는 컴포넌트는 Slot, SlotProps, Render Props 활용.
• 자동화 도구 활용:
  • Babel 플러그인: SVG 아이콘에 vectorEffect='non-scaling-stroke' 속성 자동 추가.
    • 휴먼 에러 방지 및 문서화/숙지 비용 절감.
  • ts-morph 스크립트: 아이콘 컴포넌트의 특정 조건(예: strokeColor prop 사용)에 대한 자동 코드 수정 및 리팩토링.
    • 유지보수 효율성 증대 및 개발 리소스 절감.
• 커뮤니케이션 개선:
  • 디자인 시스템 도입 초기 중앙 집중화 기대와 달리, 디자인 요구사항 변화에 대한 즉각적인 대응 어려움.
  • 개별 컴포넌트 개발로 인한 파편화 발생.
  • 컴포넌트 구분 및 관리에 대한 커뮤니케이션 비용 증가.

개발 임팩트

• 개발 생산성 향상: 반복적인 UI 작업 감소 및 컴포넌트 재사용 증대.
• 유지보수성 개선: 코드 중복 감소, 수정 포인트 단일화, 자동화 도구를 통한 효율적인 관리.
• 디자인 일관성 확보: 통일된 디자인 원칙 적용.
• 궁극적인 목표: 사용자에게 일관된 경험 제공 및 팀 협업 효율성 증대.