디자인과 엔지니어링 갭에 디자인 시스템으로 다리 놓기

서베이몽키라는 서베이 서비스의 디자인 시스템을 구축한 Mike Dick의 강연 중 중요한 내용만 간추린 글입니다.

 

동영상 링크 ↓

Bridging the Design and Engineering Gap With Design Systems

우선 그가 디자인 시스템을 만들게 된 배경부터 짧게 설명하면,

Mike Dick이 쿼라, 트위치를 거쳐 서베이몽키에 합류했을 때, 마침 서비스의 리브랜딩이 진행되고 있는 시점이었습니다.

 

게다가 운 좋게도? 라고 표현하면 조금 애매할 수 있지만, 서베이몽키에는 이미 컴포넌트 라이브러리가 있었습니다.

정확히 말씀드리면 개발자들이 만들어 놓은 라이브러리였습니다. 물론 이 과정에 디자이너가 참여하지 않았었고요.

 

만약 이 상태를 여러분이 맞닥뜨린다면 어떻게 행동하시겠습니까? :) 

회의? 아니면 혼자 고군분투? 

Mike는 동료 개발자에게 먼저 말을 걸었습니다. 그랬더니 챙김 받는 걸 좋아하는 사람이었는지, 차가 워보이는 ya 메시지 뒤로 자신의 코드를 자랑하며 많은 대화를 나눴다고 합니다. 그렇게 파트너를 찾았습니다.

 

그들이 마주한 3가지 문제 

 

None of us were speaking the same language

(디자이너나 개발자 그 어느 누구도 같은 언어를 사용하지 않았다)

 

We had to influence engineering adoption

(엔지니어링이 디자인 시스템을 반영하도록 설득해야 했다)

 

None of us knew what our source of truth was.

(어떤 소스가 사이트에 반영되는지 파악할 길이 없었다. 즉, 디자이너가 메인 버튼이라고 부르는 것이 개발자 입장에서 어떤 버튼을 의미하는지 파악이 안 됐다) 

 

디자인 시스템을 만드는 과정

마이크가 속한 프로덕트팀은 브랜딩 팀이 만든 디자인 가이드를 어떻게 실제 웹페이지에 구현해야 할지 고민이었습니다.

그래서 웹페이지를 그대로 프린트해서 가위로 자르고 모듈처럼 만들었습니다. 그 결과로 UI Kit를 만들었습니다.

 

 None of us were Everyone started speaking the same language

좋은 소식으로는 UI Kit를 만들고 난 뒤 모두가 같은 언어를 사용하기 시작했다는 점입니다.

 

---

그럼에도 불구하고 UI Kit는 디자인 시스템이 아니었습니다.

그 이유는 제목처럼 디자인 시스템은 엔지니어링과 디자인을 잇는 다리 역할인데, UI Kit는 디자인에 속한 요소일 뿐이었기 때문이죠.

개발자들이 UI Kit을 활용하면서 여러 가지 디자인 변경이나, 활용 방법에 대한 질문을 하기 시작했고, 다음과 같은 깨달음을 얻었습니다.

 

UI Kit는 그저 디자인 시스템 구축 여정의 시작이었고, 이것을 개발자들이 어떻게 반영하면 좋을지에 대한 전략이 없었던 것이다. 

그래서 각 팀을 찾아다니며 아래와 같은 질문들을 했다고 합니다.

 

하트가 붙어있는 질문이 개발자들이 가장 많은 대화를 나눴던 주제라고 합니다. 자동화라면 자다가도 벌떡 일어날 개발자들에게 좋은 떡밥인 듯 합니다(?)

 

어떻게 하면 개발자와 디자인의 다리를 놓을까 고민하다가 기술자들의 개발 스택에 대해 얘기를 나누며 CSS가 그 가교 역할을 할 수 있다고 판단했습니다.

shopfify의 개발 스택

그 노력으로 일환으로 컬러 스키마를 만들었고, hex값으로 컬러를 부르는 것이 아니라 primary green이라는 용어와 같이 개발자도 디자이너도 함께 사용할 수 있는 구조를 만들었습니다. 오른쪽 사진은 디자이너가 코드를 어떤 관점으로 볼 수 있는지에 대한 내용입니다.

 

We had to have influenced engineering adoption

CSS를 매개로 개발자들과 소통하기 시작했더니, 디자인 시스템을 반영하는 문제를 설득할 수 있게 되었습니다.

 

---

그 결과 정적 웹사이트에서 디자인 컴포넌트와 HTML / REACT코드를 함께 볼 수 있는 디자인 시스템을 만들었습니다.

 

None All of us knew what our source of truth was.

이제는 특정 버튼을 이야기해도 디자이너와 개발자 간의 소통 오류는 발생하지 않았습니다.

 

 

---

끝으로 그는 3가지를 집으로 가져갔으면 한다고 말했습니다.

 

1. CSS is great speccing tool (CSS는 뛰어난 서술 / 선언 도구이다)

2. Get buy-in from your engineering org (엔지니어링 파트로부터 동의나 지원을 받아라)

3. Find your counterpart (함께 일을 할 짝꿍을 찾아라)

 

만약 자신이 디자이너라면 CSS + 자바스크립트를 다루는 사람, 디자인과 CSS를 할 줄 안다면 자바스크립트 찾고,

제일 찾기 힘들지만 제일 좋은 올라운더... 를 찾아라! :) 

 

이상입니다.