디자인 시스템 제작을 위한 단계별 가이드

소개

언제 어디서나 액세스할 수 있는 이 시대에는 보편성이 표준이 되었습니다. 그러나 일관성이 곧 신뢰라는 사실도 잘 알려져 있습니다. 이제 사용자들은 더 잘 알고 있습니다. 인터페이스에 관계없이 빠르고 원활한 경험은 기본적인 기대치입니다.

게다가 시간은 낭비할 수 없는 자산입니다. 이 모든 것만으로도 웹사이트나 인터페이스를 개선하기 위해 동분서주하게 될 것입니다. 하지만 50개의 서로 다른 구성 요소를 오류 없이 일관성 있게 디자인하는 것은 쉽지 않은 일입니다.

"디자인 시스템"의북소리가 당신의 삶을 편하게 만들어 줄 것입니다.

디자인 시스템이란 무엇인가요?

디자인 시스템은 제품 팀이 디지털 경험을 제작하는 데 활용할 수 있도록 명확하게 문서화된 재사용 가능한 구성 요소의 광범위한 아카이브입니다. 다시 말해, 디자인 시스템은 회사의 디자인에 관한 단일 소스라고 생각하면 됩니다.

스타일 가이드나 패턴 라이브러리 이상으로 디자인 시스템은 끊임없이 진화하고 있습니다. UX 디자인을 비롯한 다양한 엔터티와 관련된 이 가이드라인 에코시스템은 모든 프로젝트의 빌딩 블록 프레임워크로 사용하여 모든 구성 요소가 일관되고 브랜딩과 일치하도록 보장할 수 있습니다.

디자인 시스템은 스타트업, 성장하는 비즈니스, 대기업 모두에게 도움이 되지만, 제품이 발전함에 따라 타협할 수 없는 필수 자산이 됩니다. 또한 비즈니스 목표, 워크플로, 팀워크, 사용자 경험 및 전반적인 브랜드 경험에 긍정적인 영향을 미칠 수 있습니다.

디자인 시스템의 장점은 무엇인가요?

시스템 설계 구현의 몇 가지 장점은 다음과 같습니다.

1. 시간 단축과 효율성 향상 - 모든 디자인 시스템의 가장 큰 장점은 디자인 및 개발 작업을 빠르게 생성하고 다시 만들 수 있다는 점입니다. 팀은 미리 만들어진 요소를 사용하여 끊임없이 반복할 필요성을 줄이고 일관성 없는 작업의 위험을 줄일 수 있습니다.
2. 페이지와 채널 전반의 시각적 일관성 향상 - 조직 전반의 디자인 시스템이 부족하면 일관성 없는 시각적 요소, 파편화된 사용자 경험, 브랜딩과의 단절이 발생할 수 있습니다. 또한 일관된 표준은 대규모 재디자인이나 시각적 리브랜딩을 관리하는 데 도움이 됩니다.
3. 통일된 언어 사용 촉진 - 공유된 디자인 언어는 여러 부서로 구성된 팀 내부 및 팀 간의 잘못된 의사소통으로 인해 디자인 또는 개발 시간이 낭비될 가능성을 줄여줍니다.
4. 더 복잡한 문제에 더 집중할 수 있음 - 간단한 UI 구성 요소가 만들어지고 명확해지면 팀은 정보 우선 순위 지정, 여정 관리 등과 같은 복잡한 문제를 더 잘 해결할 수 있습니다.
5. 기여자를 위한 참조 및 교육 도구로 활용 - 디자인 시스템은 인사이동 시 온보딩 프로세스를 원활하게 합니다. 또한 새로운 개인 기여자가 UI UX 디자인이나 콘텐츠 제작에 쉽게 참여할 수 있도록 도와줍니다.
6. 강력하고 시대를 초월한 브랜드에 기여 - 디자인 시스템의 목적은 제품에 담긴 특정 아이덴티티와 디자인을 전달하는 것입니다. 이는 영향력 있는 브랜드를 만들고 사람들이 브랜드 경험을 기억하는 데 도움이 됩니다. 이를 통해 사람들은 브랜드와 더 긴밀하게 연결되어 있다고 느끼고 브랜드를 더 신뢰하게 됩니다.

디자인 시스템 구축을 위한 10단계 가이드

귀사에서 디자인 시스템을 구축하는 데 도움이 되는 10단계 프로세스를 정교하게 마련했습니다.

1. 기존 디자인 프로세스를 철저히 분석합니다.

프로세스를 전략화하고 시작하기 위한 첫 번째 단계는 현재 위치를 이해하는 것입니다. 조직의 현재 디자인 프로세스를 검토하고 분석하면 브랜드에 가장 적합한 시스템 디자인을 더 잘 이해하는 데 도움이 될 수 있습니다. 다음 질문을 스스로에게 해보세요:

• 귀사의 현재 디자인 접근 방식은 무엇인가요?
• 조직에서 활용하고 있는 기존 도구에는 어떤 것이 있나요?

제품 팀의 디자인 성숙도를 평가해야 합니다. 이를 통해 조직에서 새 시스템을 구현하는 데 필요한 시간을 대략적으로 파악할 수 있습니다.

2. 브랜드 알파벳 결정하기

브랜드의 알파벳은 브랜드 아이덴티티, 즉 브랜드 및 제품 가치와 브랜드 언어로 이어집니다. 브랜드 언어는 모양, 글꼴, 색상, 애니메이션, 음성 및 톤으로 구성됩니다.

디자이너는 브랜드의 알파벳으로 정의된 시각적 언어를 사용합니다. 브랜드 가이드라인을 검토하고 이해관계자와 대화하면 브랜드 아이덴티티와 언어를 이해하는 데 도움이 될 수 있습니다.

3. 현재 제품 AI에 대한 감사 수행

현재 제품에 대한 UI 감사를 수행하면 주요 제품 디자인 과제인 디자인 중복을 해결하는 데 도움이 됩니다. 이 감사는 다음 두 가지 목표를 달성하는 것을 목표로 합니다.

• 제품 내에서 심각한 불일치가 있는 영역에 주의를 환기하세요.
• 제품에서 가장 많이 사용되고 필수적인 요소를 식별합니다.

UI 감사는 여러 단계로 이루어지는 프로세스입니다. 주요 UI 속성과 컴포넌트에서의 활용도를 식별하고 분석하는 것이 중요합니다. 사용 가능한 도구를 사용하여 스타일시트에서 고유한 색상과 서체의 수를 확인할 수 있습니다. 그런 다음 모든 웹사이트 디자인을 개별 요소로 더 세분화할 수 있습니다.

4. 시스템의 설계 원칙 수립하기

뛰어난 사용자 경험을 만들려면 디자인 결정의 이면에 있는 이유를 이해하는 것이 중요합니다. 또한 명확한 목표가 있으면 디자인 원칙을 정의하고 팀과의 조율을 더 쉽게 할 수 있습니다.

디자인 시스템 프로세스를 갖고 싶으신가요? 다음 질문부터 시작하세요:

• 무엇을 만들고 계십니까?
• 만드는 이유
• 어떻게 구축할 것인가

디자인 원칙은 브랜드 가치와 비전을 반영해야 합니다.

5. 컴포넌트 라이브러리 빌드

패턴 라이브러리라고도 하는 이 라이브러리에는 UI의 모든 기능 및 장식 요소가 포함되어야 합니다. 프로젝트, 사용자 요구 사항 및 비즈니스 목표에 따라 구성 요소를 평가하고 필요한 구성 요소를 유지하세요.

6. 규칙 설정

디자인 시스템은 디자이너를 특정 디자인 방향으로 제한하기 위해 만들어진 것이 아닙니다. 오히려 디자이너와 개발자에게 창의적인 방향을 확장하고 혁신의 여지를 허용하는 기본 프레임워크를 제공하기 위한 것입니다.

이 두 가지 접근 방식은 알라 콜마토바의 책에서 언급된 디자인 시스템 규칙에 대한 두 가지 접근 방식입니다:

• 엄격한 규칙 - 디자이너와 개발자는 새로운 패턴이나 구성 요소를 도입할 때 엄격한 프로세스를 따릅니다.
• 느슨한 규칙 - 디자이너와 개발자가 더 나은 디자인을 만들 수 있다고 생각하면 이 규칙을 통해 엄격한 제약을 따르지 않고 제작할 수 있습니다.

삶의 다른 많은 측면과 마찬가지로, 창의적이면서도 일관성 있는 제품을 만들려면 이러한 규칙 사이에서 적절한 균형을 찾는 것이 중요합니다.

7. 거버넌스 모델 선택

역동적이고 끊임없이 진화하는 디자인 시스템에는 변경 사항을 승인하고 구현하는 간단한 프로세스가 필요합니다. 거버넌스에는 세 가지 모델이 있습니다:

• 단독 모델 - 개인 또는 개인 그룹이 디자인 시스템 프로세스를 직접 '지배'합니다.
• 중앙 집중식 모델 - 한 팀이 담당하여 시스템의 발전을 이끌고 있습니다.
• 연합 모델 - 여러 그룹의 여러 사람이 시스템 설계 프로세스를 주도합니다.

각 모델에는 장단점이 있지만, 특히 단독 모델은 담당자가 한 명일 경우 많은 업무를 처리하는 데 병목 현상이 발생할 수 있습니다. 가장 좋은 방법은 필요에 따라 다양한 모델을 조합하여 사용하는 것입니다.

8. 컴포넌트 구조 정의

기능 구성 요소의 중복은 설계 시스템에서 중요한 과제입니다. 그 결과 시스템이 유연하지 않게 되고 디자이너(및 개발자)는 새로운 시나리오가 나올 때마다 새로운 요소를 만들어야 합니다.

성공적인 시스템 디자인은 재사용 가능성이 높으며 사용자가 이를 제품의 기반으로 사용할 수 있습니다. 따라서 다른 콘텐츠에 재사용할 수 있는 요소를 개발하는 것이 좋습니다.

재사용 및 확장 가능한 구성 요소에 대한 기준:

• 모듈형 - 독립적인 구성 요소와 상호 교환 가능한 요소.
• 컴포저블 - 기존 컴포넌트를 융합하여 새로운 컴포넌트를 생성합니다.
• 사용자 지정 가능 - 다양한 컨텍스트에서 작동하는 사용자 지정 가능한 구성 요소입니다.

9. 모든 팀이 통일된 언어를 사용해야 합니다.

디자인 시스템의 목적은 원활한 팀워크를 촉진하는 것입니다. 따라서 시스템을 팀의 워크플로에 통합하는 것이 중요합니다. 이는 생산성을 높이는 동시에 팀원들에게 가치를 전달합니다.

초기 통합 프로세스에서 다양한 사람들이 디자인 시스템을 사용하는 방식을 더 잘 이해하면 그에 따라 시스템을 수정하는 데 도움이 될 수 있습니다.

10. 정기적으로 변경 사항 전달

디자인 시스템 프로세스는 조직과 함께 진화하며 고정되어 있을 수 없습니다. 따라서 조직에 시스템을 도입한 후에는 모든 변경 사항을 전달하고 조직을 최신 상태로 유지하는 것이 중요합니다.

간결하고 잘 관리된 변경 로그는 사용자가 다양한 업그레이드와 업그레이드가 업무에 미치는 영향을 이해하는 데 도움이 될 수 있습니다.

시작하기 위한 세 가지 모범 사례

Atlassian 디자인 시스템

(https://atlassian.design/)

호주의 유명한 엔터프라이즈 소프트웨어 회사인 Atlassian 디자인 시스템은 전 세계에 분산되어 있는 민첩한 팀 간에 원활한 협업을 제공하는 것을 목표로 합니다.

널리 사용되는 Atlassian의 협업 도구 중 두 가지인 Trello와 Jira는 회사의 디자인 철학을 완벽하게 담고 있습니다. 이 철학은 디지털 경험을 활용하여 팀과 팀원 개개인의 생산성과 전반적인 잠재력을 높이는 것입니다.

그렇긴 하지만 Atlassian 디자인 시스템은 제품 계획부터 제공에 이르기까지 프로젝트의 모든 단계를 애자일 기법으로 효과적으로 추적할 수 있습니다. 이는 궁극적으로 제품 제작 및 제공에 유익한 결과를 가져옵니다. 디자인 시스템에는 주로 다음이 포함됩니다:

1. 디자인 가이드라인
2. 브랜드 표준
3. 제품
4. 일러스트레이션
5. 프로토타이핑
6. 마케팅
7. 성격

IBM 설계 시스템

(https://carbondesignsystem.com/migrating/guide/design)

IBM은 전 세계적으로 운영되며 자체 설계 시스템을 따르는 대형 IT 기업의 대표적인 예입니다.

비즈니스 자문 및 자금 조달부터 소프트웨어 제작, IT 호스팅/관리, 소프트웨어와 하드웨어를 연결하는 솔루션에 이르기까지 모든 역량을 갖추고 있습니다.

IBM의 기본 원칙은 과학, 이성, 지성을 통해 인류 사회나 브랜드 등 모든 분야에서 끊임없이 발전을 도모하는 것입니다.

IBM에 따르면 좋은 디자인은 필수 요소일 뿐만 아니라 사용자에 대한 약속이기도 합니다. Adobe, Axure, Sketch로 작업하는 개발자와 디자이너에게 다양한 툴과 리소스를 제공하는 Carbon Design System의 뛰어난 기능 중 일부를 소개합니다:

1. 데이터 시각화
2. 패턴
3. 구성 요소
4. 가이드라인
5. 튜토리얼

Uber 디자인 시스템

(https://baseweb.design/)

누구나 한 번쯤은 우버를 이용해 보셨을 겁니다. 이 미국 기술 회사는 음식 배달, 차량 호출, P2P 차량 공유, 스쿠터와 전기 자전거를 이용한 마이크로 모빌리티 등 이동에 의존하고 있습니다.

Uber는 이러한 유형의 서비스가 모든 하위 브랜드, 내부 브랜드, 제품 및 프로젝트에서 완벽하게 작동하기 위해 효율적인 시스템 설계가 필요합니다.

Uber 디자인 시스템의 주요 속성은 다음과 같습니다:

1. 브랜드 아키텍처
2. 구성
3. 목소리 톤
4. 모션
5. 일러스트레이션
6. 사진
7. 도상학
8. 색상
9. 로고
10. 타이포그래피

첫 번째 디자인 시스템을 만들기 전에 알아야 할 포인터

1. 빠르고 명확한 커뮤니케이션은 새로운 베스트 프렌드

내부 소비자를 바로 참여시키는 것은 복잡할 수 있습니다. 실제로 이들의 피드백이 모호하거나, 알파 또는 베타 릴리스 주기에 너무 일찍 제공되거나, 도움이 되지 않는 경우 프로세스에 방해가 될 수 있습니다.

건설적인 피드백을 받기 위해 필요한 사항을 디자인 시스템 사용자인 고객에게 알려주세요. 초기 사전 릴리스 주기에 있는 경우 원하는 피드백을 솔직하고 명확하게 전달하세요. 이는 제품의 가장 중요한 결함을 찾고 있는 것이지 신랄한 비판을 원하는 것이 아님을 나타냅니다.

지나친 생각으로 마음이 시들어가는 것을 염두에 두되, 지나친 소통을 주저하지 마세요.

2. 발자국만 추적해야 하는 것은 아닙니다.

우선순위 선정에서 중요한 부분을 놓치는 경우가 많은데, 바로 디자인 시스템의 사용 현황을 추적하는 것입니다. 시스템이 어디에서 사용되고 있는지, 누가, 얼마나 자주, 얼마나 자주 업데이트하는지 파악하는 것은 필수적입니다.

어떤 팀이 어떤 버전의 라이브러리를 정확히 활용하고 있는지에 대한 일일 통계 수집을 구현하면 채택, 업그레이드 및 다운그레이드 비율을 공정하게 파악할 수 있습니다.

업데이트를 거의 하지 않는 팀을 파악하면 업그레이드를 방해하는 문제를 파악하여 해당 문제를 해결할 수 있습니다.

3. 피드백 메커니즘은 GOT의 레갈만큼 과소평가되었습니다.

사용자에게 가치 있는 시스템일 뿐만 아니라 사용자가 소속감을 느끼고 적극적으로 기여할 수 있는 시스템이 되려면 사람들이 피드백을 제공하고 시스템에 기여할 수 있는 간단하면서도 직관적인 방법(Slack, 이메일 등)을 마련하는 것이 핵심이 됩니다.

항상 가능한 한 많은 영역에서 피드백을 제공하는 방법과 위치에 대한 지침을 제공하고, 특히 사용자가 가장 눈에 잘 띄는 위치에서 피드백을 찾을 것이라고 가정해서는 안 됩니다.

디자인 시스템은 조직에 필요한 북극성입니다.

성공적이고 잘 만들어진 디자인 시스템은 회사의 근간이 되어 일관되고 증폭된 경험을 제공합니다. 또한 디자이너와 개발자는 기본적인 빌딩 블록을 조합하는 데 그치지 않고 제품의 목적을 더 잘 전달할 수 있는 기회를 얻게 됩니다.

제너럴리스트는 누구나 디자인을 제공하는 파트너가 될 수 있지만, 디자인 전문가만이 현재 문제, 과제 및 열망을 파악하여 특히 고객을 위한 디자인 시스템을 구축할 수 있습니다. 지금은 기다릴 때가 아닙니다. 디자인 시스템을 만드는 방법에 대한 이 광범위한 가이드를 통해 생산 프로세스를 완전히 혁신할 수 있습니다.

참조

https://ionic.io/resources/articles/why-every-company-needs-a-design-system

https://www.baianat.com/books/merits-of-design-systems/design-systems-and-their-benefits

https://www.uxpin.com/create-design-system-guide/

https://builtin.com/design-ux/11-benefits-design-systems

https://elementor.com/blog/design-system/

https://www.nngroup.com/articles/design-systems-101/

https://www.uxpin.com/studio/blog/best-design-system-examples/#h-4-uber-design-system

https://www.eleken.co/blog-posts/7-design-systems-examples-for-your-inspiration

https://aufaitux.com/blog/best-design-systems/

https://www.copycat.dev/blog/design-system-examples/

https://builtin.com/design-ux/design-system

https://www.editorx.com/shaping-design/article/design-system-examples

https://medium.com/spotify-design/5-things-i-wish-id-known-before-starting-a-design-system-at-spotify-f8624abf1081