안녕하세요 헤렌 공비서팀의 Product Designer 댄 입니다.
헤렌 공비서팀의 디자이너로 합류하여 가장 먼저 하고싶었던 일은 서비스 디자인에서 가장 기본이 되는 디자인 시스템을 구축하는 것이었습니다.
서비스를 오픈하고 상세한 규칙없이 다수의 디자이너를 거쳐오며 5년이상 쌓인 데이터를 파악하기는 정말 어려웠습니다. 함께 일하는 디자이너가 있어도 세세한 부분에서 미묘한 아웃풋 차이가 생기고 그로 인해 서비스의 품질이 떨어지는 이슈, 매 프로젝트마다 기존에 만들었던 컴포넌트를 새로 디자인, 코딩해야하는 이슈 등 더 이상 불필요한 이슈가 발생해 업무 효율이 떨어지는것을 방지하고자 디자인 시스템 구축을 진행하였습니다.
디자인 시스템?
디자인 시스템은 디자인 원칙, UX 패턴, UI 툴킷, 코드(Code) 등이 전부 포함되는 '시스템 라이브러리’를 의미합니다. 공비서의 디자인 시스템은 브랜드 정체성을 확립하고 운영 간 효율을 높이기 위해 제작되었습니다. 미리 정의된 디자인, 컴포넌트, 코드를 통해 고객이 보는 모든 화면, 이미지의 세세한 부분까지도 일관성 있는 브랜드 가치를 제공할 수 있습니다.
문제점부터 정리하기.
디자인 시스템을 구축하기 이전에 왜 우리가 디자인 시스템을 필요로 하는지, 이를 통해 어떤 이점을 챙길 수 있는지 정리하는 시간을 가졌습니다.
(디자인 시스템 구축은 Figma를 사용해 제작하였습니다.)
5년간 공비서를 운영하며 쌓인 데이터는 엄청났습니다. 모든 화면을 새롭게 도입하는 시스템에 맞춰 한번에 변경하기에는 인적, 시간적 리소스를 측정하기 매우 어려웠고, 앞으로 개선하는 화면부터 적용하며 개선하기로 결정했습니다.
문제점을 명확히 제시한 후 어떤 방식으로, 어떤 내용부터 구축해야할지 순서를 정했습니다.
저희는 새로 진행하는 프로젝트들에 맞춰, 그리고 디자인 시스템을 구축하기 앞서 가장 핵심이 되는 내용부터 정의하기 시작했습니다.
[Foundation]
Color / Spacing / Typography / Iconography
디자인 시스템에서 가장 기초가되는 내용이며 위 내용들이 있어야 매끄럽게 다음 단계를 구축할 수 있습니다.
위계구조, 이름등 모든 규칙을 정의할 때 프론트 개발자 분들과 소통하며 구성했습니다. 서비스에서 퍼블릭하게 사용되는 컴포넌트, 색상의 이름, 작성 규칙 등 일반적으로 디자이너만을 위한 가이드를 만들때보다 더 세세한 부분까지 신경써야했습니다.
[Components]
Buttons / Text Fields / Dropdowns / Dialogs
Foundation의 기본 규칙을 정의하고 실제 사용되는 기능에 대한 규칙, 사용상 주의사항을 정의했습니다.
Components 중 Buttons에 대해 간략히 설명하자면, Spacing과 Iconography, Typography에 정의된 규칙을 사용해 구성했습니다.
버튼의 크기와 간격은 다양한 디바이스 환경에 맞추기 위해 그리드 시스템을 선택하던 중 보편적으로 많이 쓰이는 8-pt Grid system에서 좀 더 세분화되어 있는 4-pt Grid System을 적용하기로 결정하였고, 버튼 안에 들어가는 Icon과 Label은 각각 iconography, Typography에서 정의된 제작 기준과 크기를 사용하였습니다.
예시 이미지 외에도 서비스를 운영하며 정의가 필요한 모든 내용에 대해 컴포넌트를 정리하고 있습니다.
Ing...
디자인 시스템은 마무리가 없는 작업이라 생각합니다. 디자인 트렌드, 새로운 기능의 추가, 기존 기능의 개선은 멈추지않아야 하고 그에 맞춰 디자인 시스템도 계속 업데이트 되어야 하기 때문입니다.
공비서팀은 앞으로도 사용자들에게 기분좋은 경험을 제공하기 위해 디자인 시스템을 이용해 업무 효율을 상승시키고 매끄럽고 신뢰성있는 브랜드 가치를 제공하고자 노력하겠습니다.
아직 디자인 시스템 구축 초기 단계로 부족한 부분이 많지만 꾸준히 업데이트하는 공비서팀을 응원해주시면 감사하겠습니다!
