Vibrant Design System을 소개합니다
- Vibrant Design System 소개
클래스 101에서는 디자인 시스템을 Cross Platform, Productive, Consistent를 핵심 가치로 하여 클래스 101의 유저들이 일관적인 서비스를 경험할 수 있도록 고안된 시스템으로 정의했습니다. Vibrant의 목표는 클래스 101의 프로덕트를 개발할 수 있도록 공통 컴포넌트의 디자인과 스펙을 규정하는 것입니다.
- 디자인 시스템의 구조
Vibrant의 구조는 파트, 층, 레이어, 그리고 블록 쌓는 규칙으로 이루어져 있습니다. 세 파트는 각 분야의 하부 구조를 의미하며, 순서대로 Foundation, Tokens, Core Systems, Components라고 부르고 있습니다. 레이어는 프로세스의 기본이 되는 파운데이션, Tokens, Core Systems, Components가 있으며, 블록 쌓는 규칙은 Core Systems가 만들어질 때 사용됩니다.
- 레이어의 파트
Tokens 레이어에서는 토큰의 이름과 맥락 등이 정의됩니다. Core Systems 레이어에서는 테마 시스템을 어떻게 사용하고 활용해야 하는 지에 대한 방법 등이 정의됩니다. Components 레이어에서는 버튼의 구체적인 스펙과 사용 가이드 등이 작성될 수 있습니다.
- 프로세스의 파운데이션 레이어
프로세스의 파운데이션 레이어는 플랫폼 팀과 브랜드 팀의 협업 및 커뮤니케이션 등이 포함됩니다. 이를 통해 Vibrant의 3가지 부분들을 균형 있게 발전시켜 디자인 시스템이 가지는 가치를 더욱 크게 하고 보다 안정적인 시스템을 구축할 수 있습니다.