[디독] 💨10분 만에 읽는 디자인 시스템 A to Z

읽는 디자인 디독

10분 만에 읽는 디자인 시스템 A to Z

디자인 시스템이란 무엇인가?
스타일 가이드 or 패턴 라이브러리: 뭐가 다른 걸까?
최근에 왜 핫해졌는가?
디자인 시스템에는 어떤 것들이 있는가?
디자인 시스템에는 어떤 종류가 있는가?
사례
끝내며

디자인 시스템은 최근 내 업무에서, 또 그 업무를 둘러싼 많은 논의들 중에서 가장 중요한 부분이 되었다. 이젠 나뿐만 아니라 많은 사람들에게 해당하는 일일 것이라 생각한다. : )

작년에 Alla Kholmatova의 책을 읽은 후, 운 좋게도 3월에 열린 컨퍼런스에 참여할 수 있었다. 이 모든 것들이 디자인 시스템에 대한 내 신념을 확고하게 만들어주었다. 미래에는, 모든 브랜드와 모든 제품들이 디자인 시스템을 사용하게 될 거란 신념. 간단하게든, 전체적으로든, 엄격하게든, 느슨하게든, 하나의 채널이든, 크로스 플랫폼이든...

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

에 대해서는 정말 다양한 정의를 듣고 있으니, 난 디자인 시스템이 '아닌' 것을 이야기해보겠다. : 디자인 시스템은 스케치 라이브러리가 아니다. 스타일 가이드나 패턴 라이브러리 정도가 아니라는 말이다. 그보다는, 그 모든 것들을 합한 것, 아니 그 이상이라고 볼 수 있다.

디자인 시스템은 팀이 제품을 디자인하고, 실현화하고, 개발할 수 있는 모든 요소들을 그룹화하는 단일한 기준을 제공한다.

즉, 디자인은 '상품'이 아니라 상품'들'에 가깝다. 디자인 시스템은 제품, 툴 그리고 새로운 기술과 함께 지속적으로 발전한다.

컨퍼런스에서 Jina Anne이 완벽하게 묘사한 것처럼, 시스템은 보이는 요소와 보이지 않는 요소로 구성되어있다.

디자이너와 개발자를 위한 툴. 패턴, 컴포넌트, 가이드라인...
뿐만 아니라, 디자인 시스템은 브랜드 밸류, 일하는 방식, 마인드셋, 신념 등 달성하기 가장 어려운 추상적인 요소들을 의미하기도 한다.

2.스타일 가이드 or 패턴 라이브러리: 뭐가 다른 걸까?

이젠 확실하게 알고 있을 테지만, 스타일 가이드와 패턴 라이브러리는 디자인 시스템의 일부일 뿐이다.

스타일 가이드는 -이름 그대로- 그래픽 스타일(컬러, 폰트, 일러스트레이션...)과 그 용례에 대한 것이다.

패턴 라이브러리는 기능적인 컴포넌트와 그들의 용례를 통합한 것이다.

대부분의 최근의 디자인 시스템은 둘 다 포함하고 있고, Shopify를 예로 들자면 그들은 스타일 가이드를 "비주얼"로, 패턴 라이브러리를 "컴포넌트"라고 부른다.

Shopify - Polaris: Style guide & Pattern library

3.최근에 왜 핫해졌는가?

디자인과 컴포넌트를 공장화하려는 시도는 딱히 새로운 건 아니다. 하지만 그 트렌드가 근 몇 년 간 급성장한 것은 사실이다. 점점 더 많은 회사들이 디지털 환경을 지원하고 있고, 이젠 인쇄물에 대한 가이드라인까지 없을 정도다.

오랜 기간 동안, 디지털은 "사이드 프로젝트" 취급 받아왔다. : 우리는 인쇄물을 위한 그래픽 가이드라인을 만든 후에, 디지털 가이드라인을 거기다 조~금 덧붙여왔을 뿐이다. 300페이지에 달하는 그래픽 가이드라인에 붙어있는 6페이지 짜리 디지털 가이드라인을 안 받아본 사람이 있을까? 디자이너로서, 내가 브랜드로부터 기대했던 건 그런 종류의 정보가 아니었다...

클라이언트에게 그래픽 가이드라인을 받은 디자이너

이제 우리는 시간이 지날수록 함께 진화해야 하는, 공통된 언어를 사용하여 디지털과 인쇄물 사이의 갭을 줄여나가야 한다. 디자인 시스템은 그래픽 가이드라인에서 유래한 것이나, 팀의 워크 플로우에 좀 더 최적화되어있다. 이제 우리는 컴포넌트의 시스템을 만들고 공유할 수 있는 강력한 툴을 갖게 된 것이다.

4.디자인 시스템에는 어떤 것들이 있는가?

디자인 시스템의 근본적인 목적은 팀의 업무 생산성을 높이는 것이다. 그러므로, 우리가 스스로에게 해야 할 첫 번째 질문은 "디자인 시스템에 뭐 넣어야 하지?"가 아니다. "이걸 누가, 어떻게 쓰는 거지?"이다.

1) 목적과 공유된 가치

©Jahit Janberk

우리는 어디로 가는가? 왜? 어떻게?

어떤 일이든, 시작하기 전에 팀과 동일한 목표를 명확하게 설정하고 모두의 생각을 나란히 하는 것은 매우 중요하다. 이는 비전을 만들고 모두가 같은 방향을 보게 하는 데에 도움이 된다. 이 목표들은 시간이 지남에 따라 발전하게 될 것이고, 그게 당연한 거다. 우린 그 변화가 모두에게 커뮤니케이션되는 것만 확실하게 하면 된다.

가치로 말할 것 같으면, 브랜드 목표에 따라 우리의 선택을 가이드해 줄 좋은 이상향이라고 할 수 있다. 우리는 우리가 디자인하는 것들이 이 핵심 가치와 다르지 않도록 확인할 필요가 있다.

Posters the ASH team created for their core values

2) 디자인 원리(Design Principles)

디자인 원착: 디자인 원칙과 방법론들을 모아둔 것

먼저 명심해야 할 것이 있다. : 디자인 원칙은 제품의 비주얼적인 부분만 다루는 것이 아니다.

디자인 원칙은 팀이 제품에 적합한 디자인을 할 수 있도록 도와주는 가이드 문장이다.

디자인 원칙은 팀이 의미있는 디자인 의사결정을 할 수 있도록 도울 것이다.

미디엄을 사례로 들어보자. 그들의 디자인 원칙 중 하나는 "선택보다 방향"이다. 그 원칙 덕에, 수많은 컬러와 폰트로 본문을 디자인하는 대신에, 좀 더 간단한 걸 선택할 수 있었다. 그 원칙은 작가들이 비주얼적인 면보다, 내용에 집중할 수 있게 만들어줬다.

디자인 원칙은 반드시 디자인 의사 결정에 도움이 되어야 한다.

3) 브랜드 아이덴티티&랭귀지

Shopify 브랜드 아이덴티티

아이덴티티는 반드시 전략, 브랜드의 목적과 일치해야 한다. Alla Kholmatova는 하단의 내용과 함께 "Perceptual Pattern(지각 패턴)"이라는 개념을 이야기했다.

컬러
폰트
공간
모양
아이콘
일러스트레이션
사진
애니메이션
보이스앤톤
사운드

이 모든 것은 브랜드의 알파벳(기초)을 형성한다.

좋은 말이지만, 랭귀지를 설명하기에는 부족하다! 우린 더 나아가서, 이 알파벳을 사용해서 특정 단어들을 만들고, 이 단어들을 연결해서 말이 되는 문장들을 만들어내야 한다. 이 브랜드 요소들은 시스템의 문법과 결합될 몇 가지 규칙을 필요로 할 것이다.

디자인 시스템에서는 그것이 Do's and Don'ts나 good examples 같은 가이드라인에 의해 구체화된다.

아이덴티티 가이드라인 사례 ©Backelite

이는 디자인 팀이 "적절한 조합"으로 언어를 사용할 수 있게 만들고, 그렇게 되면 브랜드는 매우 유니크하고 쉽게 알아볼 수 있게 될 것이다.

4) 컴포넌트&패턴

컴포넌트와 패턴은 시스템의 꽃이다. 앞에서 언급했던 모든 요소들이 컴포넌트와 패턴을 만들고 일관된 경험을 전달하는 데에 도움을 줄 것이다.

컴포넌트는 레고 블럭과 같은 것이다 디자이너는 스케치로 사용하고, 개발자는 바로 코드로 사용할 수 있다. 그들의 기능적 역할은 반드시 명시되어야 한다.

패턴의 경우, 우리가 제품의 모든 영역에서 컴포넌트를 일관적이고 논리적으로 사용할 수 있도록 도와준다.

하단 이미지를 보면, 컴포넌트는 기술적, 기능적 명세와 함께 명확하게 명시되어있는 것을 확인할 수 있다. 반면, 패턴은 그것을 어떻게 사용하는지에 대한 설명으로 구성되어있다.

Pattern vs component ©Nathan Curtis

디자인 시스템을 위해 어떤 컴포넌트를 먼저 개발해야 하는지 혼란스럽다면, 컴포넌트 우선순위 워크샵(component prioritization workshop)을 진행해볼 것을 추천한다.

좋은 사례

시스템에 직결되어있는 서류 작업 외에도, 좋은 사례들을 익혀두면 더 넓은 범위에서 팀에게 도움이 될 것이다. 잘 알려진 우수 사례들을 조사해서 상품과 팀의 성숙도를 바탕으로 적절한 사람을 뽑아낼 수 있는 것이다.

즉, 우수 사례를 공부하면, 팀 멤버들의 기술적 스킬을 형성하고 개발할 수 있다.

“How to” in the BBC Design System

5. 디자인 시스템에는 어떤 종류가 있는가?

팀과 제품마다 각각 다른 종류의 디자인 시스템이 있다고 말할 수 있다. 우리 것을 정의하기 위해서는, 올바른 질문들을 스스로 던져보아야 한다.

이 시스템을 몇 명이 사용할 것인가?
그들의 프로필은 어떠하며, 해당 주제에 대해 얼마나 이해도가 높은가?
우리가 정리해야 할 제품의 개수는 몇 개인가? 몇 개의 플랫폼에서? 몇 개의 기술들을 사용하는지?(Angular, React, 등등...)
제품에서 어느 정도의 일관성을 구현해내고 싶은가?

이 모든 질문들이 적절한 디자인 시스템을 정의하는 데에 도움이 될 것이다.

Alla Kholmatova의 책을 읽으면 영감을 받을 수 있을 것이다.

*링크를 클릭하시면 블로그로 연결됩니다.

엄격하게 vs 느슨하게

왼쪽: Airbnb / 오른쪽: Ted

엄격한 시스템은 종합적이고 디테일한 서류를 갖고 있고, 디자인과 개발을 완벽하게 동기화해줄 것이다. 시스템 내에서 새로운 패턴을 소개할 때에는, 엄격한 프로세스가 적용될 것이다. 엄격한 시스템은 팀이 마주칠 수 있는 주요 케이스들을 모두 다루어야 하기 때문에, 매우 범위가 넓을 것이다.

느슨한 시스템은 실험을 위한 여유를 조금 남겨둔다. 여기에서의 시스템은 팀에게 일부 자유를 유지하는 선에서 프레임워크를 제공한다. 디자이너와 개발자는 시스템을 사용하든 하지 않든 상관 없고, 그들의 제품의 필요에 의할 때만 사용하면 된다.

내 경험으로는, 엄격함과 유연성 사이에서 밸런스를 찾는 것이 중요하다. : 매우 엄격한 시스템은 시스템을 사용하고 싶지 않아하는 디자이너와 개발자로 하여금 불편함을 느끼게 할 것이다. 다른 한 편으로는, 디자인 시스템이 너무 느슨하다면, 시스템에 관해서 이야기를 꺼낼 수 있을까?

모듈화 vs 통합

Modular vs integrated systems ©Alla Kholmatova

모듈러 시스템은 교체 가능하고 재사용 가능한 파트들로 구성되어있다. 빠르게 스케일업해야 하는 프로젝트와 다수의 유저들의 니즈를 충족해야 하는 프로젝트에 어울리는 시스템이다. 단점은 구현하기가 어렵다는 것이다.(왜냐하면, 독립적으로 사용 가능한 동시에 함께 사용되기도 하는 모듈을 만드는 것이 어렵기 때문이다.) 이러한 종류의 시스템은 특히 e-커머스,금융, 정부 웹사이트 같은 큰 규모의 프로젝트에 잘 어울린다. 모듈러 시스템은, 원자 단위의 디자인 마인드 셋을 갖고 일하면 매우 흥미로울 것이다.

통합 시스템은 하나의 유니크한 맥락에 초점을 맞춘다. 모듈러 시스템처럼 파트들로 구성되어있긴 하지만, 이 파트들은 교체가 불가하다. 이러한 종류의 시스템은 각 요소들이 반복되는 비율이 매우 낮거나, 아트 디렉션이 강하게 들어가고, 자주 바뀌는 프로젝트에 걸맞다.(포트폴리오, 쇼케이스, 마케팅 캠페인 등...)

중앙 집중화 VS 분업화

디자인 시스템과 연관되어있는 조직은 발전과 스케일업을 매우 중요하게 생각할 것이다. 이 아티클에서는, Nathan Curtis가 다른 타입의 모델들을 디테일하게 설명해두었다. 그 중 두 가지를 가져와봤다.

중앙 집중화와 분업화, 당신의 디자인 시스템은 어떤 모델인가? ©Nathan Curtis

중앙 집중화 모델에서는, 한 팀이 시스템을 책임지고 발전시킨다. 이 팀은 다른 팀이 효율적으로 일하도록 돕고, 시스템이 그들의 모든 니즈를 반영하고 있는지 확인하기 위해 그들과 매우 밀접하게 일해야 한다.

분업화 모델에서는, 몇몇 팀의 몇몇 구성원이 시스템을 책임진다. 모든 사람이 참여하고 있는 것처럼 느껴지기 때문에 시스템 결정은 빠르게 이루어지나, 각 팀 리더들이 전체적인 비전을 유지할 수 있어야 한다.

각각의 경우, 일원 의식을 가질 수 있도록, 모든 사람들이 시스템을 개선하기 위한 제안을 하고 참여하도록 만드는 것을 추천한다.

시스템 정의 슬라이더

이는 우리가 원하는 종류의 시스템을 정의하기 위해 세 가지 슬라이드 위에 올려놓고, 포지션을 확인하고자 함이다.

Airbnb: 엄격하고, 모듈화되어있으며 중앙 집중화된 시스템

6.사례

독창성은 잠시 접어두면, 이들은 내가 가장 좋아하는 디자인 시스템 사례들이다. :

Material Design: 디자이너와 개발자를 위해 심플한 네비이션과 툴을 제공한다.

Material Design System

Atlassian : 철저한 디자인 시스템.

Atlassian Design System

Polaris: Shopify가 만든 디자인 시스템. 디자이너와 개발자의 워크 플로우에 잘 통합되어있다.

Polaris by Shopify

IBM: 디자인 랭귀지를 사용한 탁월한 작업.

IBM Design Language

7.끝내며

디자인 시스템은 완전체 제품이며, 우리의 제품을 만드는 프로젝트에 투입되는 사람들을 도울 것이다.

모든 좋은 제품들이 그러하듯, 일이 밀리기도 할 것이고, 반복적인 일을 수행해야 하고, 유저들(디자인, 개발자, PO-프로젝트 오너...)을 최전방에서 관리해야 한다.

디자이너와 개발자의 워크 플로우에 좀 더 통합된 시스템은 더 효율적으로 기능할 것이다.

이러한 통합 관점에서 가장 좋은 사례는, 디자이너가 구상 단계에서 필요로 하는 모든 시스템 컴포넌트와 도큐먼트를 스케치에서 바로 표시해주는 Polaris의 스케치 플러그인이다.

Telescope: Polaris 스케치 플러그인

이 모든 것은 시작에 불과하다!

나는 미래엔 우리가 우리 유저와 제품의 경험에 온전히 집중할 수 있게 만들어주는 기술적 발전을 얻으리라 믿는다. ;)

디자인 시스템과 관련한 워크샵을 경험해보고 싶다면, "어떻게 하면 디자인 시스템 컴포넌트의 우선 순위를 정할 수 있을까?"와 "디자인 시스템의 성공을 어떻게 측정할 수 있을까?"를 읽어볼 것을 추천한다.

참고

Alla Kholmatova의 책 <Desgin Systems>
Nathan Curtis의 모든 아티클
Jina Anne의 컨퍼런스와 글

[20.02.27]

디자인 시스템을 구축하기 전에 디자인 시스템이 필요한 제품이나 서비스의 목적을 제대로 파악하여 구축하는 것이 중요한데요. 이번 아티클을 통해 넓은 시각으로 디자인 시스템을 이해하고, 적절한 디자인 시스템 개발 방향을 생각해볼 수 있었습니다.

디자인 시스템을 구축하는데 필요한 기본 구성 요소들을 조금 더 알고 싶다면 지난번 디독에서 5회에 걸쳐 번역하여 발행한 디자인 시스템 시리즈 글 (1편, 2편, 3편, 4편, 5편) 을 참고해주세요.

디독 드림

오늘 콘텐츠는 어떠셨나요?

유익했어요 😍 | 보통이에요 😶 | 아쉬워요 😔

같이 읽고 싶은 친구가 떠오른다면

👉구독링크 공유하기

http://bit.ly/2FNQNpv

번역이 필요한 아티클이 있다면

👉 디독에게 알려주기

[디독 도네이션 OPEN]

작은 금액이라도 디독의 서비스 유지를 위해 후원해주시면 감사하겠습니다. :)

카카오뱅크 3333 14 0517 920 (심예지)

*후원해주신 금액은 전액 서비스 운영(메일 발송 솔루션 비용)에 사용됩니다.
*후원자(입금자명) 리스트 기입을 원하지 않으시는 분은 메일로 말씀해주세요.

1월 후원해주신 분들

김문성, 강란영, 정승현, 이도후, 최도원, 서윤미, 한효섭, 수렴, 김은진, 나기문, 박철순, 이재호, 임준평, 장용호, 이재호, 조민아, 오한균, 김선우, 서나연 외 2분

후원해주신 분들, 정말 감사합니다! 덕분에 서비스를 유지할 수 있게 되었습니다. :)

디독
d.dok.newsletter@gmail.com
-
수신거부 Unsubscribe