UX/UI 디자이너나 프론트엔드 개발자라면, 또는 소프트웨어 제품 개발 과정에 관여하고 있다면 디자인 시스템이라는 개념을 들어보셨을 것 같습니다. 제품 개발 과정에서 더 이상 페이지 단위의 관리가 아닌 재사용 가능한 컴포넌트 단위의 관리의 필요가 대두되면서 그 중요성이 높아져 왔습니다. 한 제품 내에서 또는 다양한 제품 군들 내에서의 일관성을 위해, 그리고 개발 유지 보수의 용이성을 위해 우리 모두 디자인 시스템을 구축해야 해! 라고 하지만 디자인 시스템이라는 개념에 대해 이해당사자 모두가 같은 이해를 바탕으로 소통하고 있지 않은 경우를 많이 봤습니다. 그럼 디자인 시스템은 무엇이고, 왜 필요하며, 어떤 도움을 줄까요?
디자인 시스템은 무엇인가? 디자인 라이브러리와의 차이점
간혹 들려오는 디자인 시스템이 뭐예요? 라는 질문에 대답을 하기 란 생각보다 쉽지 않은 것 같습니다. 곰곰히 생각을 해보니 머리 속에 그리는 개념이 서로 다른 경우도 있고, 조직마다 상이한 경우도 많기 때문에 그런가 싶기도 합니다. 하지만 한 마디로 정의내려야 한다면 이렇게 대답할 수 있지 않을까 싶기도 합니다: 제품 개발을 위한 디자인 언어를 정의하는 수단.
우선 디자인 시스템에 대해 서로 머리 속에 그리는 개념이 다르다가 어떤 의미인지에 대해 더 살펴볼까요? 우리는 종종 디자인 시스템과 디자인 라이브러리의 개념이 혼동되는 상황을 목격하곤 합니다. 상황에 따라 이 두 단어가 상호 교차적으로 사용되는 모습 또한 봅니다. 디자인 시스템과 라이브러리 모두 일관성, 효율성, 확장성을 염두에 둔다는 점이 공통점이라고 볼 수 있겠지만 디자인 시스템과 디자인 라이브러리는 분명 다른 개념이며, 디자인 시스템이라는 개념을 보다 잘 이해하기 위해서는 디자인 라이브러리가 무엇인지를 함께 짚고 넘어가는게 좋을 것 같습니다.
디자인 라이브러리는 일반적으로 UI를 구축하는데 사용되는 재사용 가능한 디자인 컴포넌트나 UI 요소의 집합을 의미합니다. 반면에 디자인 시스템은 서로 다른 제품이나 플랫폼에서도 일관되고 통일된 UX를 만들기 위해 사용되는 디자인 프린시플, 가이드라인, 패턴, 자산의 집합을 의미합니다. 사뭇 비슷하게 들리는 개념이지요? 차이점을 더 자세히 알아보겠습니다.
| 디자인 라이브러리 | 디자인 시스템 | |
|---|---|---|
| 구성 및 범위 | 주로 재사용 가능한 UI 요소나 컴포넌트에 초점을 둡니다. | 디자인 라이브러리보다 더 넓은 범위를 다룹니다. 일반적으로 UI 컴포넌트 뿐 아니라 디자인 프린시플과 가이드라인, 그리고 다양한 터치포인트에서 일관된 사용자 경험을 만들기 위해 어떻게 컴포넌트가 사용되는지를 다루는 문서를 포함합니다. |
| 일관성 | 개별적인 UI 요소나 컴포넌트를 제공하여 단독으로 사용될 수 있으며, 일관된 디자인 언어나 프린시플을 강제하지 않을 수 있습니다. | 전체적인 사용자 경험에서 통일성과 일관성을 보장하기 위해 설계됩니다. 디자인 요소와 인터랙션이 어떻게 작동하는지 가이드하고, 사용자를 위한 일관적 경험을 설계하는 통일된 디자인 언어를 구축합니다. |
| 거버넌스 | UI 요소나 컴포넌트의 집합을 제공하는데에 초점을 두고 있기 때문에 일반적으로 디자인 시스템과 동일한 레벨의 거버넌스 매커니즘을 포함하지는 않는 경우가 많습니다. | 정립된 디자인 프린시플, 가이드라인, 패턴을 준수하기 위해 디자인 리뷰, 승인 및 버전 관리를 위한 프로세스가 구축될 수 있고, 디자인 시스템의 효과적인 사용 방법에 대한 문서화 등을 포함할 수 있습니다. |
| 유연성 | 제공된 대로의 사용이 요구되는 UI 컴포넌트 셋입니다. | 디자인 시스템은 특정 UI 컴포넌트에 대한 요구보다는 디자인 프린시플이나 가이드라인을 제공하는 것에 초점을 두기 때문에 어떻게 디자인 요소가 사용될지에 대해 유연성을 가질 수 있습니다. |
또한 디자인 라이브러리는 보통 디자인 또는 프론트엔드 팀에 의해 만들어지고 관리되는 경향이 있지만, 시스템 레벨로 갈수록 조금 더 cross-functional 팀 단위에서 만들어지고 관리되는 부분도 차이점이라고 볼 수 있을 것 같습니다. 디자인 시스템은 라이브러리에서 정의하는 UI 요소나 컴포넌트 스펙을 포함하지만, 더 나아가 디자인 프린시플과 패턴, 좋은 활용 사례와 접근성 등을 고려한 명확한 가이드라인 등을 함께 제공합니다. 분명 여러분이 이미 많이 들여다보셨을 구글의 Material Design에서도 이러한 부분을 잘 확인하실 수 있습니다.
Material 3의 각 컴포넌트 페이지들은 Overviw, Specs, Guidelines, Accessibility 네 탭으로 나누어져 있습니다. UI 스펙 뿐 아니라 상세 가이드라인을 포함하며 사용 예시도 보여주고 있습니다.
디자인 시스템 구성 살펴보기
그렇다면 주요 디자인 시스템이 어떻게 구성되어있는지 이해하기 위해 사례로 간략히 살펴보면 좋을 것 같습니다. 앞서 말한 구글의 Material design을 다시 한번 볼까요? 구글은 아시다시피 다양한 제품 군들이 있고, 그 제품들은 Material에서 정의된 프린시플 및 가이드라인에 따라 사용자들에게 일관성 있는 시각적 언어와 사용자 경험을 제공하고 있습니다.
Get started와 Blog를 제외한 Material의 구성은 Develop, Foundations, Styles, Components로 되어있습니다. Develop에서는 Mobile, Web 기반의 다양한 플랫폼에서의 개발을 지원하기 위한 개발자 문서로 안내하고 있습니다. Foundations에서는 디자인 프린시플과 레이아웃, 간격, 디자인 토큰 등이 주로 정의됩니다. 이 부분에 대해서는 다음 포스트에서 좀 더 자세히 적어보겠습니다.
Styles에서는 보통 디자인 스타일 가이드라인 형태로 정리되는 요소들이 정의됩니다. Material에서는 색상, 아이콘, 타이포그래피 등의 요소가 포함되어 있을 뿐 아니라 Elevation, Motion, Shape에 대한 정의도 포함하고 있습니다.
Components에서는 개별 컴포넌트에 대한 정의, 구성, 활용 예시, 스펙, 가이드 라인 등을 포함하고 있습니다.
Material의 각 컴포넌트 페이지는 Overview, Specs, Guidelines, Accessibility 네 탭으로 구성되어 있습니다. Overview에서는 주로 해당 컴포넌트의 정의와 리소스, 핵심 정리, 업데이트 사항을 다룹니다.
Specs에서는 컴포넌트의 구성과 상세 스펙, 활용 예시들을 보여줍니다.
Guidelines에서는 사용 방법, 컴포넌트 구조, behavior 등을 소개합니다. Do / Don't 예시를 공유해서 명확한 가이드라인을 제시하는 것을 볼 수 있습니다.
마지막으로 Accessibility 탭에서는 사용 예시, 인터랙션 등의 정보를 포함하고 사용자 접근성 측면에서의 가이드라인을 추가로 제공합니다. 키보드 네비게이션 (keyboard navigation)에 대한 정보나, 스크린 리더 같은 assistive tech가 정확히 UI를 읽어갈 수 있도록 돕는 올바른 항목 라벨링을 위한 가이드라인도 제공됩니다.
마무리
디자인 시스템이 무엇인지와 Material을 예시로 디자인 시스템 구성을 살펴보았습니다. 디자인 시스템이 무엇인지 조금 감이 오시나요? 대화를 하다보면 상황에 따라 디자인 시스템 개념이 디자인 라이브러리나 UI Kit와 혼동되어 사용되고 있는데에 있어 아쉬움이 있어서 정리해 보았습니다. 디자인 시스템을 구축한다고 하실 때 가장 많이 참고하시는게 가장 표준화된 Material Design일 거라 그 예시로 살펴보았지만 다른 좋은 시스템들이 많으니 함께 살펴보시는 것을 추천드립니다.
아래는 잘 알려진 디자인 시스템들이니 한번 확인해보시면 좋을 것 같습니다!