Subscribe
🚀 성장하는 회사 생활
디자인 시스템 - Foundation 개선 1
Yura
서론
디자인 시스템의 개선을 위해 디자인 시스템이 왜 필요한지에 대해 다시 한 번 짚고 넘어가보자!
디자인시스템은 단어 의미 그대로 회사나 조직의 디자인 체계화를 의미하며 전반적인 프로덕트의 통일성을 유지합니다.
디자인시스템은 전반적인 프로덕트의 통일성을 유지를 하는 것이 목적이다. 일종의 프랜차이즈시스템라고 생각해본다면, 본사는 지점 상관없이 동일한 맛을 내기 위해 재료와 레시피를 제공해야한다.
하지만 만약 레시피없이 재료만 지점에 전달된다면 어떻게 될까? 똑같은 재료를 썼기때문에 비슷한 맛을 낼지라도, 분명 다른 맛이 날 것이다. 이런 일을 방지하기 위해 재료를 어떻게 요리하는지 레시피 전달도 필수적이다.
레시피 없는 재료 전달
우리 회사의 디자인시스템도 앞의 문제와 동일한 문제를 겪고 있었다. 화면을 디자인하는 재료인 컴포넌트를 제공하고 있지만, 이 컴포넌트를 어떻게 쓰는지에 대한 명확한 가이드가 없어서 같은 컴포넌트라도 디자이너마다 다르게 해석하여 사용하고 있었다. 그래서 콘솔마다 비슷해보이지만 다른 UI와 다른 사용경험을 가지게 되었다.
실제로 입사했을때 메인 버튼이 검정인지 초록인지 처음에 헷갈렸다..ㅎㅎ
가이드의 부재로 화면 작업을 하면서 다양한 문제들을 겪게되었는데, 콘솔을 디자인하면서 가졌던 의문점들은 아래와 같았다.
•
7가지 컴포넌트 사이즈 중에 어떤 걸써야하죠?
•
개발된 컴포넌트와 디자인상 컴포넌트가 상이해요.
•
비활성화를 나타낼때는 어떤 색상을 써야할까요?
•
비슷한 화면에서 왜 사용된 컴포넌트가 다른가요?
•
...이하 생략
이런 의문점을 해결하기 위해 매번 다른 프로젝트의 화면들을 열어서 비교해보거나 다른 PD(Product Designer) S님께 일일이 물어볼 수 밖에 없었다. 그래서 첫 프로젝트를 맡고 디자인시스템때문에 되게 헤맨 시간이 길었던 것 같다.
이런 문제점을 해결하기 위해 이 개선 프로젝트를 시작하게 되었다. 새로운 디자이너가 들어왔을때, 또 원활하게 디자이너가 협업을 위해 일일이 물어보지 않고 빠르게 회사의 시스템을 이해하고 쉽게 사용할 수 있도록 컬러, 타이포그래피, 컴포넌트까지 모든 가이드를 규격화하려고 노력했다. 그리고 현재 사용하지 않는 것들과 빈도 수가 적은 것은 과감하게 삭제하고 통일시켜 디자이너가 무엇을 써야하는지에 대한 고민을 줄이고 궁극적으로 일관된 콘솔 UI와 사용경험을 만드는 것이 이번 개선 프로젝트의 가장 큰 목표였다.
여담
•
비개발자, 디자이너가 아닌 사람들의 이해를 돕기위해 프랜차이즈에 비유를 하여 설명을 해드렸다. 디자인시스템이 무엇이고 뭐가 목표인지 설명하기 위해 고민을 엄청하고 유튜브랑 블로그 글도 많이 찾아봤는데, 이 분의 유튜브를 참고하여 장표를 만들었다.
•
이미지들은 실제 발표 장표들의 부분이다.
컬러 팔레트의 재정의
문제점
개선 전 컬러 팔레트는 5가지의 카테고리의 팔레트가 있었다. 하지만 각 카테고리의 팔레트마다 사용목적이 모호했고, 과도하게 불필요한 컬러들이 존재했다. (아래는 여러 문제들 중 몇 개를 써보았다.)
•
Brand, Various, Grayrish, White&Black, Positive&Negative
•
검정색과 회색은 주로 Brand의 팔레트의 Brand Black이 사용되고 있었다.
•
회색계열 컬러칩이 4개나 되었다...
•
상태를 나타내는 팔레트 (Positive&Negative)가 있지만, 주의는 Various 팔레트의 Orange 색상을 사용하고 있었다.
명도 맞추기
색상 이름 뒤에는 번호가 있는데 밝은색 100번부터 어두운색 1200번대와 같은 숫자는 명도를 나타낸다. 그래서 색상과 상관없이 같은 번호는 비슷한 명도를 가져야한다. 하지만 흑백으로 바꿔봤을때 명도가 다른것이 확연히 느껴진다. 특히 1200번대에 이르면 매우 큰 차이가 느껴지고 있다.
그래서 새로운 색상을 선별할때 전체 팔레트의 명도를 맞추는 작업을 진행했다. 흑백으로 바꿔봤을때도 색상이 달라도 같은 번호끼리 비슷한 명도를 가진것을 확인할 수 있다.
완벽하게 맞추지는 못했다. 완벽하게 맞춰버리면 꼭 안 예쁜 색상들이 나와버린다ㅠㅠ
새로운 컬러 팔레트
목적에 맞게 팔레트 카테고리를 재분류했다. 화면 구성하는데 메인 색상인 그레이스케일, 특정 상태를 대표하는 시멘틱, 브랜드 색상을 나타내는 브랜드, 데이터 시각화에 최적화된 데이터 비주얼 팔레트 4가지로 구성했다.
•
Grayscale
•
Semantic
•
Brand
•
Data Visualization
Grayscale
그레이 계열의 4가지 팔레트를 모두 통일해서 1개로 만들어버렸다. (왜 4개나 만들어졌는지에 정말 궁금하다...!) 100번부터 1200번까지 있던 명도별 컬러도 50번부터 1000번대로 수정하였다. 50번은 배경색에 사용되는 컬러이다. Gray Natural과 함께 White, Black 이렇게 합쳐서 Grayscale 카테고리를 이루도록 하였다. 이름은 Natural이지만, Cool 계열 색상을 선정한 이유는 회사의 브랜드 색상(형광 노랑)에 맞췄기 때문이다.
Semantic
8기존의 다양한 색상을 가진 Various 팔레트는 상태를 나타내는 색상을 뽑아 시멘틱 팔레트로 재정의하였다. UI에는 그렇게 많은 색상이 필요하지 않을뿐더러, Various의 색상들이 주로 콘솔 내 그래픽에 사용되고 있었다. (그럼 따로 그래픽 컬러팔레트를 뽑아야하지 않을까? 그리고 이건 BX의 영역같기도...)
Semantic의 의미는 “의미론적”이다. 시멘틱의 컬러들은 모두 특정 상태를 대표하기 때문에 색상의 이름도 빨강, 주황, 초록이 아닌 Error, Warning, Success, Information으로 네이밍되었다.아예 이름에 상태를 고정시켜서, 다른 색상 못쓰게 막아버릴 생각!ㅋㅋ
💫 번호별로 명도를 맞추면 좋은점
위 그림처럼 모두 500번대를 가져왔다. Semantic에서 500번대는 아이콘 컬러로 사용되고, 600번은 텍스트 컬러로 사용되고 있다. 만약 전부 명도 번호가 다르다면..? 외우기도 힘들꺼같다.
Brand
회사의 브랜드색인 노란색은 웹 환경에서 그대로 쓰기 어려운 점이 있었다. 그래서 브랜드 색의 노란색에서 다른 명도의 팔레트를 만드는것이 아닌, 웹 환경에서 쓰기 적합한 UI Yellow 색상을 따로 만들었다. 그리고 브랜드색상이 쓰일 곳을 미리 정의 해서 색상의 남용을 막고자 하였다. 사용처까지 정해놓은 이유는.. 드롭다운 필드 호버시 형광 노란색이 배경색으로 채워지는 걸 보고 뜨악...해서 아예 다른 곳 못써..! 막아버렸다.
불필요한 색상 OUT
채용을 위한 과제를 내면 지원자분들이 우리 회사의 브랜드 색상은 아마 초록색이라 생각하시는지, UI를 초록초록하게 해주신다... 당연히 그렇게 생각하실것 같다. 브랜드 색상과 관련없는 초록색을 왜이렇게나 콘솔에 많이 사용되었는지 히스토리는 처음에 리브랜딩 이후 노란색을 UI색상에 충분히 녹일 수가 없어서 대체제로? 이 초록색상이 선별되었다고 한다. 하지만 내 생각에는 충분히 노란색도... 컴포넌트의에 사용되고 의미없는 초록색도 혼재되어 사용되고 있었다. 또 새로 컬러의 재정의를 통해 Green이 아닌 Success라고 이름을 지칭하기로 했으니 (Semantic 참고) 이 색상을 아예 삭제시켜버리고, 이 색상이 담당하고 있던 컴포넌트들도 적절하게 다른 색상들에게 분배했다.
데이터 시각화를 위한 컬러
문제점
현재 디자인시스템은 데이터 시각화를 위한 컬러 팔레트가 없기때문에, 디자이너들의 주관에 따라 기존 팔레트에서 데이터 컬러를 선정하여 사용되고 있었다. 그래서 데이터에 적합하지 않은 컬러를 사용하게 되면, 데이터 전달성이 저해되는 문제가 제기되었다.
디자이너 A, B, C는 내가 추측하고 쓴 예시다.
개선전 팔레트 카테고리를 살펴보면 Various 팔레트가 데이터를 위한 팔레트로 사용될 수 있어보였다. 하지만 차트대비 평가를 위한 서비스에 Various 컬러를 넣고 결과를 봤을때, 라인차트컬러간의 구분에 대한 어려움이 있었다. (Indigo 색상)
Viz Palette
정말 좋은 서비스이다. 심지어 무료라니..! 넣은 색상들에 대해 차트 종류별로 미리보기도 제공하고 세분화하여 간섭의 단계?도 보여준다.
그래서 데이터를 위한 색상 팔레트 별도로 만들었다. 이를 위해 콘솔내의 데이터를 살펴보았을때, 3가지 종류의 차트로 나눠볼 수 있다.
•
범주형은 컬러간의 위계없이 여러개념을 한번에 표현하고 비교할 수 있는 데이터이다. 주로 라인 그래프에 사용된다.
•
순차형은 하나의 개념을 위계에 따라 순차적으로 표현되는 데이터이다. 코호트 차트에 사용된다.
•
분기형은 대치되는 개념을 기준으로 양극단에서 컬러 차이를 두고 순차적으로 표현한 것이다.
범주형 팔레트
범주형 팔레트는 표시되는 컬러의 순서를 고정시키고 컬러 간의 차이를 명확하게 두었다. 그래서 여러 정보가 중첩이 되어 표기되어도 쉽게 구분이 가능하다. 물론 차트대비 평가 프로그램에서도 해당 팔레트에서 충돌되는 색상들도 없었다.
순차형
현재 코호트는 회색계열에 가까운 초록 색상을 사용하고 있었는데, 채도가 낮아서 일부 색상에서는 비활성화 상태로 오인할 여지가 있었으며, 컬러 단계간 변별력이 떨어져서 시각화 된 지표가 한 눈에 와닿지 않았다.
그래서 하나의 색상의 명도로만 표현하는 것이 아닌, 유사하지만 구분되는 2가지 색상으로 단계별로 확실한 차이를 주어서 데이터를 표현하고자 하였다. 주로 시각화에 일반적으로 사용되는 컬러 스펙트럼인 Viridis와 Magma 2가지 팔레트 종류를 만들었다.
분기형
분기형 팔레트는 긍정 부정을 나타내는 블루 오렌지, 활성화와 비활성화 정도를 나타내는 틸 그레이로 2가지 색상의 팔레트를 정의했다. 아래 트리 맵 형태는 고객들의 활동에 따라 세그먼트를 나눈 그래프이다. 블루가 긍정의 의미, 오렌지가 부정의 의미로 사용되고 있는 모습이다.
명확한 컬러 가이드 수립
문제점
기존의 색상에 명도번호를 붙여 brand black 500과 같은 이름을 가졌지만, 유사한 액션, 형태를 갖고 있음에도 불구하고 정확한 가이드가 부재해서 컴포넌트별로 제각기 다른 컬러를 활용하고 있었다. 예시로 같은 필드형태에도 다른 라인색상이 사용되고, 메뉴에서의 비활성화 색, 버튼에서 비활성화 색상도 다른 색상이 사용되고 있었다.
토큰 기반의 색상 정의
앞서 정의된 컬러 팔레트는 컬러값에 컬러명까지 부여된 상태였다. 그것을 다시 역할에 맞춰 다시 이름을 부여하였습니다. 요소별 컬러를 쉽게 검색하고 정확한 토큰값을 사용할 수 있게 개선했습니다.
토큰 개념을 더 알고싶다면?
이 분 유튜브를 추천드린다!
토큰 기반으로 색상의 역할을 명확히 지정하였기때문에 컬러 적용을 위해 기존 시안을 찾아보거나 고민할 필요없이 쉽고 빠르게 컬러를 적용할 수 있다. 이전 색상기반일때, 해당 컬러가 어디에 사용되는지 외우고 있거나, 다른 화면이나 가이드 문서에 대한 확인이 필요했다. 토큰 기반일때 카테고리별로 세분화되어 있고, 상태나 역할별 유추할 수 있는 네이밍으로 쉽게 사용 색상을 선택하여 사용가능하다.
피그마 배리어블에 토큰들이 등록된 모습
Dialog에 이전 색상기반으로 적용되었을때와 토큰기반으로 적용되었을때의 모습을 비교해보자! 컴포넌트를 만들때도 고민없이 지정된 색상을 쓰기만 하면 되어서 훨씬 수월했다.
색상편 회고
최소한의 색상을 만들고자 지금의 팔레트를 만들고 나서, 컴포넌트를 만들면서 접목시켜봤다. 추가적인 색상들도 필요하게 되면서 지금은 New라는 Semantic 컬러도 추가된 상태고, 토큰은 계속 가이드가 추가되고 변경된 부분도 있다! 새로운 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'!
Join Slashpage and subscribe to 'yura'!
