디자인 시스템의 확장성, 효율성을 위한 협업방법
디자인 시스템에 관하여 1
만일 당신이 UX 디자이너로 일을 하게 된다면, 디자인 시스템에 대한 이야기를 자주 듣게 될 것이다. 또한 실제로 사용하거나 제작에 참여하는 기회도 생길 것이다. 그렇다면 디자인 시스템이 정확히 무엇이며 왜 자주 언급되는 것일까? 디자인 시스템은 여러 제품과 플랫폼에서 일관된 디자인 언어와 사용자 경험을 만드는 데 중요한 역할을 한다. 동시에 디자인과 개발, 유지 보수 작업의 중복을 줄여 디자인 작업의 효율성을 극대화하는 도구이자 프로세스이다. 디자인 시스템은 일회성 프로젝트가 아니라 지속적인 관리와 발전이 필요하다.
디자인 시스템을 도구와 프로세스로 활용함으로써 조직과 프러덕트는 일관된 사용자 경험과 확장성, 협업을 통한 디자인 프로세스의 효율성, 용이한 관리, 그리고 제품 내 브랜드 정체성을 구축할 수 있다.
그렇다면, 디자인 시스템은 어떻게 만들어지는 걸까?
UX 성숙도가 일정 수준에 도달한 조직에서는 보통 프러덕트팀과 디자인 시스템 팀으로 나눠진다. 디자인 시스템 팀은 토큰, 기반, 디자인 시스템 가이드라인, 프로세스, 체크리스트 등의 기본 구조를 마련하며, 프러덕트팀은 디자인 시스템과 협업하여 컴포넌트를 만드는 과정에 참여한다. 이후 디자인 시스템 팀은 해당 패턴이 제대로 디자인되었는지, 구현되었는지를 검토한다.
출처: https://www.decathlon.design/726f8c765/p/195920-contributing/b/14d247
출처: https://www.decathlon.design/726f8c765/p/195920-contributing/b/14d247디자인 시스템 팀이 홀로 디자인 컴포넌트를 만들고 유지하는 것보다 위와 같은 프러덕트 팀과의 협업을 유지하는 이유는 아래와 같다.
1) 디자인시스템 팀이 혼자서 디자인 시스템을 제작할 경우 프러덕트 팀과 사용자가 원하는 요구사항을 반영하지 못할 수 있다.
디자인 컴포넌트를 직접 프러덕트(플랫폼)에 사용하고 사용자의 피드백을 받는 것은 프러덕트 팀이다. 그렇기에 프러덕트 팀이 유저플로우안에서 어떠한 기능이 필요하며, 사용성을 어떻게 개선시킬지 디자인 시스템 팀보다 효율적으로 파악할 수 있다.
2) 디자인 시스템 팀보다는 프러덕트 팀이 디자인 컴포넌트 개발에 우선순위를 파악할 수 있다.
컴포넌트 디자인 및 개발은 해당 프러덕트 론칭과 유저플로우와 직접적인 관계가 있다. 디자인 컴포넌트가 제 시간 안에 개발되지 않으면 프러덕트 론칭에 차질이 생긴다. 예를 들면 에너지 앱을 생각해 보자. 사용자가 에너지 사용량을 효율적으로 관리하고 절약하기 위해 에너지 소비량을 매달 나타내는 기능을 론칭한다고 생각해 봐라. 근데 아래와 같은 바 그래프가 제 시간 안에 전달되지 않으면 프러덕트 팀은 바 그래프가 없는 다른 대안을 도출해 내거나 해당 기능 론칭을 미뤄야 한다.
출처: https://www.vattenfall.nl/energie-besparen/slimme-meter/프러덕트 팀은 사용자의 문제를 해결하고 비즈니스 목표를 달성하기 위해서는 분기마다 목표를 정하고 그 목표를 달성하기 위해서는 어떠한 기능이 필요한지 디자인 시스템 팀보다 더 잘 안다. 그렇기에 디자인 컴포넌트 제작에 있어 우선순위를 잘 정할 수 있다.
디자인 시스템 팀은 디자인 시스템의 핵심을 이루며, 전반적인 프로세스를 개발하고 지속적인 피드백을 통해 이를 향상하는 역할을 한다. 이를 통해 디자이너, 개발자, SEO 전문가, 콘텐츠 디자이너 등이 효율적으로 협업할 수 있도록 지원한다. 뿐만 아니라, 브랜드 가이드라인을 디지털 프로덕트에 최적화된 디자인 토큰으로 해석하여 프로덕트 내에서 일관된 브랜드 경험을 형성하는 데 중요한 역할을 수행한다.
그리고 디자인 시스템 팀은 헬리콥터 뷰를 기반으로 하여, 각각의 프로덕트 팀이 다양한 패턴을 제작하더라도 일관된 사용자 경험을 창출하도록 핵심적인 역할을 담당한다. 마지막으로 시멘틱 구조, 접근성, 콘텐츠 디자인등의 전문적인 지식을 바탕으로 프러덕트 팀이 사용성을 고려한 컴포넌트를 제작하는 것을 돕는다.
유연하고 일관된 경험을 위한 디자인 패턴 개발 과정
1. 발견, Discovery 단계
디자인 패턴을 디자인하고 개발하는 과정에서 발견 단계는 어떤 UI 엘리먼트가 디자인 패턴으로 적합한지 테스트하고 발견하는 과정이다. 이 단계를 성공적으로 완료하기 위해서는 다음과 같은 주의사항이 있다.
기존 디자인 패턴 분석
새로운 패턴이 기존 패턴과 겹치지 않는지 확인하기 위해 분석이 필요하다. 공통된 UI 요소를 이해하고 브레인스토밍을 통해 이를 새 패턴에 적용하는 것이 중요하다. 예를 들면 이미 버튼 컴포넌트가 있고 이를 바탕으로 체크박스를 만든다고 하면 폰트 스타일, 컬러를 버튼컴포넌트를 고려해서 정해야 한다. 그리고 새로운 패턴의 이름과 카테고리는 기존 UI 패턴 분석을 통해 결정되어야 한다.
https://m2.material.io/components/buttons#anatomy
https://m2.material.io/components/buttons#anatomy새로운 패턴의 사용 가능성 조사
새로운 패턴이 여러 다른 제품에서 어떻게 사용되는지 조사해야 한다. 컬라보레이션은 필수적이며, 다른 프로덕트 팀과의 의논을 통해 새로운 패턴에 필수적인 요소를 정해야 한다.
확장성 및 적응성 고려
UI 요소가 일관되게 여러 부분에 적용될 수 있는지 평가해야 한다.
2. 디자인 패턴 콘셉트, Create 단계
발견 단계에서 얻은 인사이트를 기반으로 디자인 패턴을 제작하는 것이 중요하다. 디자인 패턴 디자인은 해당 패턴의 UX와 스펙(Spec)을 의미하며, 아래의 요소들을 고려하여 기록해야 한다.
체인지 로그 (Change Log)
릴리스 정보, 업데이트, 변경, 개선사항 등을 기록합니다. 올바른 버전과 변경된 요소를 정확히 기록해야 한다.
패턴 목적 (Pattern Purpose)
해당 패턴의 존재이유, 아이덴티티
아나토미 (Anatomy)
디자인 패턴을 구성하는 요소
아나토미 예시 https://m2.material.io/components/buttons#anatomy타입 (Variations)
해당 패턴의 다양한 타입 및 유형
디자인 토큰 (Token)
구글 머티리얼 디자인에 따르면, 디자인 토큰은 디자인 시스템의 시각적 스타일을 구성하는 작은 반복적인 디자인 결정을 나타낸다. 토큰은 컬러의 헥스 코드와 같은 정적인 값들을 자명한 이름으로 대체한다.
출처: https://specifyapp.com/guides/design-data-platforms-101/04-design-tokens-and-assets상태 (Status)
패턴의 각 상태. 예를 들면 후버, 디폴트, 클릭, 탭상태등을 의미한다.
패턴 행동 (Behaviours)
패턴이 다른 그리드나 화면 사이즈에서 어떻게 변하는지를 포함한다.
접근성 (Accessibility)
키보드 인터랙션, 보이스 오버 등의 디지털 도구를 사용할 때의 패턴의 반응과 내비게이션을 설명한다.
SEO
웹 패턴의 경우, 검색 엔진 최적화 여부를 확인해야 한다.
가이드라인 (Do, Dont)
해당 패턴을 어떻게 올바르게 사용해야 하는지 알려주는 가이드
이 외에도 인터랙션, 애니메이션 등 디자인 패턴에 따라 다른 요소들이 포함되기도 한다.
프러덕트 팀 디자이너는 디자인 패턴을 개발자에게 전달하기 전에 다른 디자이너와 디자인 시스템팀, 그리고 개발자와 함께 리뷰하고 수정하여 높은 완성도의 디자인 패턴 스펙을 만들어야 한다.
3. 디자인 패턴 개발 단계
디자인 패턴의 콘셉트와 스펙이 완료되면, 파일을 개발자에게 전달하고 개발과정에서 디자인이 정확하게 구현되었는지 확인하고 검토하는 단계를 거쳐야 한다. 디자인 패턴 개발이 끝나면 보통 콘텐츠 매니지먼트 시스템에 구현하여 에디터나 다른 디자이너들이 해당 패턴을 사용할 수 있게끔 한다.
다음 편에서는 디자인 패턴 제작, Create단계에 대해 자세히 알아보자!
