삼쩜삼 디자인시스템 2.0 구축기
안녕하세요,
삼쩜삼 프로덕트 디자이너 정주연입니다!
저는 디자인시스템 2.0을 구축하며 경험했던 그 동안의 과정들을 공유해드릴게요.
0. 디자인시스템 - 미스틱(Mystique)을 소개할게요
삼쩜삼에는 이미 기존에 디자인시스템이 있었답니다. 바로 미스틱(Mystique) 1.1 버전이었는데요.
먼저 미스틱이란 '어떤 모습으로든 변신할 수 있는 영화 엑스맨의 미스틱처럼, 유저에게 필요한 어떤 프로덕트로도 만들어질 수 있는 시스템을 추구한다'라는 의미를 가진 삼쩜삼 디자인시스템의 이름입니다.
tmi이지만 자비스앤빌런즈는 회의실, 각종 프로젝트에서 빌런명을 활발히 사용중이에요! (조커, 크루엘라 등)
기존에 디자인시스템이 있기는 했지만, 일부 컴포넌트가 앱/웹 개발 사용성을 크게 고려하지 않고 만들었기 때문에 컴포넌트 재활용성이 떨어지는 문제가 있었고, 새로운 화면과의 톤앤매너와 UIUX 일관성에도 영향을 미치고 있었어요. 이에 새로운 삼쩜삼 앱을 준비하며 미스틱 2.0을 새롭게 만들게 되었습니다.
2.0을 구축하며 우선적으로 생각했던 것 ⭐
1) 개발팀과의 정기미팅을 통해 코어(core)가 되는 컴포넌트부터 탄탄하게 만들 것 → 공동의 디자인 자산 확충
2) 컴포넌트를 정의하고 속성을 규정해 라이브러리화 함으로써 디자이너와 앱, 프론트 개발자가 정해진 기준에 따라 설계할 수 있을 것 → 높은 사용성 유지와 개발 효율 개선
3) 화면 간 UX 일관성을 확보하여 사용자의 경험을 향상시킬 것
2.0 구축을 준비하며 우선적으로 고려했던 것1. 프로덕트 현황을 파악해보자
미스틱 2.0은 디자인과 개발의 간극을 없애고 최대한 효율적으로 만드는 것이 목표였고,
이를 위해서 제일 우선으로 진행했던 것이 프로덕트의 현황 파악입니다.
현재 갖추어진 미스틱 1.1의 문제 정의와 어떤 컴포넌트를 업데이트하고 제거해야 하는지 파악해야 했어요.
삼쩜삼 웹 플로우 일부 화면프로덕트 현황 파악 후 아래 4가지 문제점 혹은 해결해야 할 점을 도출했어요.
문제-1) 당시 삼쩜삼은 브랜딩 프로젝트를 통해 새 로고와 메인 컬러가 변경되었고, 프로덕트에도 새 브랜딩 요소의 적용이 필요한 상황이었습니다.
문제-2) 스타일 가이드 중 하나인 컬러 팔레트는 primary color, gray scale을 포함해 34가지 색이 전부였고 에셋 사용에 별도 가이드가 없어 작업자에 따라 각기 다른 스타일로 혼재해 있었습니다. 에셋 뿐 아닌 컴포넌트 일부 요소에서도 컬러를 필요에 따라 임의로 만들어 사용했기 때문에 이런 작은 요소들이 모여 화면간의 일관성을 헤치고 있었어요.
문제-3) 기존 디자인시스템에서 사용하는 컴포넌트와 사용되지 않는 컴포넌트들이 혼재되어 개발 활용성이 크게 떨어지는 문제가 있었습니다. 종류는 많은데 막상 사용하기는 애매한 컴포넌트들이 있었어요.
문제-4) 컴포넌트에 대한 정확한 정의와 속성이 규정되지 않아 개발자마다 다르게 이해하거나 개발을 진행할 때 별도로 커뮤니케이션 해야하는 문제점이 있었어요.
이렇게 우선적으로 생각해야 할 것과 기존 프로덕트의 문제점을 먼저 인식하고 작업 계획을 짜기 시작했어요.
2. 계획과 범위를 정해 체계적으로 진행해보자
디자인 시스템은 디자인 챕터만 사용하는 것이 아니라 최종 구현하는 개발 챕터까지 라이브러리화하여 사용하는 것이 목표였기에 초기 작업 계획을 짤 때부터 정기 미팅을 통해 싱크를 맞추는 시간을 가졌어요.
특히 디자인시스템에 포함될 항목들(스타일 가이드, 엘리먼트, 엘리먼트를 베이스로 한 각종 컴포넌트)의 작업 범위를 함께 정하고 구축 과정 중 생기는 이슈와 의사 결정에 대해 논의하며 진행 상황을 공유해 나갔어요.
이렇게 5월 9일부터 시작해 디자인, 개발 직군의 유관자들과 24번의 크고 작은 미팅을 통해 저희 삼쩜삼에 알맞으면서도 체계적이고 효율적인 방향으로 작업을 해나갈 수 있었습니다.
작업 계획과 범위 초안
작업 계획 로드맵3. 컨셉 및 업데이트 방향성 정해보자
이렇게 개발 챕터와의 정기미팅을 가지는 한편,
디자인 챕터 내부에서는 미스틱 2.0을 통해 업데이트 될 프로덕트를 어떤 톤앤매너로 가져갈지 다양한 레퍼런스를 수집해 기본 스타일을 지정하고 업데이트 방향성을 정하는 시간들을 가졌어요.
삼쩜삼에 맞는 스타일을 탐구하며 시안 잡기
이 기본 스타일 ideation 과정을 통해 비주얼을 보완하고 정돈된 친근함을 주는 방향,
간편하면서도 세금 관련 정보들이 어렵거나 부담스럽지 않도록 보여주는 것으로 업데이트 방향성을 정할 수 있었어요.
4. 이렇게 만들어진 미스틱 2.0
개발 챕터와의 피드백과 여러 번에 걸친 수정 끝에 이렇게 삼쩜삼의 디자인시스템이 완성되었습니다.
미스틱 2.0중 일부를 살짝 보여드릴게요!
이렇게 베이스가 되는 스타일 가이드와 컴포넌트 정의, 속성을 규정한 후 컴포넌트를 생성했고,
개발 챕터와 협업하여 demo 앱과 웹 story book으로 라이브러리를 구축하는 과정을 거쳤습니다.
또한 우선순위 플로우 별로 끊어서 개발에도 적용해 배포까지 하게 되었어요. 쏴리질러ㅓㅓㅓ~
(이 과정에서 추가로 필요한 컴포넌트들이 리스트업되어 다음 스콥에 진행될 예정!)
5. 디자인 시스템은 계속된다!
2022년 5월 중순부터 사부작 사부작 디자인시스템을 만들고,
2023년 상반기 약 5개월의 기간동안 라이브러리 구축, 개발 배포까지 마쳤는데요.
디자인과 개발과의 간극을 줄이면서 APP, Web 개발의 싱크(구현 방식이 달라 생기는 이슈나 microinteraction 통일화)를 맞추기 위해서는 보다 꼼꼼한 정의와 속성 규정이 필요한 시간들이었어요.
이 과정에서 수많은 커뮤니케이션과 의사결정이 오갔고 괴로운 시간들도 많았지만 어느새 많이 성장했음을 느꼈습니다.
저도 0부터 구축을 하는 건 처음이었고 이미 스쿼드에 소속되어 업무를 하고 있어 온전히 집중하기는 어려웠어요. 하지만 개발자분과 디자이너분들이 적극적으로 의견을 주시고 일정에 맞춰 진행해주셔서 배포까지 무사히 이어질 수 있었던 것 같아요. (험난했던 중간과정은 생략한다..)
결과적으로는 2.0 구축을 통해 디자인시스템은 공동자산으로서 높은 완성도를 지니게 되었고,
디자인 또한 효율적으로 빠르게 hand-off 할 수 있었어요. 물론 디자인 시스템 2.0은 앞으로도 계속 사이드 프로젝트로 발전시켜 나갈 예정입니다.
앞으로 ver2.n → 3.0까지 잘 만들어나가 디자인시스템 구축으로 인해 향상된 개발 및 디자인 효율을 데이터로 보여주거나 더 큰 플랫폼에서 공유할 수 있기를 바라고 있어요!
글이 너무 길어질까 일부 내용을 생략했는데, 기회가 된다면 컴포넌트 검토 중간에 발생한 이슈와 개발자와 어떻게 협업하고 의사결정 했는지 좀 더 자세하게 써볼까 합니다.
긴 글 읽어주셔서 감사합니다!
