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

이 글은 React 기반 프론트엔드 개발팀이 "잘" 사용할 수 있는 디자인 시스템 컴포넌트를 만들기 위해 고민했던 과정을 공유합니다. 디자인 시스템 구축 이전에는 공통 스타일을 scss 폴더에 정의하고 클래스를 가져다 쓰는 방식이었으나, 컴포넌트 수가 늘어나면서 관리의 어려움이 발생했습니다.

이에 따라 레고처럼 조립하여 사용할 수 있는 디자인 시스템 구축을 결정했습니다. 이상적인 협업 프로세스로서, UI 컴포넌트의 variation에 대한 명확한 인지를 바탕으로 최소한의 커뮤니케이션으로 빠르게 동기화하여 개발하는 것을 목표로 합니다.

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