디자인 시스템 3편 - 디자인 가이드라인/디자인 시스템의 운영

2019. 9. 23. 07:50UI 가벼운 이야기
노마리아 (Maria Noh)

디자인 시스템은 총 8편의 시리즈로 구성되어 있습니다.

1편 - 디자인 가이드라인/디자인 시스템은 왜 필요한가
2편 - 디자인 가이드라인/디자인 시스템의 종류
3편 - 디자인 가이드라인/디자인 시스템의 운영(현재글)
4편 - 디자인 가이드라인/시스템 작업 프로세스 및 유의할 점
5편 - GUI 디자인 리서치
6편 - 기본 시각 요소 설계 시 알아 두어야 할 것들
7편 - 컴포넌트를 디자인할 때 고려해야 할 것들
8편 - 특수한 목적을 고려한 컴포넌트 디자인하기

 

글을 시작하며

디자인 가이드라인 프로젝트 초반에는 어떤 내용을 담아야 하는지, 가이드라인을 활용하는 각각의 사용자가 어떻게 잘 활용할 수 있을지를 중점으로 두었다면, 전체 내용을 구조화한 시점부터는 초기 버전을 기반으로 어떻게 지속 가능한 디자인 시스템으로 운영할 수 있을지 많이 고민하게 되었습니다.

Shopify, Material Design 등 잘 알려진 디자인 시스템을 살펴보면 2~3개월 간격으로 업데이트하며 고도화되는 것을 확인할 수 있습니다.

이미지 출처: (좌)Shopify, (우)Material Design, What's new

초기 버전의 디자인 시스템을 설계하면서 성공적인 디자인 시스템으로 발전하기 위해 어떤 사람들이 모여서 어떤 조직을 구성하고, 어떤 프로세스로 디자인 시스템을 운영하고 있는지 사례들을 확인해 보고 싶었습니다.

 

많은 시간과 노력이 필요한 디자인 시스템

2014년 Google이 다양한 플랫폼과 디바이스 안에서 일관된 사용자 경험을 제공하기 위한 Material Design 공개 후 많은 디자이너, 개발자, 기획자의 교과서가 되었고, IBM, Airbnb, Uber와 같은 기업도 고도화된 디자인 시스템을 구축해 기업의 정체성을 담은 시스템으로 발전해 나아가고 있습니다.

하지만 아직 많은 기업의 디자인 시스템은 아직 초기 단계에 머물러 있습니다. 디자인 시스템은 한번 구축하고 끝나는 것이 아니라 지속해서 보완하고, 수정하고, 개선해 나아가야 하므로 많은 물리적인 시간과 노력이 필요하기 때문입니다.

이미지 출처: Figma, State of Design System 2018

2018년 figma의 State of Design System 설문 결과를 보면 86%의 응답자가 디자인 시스템을 전적으로 운영하는 팀이 있거나(Stage 3), 나아가 디자인 시스템을 공개하는(Stage 4) 단계를 원하고 있지만 아직 문서화되지 않거나 운영팀의 부재로 체계적인 관리를 하는 데 어려움을 겪고 있는 것을 확인할 수 있습니다.

 

끊임없는 변화가 필요한 디자인 시스템

프로젝트를 진행하며 디자인 시스템이 제품 설명서와 유사하다고 느낀 부분은 디지털 서비스를 더 잘 기획하고 개발하기 위한 가이드로서, 제품을 더 잘 활용하기 위한 가이드로서 두 가지의 목적은 비슷하지만 가장 큰 차이점은 설명하고 있는 대상이 끊임없이 진화한다는 것입니다.

제품의 기능과 용도가 정의된 제품 설명서는 업데이트가 불필요한 반면 디자인 시스템은 디지털 트렌드의 변화, 라이프 스타일의 변화, 국가별 환경 등 다양한 요인으로 사용자의 니즈가 변하기 때문에 내외부 관계자가 유연하게 대응할 수 있도록 운영 모델을 설정하는 것이 더욱 중요한 이유입니다.

"Design system is a process and therefore is simultaneously always ready and never done." -Marcin Treder, UXPin

참고 이미지: Atomic design

따라서 초기 디자인 시스템을 구축했더라도 체계적으로 관리할 수 있는 운영 프로세스, 그리고 구체화된 로드맵이 필요합니다.

 

우리 조직에 적합한 운영 모델 찾기

디자인 시스템은 조직의 규모, 서비스의 수에 따라 관리하고 사용하는 인원이 늘어나는 경향이 있습니다. 소규모 스타트업인 경우 현실적으로 전담 운영팀을 꾸리기도 어렵고 디자인 시스템을 활용하는 사람이 시스템을 만드는 경우가 많지만 Salesforce, Airbnb와 같은 대규모 기업인 경우 전담 운영팀을 갖추어 조직적으로 사용자를 관리하기도 합니다.

이미지 출처: Atomic design

때문에 디자인 시스템 운영을 위한 효과적인 팀 모델을 설계하려면 조직의 상황, 서비스의 특성, 디자인 시스템의 구축 정도를 세심하게 고려해야 합니다. 

The biggest existential threat to any system is neglect. 
-Alex Schleifer, Airbnb

 

Team Models for Scaling a Design System에서 Nathan Curtis는 디자인 시스템을 운영하는 일반적인 3가지 팀 모델을 제시했습니다.

이미지 출처: DesignBetter by InVision, Design system handbook

  • Solitary 모델
    하나의 팀이 시스템을 운영하는 모델로 인력이 부족한 팀이 빠르게 문제를 해결할 수 있지만, 업무가 가중되고 팀의 요구사항에만 집중하게 되기도 합니다.

  • Centralized 모델
    하나의 중앙 팀이 디자인 시스템을 전적으로 관리하고 운영하는 모델로 체계적으로 시스템을 유지하고 확산할 수 있지만 고립되어 실제 사용자의 요구사항을 파악하기 어렵게 되기도 합니다.

  • Federated 모델
    조직의 다양한 인원이 함께 디자인 시스템을 관리하고 운영하는 모델로 다양한 제품과 사용자의 요구를 파악하기 용이하지만 다른 업무로 인해 디자인 시스템에 관여하기 어렵게 되기도 합니다.

이미지 출처: DesignBetter by InVision, Design system handbook

각각의 모델은 장단점을 가지고 있기 때문에 조직의 상황에 따라 새로운 모델을 개발하거나 두 가지 모델을 결합해 최적화된 운영 모델을 설계해야 합니다. Lighting Design System 팀은 Salesforce 서비스의 특징에 맞춰 Centralized 모델과 Federated 모델을 결합해 새로운 Cyclical 모델로 운영하고 있습니다.

 

디자인 시스템 발전시키기

조직에 적합한 운영 모델을 확립했다면 성공적인 디자인 시스템으로 발전시키기 위해 지속 가능한 디자인 시스템 생태계를 구축해야 합니다. Atomic design에서 Brad Frost는 이 과정에서 도움을 받을 수 있도록 디자인 시스템 운영팀이 고려해야 몇 가지 원칙을 소개했습니다.

Make it official
디자인 시스템은 장기적으로 관리되어야 합니다. 따라서 성공적인 디자인 시스템으로 발전하기 위해서는 작은 업무나 프로젝트가 아닌 시간, 비용, 리소스를 투자해 체계적으로 관리되는 공식 프로젝트로 만드는 것이 중요합니다.

Make it adaptable
지속해서 발생하는 변화를 수용할 수 있도록 해야 합니다. 사용자의 피드백을 수집하고 운영팀과 의견을 나눌 수 있는 커뮤니케이션 채널을 만들고 명확한 거버넌스를 수립해 효과적으로 디자인 시스템을 운영하고 관리할 수 있는 프로세스를 구축해야 합니다.
이미지 출처: Atomic design, Canonical 사의 웹 가이드라인 의사결정 프로세스
Make it maintainable
디자인 시스템이 쉽게 제품에 동기화될 수 있는 환경을 구축해야 합니다. 하나의 변경된 UI 패턴을 반영하는데 너무 많은 비용과 노력이 들게 된다면 디자인 시스템의 활용도는 점점 떨어지게 될 것입니다.

Make it cross-disciplinary
스타일 가이드는 단순 적용을 위한 것이 아닌 협업의 바탕이 되어야 합니다. 디자이너, 기획자, 개발자, 비즈니스 오너 등 다양한 사람들의 관점을 유기적으로 반영하고 하나로 모을 수 있도록 문서화되어야 합니다.

Make it approachable
다양한 배경의 사용자가 접근하는 만큼 탐색하기 쉽고, 내용이 잘 보이도록 해야 합니다.

Make it visible
내외부 사용자에게 디자인 시스템의 변경 사항과 비전을 효과적으로 알려야 합니다. 또한 디자인 시스템을 공개해 책임감을 부여하고 피드백을 얻는 유용한 채널로 활용할 수 있습니다.

Make it bigger
다양한 조직의 사용자가 자주 찾게 되는 디자인 시스템의 특성을 활용해야 합니다. 하나의 장소에서 기본 룰, 라이팅 스타일, 패턴 라이브러리뿐만 아니라 마케팅 가이드라인, 코드 등 도움이 되는 자료를 효과적으로 관리하고 효율성을 높여야 합니다.

Make it context-agnostic
사용되는 환경, 콘텐츠의 속성을 배제한 UI 패턴 이름을 설정해야 합니다. 재사용 가능하고 다양한 용도에 적용할 수 있도록 패턴의 구조에 집중한 이름을 설정하는 것이 중요합니다.

Make it contextual
패턴 라이브러리를 구축했다면 어떻게 사용하는지 어디에 사용하는지 친절한 설명이 필요합니다. 동영상이나 이미지를 활용해 사용자의 이해를 돕거나 Pattern lab과 같은 툴을 활용할 수도 있습니다.

Make it last
시간이 지날수록 가치를 발휘하는 디자인 시스템을 만들어야 합니다. 다가올 변화에 대응하고 지속해서 발전할 수 있도록 견고한 기본을 가진 디자인 시스템이 되어야 합니다.

 

글을 마치며

Shopify의 UX 디렉터 Kyle Peatt는 디자인 시스템을 만드는 것보다 유지하는 것이 더 어렵다고 표현했습니다.

"The effort required to build a design system is tiny compared to the effort required to maintain it." -Kyle Peatt, Shopify

고민 끝에 만들어진 첫 디자인 시스템이 진정한 가치를 지니게 될 때까지 수정과 개선 그리고 보완하는 작업을 끊임없이 하게 될지도 모릅니다. 하지만 그 과정에서 디자인 시스템이 성장하게 되고 덤으로 숨겨져 있던 조직의 비효율적인 커뮤니케이션이나 업무 프로세스를 개선할 수 있는 좋은 기회를 얻게 될 것입니다.

 

참고문헌

Marcin Treder, Design Systems Sprint 0: The Silver Bullet of Product Development, Medium
Marcin Treder, The Minimum Viable Design System Medium
Nathan Curtis, Team Models for Scaling a Design System Medium
Jina Anne, The Salesforce Team Model for Scaling a Design SystemMedium
Kyle Peatt, The system always kicks back, Medium
State of Design Systems 2018, Figma
Design System Handbook, DesignBetter by InVision
Brad Froast, Atomic Design

이 글은 해당 글을 참고하여 주관적으로 작성된 글임을 알려드립니다.

디자인 시스템은 총 8편의 시리즈로 구성되어 있습니다.

1편 - 디자인 가이드라인/디자인 시스템은 왜 필요한가
2편 - 디자인 가이드라인/디자인 시스템의 종류
3편 - 디자인 가이드라인/디자인 시스템의 운영(현재글)
4편 - 디자인 가이드라인/시스템 작업 프로세스 및 유의할 점
5편 - GUI 디자인 리서치
6편 - 기본 시각 요소 설계 시 알아 두어야 할 것들
7편 - 컴포넌트를 디자인할 때 고려해야 할 것들
8편 - 특수한 목적을 고려한 컴포넌트 디자인하기