디자인 시스템, 발가벗겨주마
그 거대한 생태계를 어려워하는 이들을 위해.
브런치는 이놈의 실오라기 같은 폰트를 반드시 고쳐야 한다. 시력이 조금만 나빠도 읽기가 그렇게 매끄럽지 않아지기 때문이다. 분명 비주얼적으로 갬성만 찾는 디자이너가 이 플랫폼을 만들었음이 분명하다. 접근성을 조금이라도 고려한다면, 부디 'Regular'도 포함해 줬으면 좋겠다. 눈 아프다.
불과 얼마 전까지의 나도 그랬고, UI를 다루는 수많은 디자이너들이 막연함과 그로 인한 두려움을 갖는 대상 중 하나가 바로 '디자인시스템'이다.
Adobe, Attlassian, Microsoft, Google Material...
공룡기업들이 갖고 있는 무수한 디자인 시스템들의 이름을 들어보면, 하나같이 왠지 좀 있어 보이는 네이밍과 뭐가 어떻게 돌아가는지는 자세히 모르지만 아무튼 딱딱 정리되어 있는 것 같고 거기에 나름의 설명들이 오목조목 붙어있는 것이, '와.... 내가 이런 걸 볼 줄/할 줄 알아야 하는구나.'라는 막연한 경외심을 불러일으키게 되고, 이는 곧 어떤 이들에게는 실체 없는 두려움으로 확장된다.
이번 글에서는, 이'디자인 시스템'이라는 것의 명확한 정의를 토대로, 디자인시스템이라는 요소가 겹겹이 껴입고 있었던 화려함을 잔혹하게 발가벗겨 버려서, 이에 대한 독자들의 막연한 두려움을 줄여보고자 한다.
1. 디자인 시스템이란?
2. 디자인 시스템 해부학
3. 디자인 시스템을 대하는 올바른 자세
4. 디자인 시스템에서 제일 중요한 것
디자인 시스템이란?
먼저, 디자인 시스템의 정의를 살펴보자. (여기엔 챗-GPT의 기여가 좀 있다.)
사진에서 보면 알 수 있듯, 디자인 시스템이란 말 그대로 디자인 작업에 필요한 '일관성이 있는 규정들'이라고 볼 수 있다. (시스템이라는 말 자체가 대략 '조합, 체계'등을 의미하니까. 궁금하면 직접 검색해 봐라.) 그리고 디자인시스템을 구축한다는 건, 문자 그대로 그런 체계를 만든다는 뜻이다.
그렇다면 이는 곧, 디자인 시스템이란 개념이 반드시 UI/UX에만 적용될 수 있는 건 아니라는 걸 의미한다. 브랜드디자인 시스템이 있을 수도 있으며, 어쩌면 편집디자인 시스템을 만들 수도 있다. 어떤 디자인에 체계가 필요하든, 그게 필요한 디자인 업무를 위해 지침서를 만들면 그것이 곧 '디자인 시스템'이 될 수 있다.
그러면, 대표적으로 네이버 LINE과 GOV.UK, Adobe Spectrum에서 각각 언급하는 그들의 디자인 시스템에 대한 소개글을 들여다보자.
Adobe
Spectrum provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive.(Spectrum은 프로덕트 팀이 더 효율적으로 작업할 수 있도록 컴포넌트 및 도구를 제공하며, Adobe의 응용 프로그램을 더 일관성 있게 만들어 줍니다.)
네이버 LINE
"각국의 라인 디자이너들이 사용자에게 동일한 라인 디자인의 가치와 원칙을 전달하는 시스템을 만들자"라는 취지에서 LINE Design System 프로젝트가 시작되었습니다....(중략)... 효율성, 좋은 디자인, 높은 완성도라는 어쩌면 평범하지만 어려운 목표를 향해...(중략)... 디자이너가 실무에 바로 사용할 수 있는 Foundation Guideline, Components Library, 그리고 UX Guideline으로 이루어진 LINE Design System이 탄생하게 되었습니다.
Gov.uk
Use this design system to make government services consistent with GOV.UK. Learn from the research and experience of other service teams and avoid repeating work that’s already been done. (이 디자인 시스템을 사용하여 정부 서비스를 GOV.UK와 일관성 있게 만들어 보세요. 다른 서비스 팀의 연구와 경험을 배우고, 이미 수행된 작업을 반복하지 않도록 합니다.)
자세히 보면 언뜻언뜻 다 비슷한데, 어쨌든 수많은 작업자들이 서로 얼굴도 제대로 모른 채 하나의 회사 안에서 일하고 있을 그런 환경에서 발생할 수 있는, 혼란을 방지하기 위해 만들었다는 것은 분명히 알 수 있다.
정리하면, 디자인 시스템이라는 건 쉽게 말해 마치 '안내서'와 비슷한 개념의 내용이라는 것이다. 여러분 또는 내가 또 다른 누군가에게 무엇을 소개하고 알려주려 할 때 말하는, 그런 모-든 내용들을 전부 잘 다듬어 글과 실제 컴포넌트 모음집으로 담아내면 그것이 곧 디자인(업무를 위한) 시스템이 된다.
디자인 시스템 해부학
보통 어떤 대기업, 또는 오픈소스로 공유되는 디자인 시스템들의 경우, 상당수가 어떤 웹사이트의 형태를 띠고 있다. 비단 컴포넌트 스타일이나 색상등의 정의뿐 아니라 개발자도구까지 갖춘 그런 디자인 시스템도 존재한다.
아무튼 그럴싸한 디자인시스템은 다 쓱 둘러봤는데, 아마 지금쯤 다시 막막함이 찾아왔을지 모른다. 왜냐하면 내용이 많아도 너-무 많기 때문이다.
일단 대표적으로, 디자인 시스템의 구성을 조각조각 내보면 크게 다음과 같은 것들이 있다.
1. 디자인 원칙(소위 Design Principle이라고도 하는 것)
2. 최하위 구성요소-컬러 팔레트, 폰트 목록
3. 컴포넌트
4. 패턴
여기서 디자인 원칙이란, 코드와 직접적 상관성을 갖는 요소라기보다는 디자인 시스템 내부에 있는 모오-든 내용들에 반드시 적용되는, 마치 민법, 형법 위에 '헌법'이 있는 것처럼 일종의 큰, 철학적 내용을 보여주는 구성요소다. 대체로 내용들을 살펴보면 '우리의 디자인 시스템에 속하는 요소들은 ~~~ 해야 해'라는 말을 약간 더 복잡하고 어렵게 적어둔다. 그리고 이 철학은 솔직히 대부분 겹친다. 전 세계의 수많은 UI/UX디자이너들이 유저에 대해 추구(?)하는 바가 사실 거의 비슷하니, 그럴 수밖에 없다. 그치만 그게 잘못된 일이거나 표절의 시비가 붙을 수 있는 건 아니다. 다른 이가 꾸준히 기부하는 삶을 산다고 해서 나도 그런 삶을 똑같이 추구한다고 고소를 당하는 건 좀 웃기지 않는가?
컬러 팔레트나 폰트 목록이 길-게 늘어져있는 최하위 구성요소(Element 또는 Atom이라고도 불리는)는, 가장 기초가 되는 Raw(날것의) Value, 즉 말 그대로 더이상 분해되지 않는 가장 최소단위 요소라고 보면 된다.
보통 이런 건 브랜딩 디자인 가이드와 좀 더 밀접하게 연결되기도 하는데, 서체 종류부터 컬러 팔레트의 꽃, Primary 컬러 등을 지정하고 어떤 때 무슨 색상과 폰트를 어떻게 쓰면 되는지 알려주기 위해 존재한다. 이 최소 요소들은 모여서 하나의 컴포넌트를 구성하기도 한다.
대망의 컴포넌트. 컴포넌트란 그냥 번역하면 '구성요소'일뿐이다. 지금 당장 아무 앱이나 웹사이트를 열어 들어가 봤을 때 보이는, 화면 한 장에 오밀조밀 야무지게 들어가 있는 모든 요소들이 전부 컴포넌트가 될 수 있다. 다만 이 컴포넌트의 경우 최하위(최소) 구성요소보다는 일종의 인수분해가 가능한 '덩어리'라고 보면 된다.
그리고 패턴은(이건 고유명사는 아니다. Adobe에서 쓰고 있는 명칭이고, 생각보다 주변에서 많이 쓰길래 그냥 대표 예시로 가져왔을 뿐이다) 그 하위 요소들을 한데 묶어둔 '선물세트'와 같은 요소인데, 우린 그걸 경우에 따라 '패턴'이라고 부르거나 그룹, 폼, 페이지 등 여러 이름을 붙여 부를 수 있다.
이 외에도, 특히나 LINE의 경우에는 '어떤 식으로 워딩을 작성해야 하는지(UX Writing)'에 대한 규칙까지 정해 넣는 경우도 있는데, 디자인 시스템 사례들을 A-Z까지 샅샅이 뒤져보지 않아도, 그냥 목차만 보면 구성 측면에서는 디자인 시스템의 목표에 따라 디테일이 조금씩 다르게 들어가 있는 것을 알 수 있다.
디자인 시스템을 대하는 올바른 자세
"디자인 시스템은 어떻게 만드나요?"
만약 이 질문이 지금 나오려 했다면, 아직 당신은 디자인 시스템에 대해 완전히 이해되지 못했다는 걸 의미한다. (때찌하거나 비난받을 일은 아니다. 그냥 당신이 아직 이해가 덜 되었다는 의미일 뿐.)
일단 자료조사하면서 찾아봤던 디자인시스템 사례는 싹 다 머릿속에서 지우길 권한다. 기초 작업 전부터 으리으리한 본새에 사로잡히면, 진짜 디자인 시스템이 나오기 힘들다.
그리고 목표부터 명확히 하라. 생각 없이 돌입하면, 생각 없는 어중간한 결과물만 나올 뿐이다. 얼마나 똑같든, 다르든, 디자인 시스템을 살펴보면 모두 각자만의 명확한 지향점(목표)을 갖고 있는 걸 알 수 있다.
마지막으로, 지침서를 만들듯 임하라. 내가 어떤 조직을 운영하게 되었는데, 조직 내 문화나 질서가 너무 개판이라서 그 혼돈의 카오스를 잠재우고, 성숙한 문명사회를 이루기 위한 지침서를 만든다고 생각해 보자.
디자인 시스템에서 제일 중요한 것
디자인 시스템에서 가장 중요한 건 무엇일까? 바로 질서와 체계를 제공하는 것이다. 그리고 그건 회사마다 다를 수 있다. 그렇기 때문에 더더욱, 혼자 피그마/스케치/XD나 붙잡고 있는다고 될 일이 아니라, 필요한 기초 작업들을 먼저 탄탄히 하는 것이 가장 중요하다.
디자인 시스템은 정말 별게 아니다. 시스템이란 말이 무섭다면 '디자인 체제'라고 부르거나 '디자인 가이드북'이라고 불러보자. (뭐라고 부르든) 어차피 그까짓 문서 이름이야 짓기 나름 아닌가ㅎ
(디자인 파일명에는 그렇게 창의력 넘치는 이름을 많이도 붙이면서, 아무것도 아닌 겉껍데기에 지레 겁부터 먹지는 말자. 만약 UI/UX디자이너라면, 당신이 그 일을 해야 하는 사람이다. 누가 대신 해줄 수도 없다.)
끝.
