디자인 시스템

studying coding 2023. 11. 15. 14:36

디자인 시스템이란?

프론트엔드 팀원이 많아지게 될 수록 하나의 서비스에 디자인과 기능이 파편화되기 쉽습니다. 시스템에 등록된 디자인이 아닌 작업이 많아질수록 QA 시간이 늘어나게 되고 애자일하고 빠른 배포에 장애물이 되는 경우가 많습니다.
서비스 규모가 점점 커지거나 다양한 서비스로 확장될 경우에 일관성있고 재사용할 수 있는 UI 디자인 시스템의 도입은 필수적입니다.
유저에게 일관적인 경험을 전달해 유저의 학습 비용을 줄여 서비스 이용에 편의성을 제공할 수 있습니다.
디자인과 개발 파트 사이에 맵핑이 잘 이루어지지 않는 부분들이 있는 경우, 생산성과 일관성을 높이기 위해서 만들어지게 됩니다.
페이지마다 개별적인 Button, Color 등을 구현하여 개발하게 되고 페이지마자 다른 컴포넌트를 사용하게 되면 기존 디자인과 다르게 구현되는 경우가 발생할 수 있고 QA를 하는데 불필요한 시간이 더 소모됩니다.
결과적으로 디자인 시스템이 없다면 코드 관리가 어려워지고 기술 부채가 쌓여서 제품의 완성도를 떨어뜨리게 됩니다.

기본 제공되는 라이브러리를 참고하면 조금 더 빠른 시스템 구축이 가능합니다.
웹 문서에서 제공하는 기준 규칙을 따라갑니다.
회사만이 가지고 있는 스타일과 느낌을 최대한 반영합니다. (컬러, 간격, 둥글기, 폰트 등)
모달 등의 단위 컴포넌트의 평균 형태와 크기를 결정합니다.
각각의 컴포넌트별로 같은 기능이지만 다른 UI를 사용하는 케이스를 파악합니다.
Foundation: color, typo, grid, radius, spacing 등 기반을 구축합니다.
Components: Foundation을 토대로 일정한 규칙을 가진 components를 생성합니다.
Template: components를 조합하여 UI를 설계한다. 템플릿은 확장할 수 있게 구성하여 다양한 상황에서 쉽게 활용될 수 있도록 합니다.