기본적인 컬러 스케일의 구성
디자인 시스템에서 컬러 스케일을 설정하는 법
디자인 시스템에서 스타일 가이드를 제작할 때 보편적으로 따르는 규칙들이 있다. 이러한 규칙들은 오랜 시간 정형화되어 있었기 때문에 왜 그런 규칙들이 생겨났는지 의문을 가져본 적이 없다. 이번에 디자인 시스템에 대한 내용을 정리하면서 그동안 당연하게 여겼던 규칙들의 근거를 살펴봤다.
컬러 스케일을 세 자리 숫자로 쓰는 이유
컬러 스케일을 세 자리 숫자로(100, 200, 300... 900) 설정하는 것은 가독성, 확장성, 그리고 일관성을 위해서다. 두 자리 숫자(10, 20, 30...)로도 설정할 수 있지만 세 자리 숫자 체계가 디자인 시스템에서 더 직관적이고 효율적인 구조를 제공하기 때문에 일반적으로 선호된다. 몇 가지 이유를 살펴보자.
첫 번째로 직관적인 계층 구조를 유지할 수 있으며 가독성이 좋아 인지하기 쉽다. gray-10, gray-20, gray-30과 같은 두 자리 숫자를 사용하면 작은 숫자로 인해 명확한 계층 구조를 표현하기 어렵고 직관적으로 단계 차이를 파악하기도 어렵다. 반면 gray-100, gray-200, gray-300 처럼 세 자리 숫자를 사용하면 숫자간의 차이가 커서 한 눈에 밝기 순서를 이해하기 쉽다.
두 번째로 확장성과 유연성이 뛰어나다. 두 자리 숫자는 새로운 단계를 추가하기 어렵지만 세 자리 숫자는 100, 150, 200과 같이 50단위나 25단위로 쉽게 확장할 수 있다.
세 번째로 다른 디자인 시스템 요소와의 일관성을 유지할 수 있다. font-weight도100 단위를 사용하는 경우가 많아 디자인 시스템의 전체적인 일관성을 유지하기 수월하다.
컬러 스케일을 7에서 10단계로 구분하는 이유
색상 차이를 세분화할 때 사람의 눈이 이를 정확하게 구별하는 데에는 한계가 있다. 또한 너무 많은 단계를 추가하면 재사용성이 떨어지고, 개발자와 디자이너가 적절한 색상을 선택하는 데 혼란을 겪을 수 있다. 디자이너 역시 과도한 옵션으로 인해 색상 선택에 대한 의사결정이 어려워질 수 있다. 인간의 시각적 인지 한계를 고려했을 때 9단계를 넘지 않는 것이 효과적이다.
기본적인 컬러 스케일의 색상 구성
컬러 스케일을 구성할 때 필수적으로 포함해야 하는 색상 스케일이 있다.
Primary Color: 브랜드를 대표하는 주요 색상으로, 로고나 강조 표시, CTA에서 주로 사용한다. 브랜드의 이미지를 각인시키고 일관된 이미지를 구축하기 위해 필수적이므로 신중하게 선정해야 한다. 이런 Primary Color에 다양성을 더해주고 정보의 계층 구조를 보완, 강화하기 위해 Secondary Color도 함께 사용한다. 디자인의 시각적인 흥미를 높이기 위해 Primary Color와 대비되거나 조화를 이루는 방향으로 선정한다
Neutral Color: 배경, 텍스트, 테두리 등에 가장 광범위하게 사용되어 디자인의 기반을 이룬다. 검정, 흰색, 회색 등이 포함되며, 다른 색상과 함께 사용해 화면의 안정감을 더해준다.
State Color: UI에서 상태를 나타내는 데 사용되는 색상으로 사용자에게 시스템의 상태나 발생하는 이벤트에 대한 직관적인 피드백을 제공한다. 주로 사용되는 색상은 다음과 같다.
정보(파랑): 시스템 업데이트나 변경 사항과 같은 일반적인 정보나 알림을 제공할 때 사용한다.
성공(녹색): 데이터 저장이나 파일 업로드 완료와 같은 성공적인 작업 수행을 나타낸다.
오류(빨강): 필수 필드가 빈 상태로 제출되었거나 서버 오류와 같이 심각한 문제가 발생했거나 사용자의 즉각적인 주의가 필요한 상황을 알린다.
경고 (노랑): 사용자에게 주의가 필요하거나 경고를 주어야 하는 상황을 알린다. 빨강과 달리 입력 오류가 아니라 약간의 주의를 요하는 상황, 예를 들어 설정이 기본값과 다를 때 사용될 수 있다.
번외 : 다크모드를 먼저 고려해야 할까?
처음부터 다크모드를 고려하여 컬러 시스템을 구성하는 것은 비효율적이다. 단순히 흰색과 검은색을 반전시키는 것으로 해결하기에는 세세하게 신경쓰고 조율해야 할 부분이 많다. 어도비나 애플의 경우 다크모드뿐만 아니라 여러 가지 모드를 지원하기 때문에 라이트 모드의 단순한 반전상태가 다크모드라고 정의내리기도 애매하다. 기준이 되는 배경을 먼저 만들고 이에 맞춰 명도대비율을 재측정해 하나의 새로운 시스템을 구축한 후, 라이트모드와 대조해보며 미세한 조정을 거치는 것이 훨씬 수월하고 시간을 절약할 수 있다.
