체계적인 컬러를 원한다면, HSL 시스템

목차

1. 도구로서의 컬러
2. 시스템의 필요성
3. 접근성
4. 체계적인 접근
5. 확장 가능성

1.도구로서의 컬러

오늘날, 우리는 많은 시간을 디지털 경험에 보낸다. 우리가 마주치는 모든 제품들은 컬러를 주요 도구로 사용한다.

디자이너로서, 매일 제품을 만드는 것은 나로 하여금, 체계 없는 컬러가 얼마나 문제인지 깨닫게 해주었다. 컬러가 적용되어서 지속적으로 두통과 혼란을 야기한다면, 그들의 가치는 약화된다. 이는 디자인에 직접적으로 영향을 끼치기 때문에 제품 개발 속도를 늦추기도 한다. 또한, 여러 매체를 통해 유저와 접촉하는 제품의 일관성을 해치기도 한다.

체계적이지 못한 디자인 시스템의 전형적인 증상은 제품의 주요색이 다양한 톤으로 나타나는 것이다.

화면 위에서 텍스트를 어떤 색으로 써야 할지, 정확한 톤을 몰라 헤맨 적을 세어보자. 이제, 더 밝은 톤이 필요했지만 추가하기엔 지식이 부족했던 적을 생각해보자. 혹은, 여러 컴포넌트들을 차별화하기 위한 색이 필요한 건 몇 번이었는지 생각해보자.

디자이너는 제품의 색상을 확신하지 못할 가능성이 놓다. 디자이너가 컬러에 대해 두 번씩 생각할 때마다, 시스템의 필요성은 증가한다.

2.시스템의 필요성

• 12명 이상의 사람이 사용하는 제품인가?
• 제품이 기능적인 면에서 성장하고 있는가?
• 당신의 팀이 성장하고 있는가?

만약 위 대답에 ‘yes’라고 답했다면, 당신의 팀은 시스템이 필요한 상태다.

요점

어떻게 해야 좋은 컬러 시스템을 만들 수 있을까? 딱히 정확한 정의는 아직 없다. 오늘날의 인터페이스가 요구하는 것은 AR/VR 경험의 등장과 함께 변경될 것이다. 적어도 당분간은, 나는 좋은 컬러 시스템이 다음과 같아야 한다고 생각한다.:

• 접근성
• 체계적인 접근
• 확장 가능성

3.접근성

접근성은 컬러 시스템의 필수 요소이다.

WCAG(웹 문서 접근성 지침) 따르기

웹 문서 접근성 지침(WCAG) 2.0은 장애인들이 좀 더 웹을 편하게 사용할 수 있도록 돕는 가이드라인이다. 접근성은 광범위한 장애를 해결한다. 시각, 청각, 지체, 인지 그 외 등등.

섹션 1.4.3 대비(최소): 텍스트와 이미지 형태의 텍스트는 다음 예외를 제외하고, 대비를 적어도 4.5:1 가져야 한다.

• 큰 텍스트: 큰 텍스트는 대비 비율을 최소 3:1로 설정한다.
• 부수적인 정보: 비활성화된 컴포넌트인 텍스트, 장식용, 아무에게도 보이지 않는 것 혹은 다른 시각적 내용을 포함한 이미지의 경우 꼭 대비를 줄 필요는 없다.
• 로고타입:로고나 브랜드명의 텍스트는 최소한의 대비만이 요구된다.

4.체계적인 접근

색에 대해 체계적인 접근법을 활용한다고 해서 주관성이 감소되는 것은 아니다. 이는 컬러가 가진 본성 때문이다. 우리의 뇌에서는 본질적으로 서로 다른 전자파의 파장을 해석하는데, 이는 우리 각자에게 전부 다르게 나타난다.

HSL(색조, 채도, 명도)

디자이너에게, 컬러의 진정한 아이덴티티는 색조가 되어야 한다.

본 글에서 우리는 HSL 컬러 시스템을 사용하여 색을 결정할 것이다. HSL은 색조, 채도, 명도를 의미한다. 이 시스템을 먼셀 컬러 시스템 다이어그램에 적용하여 그려보았다.

다른 컬러 모델들이 어떻게 작용하는지 보고 싶다면, 여길 참고하시길. https://en.wikipedia.org/wiki/HSL_and_HSV

컬러 네이밍

창의적이고 독창적으로 컬러 이름을 짓는 것이 가장 확실함에도 불구하고, 사용성을 위해 표준 명칭이 있다. 컬러 명칭은 체계적이고 확장 가능하게 지어져야 한다. 예를 들면, 우리는 이미 확립된 체계를 활용하여 이해하기 쉽게 정할 수 있다.

색조 휠을 12개의 범주로 나눈 후 각각에 이름을 붙여보았다.

위 범주와 타입페이스(특히 폰트 무게 같은 요소들)에서 파생된 영감을 기반으로 다른 컬러마다 숫자적인 시스템을 효과적으로 만들어낼 수 있다. 폰트 무게가 숫자로 쓰이듯이. 100, 200, 300, 500, 700, 800… 구별 가능한 특징으로써, 우리는 다른 톤에도 숫자를 도입할 수 있다. 이 숫자는 얼마나 밝고 어두운지를 감별하는 데에 사용될 수 있다.

10-100의 척도를 사용하는 것은 가장 간단한 방법이다. 보라색-10은 보라색-50에 비교하면 밝은 색상일 것이다. 이러한 접근의 친밀성은 시스템이 예측 가능한 방향으로 성장할 수 있음을 보여준다.

5.확장 가능성

위 접근 방법에 따르면, 컬러 시스템은 확장 가능하다. 그 어떤 색조도 시스템화 가능하다. 우리는 위에서 언급한 범주 내의 모든 색상을 이름지을 수 있고, 명도에 따라 달라지는 각각의 톤도 이름지을 수 있다. 미래에 더 많은 톤이 필요하다면, 숫자 시스템을 활용하면 될 것이다. 그림으로 표현해보았다.

모든 컬러는 이름 붙이기 쉬워지고, 기억하고 활용하기도 쉬워질 것이다.
 

6.배운 점

본 글의 두 번째 파트에서, 나는 이 모든 사례를 적용하고 접근 가능하며 체계적이고 확장 가능한 컬러 시스템을 만들 것이다. 어떤 테크닉들이 톤을 찾고 일관된 컬러 팔레트를 만드는 데에 사용될 수 있는지 더 깊이 탐구할 것이다.