와디즈의 디자인 시스템 구축

박정현

Published in

와디즈서비스

5 min readMar 3, 2021

와디즈가 디자인 시스템을 구축하며 겪었던 상황들과 경험들을 공유합니다.

와디즈가 정의한 디자인 시스템이란
디자인 원칙, 규격, 재사용 할 수 있는 UI 패턴과 컴포넌트, 코드를 포괄하는 일련의 체계

디자인 시스템 구축을 결심한 계기

빠르게 확장되는 서비스와 자회사의 출범
늘어나는 인력
쌓여가는 레거시
일관적이지 못한 UX/UI
명확한 기준이 없어 매번 발생하는 커뮤니케이션

위와 같은 이유로 도입을 결심했지만 험난할 것 같은 예감…🧐

그래도 부딪혀보자!

첫 시도

디자인팀과 프론트엔드팀이 의기투합해 신규 프로젝트를 시작하는 단계에서부터 디자인 시스템을 고려해 컴포넌트를 설계했습니다. 그리고 프로젝트를 진행하며 만들어진 컴포넌트들로 자연스럽게 디자인 시스템을 구축하는 것이 첫 번째 계획이었습니다……만😅

프로젝트를 수행하는 것만으로도 쉽지 않은 일정 속에서, 디자인 시스템을 고려하며 컴포넌트를 설계하고 개발하는 것은 무척 어려운 일이었습니다. 프로젝트의 일정이 다가올수록 충분한 검토와 설계를 하지 못한 채 구현에만 급급해졌으며, 이는 디자인 시스템과는 전혀 다른 방향이었습니다. 그리하여 이렇게 해서는 가능한 일이 아니라는 것을 깨닫고 새로운 방안을 모색했습니다.

리…리소스가 필요해

디자인 시스템 구축을 위한 설득과 증명

시스템을 구축한다는 것은 무에서 유를 창조하는 것만큼 쉽지 않은 일이기 때문에, 충분한 리소스와 고민을 필요로 합니다. 그렇기 때문에 무엇보다 회사의 지원과 이해가 필수적이었는데 그 과정이 쉽지는 않았습니다.

우선 사업적으로 해야 할 일들이 엄청나게 쌓여있었고 회사가 빠르게 성장하는 만큼 서비스도 빠르게 대응해야 하기 때문에, 디자인 시스템과 같은 장기 프로젝트에 당장 인력을 투입하기란 쉽지 않은 결정이었죠.

그럼에도 불구하고 디자인팀과 프론트엔드팀은 디자인 시스템이 꼭 필요한 일이라 확신했고, 디자인 시스템이 필요한 이유와 구축 시에 얻게 될 이점을 구체화하여 발표하는 등의 충분한 설득으로 마침내 공감을 얻어 리소스를 확보 받았고 정식 프로젝트로 진행할 수 있었습니다.👏

두 번째 시도

디자인팀과 프론트엔드팀의 일부가 프로젝트 멤버로 구성되었고, 장기전인 만큼 초석을 잘 다지는 것에 집중했습니다. 이후 정기적인 미팅을 가지며 프로세스를 만들었고, 편하고 효율적으로 개발할 수 있도록 별도의 개발 환경을 구축하기로 계획했습니다.

프로세스가 어느 정도 정해지고 안정이 되니 비효율적인 부분들이 눈에 들어왔습니다. 다수가 정기적인 미팅을 가지다 보니 업무 스위칭이 잦았고, 실제 컴포넌트를 개발할 시간이 부족했습니다.😹

그래서 모든 인원이 정기 미팅에 참여하는 것이 아니라, 개발 PM이 일차적으로 디자이너들과 소통하여 정리된 결과를 다른 멤버들에게 공유해 주는 형태로 프로세스를 변경했습니다. 그리고 개발 대상인 컴포넌트에 대해서 디자이너 한 명과 개발자 한 명을 페어링 하여 개발 완료 단계까지 진행하도록 했습니다.

그 결과 미팅 및 업무 스위칭으로 인해 발생했던 비용들을 대폭 줄일 수 있었고, 각자가 담당한 컴포넌트 개발에 집중할 수 있었습니다. 또한 별도의 개발 환경을 구축하여 더욱 편리하고 효율적으로 컴포넌트를 개발할 수 있게 되었습니다.👍