디자인 시스템 - 디자인 시스템은 사용자 인터페이스를 위한 것이다

디자인 시스템의 경계를 명확하게 정의하기

디자인 시스템이 대세가 되면서 다시 한번 디자인 시스템의 본질에 대해서 깊게 생각해봐야 할 필요가 생겼다. 보통 디자인 시스템을 말할때 하나의 거대한 단일 시스템으로 생각하는 경향이 있다. "디자인" 이라는 말로 시스템을 설명하기 때문에 그 범위가 너무 넓은 것이다. 때문에 뭐든지 디자인 시스템이라는 카테고리에 넣어서 생각하려는 경향이 생겼다.

우리는 종종 디자인 시스템을 하나의 독립된 실체로 이야기한다. "디자인 시스템은 시간을 절약하고 품질을 향상시킵니다." "아, 디자인 시스템이 그런 기능을 제공하죠." "최신 버전의 디자인 시스템으로 업데이트하세요." 실제로 디자인 시스템은 다면적인 레이어 케이크이며, 조직 내 다른 레이어 시스템의 일부로 작동한다. - Brad Frost -

이 글은 디자인 시스템의 본질을 생각해보기 위한 것이다.

디자인 시스템은 시스템의 시스템이지만 모든 시스템이 디자인 시스템의 일부인 것은 아니다. - Brad Frost -

디자인 시스템은 시스템의 시스템이다

디자인 시스템은 시스템의 시스템이라는 말이 있다. 디자인 시스템 내부에 다른 여러 시스템들이 포함되기 때문이다.

예를 들면 다음과 같다.

• 디자인 및 코드의 UI 컴포넌트 및 변형
• 디자인 토큰
• 타이포그래피 시스템
• 컬러 시스템
• 레이아웃/그리드 시스템
• 아이콘 시스템

이러한 하위 시스템들이 모여서 거대한 디자인 시스템을 이루고 재사용 가능한 컴포넌트 세트를 구성하여 사용자 인터페이스를 구축하는데 사용된다.

모든 시스템이 디자인 시스템의 일부인 것은 아니다

디자인 시스템은 점점 거대해졌다. 다음의 도표는 이러한 경향을 잘 보여준다.

이런식으로 시스템이 거대해지면 유지보수가 힘들어지고 시스템을 파악하기 점점더 어려워 진다.

2016년에는 연사가 이런 슬라이드를 보여주면 다른 청중들과 함께 고개를 끄덕였을 것이다. 나에게도 이와 비슷한 그림이 있기 때문이다. 하지만 이후 디자인 시스템 컨설팅과 공동 제작 작업을 통해 "모든 것이 디자인 시스템 우산 아래에 있다"는 식의 설명은 물을 흐리게 하고 시스템을 다루기 어렵게 만든다는 사실을 알게 되었다. 디지털 제품 제작의 모든 측면을 고려해야 하는 디자인 시스템에 과도한 부담을 주고 조직 전체에 많은 혼란을 초래한다. - Brad Frost -

그렇다면 어떻게 해야할까? 하위 시스템은 무시해도 된다는 의미인가? 물론 그것은 아니다.

"하지만 이런 것들은 중요합니다!" 당연히 중요하다! 이러한 요소들을 고려하고, 포착하고, 체계화하고, 문서화해야 한다. 하지만 반드시 디자인 시스템의 범주에 속하는 것은 아니다. - Brad Frost -

디자인 시스템은 사용자 인터페이스를 위한 것이다

디자인 시스템은 결국 사용자 인터페이스를 위한 것이다. 인터페이스에 직접적으로 영향을 미치지 않는 다른 하위 시스템들은 (물론 중요하지만) 디자인 시스템과 분리하여 관리할 필요가 있다.

디자인 시스템이 조직 전체에서 사용할 수 있는 공통 인터페이스 패턴과 관련된 모든 것을 처리한다는 것이다. - Brad Forst -

이렇게 분리된 하위 시스템들과 디자인 시스템은 긴밀한 관계를 갖기 때문에 상호작용이 활발하게 이루어져야 하는 것은 물론이다.

디자인 시스템은 조직 전반의 중요한 표준을 구현하지만, 반드시 이러한 표준을 정의하거나 소유하지는 않는다. 시스템 간에는 밀접한 관계가 있을 수 있으며, 일부 시스템은 콘텐츠와 UI처럼 형제 관계로 운영되는 반면, 다른 시스템은 브랜드와 UI처럼 부모와 자식 관계로 운영되기도 한다. - Brad Frost -

사진 촬영 가이드라인, 콘텐츠 가이드라인, 음성 및 톤 가이드라인, 기술 표준, 사용자 페르소나가 중요하지 않다는 뜻은 아니다. 매우 중요하다! 하지만 이러한 표준은 디자인 시스템 외부에서 정의되고 관리되어야 하며, 긴밀한 관계를 구축해야 한다는 사실을 점점 더 많이 발견하고 있다. - Brad Frost -

제품별 UI 솔루션

실제 애플리케이션을 만들때도 디자인 시스템으로 모든 것을 처리할 수는 없다. 여러 제품군이 있다고 할 때 디자인 시스템은 제품군 전체에 통일성을 부여할 수 있지만 각각의 제품마다 고유의 요소를 처리할 수는 없다. 이러한 고유 요소는 해당 프로젝트에서 자체적으로 처리하는 것이 훨씬 효과적이다.

UI의 세계에서도 디자인 시스템이 제품 팀이 직면할 수 있는 모든 문제를 해결해서는 안 된다. 레이어 케이크 접근 방식을 구축하면 디자인 시스템에 중요한 압력 해제 밸브를 제공하는 동시에 개별 제품군 또는 제품이 자체적으로 문제를 해결할 수 있는 기능을 제공할 수 있다. - Brad Frost -

이러한 접근 방식을 사용하면 애플리케이션별 솔루션으로 핵심 디자인 시스템을 오염시키지 않으면서도 일관성을 유지하고 재사용성을 극대화할 수 있도록 UI 솔루션을 적절한 수준에 배치할 수 있다. - Brad Frost -

진화하는 언어

Brad Frost는 처음에 디자인 시스템을 다음과 같이 정의했다.

디자인 시스템은 조직이 디지털 제품을 설계하고 구축하는 방법에 대한 공식적인 이야기다. - Brad Frost -

새롭게 업데이트된 정의는 다음과 같다.

디자인 시스템은 조직이 디지털 인터페이스를 설계하고 구축하는 방법에 대한 공식적인 이야기다.

'제품'을 '인터페이스'로 변경하는 것은 작지만 중요한 변화다. 위에서 언급했듯이 디지털 제품을 만드는 데는 다양한 측면이 있으며, 디자인 시스템 자체가 성공적인 디지털 제품을 만들기 위한 모든 표준을 정의하고 소유해서는 안 된다.

공유 UI 패턴을 중심으로 경계를 설정함으로써 디자인 시스템 작업의 명확성을 확보할 수 있었다. 끊임없이 변화하는 이 분야에서 대부분의 일이 그렇듯이, 우리는 더 나은 작업을 수행하기 위해 끊임없이 우리의 정신 모델과 언어를 다듬고 연마하고 있다. - Brad Frost -