디자인시스템(Design System) 설계하는 방법

 

오늘은 저번 포스팅에 이어 디자인시스템의 한계처럼 느껴지는 것이 무엇인지,

나의 디자인시스템을 구축할 때 무엇부터 시작해야 할지 알아보려고 한다.

 

본 포스팅은 InVision에서 무료로 제공하는 핸드북을

번역하여, 내가 이해한대로 디자인시스템의 중요 포인트와 핵심만을 담았다.

 

---

🖼 디자인시스템에 관한 걱정

디자인시스템을 만들기로 작정했다면 제일 먼저 이런 걱정이 들 것이다. '특정한 구역에 해당 컴포넌트가 잘 들어맞지 않는다면? 나는 그 구역에 제일 적합한 디자인은 포기하고 원래 있던 컴포넌트를 사용해서 디자인 채무(Design Debt)를 줄여야 하나?'

바로 Too Limiting에 관한 걱정인 것이다. 하지만 이 책에서는 이렇게 설명한다. 대부분의 디자이너들은 어떠한 문제가 생겼을 때 새로운 디자인을 생성하며 지속적으로 채무를 만들어 해결하려고 한다. 하지만 이는 근본적인 해결책이 될 수 없다. 디자인시스템을 통해서, 그 문제가 무엇이든 새로운 해결책, 근본적인 해결책을 분명히 모색할 수 있다. 

 

또 다른 걱정으로는 Lose of Creativity에 관한 걱정이다. 컴포넌트를 만들고 그 안에서만 사용해야 한다면 디자이너로서의 창의성을 뽐내지 못할 것이라고 생각하는 거다. 하지만 창의성은 제한된 것에서부터 진정으로 발현될 수 있다고 생각한다. 오히려 너무나 자유스러운 분위기에서는 방향을 잃기 쉽다. UI는 방향성과 일관성이 생명이다.

 

마지막으로는 디자인시스템을 다 만들고 나서의 오해이다. One and Done이 그것이다. 디자인시스템을 한 번 만들면, 이제 평생 그걸로만 쓸 수 있다는 생각이다. 하지만 디자인시스템은 무조건 유지 및 보수, 향상이 필수이다. 디자인시스템은 지속적으로 진화해 나가야 한다. 

---

🖼 나만의 디자인시스템을 만들기

💁 디자인시스템을 공유하는 팀 멤버는 누구인가?

디자인시스템을 왜 써야하는가에 대해 저번 포스팅에서도 언급했지만, 디자인시스템에서 가장 중요한 효과 중 하나는 같은 Visual Language를 공유한다는 것이다. 디자이너는 개발자, 기획자 사이에서 커뮤니케이션을 해야하는 입장이기 때문에 무엇보다도 서로 같은 언어를 공유하고, 동일한 정보를 전달해야 한다. 디자인시스템을 공유하게 될 팀 멤버에는 누가 있을까? 크게 8가지 직무로 나누어 볼 수 있다. 또한 그들이 디자인시스템과 관련하여 어떤 업무를 수행할 수 있는지까지 적어보았다.

 

1. 디자이너 : Visual Elements에 대한 정의

2. 프론트앤드 개발자 : 모듈 제작 및 효율적인 코드 만들기

3. UX 전문가 : 디자인시스템을 UX 기준에 맞추기

4. 컨텐츠제작자 : 시스템의 톤과 목소리를 결정

5. 리서치 팀 : 고객의 니즈 파악

6. 퍼포먼스 전문가 : 디자인시스템을 모든 디바이스에 적용시킴

7. 프로덕트 매니저 : 디자인시스템이 고객 니즈에 맞도록 정렬

8. CEO : 회사의 비전을 실행

 

회사에 따라 조금씩 다르겠지만, 대표적으로 정리해볼 수 있었다. 이제 다음 스텝으로 넘어가보자.

 

🤘 나에게 맞는 팀 모델 선택하기

팀 모델이란 어떤 구성원이 디자인시스템을 개발하느냐를 말하는 것이다. 총 세 가지 모델이 있다.

 

1. The solitary model : 한 사람이 디자인시스템을 개발하는 모델

- 장점 : 빠르다

- 단점 : 너무 많은 일

2. The centralized team model : 디자인시스템만 개발하는 팀을 따로 구성하는 모델

- 장점 : 디자인시스템 유지 및 보수에 좋다

- 단점 : 고객의 니즈나 리서치에 대한 접근성이 낮다

3. The federated model : 여러 팀, 여러 직무의 사람들이 다같이 디자인시스템을 개발하는 모델

- 장점 : 고객의 니즈와 서비스 및 상품 특징에 맞는 다양한 인사이트를 도출할 수 있다

- 단점 : 각자의 메인 업무가 따로 있기 때문에 바쁘고 귀찮은 일이 될 수 있다

 

디자인시스템은 항상 확장되기 때문에 보통은 1번에서 2,3번으로 넘어간다고 한다. 항상 염두에 두어야 할 것은 디자인 시스템이란 한 프로젝트가 아니라 프로덕트다. 도구이자 수단인 것이다.

---

🤯 디자인시스템의 요소를 파고들자

이제 진짜로_찐막_이번엔진짜_타노스(?) 디자인시스템의 기초단계를 다져보자. 이 또한 총 세가지로 분류할 수 있다.

 

🎤 Interviewing Customer

첫 번째로 해야 할 일은 '누가 디자인시스템을 쓸 것인지' 생각해보는 거다. 그 사람들에게 찾아가 인터뷰 해보는 것이 디자인시스템을 처음 설계할 때 꼭 필요한 단계가 될 것이다. 이 과정을 통해 Pain point를 찾아내고, 그들의 시스템에 맞는 규칙과 시스템을 구축할 수 있다. 또한 실질적으로 중요한 것에 더 집중하여 설계할 수 있다.

✨ TIP 디자인시스템을 만약 오픈소스로 할 것이라면, 각각의 시스템이 어디에, 어떻게 쓰이고 누굴 위해 제작했는지 기록하는 것이 초기단계부터 필요하다.

 

📦 Take an Invetory

두 번째로는 인벤토리를 구축하는 것이다. 컴포넌트를 담는 저장소를 만드는 것이다. 인벤토리 타입에도 두 가지가 있다.

 

1. Visual Attributes : Spacing, Color, Typography ...

이것들은 Visual Language를 만드는 데 도움을 준다.

2. UI Elements : Buttons, Cards, Modals ...

이것들은 UI Library를 만드는 데 도움을 준다.

 

🤔 Creating A Visual Design Language

이제 본격적으로 Visual Attributes에 해당하는 Visual Design Language를 제작해볼 것이다.

기본적으로는 다음과 같은 요소가 포함된다.

 

1. Color

2. typography (size, leading, typeface, ...)

3. Spacing (margins, paddings, positioning coordinates, border spacing, ...)

4. Images (icons, illustrations)

+) Visual Form (depth, elevations, shadows, rounded corner, texture, ...)

+) Motion

+) Sound

 

각각의 요소를 어떤 기준에서 어떻게 구성해야하는 지는 다음 포스팅에서 진행하려고 한다.

 

---

끗!