컬러에 대한 재접근
ColorBox.io로 컬러 시스템을 구축하는 새로운 방법
(출처 : [Re-approaching Color]의 기사를 번역 및 가공한 콘텐츠입니다.)
색상은 우리가 세상을 인식하는 방법에 도움이 되며, 예측하고, 이해하고, 결정하도록 안내합니다.
우리는 어렸을 때부터 적색을 보고 멈추고 초록색을 보고 긴장을 풀었습니다.
검정 텍스트를 회색 텍스트보다 먼저 읽고, 파란색 링크를 클릭했습니다.
컬러는 어떻게 우리의 프로덕트를 경험할지에 대해 깊게 관여하고 있습니다.
한 서비스의 컬러 시스템은 매우 단순하게 보이지만 프로덕트가 성장함에 따라 믿을 수 없을 정도로 복잡해집니다.
한 번에 수천 명의 사람들이 제품을 만드는 것은 컬러 시스템에 대한 의존도를 높입니다.
우리의 기존 컬러 시스템은 제대로 작동하지 않았습니다.
우리는 컬러 시스템에 색다른 변화가 필요하다는 것을 깨달았고, 그렇게 하기 위해 바닥부터 시작해서 기존에 컬러 시스템에 대해 알고 있던 모든 것을 폐기해야 했습니다.
색상 이름 지정
Lyft에서 사용하는 색상을 살펴보니 컬러 시스템에 대해 많은 실험적인 시도를 했던 흔적을 발견할 수 있었습니다.
달색, 콘크리트 색과 같은 색 이름은 모두 회색 음영을 가리키며 자색 및 보라색과 같은 서로 다른 색상 이름들이 비슷한 자줏빛의 색상 이름으로 쓰이고 있었습니다.
특히 아이코닉한 Lyft 분홍은 Google 제품 전반에 걸쳐 15가지 유사한 분홍색이 사용되고 있었습니다.
처음 이 프로젝트를 시작했을 때 색상에 대한 네이밍이 고정되지 않고 여러 방식으로 불리고 있는 이유를 찾으려 노력했고, 이 프로젝트를 성공하기 위해서는 디자이너와 엔지니어가 색상에 관한 일반적이고 공통된 어휘를 사용할 수 있도록 해야 했습니다.
관찰을 통해 사람들이 색상에 관해 이야기할 때 두 가지 기본 요소가 포함된다는 사실을 알게 되었습니다.
색상환의 공간을 가리키는 색조에 대한 언급이 있었고 그 색상의 밝기 또는 어둡기의 정도를 가리키는 수식어가 있었습니다.
사람들은 밝은 파란색, 진한 녹색, 진한 빨간색 등으로 수식어(밝기 혹은 어둡기)+색조를 통해 색상을 이야기합니다.
우리는 배우기 쉽고 효율성이 높은, 색상을 위한 언어를 만들려고 노력했습니다.
간단하게 만들기 위해 사람들의 기존 색상 지식을 활용하여 색조를 표현할 수 있도록 파란색, 녹색 및 빨간색과 같은 직관적인 색상 용어를 사용했습니다.
더 복잡한 색상의 경우 민트, 청록색, 장미 등과 같이 쉽게 배우기 쉽고 짧고 철자가 쉬운 단어를 사용했습니다.
우리는 이 색상 시스템이 꽤 오랫동안 지속될 수 있다는 점도 고려해서 전체 색상 범위를 커버할 수 있도록 설계했습니다. 앞으로 Lyft가 브랜드 색상을 변경하는 경우에도 360° 색상에 대한 이름이 있으므로 이 시스템을 변경할 필요가 없습니다.
추후 새로운 색조를 추가해야 하는 경우 기존 시스템의 색상 이름을 결합하여 사용하고 전체 색상 시스템을 수정할 필요가 없도록 설계했습니다. (예 : red-sunset or pink-purple)
직관적으로 설정할 수 있었던 색조 이름과 달리 밝음과 어두움을 표현하기 위해서는 선택할만한 좋은 명명 시스템이 없었기에, 밝기를 표현하기 위해선 숫자를 이용해 0에서 100까지의 간단한 스케일로 표현하도록 만들었습니다.
0은 가장 가벼운 색상이고 100은 가장 어두운 색상입니다.
사람들에게 색의 이름과 밝기의 두 가지 간단한 요소를 알려줌으로써 우리는 우리만의 색상 언어를 가지게 되었습니다.
이제 '빨간색 60'이 들리면 중간 정도의 빨강임을 알 수 있습니다. 또한 밝은 빛의 파란색을 보면 '파란색 10'이라고 생각할 수 있습니다. 해당 명명 시스템을 통해 색상을 합리적이며 정확하게 표현할 수 있습니다.
색상 선택하기
컬러 시스템을 사용할 때는 거의 모든 디자이너가 Illustrator, Photoshop 또는 Sketch와 같은 디자인 툴을 열고, 색상을 선택하고, 일부 오버레이 방법을 사용하여 밝고 어두운 변형을 통해 색상을 선택합니다.
이 방법은 쉽고 단기적으로는 사용하기 좋지만, 장기적으로 일관된 톤 앤 매너를 구축하기는 어려웠기 때문에 우리는 다른 방법을 찾아야 했습니다.
우리는 수학적 방식의 도움을 받아 프로그래밍으로 색상 세트를 생성할 수 있는 방법을 살펴보았지만 결과에 만족할 순 없었습니다. 특정 색조에 대해서는 괜찮은 결과를 얻을 수 있었지만 다른 색조에 같은 방법을 적용했을 때 그 결과는 좋지 않았기 때문입니다.
동일한 방식을 사용한 파랑색 및 노랑색 그라데이션. 파란색 세트는 노란색 세트보다 어두운 색에서 층이 더 명확합니다.우리는 이런 결과를 얻는 이유가 색이 배치되어 있는 색 공간의 차이 때문이라는 것을 깨달았습니다.
일반적인 숫자를 조절해서 색상을 조정하는 프로그래밍 방식을 사용하면 색상 공간을 단 한 가지 방식밖에 계산할 수 없었기 때문입니다.
노랑이나 초록보다 파랑이나 빨강이 더 멀리있음을 알 수 있습니다.우리는 이 발견을 새로운 시도를 할 수 있는 기회로 보고 컬러 세트에서 필요한 것을 스스로에게 물었습니다.
그 답은 통제였습니다.
우리가 원하는 것은 밝은 색과 어두운 색의 균일한 분포도 대신에 밝은 색상과 어두운 색상, 그리고 약간의 중간 색상값이 필요했고, 해당 색조와 채도에 대한 통제력이었습니다.
기존의 프로그래밍 방식의 색상 생성 도구를 살펴보면, 거의 모든 색상이 고정된 비율로 진행되어 밝은 색상과 어두운 색상이 균일하게 분포하고, 몇몇의 작은 부분에서만 채도와 색조가 변경됩니다.
그래서 우리는 위의 상황들을 고려한 자체 색상 생성 알고리즘을 만들기로 결정했습니다.
컬러 박스(https://www.colorbox.io/) 사용하기
색상은 3차원, 색조(hue, 아래), 채도(saturation, 오른쪽) 및 광도 또는 값(luminosity, 왼쪽)으로 3D에서 가장 잘 표현됩니다.
이 상자에는 가능한 모든 색상이 표시됩니다.
어떤 알고리즘과 마찬가지로 출력 값을 만들기 위해서는 입력값을 제공해야 합니다.
이 알고리즘은 하나의 색상에 대한 색상 세트를 생성하도록 제작되었으며 전체 색상 시스템을 구현하려면 각 색상에 대해 알고리즘을 반복해야 합니다.
1) 값을 입력할 때, 우리는 이 색상에서 얻고자 하는 음영의 수를 세팅할 필요가 있습니다.
Lyft에서는 색상 0, 색상 10, 색상 20... 100까지 각 색상에 11단계가 있습니다.
얻고자 하는 색상 세트의 단계 수를 설정했다면, 이제 색상의 범위를 제공해야 하므로 시작 값 0°-359°와 끝 값 0°-359°를 입력해야 합니다. (색조에 따라 빨간색 같이 작은 범위이거나 노란색 같이 큰 범위 일 때가 있고 색조 범위는 선호도에 따라 다를 수 있습니다.)
2) 일단 어떤 색조를 어떤 단계로 표현할 것인지를 정했다면, 그다음엔 채도 값을 설정해야 합니다.
채도 값을 높이 설정해서 컬러감이 풍부한 색상을 얻을 수 있고, 반대로 채도를 감소시켜 그레이 스케일의 색상을 구현할 수도 있습니다.
3) 마지막으로 입력해야 하는 값은 광도 값입니다.
광도는 0-100 사이 값이라는 점에서 채도와 유사하게 작동합니다. 광도를 조절할 때 다른 축의 점들도 움직이는 것을 볼 수 있습니다. 색상이 3D 환경에 있으므로 모든 색상들이 밀접하게 연결되어 있기 때문입니다.
위의 모든 입력 값을 얻으면 알고리즘은 색상 세트를 생성합니다.
이 알고리즘은 색조(hue), 채도(saturation) 및 광도 또는 값(luminosity)을 통해 색을 만듦으로써 이전에 컬러 시스템을 만들때 종속되어 있던 특성들을 제거할 수 있습니다.
해당 알고리즘을 사용하면, 새로 온 디자이너가 작업을 하거나 디자인 툴 또는 모니터를 변경하더라도 동일한 색상값이 나타나고, 또한 필요한 색상을 신속하게 수정하거나 확장할 수 있으므로 컬러 시스템의 유지보수에 좋습니다.
우리는 색상 작업에 대한 지식을 공유했으며 색상 알고리즘을 오픈 소싱하고 있습니다.
그리고 이 색상 알고리즘을 사용하고자 하는 모든 팀이 쉽게 사용할 수 있게 하기 위해 colorbox를 웹 툴로 제공하고 있습니다.
감사합니다!
