스타트업으로 이직 후 디자인 시스템을 0에서부터 구축하는 과정에서 새로 배운 것이 많아 비슷한 고민을 하는 사람들을 위해 공유하고자 한다. 디자인 시스템이란 서비스의 일관성과 작업의 효율을 위한 UI 컴포넌트 가이드를 뜻하며 색상, 글꼴, 그리드, 간격 등이 해당한다. 밥알이 모여 주먹밥이 되고 원자가 모여 분자가 되듯 디자인 시스템의 토대를 만들기 위해서는 디자인 컴포넌트를 먼저 다지는(?) 작업이 선행되어야 한다. 총 3편으로 작성할 예정이며, 디자인 토큰(Design token)을 활용해 디자인 시스템의 토대를 만드는 방법을 먼저 설명하겠다.
다섯 가지 구성요소를 활용해, 유저 인터페이스(UI) 구성과 그에 따른 코드를 생성할 수 있는 ‘Shaper’를 소개합니다. ‘Shaper’에서 제공하는 핵심 기능은 1) 타입, 컬러, 여백, 테두리 등에 포함되는 세부 값을 입력 또는 원하는 조건을 선택해 일정 기준의 인터페이스 구성 가능 2) 기본 제공되는 인터페이스를 테마에 따라 변경한 뒤 상세 조건을 추가하거나 설정해, 원하는 모습의 인터페이스 제작 가능 3) 컬러, 여백, 테두리 등 다섯 가지 구성요소 중 하나를 선택해 인터페이스 랜덤 생성 가능 4) 생성한 인터페이스를 웹상에서 빠르게 확인할 수 있는 코드 제공 등이 있는데요. 지금부터 자세히 살펴보겠습니다.