디자인 시스템은 웹이나 모바일의 UI를 디자인 할 때 반복되어 활용되는 컴포넌트나 리소스 등을 모아서 만든 일종의 가이드 라인이다.
우리가 디자인 할 때 이런 규칙을 따르자!
이런 규칙이 없는 상황에서 여러명이 개발에 들어가게 되면 디자인의 일관성이 없어지고 반복되는 일이 많아져서 작업의 효율도 떨어질 것이다.
그러면 프로젝트를 할 때마다 디자인 시스템을 구축해야 돼? 라는 질문의 답은 그렇지 않다이다. 기본적으로 제공이 되고 있는 구글의 Material Design과 애플의 HIG가 있다. 여기서 기본적인 컴포넌트들을 어떻게 사용해야하고 배치해야되는지 제공되고 있다. 그 외에는 어도비의 Spectrum 디자인 시스템, 국내에 지마켓 디자인 시스템도 있다.
이렇게 얘기해도 디자인 시스템이 뭔지 감이 오지 않으니 한글로 써져있는 지마켓 디자인 시스템으로 살펴보자.
들어가보면 브랜드 정체성, 사용성, 일관성을 고려한 가이드라인이라고 나온다. 그리고 아래에는 브랜드와 파운데이션, 컴포넌트가 있다.
파운데이션은 컬러, 마진, 폰트, 아이콘 등 시각적인 요소들이 정해져있다. 컴포넌트는 재사용 가능한 구성 요소로 UI를 구성한다. 들어가보면 아주 자세하게 설명이 되어있는 것을 볼 수 있다.
프로젝트는 보통 기간이 넉넉하지 않기 때문에 이 많은 것들을 그 때마다 새로 만들려면 너무 힘들겠죠. 그래서 브랜드나 파운대이션 정도를 만들고 재사용 가능한 컴포넌트를 만드는 정도가 되지 않을까 생각한다. 이제 디자이너가 무엇을 만들어야하는지 아시겠나요? 단순히 로고 몇개 그리고 컬러 칠하고 피그마에서 모바일 뷰만 만들어서 개발자에게 넘겨주면 굉장히 불편하겠죠. 생각보다 섬세한 디자인이 필요하다.