millie Design Library 제작기
디자인 시스템, 어떻게 만들었는가
안녕하세요. 밀리의 서재 프로덕트 디자이너 Sally입니다.
이번 글은 디자인 시스템인 밀리 디자인 라이브러리를 제작하게 된 과정에 대해 이야기해보고자 합니다.
진행하면서 겪은 경험을 가감 없이 털어보려고 하니 재밌게 읽어주셨으면 합니다.
협업 경험이 부족한 디자이너 3명의 만남
2019년 초, 제가 입사하게 되면서 밀리의 서재 디자이너는 총 3명이 되었습니다. 기존에 있던 디자이너 제나와 순에게 한 저의 첫 질문은 “어떤 방식으로 작업하세요?” 였습니다. 이 질문으로 둘은 파트를 분리하여 작업하고 있고, 저는 전 직장에서 주로 혼자 작업했다는 사실을 알게 되었습니다. 3명 모두 디자이너와의 협업 경험이 부족했습니다. 누군가 나서서 리딩할 수 없는 상황이었기 때문에 회의를 통해 각자 의견을 나누기로 했습니다.
어떻게 해야 디자인 통일성을 유지할까
회의에서 제시된 의견 중 하나가 디자인 통일성이었습니다. 사람들이 보는 ‘밀리의 서재’라는 제품은 하나이지만, 만드는 디자이너는 여러 명입니다. 만약 디자이너가 각자 작업한다면, 여러 가지 스타일이 섞여 제품의 특성이 흐려지게 됩니다. 이는 사용자에게 혼란을 줄 수 있습니다. 제품을 완성도 있게 만들려면 개인의 편차를 줄이고 일관된 서비스 경험을 제공해야 합니다. 그렇다면 어떻게 협업해야 통일성을 유지할 수 있을까요? 이에 우리는 규칙을 정하고 가이드를 세워야 한다는 결론에 도달했습니다.
디자인 시스템 구축을 시작하다
당시 밀리의 서재는 3.0 버전 업데이트를 계획하고 있었습니다. 이에 따라 디자인 개편도 진행될 예정이었기에 기회가 주어졌다고 생각했습니다. 우리는 개편 작업을 진행함과 동시에 작업된 UI를 기준으로 디자인 시스템을 구축하기로 했습니다. 하지만 0에서 시작할 수는 없는 법. 먼저 브랜드 정체성, 디자인 원칙과 작업 규칙 등 기초적인 부분을 결정하기로 했습니다. 작업 프레임, 그리드, 폰트, 컬러 등 베이스를 세팅 한 뒤 디자인 개편 작업을 진행했습니다. 작업하면서 나온 UI 요소와 패턴 등은 그때그때 의논과 합의를 거쳐 컴포넌트화 하였습니다.
밀리 디자인 라이브러리 요약 이미지밀리 디자인 라이브러리의 탄생, 하지만 아쉬웠던 첫 시도
3.0 업데이트와 병행하느라 3개월 이상의 긴 작업 시간을 소요한 끝에 밀리의 서재의 첫 디자인 시스템인 ‘밀리 디자인 라이브러리’가 완성되었습니다.
해당 시스템 구축으로 인해 디자이너 간의 협업이 원활하게 진행될 수 있었습니다. 이후 프로젝트마다 작업 시간도 단축되었고요. 더불어 디자인 결과물의 통일성 유지도 가능해졌습니다. 하지만 첫 시도여서 그런지 부족한 부분도 많았습니다. 개발과의 소통을 제대로 진행하지 못했던 터라, 구축된 시스템의 반영이 100% 이루어지지 않았습니다. 우리가 세운 규칙이 우리만의 약속으로 남은 셈입니다. 힘들게 작업한 밀리 디자인 라이브러리를 사용자에게 제대로 보여주지 못했다는 점이 매우 아쉬웠습니다.
더 나아진 밀리 디자인 라이브러리
올해 4.0 업데이트가 진행되면서 밀리 디자인 라이브러리를 디벨롭할 기회가 생겼습니다. 이미 한 번 경험해봤기에 어떻게 발전시키면 좋을지 더 구체적으로 계획할 수 있었습니다. 우리는 디자이너 워크숍을 진행하여 크게 3가지 목표를 세웠습니다.
리스트업 후 개선 진행
개발팀에게 협업 요청
전사 공유 및 외부 공개
우선, 4.0 업데이트의 디자인 컨셉을 결정했습니다. 이에 따라 밀리 디자인 라이브러리에서 개선이 필요한 요소를 리스트업 했습니다. 함께 레퍼런스를 찾고 개선 방향을 논의하고 결정했습니다.
이번 작업에서 가장 중요한 포인트는 이전과는 다르게, 작업을 진행하기 전에 개발팀과 미팅을 진행했다는 점입니다. 이전과 같은 아쉬움을 반복하지 않고자 했습니다. 개발팀에게 개선 필요성과 의도를 어필한 후 개선 내용을 전달했습니다. 일정이나 환경상 작업이 가능한가를 체크하였으며, 시스템을 제품에 정확히 반영해줄 것을 요청했습니다.
개선 작업은 이전 경험을 토대로 하여 훨씬 수월하게 진행할 수 있었습니다. 디자이너 셋 모두 만족스러운 결과물이 탄생했습니다. 그래서 우리는 밀리 디자인 라이브러리를 문서화하여 전사에 공유하였고 이렇게 피그마와 브런치를 통해 외부에 공개하게 되었습니다.
디자이너 3명이서 고군분투하며 제작했고 제대로 모양을 갖춘 건 처음이라 아직 미흡한 점이 많습니다. 누군가에겐 UI KIT 정도의 역할로 느껴질 수 있을 겁니다. 하지만 디자인 결과물이 일관되게 나오고, 이전보다 협업이 원활해졌음은 확실합니다. 앞으로 일부 미적용된 UI 적용, 개발코드 정의, 다크 모드 정의 등 나아가야 할 길이 멀지만 도입만으로도 큰 성과를 얻었다고 생각합니다.
만약 디자인 시스템의 필요성을 느끼고 있다면, 구축을 어렵게 생각하지 말고 어설프더라도 반드시 시도해보셨으면 합니다. 그 첫걸음에 이 브런치 글이 많은 도움 되길 바랍니다.
긴 글 읽어주셔서 감사합니다.
밀리 디자인 라이브러리 : https://bit.ly/3hsiTHP
