brunch

You can make anything
by writing

C.S.Lewis

by 최성우 Jan 29. 2022

이커머스 스타트업에서 디자인 시스템 만들기

주니어 디자이너의 스타트업 디자인 시스템 도입기

본인은 현재 빠르게 성장하고 있는 이커머스 스타트업에서 UX 디자이너로 근무를 하고 있다.

디자인 조직은 BX, UX 디자이너로 나뉘어 있으며 기능 조직으로 이루어져 있다. 빠른 회사의 성장과 서비스 확장 덕분에 팀원은 5명이지만 대부분이 입사한 지 1년도 안된 '신생아팀'이라고 볼 수 있다.


UX 팀이 어느 정도 규모가 갖추기 시작했을 때 가장 먼저 시작한 작업이 디자인 시스템 만들기였는데 고객들에게 통일된 디자인 가이드를 통해 UX의 가장 중요한 요소 중 하나인 일관된 경험을 주기 위해서다.


최근 국내 스타트업 또는 해외 유명 기업들이 디자인 시스템을 공유하고 있는데, 만들어지는 과정에 대해서는 자세하게 다루고 있지 않는 것 같아 디자인 시스템을 도입하게 된 배경, 겪고 있는 과정과 어려움에 대해 설명해보려고 한다.


회사에서 디자인 시스템을 제작하고 있거나 혹은 제작할 예정인 디자이너라면 설득하는 과정에 대해 참고하길 바란다.


설명에 앞서 디자인 시스템에 대한 이해도를 높이기 위해 참고한 아티클을 공유한다.

디자인 시스템이란?

디자인 시스템은 왜 필요한가?

디자인 시스템 구축하기(디독)




디자인 시스템은

왜 필요해?


빠르게 서비스가 확장되고 여러 명의 디자이너가 작업하면서 생기는 문제점들이 존재했는데 그중 가장 문제가 되었던 것들을 나열해 보았다.(이 부분은 모든 스타트업의 디자이너/개발자들이 공감할 것이다.)



사실 과거에도 디자인 시스템 도입을 준비했던 흔적이 있었지만 이것은 시스템이 아닌 한 명의 디자이너가 정의한 단순 디자인 에셋에 불과했고 가이드가 문서화되어 있질 않아(+결과물 제작자의 퇴사로 인해 유실) 가이드대로 준수한 결과물들이 나오지 않는 문제를 겪었다.




디자인 시스템은

어떻게 만들었어?


빠르게 디자인 시스템을 구축하고자 팀원들과 의기투합하여 진행했던 방식은 다음과 같다.

1. Atomic Design 패턴화 단계 파악
2. 패턴 분류 체계 및 네이밍 정립
3. 시스템 구축 프로세스 정립


안타깝게도 아토믹 디자인의 가장 기초 단계인 Foundation부분부터 패턴화를 시작해야 했고 그 말은 즉슨 험난한 장거리 마라톤이 될 것이라는 것을 직감할 수 있었다.(좌절)


그래도 우리에겐 희망이 있었는데 구글의 머티리얼 디자인, 애플의 휴먼 인터페이스 디자인, IBM 카본 디자인 등 국내 스타트업 혹은 대형 기업들의 디자인 시스템들이 공개된 상황이고 이들의 완성도는 굳이 검증할 필요가 없다고 판단했다.

대형 기업들의 연구에서 나오는 데이터를 활용해 시행착오를 줄여 빠르게 디자인 시스템을 구축하고자 했다.


우리는 아토믹 디자인 방법론을 활용하여 디자인 시스템을 제작하고 있는데 참고했던 국내 스타트업 혹은 대형 기업들의 디자인 시스템들을 공유한다.


구글 머티리얼 디자인 시스템

리디 디자인 시스템

IBM 카본 디자인 시스템

스포카 디자인 시스템

앤트 디자인 시스템

버즈빌 디자인 시스템


디자인 툴은 피그마를 사용했다. 사실 프레이머를 사용하여 개발자와 디자이너가 React 컴포넌트라는 같은 언어로 대화를 하면서 더욱 완성도 있는 디자인 시스템을 구축하고 싶었지만 아직 러닝 커브가 높은 디자인 툴이기에 팀원들에게 적극적으로 도입을 권유하기는 어려웠다.



설득,

그리고 설득


새롭게 정의되는 디자인 시스템의 목표는 다음과 같았다.


이처럼 시스템이란 것을 구축하기 위해서는 충분한 리소스와 고민이 필요한데 회사 입장에서 해결해야 할 일들이 이미 많이 쌓여 있었다.

하지만 언제까지 비효율적으로 업무를 진행하고 결과적으로 제품의 완성도가 떨어지는 문제를 내버려 둘 순 없다. 어떻게든 디자인 시스템 도입을 위해 설득의 과정이 필요했다.


슬픈 현실


1차적으로 정의된 디자인 시스템과 더불어 디자인 시스템이 필요한 이유, 이를 통해 얻게 될 이점을 구체화하고 문서화하여 조직 내에 공유하고 발표하는 등 설득하는 과정을 거쳤다.


진행 중인 디자인 시스템 일부(Zeroheight)
디자인 시스템 협업 문서 일부


다행히 디자인 시스템을 통해 얻게 될 이점에 대해 공감을 이끌어냈고 100% 리소스를 확보받지는 못하였지만 혁신을 위한 시도를 해볼 수 있게 되었다.



앞으로의

여정


본격적으로 디자인 가이드를 작성하면서 UX 패턴, 네이밍 명명 규칙등 다양한 직군과 일관된 언어로 사용하려고 하고 있다.


디자인 시스템이라는 것이 단기간에 완성하는 것이 아닌 꾸준하게 체계화시키며 진화하는 장거리 마라톤이라고 생각한다.

패턴화 단계가 고도화되고 많은 컴포넌트들을 개발한 뒤 그것들을 모듈화 하여 효율적으로 제품이나 서비스를 생산하면 사용자들에게는 일관된 경험을 주어 더욱 이용하고 싶은 서비스가 될 것이다.


나와 비슷한 고민을 가지고 어려움을 느끼고 있는 디자이너/개발자들이 있다면 언제든지 연락 주길 바란다.

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari