‘디자인 시스템’에 대해 얘기해보다 -Part 1
Part 1. 디자인 시스템이란 무엇인가요?
8기 디자이너로 활동한 IT 동아리인 ‘디프만(Depromeet)’ 에서 디자인 시스템에 대한 온라인 세미나를 유튜브 라이브를 통해 1시간 반 정도 진행하게 됐다.
올해 ‘Product Designer’에서 디자인 시스템을 만드는 ‘Platform Designer’로 이직을 하게 되면서 두 직군의 다른 점과 환경에 따라 어떻게 디자인 시스템이 만들어지는지 등 나의 경험을 바탕으로 얘기를 할 수 있을 것 같아 흔쾌히 스피커가 되기로 했다. 주제는 ‘디자인 시스템 살짝 알아보기'로 진행됐다.
유튜브 온라인으로 진행했던 세미나내가 활동하는 디프만은 주니어 디자이너 혹은 학생분들이 있었기에 디자인 시스템에 대해 최대한 쉽게 설명하는 것을 목적으로 이번 세미나를 준비했다. 그래서 디자이너로서 디자인 시스템에 대해 가장 궁금할 수 있는 점들을 꼽아 그것을 토대로 목차를 잡았다.
Part 1. 디자인 시스템이란 무엇인가
Part 2. 디자인 시스템을 언제 만들어야 하는가
Part 3. 디자인 시스템을 어떻게 만들어야 하는가
Part 4. 실제 경험은 어땠는가 (feat. 프로덕트 디자이너 vs 플랫폼 디자이너의 차이)
해당 목차를 토대로 자료를 만들다 보니 내가 공부했던 내용을 잘 요약하고 쉽게 설명하는 것은 힘든 일이었다. 그래서 다른 디자이너들의 글과 국내와 해외 IT 회사들이 어떤 식으로 디자인 시스템을 만들고 사용하고 있는지를 조사했고 마지막으로 ‘Design system’ 책을 읽어가며 총 200장이 넘는 발표자료를 완성했다.
이번 글에서는 이 세미나 자료를 바탕으로 어떻게 세미나를 진행했는지에 대해 글을 적고자 한다. 아무래도 1시간이 넘는 세미나를 지루하지 않고 쉽게 설명하기 위해 자료가 많기에 파트 별로 나눠서 글을 작성할 예정이다. 이번 글은 Part 1인 ‘디자인 시스템이란 무엇인가’로 시작하고자 한다. 또한 세미나에서 발표했던 내용을 전달하기 위해 경어체로 이번 글을 작성하고자 한다.
Introduction
안녕하세요, 저는 여러분과 함께 디프만을 하고 있는 Minnie라고 합니다. 오늘 여러분께 디자인 시스템 살짝 알아보기에 대해 얘기하고자 합니다.
프로덕트 디자이너는 제품, 즉 서비스를 디자인을 하는 일이고, 플랫폼 디자이너는 좀 더 구체적으로 디자인 시스템 작업을 하는 디자이너를 뜻합니다. 그래서 오늘 저는 제가 현재 만들고 있는 이 ‘디자인 시스템’에 대해 얘기해보고자 합니다.
디자인 시스템이란 무엇인가
누구나 다 한 번쯤은 들어봤을 디자인 시스템이라는 단어가 도대체 무엇인지, 말로 설명하자니 참 어렵습니다. 이 ‘디자인 시스템’이라는 것이 트렌드라는 것도 분명하고, 어떤 것인지 대충 알 것 같은데 말로 설명하고자 하면 참 어려울 수 있는데요.
‘Design system’이라는 책의 정의에 의하면, 서비스의 목적에 맞게끔 일관되게 구성된 일련의 패턴과 공유된 규칙 언어를 의미한다고 합니다. 이렇게 문장으로만 풀어서 보니 상당히 어렵고 뭐라고 하는지 잘 와 닿진 않아서 조금 더 쉽게 접근하고자 합니다.
사실 디자인 시스템은 두 단어의 합성어입니다. 바로 디자인(Design) + 시스템(System)이라는 단어인데요.
방금 책에서 정의한 것을 토대로 이 두 단어를 대입해보자면, 서비스의 목적에 맞게끔 일관되게 구성된 일련의 패턴 이 부분이 디자인 시스템의 앞 단어인 디자인을 뜻하고,
두 번째 단어인 시스템은 공유된 규칙을 뜻합니다.
뭔가 이렇게 대입을 해서 풀이를 해도 아직 크게 와 닿진 않습니다. 저희는 모두 디자이너니깐 시각적으로 우리의 머릿속에서 ‘디자인 시스템!’ 하면 생각나는 그 모습들을 떠올려 봅시다.
느낌은 아는데 분명 이런 건데 1아마 여러분들의 머릿속에서 상상하는 것이 이런 디자인이 아닐까 예상이 되는데요. 분명 ‘느낌은 이렇게 가이드가 되어있고 뭔가 정돈된 깔끔한 느낌!’ 이거나 혹은
느낌은 아는데 분명 이런 건데 2이렇게 좀 더 앱 내에서 사용되는 모든 파츠나 컴포넌트들이 쭉 나열되어 있고, 정리되어 있고, ‘가이드가 예쁘게 되어있는 이런 느낌인데’ 하진 않으신가요? 아마 대부분 디자인 시스템 하면 이런 디자인을 떠올렸을 겁니다. 하지만 이것은 반은 맞고 반은 틀렸다고 말할 수 있는데요.
바로 디자인과 시스템 두 단어에서 앞의 디자인, 즉 일관되게 구성된 일련의 패턴만 지니고 있고 뒤의 단어인 시스템은 없어서입니다.
그저 Style guide사실 시스템이 없다면 처음으로 떠올린 이 디자인은 그저 스타일 가이드일 뿐입니다.
그저 Ui-kit그리고 두 번째로 떠올린 이 디자인은 시스템이 없다면 그저 UI Kit로 정의될 수밖에 없습니다.
그렇기 때문에 디자인 시스템이라고 하면 여기서 이 시스템, 즉 공유된 규칙을 넣어야 하는데요.
시스템이라는 단어 자체가 어려운 것 같아서 만능 해결사 구글에게 물어봤습니다. 물어보니 뭔가 체계, 방법 같은 단어들이 나옵니다.
구글만큼 똑똑한 위키에다가도 물어봤습니다. 위키에 물어보니 뭔가 더 복잡하게 설명이 되어 있는데요. 규칙들의 집합체, 구조, 통일된 집합체와 같은 단어들이 보입니다. 잘 몰라서 찾아봤지만 더 모르겠는 결과를 얻었습니다.(주륵)
그렇다면 다시 돌아가 아까 처음 소개드렸던 디자인 시스템의 정의를 다시 한번 보겠습니다. 디자인 시스템은 ‘서비스의 목적에 맞게끔 일관되게 구성된 일련의 패턴과 공유된 규칙 언어를 의미’입니다. 이 문장을 좀 더 자세히 집중해서 보면 결국 디자인 시스템은 하나의 ‘언어’를 의미한다는 것에 우리는 집중을 해야 합니다.
즉, 우리가 디자인 시스템이라고 상상했을 때의 그 디자인과 공유된 규칙인 시스템을 한 스푼 추가해 바로 ‘언어’로 만드는 것이 디자인 시스템인 것인데요.
언어라고 했으니 저희가 어렸을 때부터 열심히 배우고 배운 영어를 예로 들어보겠습니다. ‘I want to know what is a design system.’이라는 문장이 있다고 예를 들어보겠습니다.
우리는 이 문장을 좀 더 깊게 바라보면, 사실 이 문장은 영어의 기본인 ‘알파벳’들로 이뤄져 있고, I wants가 아닌 want, knowing이 아닌 to know처럼 이 문장은 ‘문법’으로도 이루어져 있으며, 이런 문장들은 어떻게 말해야 하는지 발음을 인지하고 있고, 또 이 ‘발음’을 통해 우리는 영어라는 언어를 구사하고 해당 문장을 읽을 수가 있습니다.
그렇다면 우리는 여기서 영어라는 언어가 아닌, 디자인 시스템을 대입해보도록 하겠습니다. 좀 더 설명하기 쉽게 디자인 시스템의 컴포넌트 중 하나인 ‘버튼’을 언어로 만든다고 가정을 해봅시다.
버튼에게 있어 알파벳과 같은 건 버튼을 구성하기 위해 꼭 필요한 최소한의 단위라고 생각할 수 있겠는데요. 버튼에서는 컬러, 타이포그래피가 꼭 필요한 부분이라고 할 수 있습니다.
버튼의 가장 최소 단위인 알파벳은 디자인 시스템에선 ‘파운데이션’이라고 정의합니다.
그렇다면 이 버튼에서 문법은 무엇일까요? 문법은 주어 뒤에는 동사가 올 수 있는지, 형용사는 가능한지, 같이 어떻게 구성을 할 수 있는지 혹은 1인칭, 2인칭, 3인칭처럼 어떤 종류로 쓸 수 있는지도 문법이 될 수 있는데요.
이처럼 어떤 상황에 어떤 버튼을 사용해야 하는지를 알려주는 룰, 즉 ‘규칙’을 뜻합니다.
마지막으로 버튼에게 있어서 발음은 어떤 것일까요? 발음은 사실 더 명료하게 전달하기 위한 부분이라고 할 수 있겠는데요. 현지인처럼 발음이 정확할수록, 더욱 잘 알아들을 수 있습니다. 이런 형태들은 버튼에서는 ‘Ok’라는 타이틀 보단 ‘Save’라는 타이틀로 사용자가 해당 버튼을 눌렀을 시 어떤 행동이 일어나는지를 더욱 명확하게 알려주는 것과 같은데요.
이런 부분이 버튼에서의 발음, 즉 ‘가이드’를 뜻합니다.
그래서 사실 디자인 시스템은 나만 잘 알아본다고 되는 것이 아닙니다. 우리가 상상했던 것처럼 분명 시각적으로 잘 정돈되어 있지만 디자이너만 알아볼 수 있는 그런 버튼이 아닌, 디자인 시스템을 사용하는 모든 구성원이 알파벳과 문법, 발음을 알고 어떻게 사용할 수 있는지 인지하고 있는 하나의 언어의 형태로 존재해야 합니다.
다음은 Part 2인 ‘디자인 시스템을 언제 만들어야 하나요?’에 대해 설명하고자 합니다.
