Design System

Design System

여러 페이지에서 공유 언어와 시각적 일관성을 유지하면서 중복을 줄여 대규모로 디자인을 관리하기 위한 일련의 표준

• 명확한 표준에 따라 재사용 가능한 컴포넌트 모음으로, 여러 애플리케이션을 구축하기 위해 함께 조립해서 사용 가능

• 디자이너, 개발자 등 다양한 관련 팀이 디지털 제품을 디자인하고 구축하는데 도움이 되는 참고 자료로 사용됨

장점

• 디자인부터 프로덕션 워크플로우까지 간소화

• 디자인 - 개발팀 내에서 통합된 언어 생성

• 재사용 가능한 컴포넌트와 공유된 논리적 근거를 통해 제품 개발 속도 향상

• 더욱 응집력 있는 사용자 경험과 일관된 디자인 언어를 통해 더 나은 제품 제공

• 설계 및 기술 부채 감소를 통한 유지 관리 및 확장성 개선

• 공통된 문제를 해결하여 팀이 사용자 요구사항을 해결하는데 집중할 수 있음

두 가지 중요한 요소

the design repository

• Style Guide → 인터페이스 또는 기타 디자인의 결과물을 만들기 위한 구체적인 구현 지침, 시각적 레퍼런스 및 디자인 원칙이 포함

• Component Library → 재사용 가능한 UI 컴포넌트가 포함되며 디자이너와 개발자 모두 특정 UI 컴포넌트에 대해 배우고 구현할 수 있는 원본의 역할을 함

• Pattern Library → UI 컴포넌트 그룹 또는 레이아웃의 컬렉션을 제공, 일반적으로 콘텐츠 구조, 레이아웃 및 템플릿을 포함한다.

the people who manage it

• 지속적으로 관리하는 Design-system Team

MFA와 Design System 관계

• 마이크로 프론트엔드는 하나의 어플리케이션이지만 각 마이크로 앱들을 관리하는 팀들이 있음

• 하나의 어플리케이션인데 서로 다른 서비스처럼 보이면 완성도가 떨어져 보임, 사용자에게 일관적인 경험을 주지 않으면 신뢰에 영향을 줌

• 여러 End-to-End 팀들이 각각 작업을 하다보면 파편화가 발생할 수 있음

• 디자인과 개발의 SSOT가 필요하고, 디자인 원칙과 재사용 가능한 컴포넌트 관리가 필수

• 디자인 시스템은 일반적으로 관리를 하는 만큼 강력한 힘을 가지게 됨

• 관리에 들어가는 노력이 크기 때문에 현실적인 문제가 있지만 도입을 꼭 검토해야 하는 시스템