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

이 글은 "잘" 사용할 수 있는 디자인 시스템 UI 컴포넌트를 만들기 위한 고민 과정을 공유합니다. 모두싸인 프론트엔드 팀은 React 기반으로 개발하며, 디자인 시스템 구축 이전에는 SCSS의 shared 폴더에 공통 스타일을 정의하고 클래스를 가져다 쓰는 방식을 사용했습니다.

하지만 컴포넌트 수가 늘어나면서 관리의 어려움이 발생했고, 이에 레고처럼 조립하여 사용할 수 있는 디자인 시스템 구축을 결정했습니다. 이상적인 협업 프로세스로는 최소한의 커뮤니케이션으로 UI 컴포넌트의 variation에 대해 빠르게 동기화하는 것을 목표로 합니다.

이를 통해 개발 생산성과 협업 효율성을 높이고자 합니다.