“잘” 사용할 수 있는 디자인 시스템 컴포넌트 만들기

간단 소개

모두싸인 디자인 시스템 구축 과정과 Styled System을 이용한 UI 컴포넌트 개발 및 개선 사례를 공유합니다.

AI Summary

디자인 시스템 구축 배경
- 기존 스타일링 시스템의 문제점: 컴포넌트 수 증가, 스타일 파악 어려움.
- 디자인 시스템 구축 목표: UI 컴포넌트를 레고처럼 쉽게 사용, 협업 효율성 증대.
- 이상적인 협업 프로세스: UI 컴포넌트 variation에 대한 구성원 간의 동일한 인지.
Styled System 도입 및 Button 컴포넌트 구현
- Styled System: React 컴포넌트에 style props 적용, 테마 기반 스타일 제어.
- Button 컴포넌트 구현: variation 정리, ButtonProps 정의, variant API 활용.
- Button 컴포넌트 장점: 구현자는 버튼 상태 변화에 따른 스타일을 신경 쓰지 않아도 됨.
Modal 컴포넌트 구현 및 Context API 활용
- Modal 컴포넌트 문제점: 다양한 형태의 모달 컴포넌트 존재.
- Modal 컴포넌트 구현: react-modal 라이브러리 의존, Context API를 활용하여 모달 중첩 시 오버레이 배경색 조절.
- Modal 컴포넌트 개선 효과: 코드 양 감소, 디자인 일관성 유지, 개발 편의성 향상.