인간의 눈으로 보는 컬러 디자인 시스템
컬러에 대한이해
피그마로 직접 그린 이미지각각의 색상을 색상휠로 구분하여 사용하는 방법중 HSL, HSB, HSV등이 있다.
색상을 표현하는 방법중 HSL( hue, saturation, lightness )을 기준으로 보면 색을 결정하는 요소는 hue인것을 알수 있다.
hue의 컬러휠 빨간색 0도 기준으로 360도까지 노란색, 녹색, 파란색, 자주색등으로 배치되어 있다.
왼쪽의 컬러휠은 15도 간격으로 각각의 색상을 배치한 것이고 오른쪽은 각 색상이 인간의 눈에 어느정도의 밝기로 보이는지를 헬름홀츠의 이론을 바탕으로 수치화하여 나열해보았다.
밝기값을 고정하였지만 각각의 색상이 사람의 눈에는 다르게 보이는것을 볼 수 있다.
영-헬름홀츠 색각설은 망막에 빨강, 초록, 파랑의 세 가지 색깔 지각 요소가 있다는 학설이다. 이 이론에 따르면 다른 색깔의 지각은 이들 요소의 복합된 자극으로 일어난다. 세 요소 중 어느 하나가 결핍되거나 없으면 해당 색깔 또는 그것이 특정 부분을 이루는 관련 색깔을 지각할 수 없고, 또한 그것이 특정 부분을 이루는 다른 색깔을 잘 인식하지 못하게 된다. ( https://ko.wikipedia.org/wiki/영-헬름홀츠_색각설)
최근 필자가 이러한 색의 밝기를 수치화 하기까지 굉장히 오랜 시간이 걸렸다.
왜냐하면 디자인툴에서 사용하는 색, 디스플레이에서 사용하는 색, 인간의 시각이 사용하는 색등 색에 대한 많은 이론들에 대해 공부해야 했고 또, 이를 각각의 색공간을 변환하는 공식에 대해서까지 공부해야 했기 때문이다.
피그마로 직접 그린 이미지위의 이미지는 조명을 기준으로 하여 광속, 광도 조도, 휘도를 시각화하여 표현한 이미지이다.
광속 ( Luminous Flux )
조명이 모든 방향으로 방출하는 빛의 양
광도 ( Luminous Intensity )
조명에서 특정 방향으로 나오는 빛의 양
조도 ( Illuminance )
조명으로 부터 나온 빛이 물체에 전달받는 빛의 양
휘도 ( Luminance )
조명의 빛이 물체에 반사되는 빛의 양
위에 나열한 요소들을 바탕으로 보면 인간이 실제 눈으로 보게 되는 색은 휘도와 관련이 있다는 것을 알 수 있다.
피그마로 직접 그린 이미지위의 이미지는 에어비엔비 디자인 시스템중 각 컬러에 대해 사람의 눈으로 보았을때 어느정도 밝기로 보여지는지 계산된 값들이다.
텍스트에 사용되는 우측 색상 두가지를 제외하면 나머지 3가지 색상이 각각 71.1%, 67.7%, 71.5%로 비슷한 밝기의 범위에 위치하는것을 볼 수 있다.
이를 통해 에어비엔비에서도 컬러 디자인 시스템을 만들때 인간의 눈으로 보는 밝기에 대한 고민들을 엄청 많이 했을거라 필자는 추측한다.
피그마로 직접 그린 이미지색의 밝기를 계산하는 과정을 필자의 주관적 기준으로 3가지 단계로( 준비, 색변환, 밝기 계산 ) 나누었다.
1. Red, Green, Blue 준비 단계
https://m.blog.naver.com/1799aaa/221592096519인간의 망막은 빨강, 초록, 파랑의 세가지 색깔을 지각하는 요소로 구성되어 있는 이론을 기준으로 데이터 생성
2. 색상별 변환
http://rapapa.net/?p=3406sRGB → LinearRGB : 사람의 눈은 어두움에 민감함. 어두운 컬러에는 많은 비트 영역을 할당, 밝은 영역은 적은 비트 영역을 할당하여 변환
https://ko.wikipedia.org/wiki/CIE_1931_색_공간LinearRGB → XYZ : 사람이 인식할 수 있는 색으로 정량화
https://thiscolorhamoney.blogspot.com/2019/06/cie-lab.htmlXYZ → LAB : L축은 인간이 느끼는 밝기에 해당하도록 설계. A는 초록색과 빨간색의 관계. B는 파란색과 노랸색의 관계
https://m.blog.naver.com/my2jins/10000253130LAB → LCH : L( Luminance ), C( Choroma ), H( Hue )로 구성. 3차원의 색을 평면 데이터로 표시
3. 밝기 계산
색상 밝기 계산 공식
피그마로 직접 그린 이미지위의 이미지는 앞서 설명한 에어비엔비의 3가지 컬러를 3단계의 과정을 거쳐 사람의 눈으로 보았을때의 밝기값을 구한것이다.
일련의 과정을 통해 인간의 시각에 맞는 컬러 디자인 시스템을 만든다는게 무척 힘들다는것을 몸소 체험하게 되었다.
기회가 된다면 인간의 시각에 맞는 컬러 디자인 시스템을 구축하고자 하는분들을 위해 그동안 학습한 내용들을 토대로 간단하게 검증할 수 있는 프로그램을 만들고자 한다.
언제가 될지는 모르겠지만 올해안에 만드는것을 목표로 짬짬이 진행하고자 한다.
