와디즈 디자인 시스템 구축하기

2022년 8월 19일 | 기술 이야기

안녕하세요. 와디즈 FE개발팀입니다.
와디즈가 디자인 시스템을 구축하며 겪었던 상황과 경험을 공유합니다.

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

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

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

 위 이유로 도입을 결심했지만 험난할 것 같은 예감이 들었어요 🙄

브레인스토밍

고뇌하는 디자인팀

 

그래도 부딪혀보자! 첫 시도

디자인팀과 FE개발팀이 의기투합했습니다.

프로젝트를 시작하는 단계부터 디자인 시스템을 고려해 컴포넌트를 설계했어요. 그리고 프로젝트를 진행하며 만들어진 컴포넌트들로 자연스럽게 디자인 시스템을 구축하는 것을 계획했습니다… 만😅 프로젝트 수행만으로도 쉽지 않은 일정 속에서, 디자인 시스템을 고려하며 컴포넌트를 설계하고 개발하는 것은 무척 어려운 일이었습니다.

프로젝트의 일정이 다가올수록 충분한 검토와 설계를 하지 못한 채 구현에만 급급해졌습니다. 이는 계획한 디자인 시스템과는 전혀 다른 방향이었어요. 그래서 새로운 방안을 모색했습니다.

첫 번째 프로세스

 

리… 리소스가 필요해! 디자인 시스템 구축을 위한 설득과 증명

시스템을 구축한다는 것은 무(無)에서 유(有)를 창조하는 것만큼 쉽지 않은 일이에요. 그래서 충분한 리소스와 고민이 필요합니다. 무엇보다 회사의 지원과 이해가 필수였습니다.

우선, 사업 측면에서 해야 할 일이 엄청 쌓여있었어요. 회사가 빠르게 성장하는 만큼 서비스도 빠르게 대응해야 했습니다. 그래서 디자인 시스템과 같은 장기 프로젝트에 당장 인력을 투입하기란 쉽지 않은 결정이었죠.

디자인팀과 FE개발팀은 그럼에도 디자인 시스템이 꼭 필요한 일이라 확신했습니다. 디자인 시스템이 필요한 이유와 구축했을 때 얻게 될 이점을 구체화해 발표하는 등 많은 노력을 했어요. 그리고 마침내 공감을 얻었습니다. 리소스를 확보 받았고 정식 프로젝트로 진행할 수 있었습니다. 👏

발표 자료 중 일부

 

두 번째 시도

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

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

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

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

두 번째 프로세스

 

그렇게 만들어진 와디즈 디자인 시스템

내부적으로는 Waffle이라는 별명으로 부르고 있어요. 꾸준히 개발, 유지 보수하며 더 넓은 범위의 서비스에 적용해나가고 있습니다. 지금처럼 디자인 자산을 차곡차곡 쌓아가며 하나의 정립된 공통 언어로 만드는 것이 목표입니다.

와디즈 디자인 시스템 일부를 공개합니다!

Wadiz Design System Site

와디즈 디자인 시스템에 대한 정의와 컴포넌트 가이드를 확인할 수 있습니다.

Zeplin Guide

위와 같이 컴포넌트 가이드를 정의하고 개발에 착수합니다.

Storybook

개발 완료된 컴포넌트들을 모아놓고 관리하며 사용합니다.

 

앞으로의 과제

현재 와디즈는 대부분 웹페이지로 구현되어 있지만, 네이티브 앱의 영역을 넓혀가는 중입니다. 그 과정에서 iOS와 AOS 또한 디자인 시스템을 도입할 수 있기를 기대하고 있습니다.

나아가 지금까지 개발한 컴포넌트들을 더 확장해 더 큰 범위의 모듈과 레이아웃에도 디자인 시스템을 적용할 계획입니다. 그렇게 되면 더욱 효율적으로 일관적인 UX를 제공하는 서비스를 만들 수 있겠죠.

앞으로의 과제들을 위해서는 더 많은 팀원이 필요한데요. 와디즈에서는 이러한 과제를 함께 고민하고 해결해나갈 팀원을 적극적으로 모집하고 있답니다!

와디즈 진국이들

 

궁금한 내용이 남아 있나요? 👀

디자인 시스템을 구축한 FE개발팀의 조직 문화가 궁금하다면? 👉 클릭

와디즈 디자인팀의 다른 제작물이 궁금하다면? 👉 클릭

👇 태그를 클릭하면 같은 키워드의 글을 모아볼 수 있어요.

기술 이야기

기술 이야기

기술 조직

누구나 도전하고, 새로움을 경험할 수 있도록, 꼭 필요한 서비스를 만듭니다.