brunch

매거진 디자인 뉴스레터 디독

라이킷 225 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김자유 Feb 29. 2020

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

*본 글은 디자인 뉴스레터 디독에서 발행한 글입니다.

해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv

디독

page.stibee.com

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

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

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

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

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

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

디자이너와 개발자를 위한 툴. 패턴, 컴포넌트, 가이드라인...

뿐만 아니라, 디자인 시스템은 브랜드 밸류, 일하는 방식, 마인드셋, 신념 등 달성하기 가장 어려운 추상적인 요소들을 의미하기도 한다.

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

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

스타일 가이드는 -이름 그대로- 그래픽 스타일(컬러, 폰트, 일러스트레이션...)과 그 용례에 대한 것이다. 패턴 라이브러리는 기능적인 컴포넌트와 그들의 용례를 통합한 것이다.

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

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-커머스,금융, 정부 웹사이트 같은 큰 규모의 프로젝트에 잘 어울린다. 모듈러 시스템은, 원자 단위의 디자인 마인드 셋을 갖고 일하면 매우 흥미로울 것이다.

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