디자인 시스템을 위한 컬러 스펙트럼
나의 시선 #10 - 디자인 시스템을 위한 컬러 시스템 제작기
디자인 시스템에 대한 점검과 동시에 통합 디자인 시스템으로의 개편을 추진하면서 '디자인 시스템에 적합한 컬러 스펙트럼이란 무엇일까'를 고민하는 시간을 가질 수 있었다. 그 과정을 기록으로 남겨보려 한다.
2020년에도 비슷한 주제로 '컬리 시스템에 대한 고찰 – 상대적 컬러 시스템'이라는 글을 작성한 적이 있다. 부제인 '상대적 컬러 시스템'에서도 알 수 있듯이, 수치화된 값을 가지고 자동으로 일정한 차이를 가진 컬러 스펙트럼을 만드는 방법에 대해 고민하고 테스트했던 내용을 정리한 글이었다. 해당 글은 이미지에서 추출된 색상이나 사용자로부터 값을 받는 경우와 같이 기준 색상을 특정하기 어려운 상황에서 "어떻게 하면 최대한 많은 경우의 수에 대응할 수 있을까"에 대한 나름의 해결책을 찾아가는 과정이었다면, 이번 글은 디자인 시스템에서 사용하는 컬러 스펙트럼을 만들 때 고민해야 하는 것들에 대한 이야기다.
내가 디자인 시스템을 위한 컬러 시스템을 만들 때 고민했던 주요 포인트는 아래 3가지다.
1. 어떤 색상 모델을 기준으로 삼을 것인가
2. 스펙트럼을 구성하는 각 컬러는 어디에 사용되는가
3. 각 컬러의 토큰은 어떻게 분류할 것인가
컬러 토큰 시스템은 그 자체로 내용이 많기 때문에 이 글에서는 1번과 2번의 내용을 다뤘다.
어떤 색상 모델을 기준으로 삼을 것인가
컬러 시스템을 만드는데 색상 모델을 왜 고민해야 할까?
컬러 시스템을 가이드로 만들 때 가장 먼저 하는 일이 컬러 팔레트를 구성하는 일이다.
디자인 시스템의 컬러 팔레트 예시 (출처 : Ultimate color palette system – Untitled UI / Figma Community)컬러 팔레트를 구성할 때 문자 또는 숫자로 이뤄진 값(예 : #2C1C5F)이 필요한데, 이 값은 어떤 색상 모델을 사용하느냐에 따라서 달라진다.
같은 컬러지만 색상 모델에 따라 표현되는 값은 다르다.디지털 환경에서 사용할 수 있는 색상 모델 중에는 빛의 3 원색이라 부르는 Red, Green, Blue를 조합해 만든 RGB가 대표적이고 RGB를 대체해 만든 색상 모델로 HSL, HSB, HSV 등이 있다. 구글 머테리얼의 경우 자체적으로 HCT라는 새로운 색상 모델을 개발해 사용한다고 한다.
HSL, HSB라니 이게 뭐지 싶을 수 있는데, RGB처럼 색상 모델을 구성하는 요소들 이름의 앞글자를 따서 지은 이름이기 때문에 구성 요소에 대해 알면 쉽게 이해할 수 있다.
색의 기본 개념 3가지
HUE (색조)
Hue는 밝기나 채도가 포함되지 않은 순수한 색상 자체를 뜻하는 용어로, 광선을 프리즘으로 분광했을 때 나뉘는 색의 분류다. 보통 0에서 360도의 값을 가진 원형으로 표현하고 이를 몇 개로 나누냐에 따라 10 색상환, 20 색상환 등으로 부른다.
먼셀의 10 색상환 (출처 : 금성출판사 티칭백과)Saturation (채도)
색의 맑음 정도를 나타내는 말인데 쉽게 말해 중립(회색)에 가깝냐 색 본연에 가깝냐로 이해할 수 있다. 일반적으로 0에서 100의 값을 가지며 0에 가까울수록 회색에 가깝고 100에 가까울수록 본연의 색을 표현할 수 있다.
위로 갈수록 색이 탁해져 회색에 가까워지고 아래로 갈수록 본연의 맑은 빨간색에 가까워진다. Brightness(명도) / Lightness(휘도)
둘 다 밝음과 어두움 정도를 뜻한다. 일반적으로는 0에서 100까지의 값을 가지는데 100에 가까울수록 밝고 0에 가까울수록 어두워지며, 색상 모델에 따라서 Value라는 이름으로 사용되기도 한다.
Brightness와 Lightness 둘 다 밝고 어두움을 나타내는 말이긴 하지만 분명한 차이가 있다. Brightness는 원래 색이 가진 절대적인 밝기를, Lightness는 원래 색에 조명을 비춘 상대적인 밝기를 뜻하기 때문에 Brightness는 100의 값을 줘도 흰색을 표현할 수 없지만 강한 조명을 쐈을 때 원래 물체의 색이 날아가는 것처럼 Lightness를 100의 값을 주면 흰색이 된다.
좌) Brightness / 우) Lightness Hue + Saturation + Lightness를 조합하면 HSL이 되고, Lightness 대신에 Brightness를 사용하면 HSB가 되는 것이다. HSL, HSB 둘 다 공통적으로 색, 채도, 밝기를 활용해 색을 구현한다는 것을 알 수 있다.
컬러 시스템에 적합한 색상 모델
그냥 RGB 쓰면 되지 굳이 다른 색상 모델까지 알아야 하나 싶을 수 있다. 컬러 시스템을 구성할 때 RGB 모델을 사용하기 어려운 이유는 바로 '직관성'이 떨어진다는 점이다. 아래의 컬러 예시를 보자.
예시 컬러에 대해 묘사해 보라고 하면 어떻게 할까? 약간 회색이 섞여서 탁한 느낌이지만 밝은 느낌의 보라색이라는 생각이 든다. 이처럼 인간은 색조, 채도, 밝기로 색을 인지한다. 하지만 "빨강, 파랑, 초록을 얼마씩 섞으면 만들 수 있을까요?"라는 질문에 누가 과연 답을 할 수 있을까.
이처럼 RGB 모델은 직관성이 떨어지기 때문에 컬러 팔레트로 스펙트럼을 구성할 때 원하는 색상을 수치로 조정하기 어려워 적합하지 않다. 구글의 The Science of Color & Design에 따르면 RGB 대체 모델인 HSL, HSB 또한 컴퓨터의 연산을 빠르게 하기 위해 만들어진 모델이기 때문에 사람의 시각 인지와 완벽히 일치한다고 보기는 어렵다고 한다. 그럼에도 인간이 색을 지각하는 프로세스와 동일하기 때문에 RGB에 비해 HSL이나 HSB가 직관적인 모델이라고 할 수 있다.
HSB가 아닌 HSL을 선택한 이유
Brightness와 Lightness의 차이 때문에 이번 통합 디자인 시스템 개편에서의 컬러 시스템은 HSL 모델을 기준으로 삼기로 했다. 그 이유는 바로 색상을 환산하는 값 때문이었다.
HSB, HSL 환산값 비교
HSL 시스템앞서 색의 기본 개념에서 설명했듯이 Brightness는 원래 색이 가진 절대적인 밝기를 조정하기 때문에 Brightness 값만으로는 완벽한 색의 스펙트럼을 표현할 수 없다. 때문에 완벽한 스펙트럼을 소화하려면 어느 지점부터는 Saturation의 수치를 함께 조정해야 한다. 하지만 Lightness는 Saturation을 조정하지 않고도 Lightness 값만으로도 완전한 스펙트럼을 만들어낼 수 있다. 디자인 시스템에서의 컬러 스펙트럼은 밝기와 채도를 미세하게 조정하며 단계를 만들어야 하기 때문에 색, 채도, 밝음이 분리된 HSL이 훨씬 효율적이고 직관적이다.
HSL을 기준으로 한 컬러 스펙트럼스펙트럼을 구성하는 각 컬러는 어디에 사용되는가?
디자인 시스템에 컬러를 정의한다는 건 결국 UI 어딘가에서 사용해야 하기 때문이다. 그렇다면 스펙트럼을 만들기 전에 '이 컬러들이 어디에 사용될 것인지'를 먼저 정의해야 했다.
UI에서 컬러의 사용처는 크게 구분하면 3가지였다.
1. 텍스트 (접근성에서 명시한 명도 대비 포함)
2. 배경색
3. 선(외곽선 또는 구분선)
텍스트
텍스트는 대타이틀, 소타이틀, 본문, 캡션, 컴포넌트 등 다양하게 분류된다. 하지만 이 다양한 분류만큼 색을 다르게 가져갈 필요도 없고 오히려 운영만 복잡해진다. 디자인 시스템의 핵심 중 하나는 효율이기 때문에 분류가 아닌 '중요도'가 본질이다. 텍스트에 색이 왜 필요한가. 결국 무엇을 강조하고 무엇을 덜 강조할 것인가이다.
구글 머티리얼 The Typo System (출처 : m2.material.io)그래서 중요도를 따졌을 때 타이틀과 같은 텍스트에 사용하는 강조를 위한 컬러, 본문과 같이 많은 글에 사용하는 기본 컬러, 캡션 등 중요도가 낮은 컬러 3가지를 기준으로 하면서 접근성을 위한 명도 대비까지 고려해 테스트를 진행했다.
1차 테스트
2차 테스트배경색과 선
배경색을 만들 때 고려했던 것은 2가지다. 그래픽이 아닌 UI에서 사용되는 배경색이기 때문에 배경색 위에 같이 사용될 텍스트까지 고려되어야 한다는 것, 그리고 계층을 구분할 수 있어야 한다는 것.
사용하고 있는 컴포넌트와 UI를 모두 모아 분석한 결과, 현재 UI는 계층을 거의 사용하지 않고 있었기 때문에 white를 제외하고 2가지 컬러를 더 추가해 3 계층으로 활용할 수 있으면서 텍스트를 추가했을 때 가독성이 떨어지지 않도록 설계했다.
배경에 사용할 색 테스트선은 윤곽선으로도 사용되고 구분선으로도 사용되는데 배경색에서 받는 영향이 컸다. white까지 포함해 3개의 배경색에서 활용할 수 있는 컬러로 짝을 지으면 자연스럽게 명도차이가 발생해 같은 배경에서 사용될 때 중요도 구분도 할 수 있을 것 같아 테스트를 진행했다.
선에 사용할 컬러 테스트Neutral 컬러 스펙트럼
이러한 과정을 통해 완성한 Neutral 컬러의 스펙트럼이다. 이전의 컬리 시스템에 대한 고찰 – 상대적 컬러 시스템에서는 일정한 값으로 자연스러운 스펙트럼을 만드는 것이 목적이었지만, 이번 컬러 스펙트럼은 UI의 활용처를 고려해 만들었기 때문에 보는 것과 같이 일정한 값의 차이를 가지고 있지는 않다. 얼마나 일정하게 색의 명도가 달라지냐가 아닌 활용처에 얼마나 적합한가를 기준으로 하기 때문이다.
여기에 편의를 위해 HEX, HSL, Alpha 값을 정의하고, white와 black 그리고 스펙트럼의 중간값인 600을 사용했을 때 명도 대비를 함께 표기해 컬러 스펙트럼을 완성했다.
최종 결과물모든 컬러에 스펙트럼이 필요한 것은 아니다
구글 머티리얼이 확산되고 디자인 시스템을 만드는 일이 보편화되면서 많은 경우가 관습적으로 컬러 스펙트럼을 만든다. 이번에 디자인 시스템을 위한 컬러 스펙트럼을 개선하면서 느낀 건 결국 어디에 어떻게 쓰일 것인가였다. 이전 디자인 시스템에서는 관습에 따라 스펙트럼을 만들다 보니 정의하고도 사용하지 않는 컬러도 많고, 효용성이 떨어지는 경우도 많았다. 어디에 어떻게 쓰일지 고민하지 않고 남들 다 만드니까 만든 결과가 결국은 무쓸모로 돌아온 것이다.
모든 컬러에 스펙트럼이 필요하지 않다. Neutral처럼 활용처가 많은 컬러는 스펙트럼으로 정의하고 그렇지 않은 컬러는 단색으로 존재해도 충분할 수 있다. 실제로 이번 개편 때 스펙트럼으로 정의한 건 활용처가 많은 2~3가지 컬러였고, 나머지는 단색으로 정의했다. 사용하지 않는데 정의하는 건 운영 관리의 비효율만 만들 뿐이다.
컬러 스펙트럼을 만들기 전에 어디에 어떻게 사용되는지를 생각하고 활용처를 기준으로 정의를 내려보자.
(컬러의 디자인 토큰화 과정은 다음에...)
참고자료
https://material.io/blog/science-of-color-design
https://www.shutterstock.com/ko/blog/how-hex-colors-work/
https://news.samsungdisplay.com/24640
https://news.samsungdisplay.com/9131
https://brunch.co.kr/@somgs34/25
https://carrotdesign.tistory.com/entry/UI-color-system-RGB-HSL-HSB
