Current Issue

최근 몇 년 간, 디자인 시스템을 구축하고 관리하기 위한 기능을 제공하는 새로운 도구들이 폭발적으로 증가했다. UX Tools가 전 세계 디자이너들을 대상으로 실시한 설문조사에 의하면, 2023년 가장 인기 있는 디자인 시스템 관리 도구로 피그마가 독보적인 사용률 1위를 차지하고 있으며, UI 디자인, 프로토타이핑, 디지털 화이트보드 등 조사 항목의 전반에 걸쳐 최고의 디자인 도구로 평가 받고 있다[2]. 클라우드 기반의 실시간 협업과 풍부한 플러그인 생태계 및 커뮤니티 서비스를 기반으로, 최근 피그마가 집중하고 있는 디자인 시스템의 변수(Variables)와 토큰(Tokens)관리 영역은 UI 디자인 작업과 디자인 시스템 관리를 하나의 도구 안에서 효과적으로 관리할 수 있도록 지원하고 있다. 피그마는 이러한 장점들을 기반으로 타 디자인 도구 대비 제품 개발을 위한 효율적인 디자인 설계 환경 구축이 가능하다. 설문조사 2순위를 차지한 스토리북은 프론트엔드 개발에 사용되는 여러 컴포넌트들을 문서화하는 데 활용되는 도구이다. 보조 도구로서 주로 사용되는 것을 알 수 있는데, UI의 단일 정보 소스로서, 모든 구성 요소와 다양한 상태를 색인화하여 팀이 기존 UI 패턴을 쉽게 찾고 재사용할 수 있도록 하고, 모든 사람에 대하여 UI가 실제로 어떻게 작동하는 지 공유하는 것을 목적으로 활용된다[3]. 주로 프론트엔드 개발팀을 주축으로 관리되며, 특히 대규모 팀에서는 피그마와 스토리북을 병행하여 디자인 시스템을 구축하는 경향이 높은 것을 알 수 있다[2].

Fig. 1. 
The most popular design system management tools of 2023

다양한 기업들의 디자인 시스템 구축을 기반한 업무의 변화와 혁신 속에서 최근 피그마는 2020년 이후 3년만에 Config 2023을 통해 다양한 기능 업데이트를 소개하며 디자인 프로세스의 변화의 방향을 제시하였다. 컨퍼런스의 주요 주제는 피그마의 주요 기능 소개와 시연을 포함하여 디자인 시스템, 프로토타이핑, 개발자 모드, 디자인 분야의 인공지능 도입과 생성형 AI 등 다양한 주제들을 다루고 있지만, 특히 디자인과 프로토타이핑에서의 반복(Iteration)작업 기능을 강화하여 이전보다 빠르고 정교한 작업을 지원하도록 개선되었다[4]. Config 2023의 가장 큰 업데이트는 변수(Variables)기능의 추가[5]이다. 디자인 시스템 구축에 있어 중요한 부분인 디자인 토큰을 구현할 수 있는 기능을 변수(Variables)라는 명칭을 사용하여 런칭하였다. 업데이트 이전까지 피그마의 부족한 부분 중 하나는 색상, 텍스트 등의 원자적 디자인 결정에 의미와 용도를 부여하기 위한 디자인 토큰 정의 기능이었다. 별도 플러그인에 의존해야만 구현이 가능했던 디자인 토큰이 베타 업데이트를 통해 기본 기능으로 추가되면서, 디자인 시스템의 구축 방식부터 프로토타이핑의 영역까지 작업방식의 큰 변화를 가져왔다. 컬러, 숫자, 스트링, 불리언의 4가지 변수 기능의 활용을 통해 기존 컴포넌트의 설정값을 다양한 환경과 조건에 따른 그룹으로 만들어 설정해둘 수 있다. 이렇게 사전에 설정해둔 변수는 다양한 테마나 해상도, 플랫폼 및 언어에 대응에 있어 불필요한 반복 작업을 줄이고 효율적인 디자인 시스템 구축 및 관리와 작업 시간의 단축을 기대할 수 있다.

디자인 시스템의 시작 시점은 명확하지 않지만, 2013년 브래드 프로스트의 아토믹 디자인 책 출판과 2014년 구글의 머터리얼 디자인 시스템[6]의 등장은 중요한 분기점이라고 할 수 있다. UX/UI 연구를 선도하는 닐슨 노먼 그룹(Nielsen Norman Group)은 디자인 시스템을 ‘재사용 가능한 구성요소와 패턴을 사용하여 규모에 맞게 디자인을 관리하기 위한 완전한 표준 세트’로 정의한다[7]. 어떤 제품을 만들 때 디자이너, 개발자, 기획자, 비즈니스 전략가 등 다양한 관련 조직의 참여에 의해 구축된 디자인 시스템을 중심으로, 내부적으로 효율적이고 일관된 의사소통을 수행하고 외부적으로는 일관성 있는 사용자 경험을 제공하는 것을 목적으로 한다. 선행연구에 의하면, 디자인 시스템의 구축 프로세스는 기본적으로 4가지 단계가 요구된다. 첫째, 브랜드의 스타일 가이드 요소를 확립하고 이에 따른 컬러, 타이포그래피, 이미지 등의 스타일 라이브러리를 생성한다. 둘째는 로고, 승인된 이미지, 아이콘 라이브러리 등을 포함하는 자산 라이브러리를 생성한다. 셋째, 컴포넌트 및 패턴 라이브러리를 생성한다. 넷째, 개발자를 위한 문서를 추가하여 코드를 포함한 재사용 컴포넌트들을 문서화한다. 그러나 이러한 프로세스의 상세 구조와 용어는 시스템마다 다를 수 있고, 포함하고 있는 컨텐츠도 그림 2와 같이 상이할 수 있다. 그러나 레이아웃과 스타일, 컴포넌트, 패턴, 컨텐츠 및 접근성 가이드라인 등의 필수 구성 요소들을 파악할 수 있다. 효과적인 디자인 시스템 구축을 위해서는 이러한 필수 요소들을 기반으로 조직의 요구 사항에 계속 초점을 맞추고 시스템 내에서 용어를 적용하는 방법에 대한 일관성을 유지해야 할 것이다[8]-[10].

Fig. 2. 
Overview of the contents within some of the more popular design systems

디자인 시스템의 필수 구성요소를 분석하기 위해 디자인 시스템 르포[13]에서 선정된 디자인 시스템들을 대상으로 사례조사를 진행하였다. 일부 기업은 제조 및 다양한 산업 분야에 걸쳐 디자인 시스템을 운영하고 있었지만, 더 정확한 구성 요소 분석을 위해 디지털 프로덕트에 해당하는 디자인 시스템으로 분석 대상을 제한하였다. 디자인 시스템을 선정하고, 해당 기업들의 디자인 시스템이 포함하고 있는 구성 요소를 수집하여 그 특징을 분석하였다. 수집한 데이터를 기반으로 비슷한 요소들을 그룹핑하여 다양한 기업들의 디자인 시스템에서 공통적으로 나타나는 구성 요소들을 그림 6과 같이 분석하였다. 분석 결과, 플랫폼, 브랜드, 기초, 가이드라인, 디자인 토큰, 컴포넌트, 패턴 등의 다양한 구성요소들을 확인할 수 있었다. 이 구성 요소들을 관계성을 기반으로 한번 더 그룹핑하여 최종적으로 5가지의 구성 요소들을 다음과 같이 도출하였다.

Fig. 6. 
Token name rules for Line design systems

첫째, 디자인 시스템의 플랫폼(Platform)은 제품이 작동하고 있는 환경이나 플랫폼을 의미한다. 이 단계에서는 제품이 어떤 환경에서 실행되는지에 대한 검토가 이루어지며, 사용자 대상과 제공 서비스의 특성을 정의한다. 도메인이 웹일 경우에는 프론트엔드 개발 프레임워크에 사용될 CSS 라이브러리의 종류를 파악하여 이를 기반으로 UI 컴포넌트를 제작하고, 모바일일 경우에는 플랫폼에 따라 Android는 머터리얼 디자인 가이드라인(Meterial Design Guideline), iOS는 휴먼 인터페이스 가이드라인(Human Interface Guideline)을 준수하여 제작해야 한다. 이를 통해 필요한 디자인 시스템의 규모와 형태를 예상할 수 있으며, 더불어 팀의 디자이너, 관리자, 엔지니어 및 기타 이해관계자들과의 대화를 통해 디자인 시스템 구축의 목적 및 관리에 관한 계획도 함께 고려되어야 할 것이다.

둘째, 기초(Foundations)는 매력적인 엔드투엔드 사용자 경험을 만드는 데 필요한 시각적 요소들을 지칭한다[15]. 이를 위해 브랜드의 아이덴티티 및 미션과 비전에 대해 이해하고, 브랜드가 추구하는 고유한 가치와 미학을 기반으로 디자인 원칙을 정의하는 것이 필요하다. 스타일 가이드를 기반으로 접근성 표준과 콘텐츠 지침까지 고려한 컬러, 타이포그래피, 아이콘 및 레이아웃 구조 등의 요소들을 포함할 수 있다.

셋째, 디자인 토큰(Design Tokens)은 디자인 결정을 명명하고 저장하는 단일 정보 소스이자, 모든 UI 컴포넌트를 구성하는 요소이다. 기초(Foundation) 요소들에 토큰명을 부여하는 것이 일반적이다. 디자인과 개발은 협업 프로세스이므로 중복되며, 디자인 토큰 시스템은 디자인과 개발이 공유하는 영역이다[15]. 동일한 토큰이 디자인 도구 및 코드에 걸쳐 사용되므로 효과적인 토큰 설계를 위해 디자인팀과 개발팀이 함께 토큰 규칙과 표기 방식을 협의하는 것이 중요하다.

넷째, 컴포넌트(Components)는 디자인 시스템의 핵심인 재사용 가능한 구성 요소이다. 각 구성 요소는 특정 상호 작용 또는 UI 요구 사항을 충족하며, 사용 목적에 따라 다양한 범주로 구분하여 구성하기도 한다. 컴포넌트는 사용자 인터페이스 디자인 시스템과 관련하여 가장 가시성이 높고, 앞서 정의한 기초 시각적 언어 및 토큰을 참조한다. 피그마의 팀 라이브러리 기능을 사용하여 에셋 라이브러리의 형태로 배포하여 사용하며, 이를 통해 디자이너는 각각의 프로젝트 페이지에서 해당 컴포넌트가 필요할 때마다 각 요소에 대한 추가 작업 없이 재사용이 가능하다.

다섯째, 패턴(Pattern)은 일반적인 사용자 문제를 해결하는 재사용 가능한 구성 요소 조합[14]이다. 컴포넌트들이 함께 작동하여 직관적인 사용자 경험을 만들 수 있도록 설계한다. 이러한 표준 솔루션은 인터페이스를 통해 사용자가 목표를 달성하고 특정한 방식으로의 경험을 돕는 것을 목표로 한다. 이렇듯 디자인 의도는 디자인 패턴을 통해 표현되며 효과적인 패턴 라이브러리를 갖춘 팀은 작업 흐름에 있어 체계적인 접근 방식을 가진다[16].

앞서 도출한 디자인 시스템 구성 요소와 구축 요소를 기반으로 프레임워크를 구성하였다. 새로운 프레임워크는 아토믹 디자인 개념원칙을 준수하면서, 디자인 시스템을 단순히 재사용 가능한 컴포넌트 라이브러리의 개념을 넘어서 지속 가능한 생태계의 형태로 확장하였다. 플랫폼(Platform), 기초(Foundations), 디자인 토큰(Design Tokens), 컴포넌트(Components), 패턴(Pattern)의 5가지 디자인 시스템 구성 요소에 더해, 지속가능한 디자인 시스템 구축을 위한 팀(Team)과 문서화(Documentation)의 2가지 요소를 추가하였다. 추가된 두 가지 요소는 앞선 조사 결과의 인사이트를 기반으로 도출하였으며, 디자인 시스템의 구축과 유지관리를 위해 필요한 요소이다. 디자인 설계를 위한 5가지 요소들과의 명확한 구분을 위해 각각 다른 컬러를 부여하였고, 요소들의 관계성을 기반으로 디자인 시스템 구축 프로세스의 순서를 정의하였다. 최종적으로 각 단계별로 고려해야 할 상세 내역을 작성하여 지속가능한 디자인 시스템의 구축을 위한 프로세스를 그림 7과 같이 프레임워크의 형태로 모형화였다.

Fig. 7. 
Comparison of the configuration content of design systems

디자인 시스템 구축 프레임워크를 실제 업무에 적용하기 위해 프로세스의 각 단계별 상세 작업 절차와 흐름을 구체화하여 그림 8의 워크플로우를 작성하였다. 각각의 단계에서 발생할 수 있는 컴포넌트에 대한 변경 및 업데이트를 시각화하여 디자인 시스템 구축의 작업 흐름을 파악할 수 있으며, 각 단계별 업무의 절차와 순서를 정의하여 작업 효율을 높일 수 있다. 우선, 아토믹 개념원칙을 기반으로 시스템 구성 요소들을 설계와 운영 요소들로 각각 분류하였고, 인터뷰를 기반으로 단계별 직무파트의 협업 레벨을 정의하여 기존 워크플로우 대비 작업을 진행할 때 어떤 기능조직과의 협업이 우선되어야 할지에 관한 결정에도 도움을 줄 수 있다. 이를 통해, 피그마를 기반한 디자이너 주도의 시스템 구축을 기본으로 하지만, 각 단계에서 프론트엔드 개발자, 기획자 등 관계직무의 전문 분야에 따라 각자의 역할을 수행하며, 팀원들 간의 유기적 협업을 진행할 수 있는 역할을 수행할 수 있다. 또한 이러한 효율적인 협업을 통해 더 지속가능하고 업무의 효율을 향상시킬 수 있는 디자인 시스템의 구축이 가능할 것으로 기대한다. 이 워크플로우의 한계점으로는, 모든 프로세스별로 디자인 시스템 구축을 위한 업무 단계를 완벽하게 정의하는 것이 어렵다는 것이다. 또한 초기에는 워크플로우에 대한 적응기간이 필요할 수 있어, 작업 내용의 디테일과 플로우의 익숙함에 대한 보완 및 추가적인 연구가 필요할 것이다.

Fig. 8. 
Design system construction framework

Fig. 9. 
Worflow for building a design system