🍀 Yura의 블로그

컬러는 완전히 새롭게 색상을 선별하고 컬러 실험도 했기때문에, 준비했던 기간에서 제일 많은 시간이 들어갔다. 타이포그래피와 라운드 값, 쉐도우는 기존에 있던 가짓수를 줄이거나 한 층 더 디벨롭 된 개념을 넣는 정도로, 수월하게 작업이 되었다. 타이포그래피(Typography)의 간소화 및 규격화 문제점 여러방면으로 뜨악하게 했던 디자인시스템이었지만.. 정말 시스템으로 느껴지지 않는 요소가 바로 타이포그래피였다. 자유도를 위해서인지 모르겠으나, 총 4가지 두께에 10,11,12… 등 1px마다 모든 사이즈의 폰트 크기를 제공하고 있었다. 그게 도합 320종류였다. 폰트 종류가 많지만 그에 따른 가이드가 모호하였고, 동일한 요소에도 개인의 판단으로 다른 폰트 사이즈가 사용되어 통일성이 떨어졌다. 그래서 콘솔에 바디폰트가 14px일때도 있고 16px일때도 있었다ㅠㅠ. 강조 텍스트가 Semibold 인지, Bold인지 아직도 모르겠다. 불필요한 폰트 제거 및 역할에 따른 분류 4가지의 폰트 두께를 3개로 줄였고, 폰트의 계층을 역할에 따라 다시 분류하였다. 기존에 전부 Header와 Subtitle이 대부분이라 Body가 없어서 혼란도 야기되었던 것 같다. 그리고 Header와 Subtitle의 구분도 모호하였다. 그래서 역할에 따라 확실하게 가이드를 제공하였다. 역할에 따라 Heading,Title 2가지 제목 종류로 나누고, 크기별로 구체적인 가이드도 지정해주었다. 하지만 두께에 대해서는 자유도를 어느정도 제공해 폰트 위계 조절을 자유롭게 하도록 만들었다. 그리고 Body와 다르게, 3줄 이상 쓰이는 곳에는 Paragraph를 쓰도록 추가하였다. Body와 차이점은 행간이다. 라운드 값(Radius)의 균일화 문제점 나를 괴롭히는 건 타이포그래피뿐만 아니였다... 라운드 값이 불필요하게 다양했고, 가이드조차 매우 모호하게 작성되어 있어서 어느 케이스에 사용하는 것인지, 어떤 사이즈인지 분별이 되지않았다. 정확한 가이드로 Radius 값 통일 마음같아서는 모두 값을 4px로 통일시키고 싶었지만... 기존의 콘솔이 매우 둥글둥글하고 유한? 느낌이었는데 갑자기 딱딱하게 느낌으로 확 바꿔버리면 안될꺼같았다. (브랜딩 이미지도 있고!) 하지만 많은 라운드 값을 주기에는 크기에 따라 시각보정에 대해 개인이 애매모호하게 판단해버릴 수 있다는 생각에, "적당한" 라운드 값으로 타협을 했다. 그리고 개인이 매우 쉽게 숙지할 수 있을 정도의 가이드를 만들었다.

서론 디자인 시스템의 개선을 위해 디자인 시스템이 왜 필요한지에 대해 다시 한 번 짚고 넘어가보자! 디자인시스템은 단어 의미 그대로 회사나 조직의 디자인 체계화를 의미하며 전반적인 프로덕트의 통일성을 유지합니다. 디자인시스템은 전반적인 프로덕트의 통일성을 유지를 하는 것이 목적이다. 일종의 프랜차이즈시스템라고 생각해본다면, 본사는 지점 상관없이 동일한 맛을 내기 위해 재료와 레시피를 제공해야한다. 하지만 만약 레시피없이 재료만 지점에 전달된다면 어떻게 될까? 똑같은 재료를 썼기때문에 비슷한 맛을 낼지라도, 분명 다른 맛이 날 것이다. 이런 일을 방지하기 위해 재료를 어떻게 요리하는지 레시피 전달도 필수적이다. 우리 회사의 디자인시스템도 앞의 문제와 동일한 문제를 겪고 있었다. 화면을 디자인하는 재료인 컴포넌트를 제공하고 있지만, 이 컴포넌트를 어떻게 쓰는지에 대한 명확한 가이드가 없어서 같은 컴포넌트라도 디자이너마다 다르게 해석하여 사용하고 있었다. 그래서 콘솔마다 비슷해보이지만 다른 UI와 다른 사용경험을 가지게 되었다. 가이드의 부재로 화면 작업을 하면서 다양한 문제들을 겪게되었는데, 콘솔을 디자인하면서 가졌던 의문점들은 아래와 같았다. 7가지 컴포넌트 사이즈 중에 어떤 걸써야하죠? 개발된 컴포넌트와 디자인상 컴포넌트가 상이해요. 비활성화를 나타낼때는 어떤 색상을 써야할까요? 비슷한 화면에서 왜 사용된 컴포넌트가 다른가요? ...이하 생략 이런 의문점을 해결하기 위해 매번 다른 프로젝트의 화면들을 열어서 비교해보거나 다른 PD(Product Designer) S님께 일일이 물어볼 수 밖에 없었다. 그래서 첫 프로젝트를 맡고 디자인시스템때문에 되게 헤맨 시간이 길었던 것 같다.

이 글은 왜 디자인 시스템 개선을 시작하게 되었는지의 이야기이니 다음편부터 보셔도 무방합니다. 서론 새로운 회사에 합류한지, 5개월이 되었다. 그간 업무한 것들이 정말 많았고, 기록을 해두고 혹시나 내 글을 보는 사람이 있으면 도움이 되었으면 생각을 하게 되어서 블로그를 열었다. 첫번째 콘텐츠는 아무래도 디자인시스템 개선이지! 처음 입사하고 디자인시스템을 보고 좀 많이 놀랬지...ㅎㅎ. 디자인시스템은 프로덕트 디자이너의 업무에서 상당히 중요한 부분을 차지한다. 그래서 주로 새로운 곳에 입사하면 디자인시스템을 살펴보게 된다. 하지만 이번 회사의 디자인시스템을 살펴보면서 파운데이션부터 개선이 절실히 필요하다고 느껴졌다. 디자인시스템을 처음부터 만들거나, 기존에 만들었던 것을 부분적으로 수정을 한적이 있지만, 기존에 있던 디자인시스템을 파운데이션부터 송두리째 바꾸는 것은 처음 해보는 일이었다. 사실 거의 처음 만드는 수준이지만... 그래도 기존의 스타일을 최대한 유지하면서 개선하는 것을 목표로 하였다. 그리고 불과 작년초에 회사의 리브랜딩이 이루어지면서, 개선이 이미 이루어졌는데, 들어온지 2개월도 안된 사람이 갑자기 또 개선한다고 하면 회사 구성원들의 이해와 공감이 반드시 필요한 부분이었다. 그래서 타운홀에서 발표를 목표로 해당 업무를 진행했다. 타운홀 발표때는 너무 떨려서 대본도 써와서 발표를 했다. (당시에 원티드 컨퍼런스 다녀오고 발표자뽕이 찼었을지도..) CXO분들과 더불어 디자인,개발과 거리가 먼 업무를 담당하는 구성원분들의 공감과 칭찬 속에 해당 프로젝트는 내가 PM으로 진행하게 되었다. 당시 입사하고 내가 한 프로젝트에 대해 모두 앞에서 공개하는 일이라 부담되고 걱정이 많았는데, 결과적으로 디자인시스템 개선 작업의 첫 발을 내딛을 수 있어서 정말 다행이었다. 그럼 긴 서론을 끝내고 본론으로 들어가보자. 문제 제기 현재 디자인시스템은 5명의 PD(Product Designer)가 구축을 한 것을 알고있다. 당시 PD들은 의견을 수용해서 엄청 많은 종류의 색상과 타이포그래피 등이 나온 것같았다. 하지만 PD 수가 줄어들어 나 포함 2명이었고, PD 수가 적을때 빠르게 개선이 이루어져야겠다고 생각들었다.