오픈 소스 디자인 시스템 구축 회고: 생산성 향상 비결 공개!

by DD
2년 전
조회수 6

플랫폼 팀 부재 속에서 오픈 소스 기반 디자인 시스템 구축을 시작함

Mantine UI 라이브러리 선택, 피그마 에셋 자동화를 통해 생산성 확보

컴포넌트 단위 패키징, Changesets를 활용한 버전 관리로 시스템 운영

오픈 소스 선택과 디자인 시스템 구축 과정

Mantine 선택은 커스터마이징 용이성을 고려한 결과이다. 피그마 에셋 자동화를 위해 Anima 플러그인을 활용했다. 따라서, 디자인 시스템 구축에 필요한 리소스와 시간을 절감하고, 개발 생산성을 향상시켰다.

컴포넌트 패키징과 버전 관리 전략

컴포넌트 단위 패키징을 통해 유연한 버전 관리와 커스터마이징을 지원한다. Changesets를 사용하여 패키지 버전 관리 자동화 및 SemVer 준수를 통해 시스템 안정성을 확보했다. 결과적으로, 유지보수성을 높였다.

Mantine ThemeProvider를 활용한 커스터마이징

ThemeProvider를 활용하여 전역 스타일 커스터마이징을 적용한다. 컴포넌트 스타일을 쉽게 수정하고, 새로운 스타일을 추가할 수 있다. 따라서, 디자인 시스템의 일관성을 유지하면서도 유연성을 확보하여 UI 개발 생산성을 향상시켰다.

플랫폼 팀 없는 오픈 소스 기반의 디자인 시스템 구축 회고