맨땅에서 디자인시스템 만들기
노트폴리오 디자인시스템 워크숍 3기 최우수 사례 후기
* 아래 글은 노트폴리오 디자인시스템 워크숍에 팀원들과 8주간 참여하고, 최종 발표했던 내용을 바탕으로 재구성된 글입니다. 아무쪼록 저희가 맨땅에 헤딩하는 과정이 디자인시스템을 처음 만드는 누군가에게 도움이 되길 바라며, 글을 시작하겠습니다!
노트폴리오 디자인시스템 워크숍은 프로덕트 디자인 시 디자인 시스템 관련 역량을 높이기 위해 기획된 코스로, 실제 서비스 중인 기업을 선정, 다양한 화면 정보를 취합해 가상의 디자인 시스템을 설계 제안, 발전시키는 경험을 얻도록 기획된 코스입니다.
안녕하세요, 6조의 발표를 맡은 나성훈입니다. 저희가 수업에서 처음 만난게 10월인데요, 어느 새 쌀쌀한 12월이 되었습니다. 그동안 디자인시스템을 배우기 위해서 애썼던 저희 6조의 이야기, 지금부터 들려드리도록 하겠습니다. 편하게 저희 이야기를 나눈다는 생각으로 해볼테니 혹시 공감가는 에피소드가 있으시다면 댓글달아주셔도 재밌을 것 같아요!
우선 서비스 선정 배경입니다. 어색한 첫 만남 속에서 디스코드에서 여러 이야기를 나누며 선정기준와 후보를 추려보았습니다.
여러 기준과 후보들을 고려하여, 저희는 카카오페이로 서비스를 선정하게 되었습니다. 재사용이 되는 화면이 많아 디자인시스템의 활용도가 높을 것 같았고, 규모가 있는 앱이라 또 많은 것을 배울 수 있지 않을까 하는 막연한 기대감도 있었습니다.
첫 과제는 서비스의 주요 화면을 클론하는 것이었습니다. 페이지가 굉장히 긴 경우도 있었는데, 모두다 열과 성을 들여 클론 작업을 해왔었죠.
단순히 각자 작업을 하는데 그치지 않고, 작업을 하며 고민했던 부분을 기록으로 남기기도 했습니다.
그리고 회의에서 만나 고민했던 부분을 서로 물어보기도 하고 가르쳐주기도 했습니다. 조장이었던 남희님은 저희가 어려워하던 기능에 대해서 이해하기 쉽게 알려주시기도 했고요, 보람님은 취준생이 두명있던 저희 조를 위해 실무 이야기를 나눠주시기도 했습니다. 또 정임님은 적재적소에 필요한 참고자료들을 찾아 공유해주셨어요!
그렇게 회의라기보다 거의 워크숍에 가깝게 서로의 배움을 주고 받았습니다. 그러다보니 때로는 4시간이 훌쩍 지나있기도 했어요.
긴 시간의 회의와 과제로 인해 때로는 힘에 부칠 때도 있었지만, 저희는 서로 격려하고 의지하며 앞으로 나아갔습니다.
이 기세로 디자인시스템 작업도 시작을 했습니다. 각자 맡은 페이지에 적용할 수 있는 디자인 시스템 초안을 만들고, 회의 때 합쳐보기로 했죠.
그렇게 디자인시스템 초안을 각 페이지를 기준으로 만들어왔는데요. 이걸 하나로 합치려고, 넣고 빼고 했었는데 각 서비스 하나하나가 규모가 있는 서비스다보니, 이걸 하나로 통일하는게 쉽지 않았습니다.
고군분투끝에 초안을 완성하게 되었지만, 각 요소들을 재사용할 수 있는 시스템으로서 플로우를 만드는데 활용하기보다 개별 페이지에서만 쓸 수 있는 것들을 모아둔 느낌이었습니다.
마치 망망대해에 각자가 홀로 떠있는 것 같았습니다. 이대로는 안되겠다 싶어서, 작업을 멈추고 모여서 회의를 했습니다.
처음의 목표부터 생각했습니다. 저희의 목표는 재사용하기 용이한, 활용도 높은 디자인 시스템을 만드는 것이었는데, 초안의 기준이 된 네 가지 페이지의 성격이 너무나 다르다는 문제를 마주했습니다. 그래서 어찌저찌 시스템을 완성한다고 하더라고 개별 페이지를 클론 하는 정도로 밖에 활용할 수 없다고 판단을 했습니다.
고심 끝에, 아까 보여드렸던 기존의 작업들을 모두 폐기하고 저희는 한 배에 탔습니다. 송금이라는 배에 말이죠. 그렇게 송금 플로우를 커버할 수 있는 디자인 시스템을 만드는 것으로 방향을 선회했습니다.
해당 플로우는 다음과 같이 약 25페이지로 구성되었습니다. 세부적으로는 “내 계좌, 친구 계좌, 계좌번호” 이렇게 3가지 송금 방식이 결합된 플로우라고 보시면 되겠습니다. 앞부분은 조금 다르지만 뒷부분은 유사해서, 시스템을 만들어서 활용하는 맛이 있겠다 싶었죠.
이 방향은 서로 디자인시스템을 바꿔서 플로우를 그려보는 다음주 수업 방향과도 일치했고, 디자인시스템을 활용해 플로우를 만들어낼 수 있는가? 라는 워크숍 평가 항목과도 일치했습니다 방향을 다시 재설정하고 또, 송금이라는 한 배에 타다보니까, 자신감도 어느 새 되찾았습니다.
다크모드도 시도해볼 수 있을 것 같고, 인터랙션을 적용한 프로토타입도 만들어보기로 했죠. 정말 시스템을 이용해 개발 직전까지의 결과물을 만들어내보고자 했습니다.
작업 방식에도 큰 변화가 있었는데요, 모든 걸 각자하고 합치는 방식이 아니라, 디자인시스템의 각 파트를 맡아서 철저하게 파고, 회의 때 이를 바탕으로 서로 피드백해주며 고도화해보는 식으로 진행을 했습니다. 그런데 얼마 지나지 않아 또다른 문제를 마주하게 되었습니다.
그 문제는 바로 레퍼런스의 홍수였습니다. 각자가 서로 다른 레퍼런스들을 보다보니 사용하는 UI 명칭도 달랐습니다. 다양한 레퍼런스를 참고하더라도, 기준이 될 하나의 시스템이 필요했던 것이죠.
저희에게 그 기준이 되어준 것은 바로 구글 매터리얼 디자인 3 였습니다. 이를 기준으로 어떻게 디자인시스템 작업을 진행을 했는지, 타이포그래피 가이드를 사례로 소개를 해드리겠습니다.
우선 매터리얼 디자인 3를 기준으로 하되, 저희에 맞게 변형하는 과정을 거쳤습니다. 보시는 것은 기존의 매터리얼 디자인 시스템의 타이포그래피 스타일인데요,
저희는 모바일 기준이니 Display가 갖는 최대값의 기준을 다르게 잡기도 했고요.
기존 시스템은 Large, Medium, Small로 위계를 설정했었어요. 그런데 Medium의 경우는 생각해보니 Weight에 있는 Medium과 헷갈릴 수도 있겠다 싶어 Normal로 바꾸기도 했습니다.
Label이 커버하는 범위가 좁아 Button이라는 새로운 카테고리를 만들기도 했고요.
금융 시스템에서 자주 쓰이는 정보의 위계를 고려하여 새로운 항목을 추가하기도 했습니다.
이렇게 어느 정도 커스터마이징을 해본 뒤, 송금 플로우에서 대표적인 화면들에 사용되는 타이포그래피에 적용해보며 다듬어 나가는 과정을 거쳤습니다.
가이드 문서의 표현 방식도 굉장히 많은 고민을 했는데요, 기존의 매터리얼 디자인 3의 피그마 파일과 웹가이드 문서를 조합하는 방향으로 새롭게 구성했습니다.
그래서 피그마 파일이 갖고 있는 한 줄로 간단하고 명료하게 표현해준다는 장점과 가이드문서의 상위 카테고리에 대한 설명, 그리고 실제 사용 사례가 있는 것을 합쳤습니다.
그 결과, 이렇게 저희의 디자인시스템 문서를 만들게 되었습니다! 멘토님께서 가이드문서 중 가장 직관적이라고 해주시고, 다른 조에서도 참고를 많이 해주셔서 굉장히 뿌듯했었어요.
이렇게 디자인시스템 작업을 어느 정도 한 이후로는 피드백의 연속이었습니다. 크게 3가지 유형의 피드백과 함께 디자인시스템을 발전시켜나갔는데요,
첫번째는 바로 멘토님의 피드백이었습니다. 모든 조의 피드백을 모아, (참고로 하루치 피드백입니다.)
우리 팀에 적용할 것을 뽑아서 하나하나 반영해나갔습니다. 피드백 반영 여부를 관리하기 위한 자체적인 시스템도 만들어 관리하기도 했어요. 파란색이 완료된 피드백입니다.
1조분들께서도 저희의 시스템을 활용해 직접 플로우를 그려보시면서 시스템을 처음 사용하는 디자이너의 입장에서 자세하게 피드백을 해주셨었는데요,
그또한 하나하나 반영해나갔습니다. 수많은 파란 점들이 보이시죠..?
여기서 끝이 아니라 자체적으로 QA를 진행하기도 했습니다. 모든 팀원들이 송금 플로우 25페이지를 하나하나 그리며 저희 디자인시스템을 점검했어요.
QA의 기준이 되었던 건 지금까지 수업을 통해 배웠던 멘토님의 기준들이었습니다. 저희가 수업이 끝나면 다시 독립을 해야하잖아요? 그래서 멘토님의 피드백을 내재화하기 위해서 아무도 시키지 않은 이러한 추가적인 과정을 거치기도 했습니다.
참고로 멘토님도 보시고 박수를 보내주셔서 굉장히 뿌듯했습니다.
그래서 결과물은 어떻게 나왔을지 궁금해하실 것 같아요. 저희의 세가지 결과물들을 공유드리도록 하겠습니다!
1) 6조 카카오페이 디자인시스템 피그마 가이드 문서 링크
2) 송금 플로우 프로토타입 영상 (아래 첨부)
3) Variable을 활용한 다크모드 전환 (아래 첨부)
이상으로 저희의 결과물까지 모두 공유를 드렸어요. 제가 좋아하는 영화인 리틀 포레스트에 나온 대사로 발표를 마무리해보고자 합니다. “겨울이 와야 정말로 맛있는 곶감을 먹을 수 있는 거야” 취준을 시작한 6월부터 제 책상에도 붙여둔 문구이기도 합니다.
곶감은 10월 중순, 가을에 매달아서 12월 겨울이 되어야 먹을 수 있다고 해요. 곶감이 곶감이 되기 위해선 그 시간이 필연적으로 필요한거죠. 저희에게도 때론 삽질의 시간도 있었고 열심히 달려왔지만 원점으로 돌아가 다시 시작해야 하는 순간도 있었습니다. 하지만 그 시간들이 있었기에 지금 이루어낸 성장이 가능했어요.
이 모든 과정은 항상 솔선수범해서 어려운 일들을 도맡아 해주신 남희 팀장님, 서로 힘들 때마다 힘이 되어준 보람님, 정임님. 그리고 큰 자극과 영감이 됐던 디자인시스템 3기를 함께한 다른 조원분들, 그리고 열정적으로 강의해주신 멘토님이 있었기에 가능했습니다.
그 시간들이 모여, 오늘 이렇게 뿌듯한 순간이 오지 않았나 싶습니다. 이제 맛있게 곶감을 먹어보도록 하겠습니다. 이상으로 6조 발표 마치겠습니다. 감사합니다!
