디자인 시스템 구축 (Background)
프로덕트 디자이너의 디자인 시스템 제작 이야기 - 1
프로덕트를 만들고 운영하는 데 있어 ‘디자인 시스템’을 설계하고 구축하는 일은 중요하다.
이번 이야기는 스타트업에 입사해 개발팀과 함께 ‘디자인 시스템’을 구축하고 있는 현재 진행형의 디자이너 이야기를 풀어보려 한다.
Chapter 1. 디자인 시스템 구축 결정과 팀원 설득
- 우리 팀 내에서 어떤 문제점이 있을까?
- 타 브랜드의 디자인 시스템은 어떻게 운영되고 있을까?
- 우리가 디자인 시스템 구축으로 이루려는 목표는?
1. 우리 팀 내에서 어떤 문제점이 있을까?
우리 프로덕트는 기획자 2명, 디자이너 1명, 프론트 2명, 백엔드 여러 명이 함께 운영하고 있다.
디자이너로 입사한 지 3개월이 지나면서 프로덕트에 대해 이해도가 생기고 사용자와 팀 내부에 대해 파악을 하나씩 해보니 크게 3가지 문제점이 보이기 시작했다.
첫 번째.
제대로 정해져 있는 것이 없는 화면 정책 (목소리 큰 사람이 이기는..)
우리 프로덕트의 UI는 통일성이 없어 사용성이 떨어졌다. 위와 같이 같은 화면이어도 사용되는 체크 버튼 아이콘이 달랐으며, 텍스트의 두께, 사이즈도 모두 달랐다. 또한 안드로이드는 ios만큼 하단 버튼 높이가 높아 영역을 너무 많이 차지하고 있었다.
피그마의 디자인 화면과 안드로이드, ios 화면 모두 달라 어느 화면이 맞는지 아무도 알 수 없었다. 무조건 안드로이드가 맞다는 개발자의 의견만 있을 뿐.. UI가 다르니 기획자, 디자이너, 개발자가 부르는 컴포넌트 및 화면명도 모두 달라 혼란스럽고 화면을 보여주며 대화하지 않으면 의사소통이 불가능했다.
이렇게 다른 UI로 소통하다 보니 협업의 질도 떨어지고, 고객에게 신뢰를 잃을 수 있는 문제로 이어질 수 있는 상황이었다.
두 번째.
공통화되어 있지 않은 리소스
피그마를 살펴보니 같은 아이콘이지만, 네이밍이 최소 2-3개로 작업되어 있었다.
스케치에서 피그마로 넘어온 지 얼마 되지 않아 컴포넌트화 되어 있지 않아 하나의 아이콘을 수정하려면 모든 화면에서 하나씩 찾아 수정해야 하는 상황이었다.
개발 상황은? 디자인에서부터 공통화되어 있지 않아 개발 리소스도 같은 아이콘에도 불구하고 작업 화면마다 네이밍이 다르게 적용되어 있었고, 아이콘 하나 수정 시에도 하나씩 찾아서 바꾸고 수정안 된 화면들도 많아 QA 검수 시간도 함께 길어졌다.
세 번째.
무작위로 사용된 서체와 찌그러져 있는 이미지들
안드로이드에는 타이포가 Noto Sans KR, Roboto로 적용되어 있었다. Noto Sans KR 특성상 서체 상단
에 패딩이 기본으로 들어가 있어 아이콘과의 정렬이 안 맞아 보였다. 안드로이드는 서체에 대한 문제였다면, ios는 한 화면에 타이틀은 Noto Sans KR, 본문은 Apple SD Gothic Neo, 영문은 Helveticaneue, 숫자는 Roboto 등.. 너무 다양한 폰트가 정리되지 않은 상태로 무작위 들어가 있었다. 피그마로 디자인을 잡아도 폰트가 안 맞아 검수를 진행해도 의미가 없는 무의미한 시간들이 발생했다.
또한 이미지나 아이콘에 대한 가이드가 없어 개발자들이 임의로 비율을 정하고 크롭 해서 사용하고 있었다. 그로 인해 늘어나거나 해상도가 깨진 이미지들로 앱의 퀄리티는 떨어지고 앱은 점차 무거워지고 있었다.
이에 따라 팀원들과 함께 디자인 시스템을 제작하여 문제를 해결해 보기로 하였다.
2. 타 브랜드의 디자인 시스템은 어떻게 운영되고 있을까?
시스템 제작에 앞서, 먼저 대표적인 3개 브랜드의 디자인 시스템 가이드는 어떻게 제작되고 있는지 리서치하고 인사이트를 얻어 우리 프로덕트 팀에 적합한 형태로 변형하여 디자인 시스템을 빠르게 구축하기로 했다.
LINE
LINE 디자인 시스템은 글로벌 서비스로 다양한 사용자들에게 일관성 있는 서비스 환경을 전달하기 위해 통일된 가이드를 정의하고 있다. 서비스와 기능에 대한 설명뿐만 아니라 상세한 use case 예시를 통해 각 화면 구성에 적합한 가이드를 명시하고 있다.
우리 프로덕트에 적용시킬 수 있는 것은?
→ aos, ios가 UI 화면도 다르고 가이드도 다른데 이 부분을 일관성 있는 서비스 환경으로 개선해 보자.
use case 예시로 새로 투입된 작업자도 쉽게 볼 수 있는 가이드를 제시하자.
밀리의 서재
밀리의 서재의 디자인 시스템은 토큰을 활용하여 협업하고 있었다. $표시는 Sass로 변환할 때 사용하는 변수값으로 토큰 앞자리에 붙여 사용하고 있다. 그리고 피그마에 각 페이지 별로 Foundation과 Component를 디테일하게 나눠 찾기 쉽도록 구조되어 있었다.
→ 피그마 활용으로 우리 팀원들도 컴포넌트를 쉽게 찾을 수 있는 구조로 제작하자.
https://brunch.co.kr/@milliedesign/9
Gmarket
Gmarket 디자인 시스템은 컴포넌트들이 조금 더 세분화되어 있었다. 브랜드 아이덴티티에 대해 자세히 설명되어 있었고, 로고 등 브랜드 요소들에 대해 명확한 가이드를 제시하고 있었다.
→ 앱, 웹, 문서등에서 활용하는 브랜드 요소에 대해 우리 팀원뿐만 아니라 전 직원이 활용할 수 있는 문서를 제작해 보면 좋을 것 같다.
3. 우리가 디자인 시스템 구축으로 이루려는 목표는?
먼저 우리들의 문제점을 파악하고 정리되어 있지 않은 컴포넌트들의 통합으로 팀원들과의 커뮤니케이션 효율을 증폭시킬 수 있는 시스템을 만드는 것을 목표로 하였다.
- 일관성 있는 UI 디자인으로 사용자 경험 제공
- 불필요한 작업을 소비하지 않고 모두가 이해할 수 있는 시스템 구조화
- 팀원들의 원활한 커뮤니케이션을 위한 디자인 통합
글을 마치며..
디자인 시스템은 여러 사람들이 함께 사용하기 위한 룰을 정하는 것으로, 착오도 많을 것이고 시간도 오래 걸리겠지만 새로운 경험이 될 것이다. 나중에 이 경험들을 잊지 않도록 하나씩 기록으로 남기려고 한다.
많이 부족한 글 솜씨지만 나와 같은 상황으로 고민을 가지고 있는 디자이너가 있다면 내 경험이 도움이 될 수 있을 거라 생각하여 앞으로 조금씩 써보려고 한다.
다음 이야기 --> Chapter 2. Typography 개선
