디자인시스템(Design System)이란?

 

UIUX 공부를 시작하면서 한번쯤은 접하게 될 디자인시스템!

처음엔 그런가보다 하고 넘겼지만, 접하면 접할수록 디자인시스템은

중요한 개념인 것 같아 시리즈로 포스팅을 제작하기로 했다.

 

이 포스팅은 외국 디자인회사 InVision에서 제작한 핸드북을

바탕으로 요약 및 정리해 본 자료다.

 

참고로 저 핸드북은 모조리 영어다..

내가 영어를 잘 하는 것은 아니지만 그래도

열심히 혼자 읽으며 정리했다 ㅠ

 

---

🖼 디자인시스템은 왜 존재할까?

디자인시스템은 Reusability(재사용성) 단 하나를 위해 존재한다고 해도 과언이 아니다. 큰 회사의 경우에는 많은 디자이너가 같은 디자인 형태를 만들어내야 하기 때문에, 기존에 썼던 디자인 요소를 반복해서 사용하는 경우가 많을 것이다. 그런데 디자인시스템이 존재하지 않는다면, 그 요소를 찾는 데 많은 시간이 들 수 있고 아예 새로운 디자인 요소를 만들어 내어 일관된 브랜드 이미지를 전달할 수도 없을 것이다.

 

Resuability(재사용성)은 Standard(기준)과 Documentation(설명)으로 구성된다.

 

1. Standard (기준)

디자인시스템을 만들 때에는 기준이 필요하다.

디자인시스템의 기준

예를 들어 이렇게 다양한 컴포넌트 있다고 가정했을 때, 각각의 디자인 토큰이 어떤 기준으로 묶이고 어떻게 쓰이는 지에 대한 법을 만들어 놓아야 한다는 것이다. 이것에는 주관성과 모호성은 완전히 배제해야 한다. 이를 배제할수록 좋은 UX를 제공할 수 있다. 그렇다면 그 기준은 어떻게 표현되어야 할까?

 

첫 번째로는 내가 만든 법, 규칙에 이름을 붙이는 것이다. 책에선 Visual Language라고 부른다. 나는 저 각기 다른 색깔의 수업종류 컴포넌트를 하나로 묶어서 '수업종류 태그'라고 이름 붙였다. 이제 저 컴포넌트들은 수업종류 태그에만 쓰일 수 있다.

 

2. Documentation (설명)

두 번째로는 그 목적과 컴포넌트 스타일을 정의하는 것이다. 

목적에는 이 컴포넌트가 필요한 이유와 스타일을 정의했다. 좀 귀찮은 일이기도 하지만 정의해 놓으면 다른 디자이너도 유용하게 쓸 수 있고 기획자와 개발자 등 다른 분야의 팀원과도 커뮤니케이션이 수월하다.

 

그리고 기준과 설명 모두에 포함되어야 할 내용이 있다.

Rule(규칙) : ex. 컬러 대비는 4 : 5 : 1 라티오가 최소여야 한다.

Constraint(제한) : 팔레트의 컬러는 무조건 5개 이상을 넘으면 안 된다.

Principle(원칙) : 컬러는 반드시 의미있는 곳(강조가 필요한 곳 등)에 쓰여야 한다.

 

* 컴포넌트?

위에 컴포넌트라는 단어가 계속 나오고 있다. 솔직히 이 개념은 다들 알겠지만, 책을 기준으로 조금 더 부연설명을 하자면 UI의 Building Block 같은 역할을 한다고 생각하면 조금 더 좋을 것이다. 컴포넌트의 범위는 넓기 때문에 이를 최대한 세분화하고 그 수를 적게 만드는 것이 디자인 시스템의 핵심이자 필수적으로 기억해야 할 포인트이다.

 

 

 

디자인 시스템은 재사용할 수 있는 컴포넌트의 컬렉션이다. 이 때 어떠한 어플리케이션이라도 만들 수 있는 명확한 기준이 필요하다.

디자인 시스템은 UI element만 갖고 있으면 안 된다. 그것들이 일관성은 가질 수 있지만, 결과적으로 통일된 디자인을 무조건 만들어낼 수 있다고는 할 수 없기 때문에 ‘구조’와 ‘의미’를 생각해야 하고 그것까지 포함시켜야 한다.

‘무엇을’ 뿐만 아니라 ‘왜’까지 생각해야 한다. 디자인 시스템은 ‘User experience’를 만들어내야 한다. 왜 그 UI element를 써야 하는지, 그것들을 어디다 써야하는 지에 대한 기준과 설명이 바로 디자인 시스템이다. 디자인 시스템은 항상 진화해야 한다.

Invision UIUX 칼럼 발췌

 

 

---

🖼 디자인시스템의 가치

디자인시스템을 이제 막 공부하는 사람이라면 '이게 그렇게 중요한가?'라고 생각할 수 있다. 그래서 어떻게 보면 당연한 얘기지만, 디자인시스템은 왜 중요한지 나열해보려고 한다.

 

1. Scale Design : 디자인을 확장한다.

A라는 디자이너와 B라는 디자이너는 각각 다른 업무를 맡게 된다. 하지만 그러다보면 각자의 언어가 생기기 마련이고, 이는 소통할 때 크나큰 오류를 만들어낸다. 즉, Visual Language가 달라지는 것이다. 실무에서는 이러한 경우가 꽤 많이 나오고, 결과적으로는 UX의 질, 디자인 프로세스의 질을 저하시킨다. 하지만 같은 Visual Language를 공유하고 디자인시스템을 정립하여 같은 방향을 바라보며 협업하게 된다면 점차 디자인은 더욱 더 확장되고 발전할 것이다.

 

2. Manage your Debt : 디자인 채무를 조정한다.

Design Debt라는 말이 있다. 위에서 말했듯 컴포넌트는 정말 많기 때문에, 이를 세분화하면서도 그 수를 덜어내는 작업이 필수이다. 하지만 그렇지 않으면 쓸모없는 컴포넌트, 전체적인 밸런스에 해가 되는 컴포넌트, 브랜드 이미지에 맞지 않는, 일회성이 다분한 컴포넌트가 만들어지게 된다. 이러한 컴포넌트를 Design Debt라고 부른다. 디자인시스템은 이러한 채무없이 빠르게 성장하고 진화할 수 있도록 돕는다.

 

3. Design Consistency : 디자인의 일관성을 유지한다.

토스 홈페이지

국내에서 가장 디자인시스템을 잘 활용하는 앱은 토스인 것 같다. 토스는 딱히 눈에 띌만한 포인트는 없지만, 항상 일관된 브랜드 이미지와 깔끔하고 예측가능한 UI를 지속적으로 제공해왔다. 스타일에 집중할 시간을 줄이고 UX를 발전시키는 데 집중하는 것이다. 디자인의 일관성은 곧 예측가능한 UI이며, 곧 UX의 발전이다.

 

4. Prototype Faster : 프로토타입 설계가 빠르다.

이미 컴포넌트를 만들어 정의까지 다 했다면, 이제 어떻게 배치할 지만 생각하면 된다. 프로토타입은 완성본이 아니기 때문에 이렇게 컴포넌트를 배치하고 그 레이아웃을 조정해나가기만 하면 된다. 컴포넌트를 레고처럼 갖다 붙이기만 하면 되기 때문에 설계가 빨리 이루어질 수밖에 없다. 그만큼 많은 양의 프로토타입을 시험용으로 설계해 볼 수 있고, 다양한 종류의 실험을 해볼 수 있다.

 

이 외에도 수정을 할 때 편하다는 점, UI를 향상시킨다는 점, 개발자, 기획자도 누구나 접근하기 용이하다는 점이 디자인시스템의 장점이라고 꼽을 수 있다.

---

 

이렇게 알아보니 디자인시스템은 정말 빠질 수 없는 존재인 것 같기도 하다.

다음 포스팅에서는 디자인시스템의 한계처럼 느껴지는 것이 무엇인지,

나의 디자인시스템을 구축할 때 무엇부터 시작해야 할 지

다루도록 하겠다.