디자인시스템 그리고 컴포넌트 라이브러리 만들기 1/2 (Vite, Vue)

최근 1년간 회사에서 디자인 시스템관련 작업을한 경험을 공유하려고 합니다.
완벽한 디자인 시스템을 만들었다고 생각하지 않지만 편의상 디자인 시스템이라고 하겠습니다.
최근 1년 작업하면서 느낀건 개발자들와 UX디자이너들이 생각하는 디자인 시스템이 많이 다르다는걸 느꼈습니다.
우선 디자인 시스템에 대해 설명하고 넘어가겠습니다.

개발자가 생각하는 디자인 시스템: Storybook + UI Component 로 구성된 구성

UX디자이너가 생각하는 디자인 시스템: Pigma or Zeplin 으로 구성된 컴포넌트 구성 + 폰트, 디자인 심볼 + 무언가를 통한 일괄적용 ( 앱 + 웹 )

어떻게 보면 UX디자이너가 생각하는 부분이 완전한 디자인 시스템에 더 가깝습니다. (적용은 다른 얘기지만요...)

디자인 시스템을 설명하는 글마다 조금씩 다른 부분도 있기 때문에 제가 이해한 디자인 시스템에 대해 설명하겠습니다.
디자인 시스템의 구성 요소는 아래와 같습니다.

• Design Language - 제품의 시각적 디자인의 기반이되는 타이포그래피, 아이콘, 여백, 디자인 토큰등을 정의 합니다. 개발자와 UX디자이너 사이에 용어의 통일 역시 필요합니다. ( product의 근본이 되며 Design Token을 통해 관리됩니다. 디자인 토큰 - ex) $red = (255,0,0) )
• Disign Kit - 새로운 설계를 위한 공유스타일, 심볼 컴포넌트로 구성된 툴
• Component Library - 컴포넌트들로 이루어지 프로그래밍 라이브러리
• Developer Sandbox - 개발자가 컴포넌트를 개발하고 테스트 할 수 있는 독립된 환경
• Documentation - 디자인 시스템을 설명하는 문서, 사용방법

이해를 돕기위해 간단히 예를들어보면 Deisgn Language, Design Kit 등은 Figma, Zeplin 정도로 설명할 수 있을 것 같습니다.
Component Library, Developer Sandbox, Documantation은 Storybook (문서이면서 샌드박스환경), Component Library로 설명할 수 있습니다.

여기까지 이해가 되었다면 왜 디자인 시스템을 만들기 쉽지 않은지 느끼셨을 겁니다.
React Native나 Flutter 같은 크로스 플랫폼 으로 개발된 게 아니라면 디자인 시스템을 개발하는건 더욱 어렵습니다.

Android, IOS, Web 각 플랫폼에서 각기 컴포넌트를 구성해야하며 여기서 사용하는 디자인 토큰은 자동화된 툴로 싱크를 맞춰줘야 합니다. 그리고 개발 결과물을 포함하여 다자인철학, 타이포그래피, 아이콘, 디자인 아이덴티티 등을 같이 문서화 하여야 합니다.
( 추구하는 디자인시스템을 정의하기 나름이긴 합니다. )

대표적인 예로 Material Design가 있습니다.
https://m3.material.io/



참조 사이트
https://storybook.js.org/tutorials/design-systems-for-developers/
https://www.freecodecamp.org/news/how-to-implement-any-ui-in-flutter/
https://rangle.io/blog/what-is-a-design-system/
....