🚀 성장하는 회사 생활

디자인 시스템 - Foundation 개선 2

Yura

Aug 18, 20242y ago

컬러는 완전히 새롭게 색상을 선별하고 컬러 실험도 했기때문에, 준비했던 기간에서 제일 많은 시간이 들어갔다. 타이포그래피와 라운드 값, 쉐도우는 기존에 있던 가짓수를 줄이거나 한 층 더 디벨롭 된 개념을 넣는 정도로, 수월하게 작업이 되었다.

타이포그래피(Typography)의 간소화 및 규격화

문제점

여러방면으로 뜨악하게 했던 디자인시스템이었지만.. 정말 시스템으로 느껴지지 않는 요소가 바로 타이포그래피였다. 자유도를 위해서인지 모르겠으나, 총 4가지 두께에 10,11,12… 등 1px마다 모든 사이즈의 폰트 크기를 제공하고 있었다. 그게 도합 320종류였다.

이렇게 320종류...! 링크는 왜이렇게 많지!?

폰트 종류가 많지만 그에 따른 가이드가 모호하였고, 동일한 요소에도 개인의 판단으로 다른 폰트 사이즈가 사용되어 통일성이 떨어졌다. 그래서 콘솔에 바디폰트가 14px일때도 있고 16px일때도 있었다ㅠㅠ. 강조 텍스트가 Semibold 인지, Bold인지 아직도 모르겠다.

불필요한 폰트 제거 및 역할에 따른 분류

4가지의 폰트 두께를 3개로 줄였고, 폰트의 계층을 역할에 따라 다시 분류하였다. 기존에 전부 Header와 Subtitle이 대부분이라 Body가 없어서 혼란도 야기되었던 것 같다. 그리고 Header와 Subtitle의 구분도 모호하였다. 그래서 역할에 따라 확실하게 가이드를 제공하였다.

역할에 따라 Heading,Title 2가지 제목 종류로 나누고, 크기별로 구체적인 가이드도 지정해주었다. 하지만 두께에 대해서는 자유도를 어느정도 제공해 폰트 위계 조절을 자유롭게 하도록 만들었다. 그리고 Body와 다르게, 3줄 이상 쓰이는 곳에는 Paragraph를 쓰도록 추가하였다. Body와 차이점은 행간이다.

라운드 값(Radius)의 균일화

문제점

나를 괴롭히는 건 타이포그래피뿐만 아니였다... 라운드 값이 불필요하게 다양했고, 가이드조차 매우 모호하게 작성되어 있어서 어느 케이스에 사용하는 것인지, 어떤 사이즈인지 분별이 되지않았다.

정확한 가이드로 Radius 값 통일

마음같아서는 모두 값을 4px로 통일시키고 싶었지만... 기존의 콘솔이 매우 둥글둥글하고 유한? 느낌이었는데 갑자기 딱딱하게 느낌으로 확 바꿔버리면 안될꺼같았다. (브랜딩 이미지도 있고!) 하지만 많은 라운드 값을 주기에는 크기에 따라 시각보정에 대해 개인이 애매모호하게 판단해버릴 수 있다는 생각에, "적당한" 라운드 값으로 타협을 했다. 그리고 개인이 매우 쉽게 숙지할 수 있을 정도의 가이드를 만들었다.

하지만 위의 가이드는 컴포넌트를 실질적으로 만들면서 한 번 더 개선이 되었다. 매우 심플해서 좋아했는데, 실제로 적용해보니 4px 값과 8px의 값 차이는 이질적으로 차이가 많이 났고, 크기별 버튼, 필드 컴포넌트 등에서 매우 크게 와닿았다. 그래서 보완해서 중간값을 넣어주었다.

통일된 그림자(Shadow) 적용

문제점

원래는 Shadow라는 이름으로 정의가 되어있었다. 카드 컴포넌트를 예시로 가져왔는데, 같은 컴포넌트와 같은 디폴트 상태임에도 그림자의 유무가 다르고, 호버했을때 그림자로 표현되는 것도 있고, 배경색이 변경되는 상태도 있었다. 이것도 가이드의 부재로 디자이너의 재량에 따라 다르게 사용된 것 같았다.

Elevation의 개념으로 재정의

디자이너마다 이건 조금 강조해야해! 더 많이 강조해야해! 주관에 따라 그림자 효과를 사용하는게 아닐까? 라는 생각이 들었다. 그래서 이것을 "Shadow"의 효과가 아니라 "높이"에 따른 "Shadow"라고 정의하면 어떨까?라고 생각을 했다. 그래서 각 컴포넌트마다 위치되는 높이 값을 명확하게 지정해주어, 그 높이 값에 따른 정의된 Shadow값을 사용하도록 하였다. (Material의 그 개념 맞다!)

Surface아래는 기본 화면 Page가 깔린다.

간격(Spacing)의 규격화

문제점

스페이싱도 폰트처럼 토큰 형태로있지만, 역할을 알 수 도 없고, 가이드도 전혀없었다. 그래서 화면 페이지마다 하단의 마진이 다르다.(좌절ㅠ) 물론 화면을 이루는 컴포넌트들 사이에도... 이 부분도 디자이너 재량에 따라 모두 다르게 된 상황같다. 나조차도 여기에는 간격을 몇으로 했는지 헷갈리기 때문에, 이 부분을 반드시 정의해야겠다는 생각이 들었다.

상세한 Spacing 가이드

우리 회사 콘솔의 레이아웃과 페이지를 다 가져와서 모두 정의해버렸다. 물론 놓친 부분도 있겠지만.. 일단 다 모으고 어느 정도의 간격을 가지고 갈건지, 정말 세세한 부분까지 다 정리를 마쳤다. 물론 이런 부분은 외울 수가 없기때문에, 최대한 컴포넌트로 풀고자 하였다. 그리고 배리어블에도 종류와 케이스에 따른 Spacing을 등록하였다. 일일이 적용하라고 등록한 것은 아니고, 가이드를 쉽게 바로 확인할 수 있도록 등록해두었다.

현재는...?

컴포넌트는 계속해서 만들고 있는 단계인데, 함께 일해오던 디자이너 S님이 퇴사를 하시면서 혼자 남게 되었다. 그래서 당장 콘솔의 프로젝트가 더 중요하기 때문에 힘을 못쏟고 있다. 컴포넌트까지 다 만들면, 또 디자인시스템-Component 편을 쓸 수 있지 않을까? 내년 상반기에는 개발까지 완료되서 Storybook에 등록된 모습도 보고 싶다. 그리고 단순 Component 종류만 만드는 것이 아닌, 반복되는 컴포넌트의 디벨롭(카드,사이드 패널 등), 개선되어야하는 컴포넌트, 콘솔만을 위한 컴포넌트 등을 계획하고 있다. 새로운 PD분이 오시면 함께 개선해서 이 부분도 꼭 블로그에 쓸 수 있기를~🍀

Subscribe to 'yura'

Subscribe to my site to be the first to receive notifications and emails about the latest updates, including new posts.
Join Slashpage and subscribe to 'yura'!