MDS 지속 가능한 디자인 시스템을 향한 여정

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

UI 디자인

대상자

• *프론트엔드 개발자, 디자이너, 디자인 시스템 운영자**
• 난이도: 고급 (React, 디자인 시스템, 컴포넌트 아키텍처 이해 필요)*

핵심 요약

• Headless UI 아키텍처를 채택하여 비즈니스 로직과 UI 분리로 유지보수성 향상
• Atomic Design과 Compound Pattern을 결합해 컴포넌트 결합도 최소화 및 유연성 확보
• Babel과 ts-morph를 활용한 SVG 자동화, 컴포넌트 마이그레이션 자동화로 개발 생산성 개선

섹션별 세부 요약

1. 문제점과 디자인 시스템 도입 배경

• 프로젝트별 컴포넌트 중복, 디자인 일관성 저하, 개발자-디자이너 커뮤니케이션 비용 증가
• 유지보수성과 개발 생산성을 높이기 위한 디자인 시스템(MDS) 도입 결정
• Headless UI 선택 이유: 비즈니스 로직과 UI 분리로 유지보수성 향상

2. Headless UI 아키텍처 적용

• 비즈니스 로직과 UI 분리로 변경 포인트 단일화
• 유지보수 시간이 개발 시간보다 길기 때문에 코드 수정 포인트 최소화 필요
• Headless UI는 UI 컴포넌트 뼈대만 제공하며, 사용처에 로직 위임

3. Atomic Design과 Compound Pattern 결합

• Atomic Design (Atom → Molecule → Organism → Template → Page)으로 컴포넌트 단위 분리
• Compound Pattern 도입: 컴포넌트 간 결합도 최소화, 상태 공유 가능
• Radix UI 도입으로 검증된 솔루션 활용

4. Slot Pattern과 확장성 고려

• Molecule 이상 단위에서 Slot Pattern 활용으로 확장성 확보
• SlotProps와 Render Props 병행 사용, 하지만 Atom 수 증가로 복잡성 증가
• Content Coupling과 Coincidental Cohesion을 감수하고 빠른 개발을 위한 투트랙 전략 도입

5. SVG 자동화 및 컴포넌트 마이그레이션

• Babel을 활용한 SVG vectorEffect 자동 추가 (non-scaling-stroke 속성)
• ts-morph를 사용한 SVG 경로 자동화 스크립트 개발
• 140개 아이콘에 대한 공통 변경 사항 적용을 위한 Adapter 컴포넌트 개발

6. 커뮤니케이션 문제점과 해결 방향

• 디자인 시스템 도입으로 커뮤니케이션 비용 감소 기대, 하지만 리소스 부족으로 인해 파편화된 컴포넌트 발생
• 디자인 시스템 컴포넌트 여부 구분 어려움, 지속적인 개선 필요

결론

• Headless UI + Atomic Design + Compound Pattern 결합으로 유지보수성과 확장성 확보
• Babel/TS-morph 자동화 스크립트로 SVG 처리 및 컴포넌트 마이그레이션 개발 리소스 절감
• 디자인 시스템의 중심화와 자동화 도구 도입이 지속 가능한 운영 기반 마련
• 커뮤니케이션 문제 해결을 위해 디자인 시스템 중심의 협업 프로세스 개선 필요