컬러를 정하는 방법

"분명 맞게 칠했는데, 왜 누렇게 보일까?"

솔직히 아무것도 모르는 상태로 컬러를 정하는건 정말 어렵다. 
비전공자 출신들은 물감을 써본것도 아니기 때문에 색
깔의 미세한 차이를 느끼는건 너무나도 힘든일이다.

이번에, 포트폴리오에 쓰일 프로젝트를 정리하는 와중,
더블모니터의 컬러로 볼땐 괜찮은게 맥북에서 보니 완전히 누렇게 떴다.
정한 컬러가 누렇게 뜨는 것 같은 느낌이 들었다. 
느낌은 그렇다 하고, AI에게 물었다.


나의 현재의 느낌을 말하기전, 화면을 보여주면서 컬러에 대해 어떠냐고.
( AI에겐 답을 미리 암시하듯 하면, 편향이 적용되어, 내가 듣기 좋은 말을 하기에 답을 알려주지말자)
답은, 역시 채도의 문제가 있다는 이야기를 했다. 

supabase와 Linear의 컬러사용 분석

이전에 컬러를 정할 때, 비슷한 레퍼런스의 컬러들이 중성색 위의
유채색 컬러를 섞어서 쓰길래, 그렇게 해봤는데,그정도에서 이해하고 
바로 비슷하게 색을 잡다 보니, 색 끼리 간섭에 대해선 생각도 하지 않았다.

 
여백이나 간격도 마찬가지만, 색은 눈에 보면 바로 보인다.
디자인은 이러한 것들이 모여 엉성해지고 정리가 되지 않는 듯한 느낌을 준다. 

(이럴때 보면, 그림을 조금이라도 공부하면 좋을걸이라는 생각이든다. 
색을 보는 감각, 즉 눈의 감각이 넓어질텐데 말이다. 늦지 않았으니, 이건도 취업후에는 그림을 공부해야겠다. )

 

---

회색이 회색으로 보이지 않는다!

여튼, 문제를 발견했기 때문에 아래와 같은 워크플로우를 실행하기로 했다. 

 

이전에 Linear나, Supabase와 같은 백엔드 서비스들을 레퍼런스로 삼았지만, 
확실히 위계가 명확히 보이는 고채도 서비스는 노션이라는 생각이 들어, 
노션을 레퍼런스로 삼았다. 

확실히 노션은, 위계도 분명하고, 회색컬러를 주로 쓰는데도, 회끼가 들지 않는다. 
각 컬러들을 picker로 수집해 역할을 나열해주었다.

보통 나는 색의 조합을 알기 위해 HEX코드가 아닌 더 보기 쉬운 RGB값을 본다.
그렇게 보면 어떤 컬러로 향하는지에 대해 대략 알 수 있다. 

R+G = YELLOW
G+B = CYON
B+R = MAGENTA
R+G+B = WHITE

RGB는 빛의 삼원색이기 때문에 인쇄에서쓰이는 컬러인 CMYK와 다르게 흰색이된다.
각각의 컬러가 어느정도의 비율로 섞여있는지에 따라서, 조금더 빨간 노랑이 될 수 있고 연두색에 가까운 노란색이 될 수있다. 

우리 배운 분들은.. 이를 용어로 이야기 하겠지만, 
(레드쪽으로 간다면,Golden Yellow(골든 옐로우), Amber(앰버), 또는 Orange-Yellow, 만약 그린쪽으로 간다면Chartreuse(샤르트뢰즈), Lime Yellow(라임 옐로우), 또는 Lemon Yellow 고상해지기위해 gemini의 도움을 받았다.)

 

노션은 중성색을 쓰지만, 텍스트 컬러는 R+G를 더 높게 잡고 R을 높게 쓰는 따뜻한 느낌을 주었다. 
이는 거의 갈색에 가까운 컬러이기에 종이책이나, 나무와 같은 느낌을 줘 편안함을 준다.

물론 나의 포트폴리오인 관제에는.. 블루 컬러가 더욱 맞기에, 컬러의 조합을 어느정도 떨어뜨리는지에 대해 확인하고, 
gemini와 또 신나게 이야기 했다. 그중 재밌는건, 우리가 각각의 컬러들을 10,20,30 이렇게 아토믹하게 나누는데, 
이를 위해서 색의 상태를 HSL로 하여 LIghtness 를 통해 나열해보라는 것이였다.

노션의 LIGHTNESS

이렇게 노션을 나열해보니, 단계가 수치화 되어 보이기 시작했다. 명도가 어느정도 차이가 나는지 퍼센테이지로 보이게 되니, 
지금의 내 것과 비교하면서, 무엇이 잘못되었는지를 확인하는게 가능했다.

나의 포트폴리오 LIGHTNESS

헌데,, 문제는 광도의 정도는 크게 다르지 않다는 것이다. 
이에 다시한번 대화를 하는데, 현재 설정되어있는 HUE의 각도가 다르지 않냐는 것이었다.
실제로 BG컬러와 텍스트컬러의 HUE의 각도가 제각각이었다.

근데...! 노션은 HUE가 다다른데..??

색상과 채도 전략을 사용하자

노션은 hue가 모두 다른 이유에 대한 gemini의 대답

노션은 배경과의 색상차를 통해 진출색인 따뜻한 색을 활용해 아이콘과 텍스트를 조금 더 또렷하게 보이는 전략을 취했다. 
즉 의도적으로 색온도를 조절한것인데 우리의 도메인은 관제사가 높은 시인성과 피로도를 낮추는 도메인이기에 해당 전략보다는 
채도를 조절해, 오히려 배경과 잘 어울릴 수 있도록 하는 전략을 세우도록 했다. 

여기서 HUE의 각도는 우리가 흔히 보는 색상휠의 대한 정보다.  보통 시계반대방향으로 각도를 재서 0도부터 돌아가는것이다.

따라서,  각각의 컬러의 HSL의 SATURATION을 조절하여, 기존 컬러를 교체하기로 하였다. 
컬러의 조정은 아래와 같은 규칙을 지기로 했다. 물론 이수준에서 조금 더 자유롭게 조절도 괜찮다. 

hue를 고정한채 saturation만을 조절한 컬러 위계 정렬에 대한 Gemini의 제안

test color를 스타일에 등록하고, 이를 활용해 기존에 있던 하나의 화면을 가져와 테스트 하기로 했다.

위가 before 이고, 아래가 after이다.

기존의것을 전부 조정하는 바람에 사라져서, gemini에게 준 이미지 버전밖에 없다.
gemini에게도 이전것과 이후것에 대해 이야기 하지않고 어떤것이 괜찮냐에 대해 물었을때 after 버전으로 골라주었다. 
내가 봤을 때도 기존에는 BG컬러가 중성색임에도
그 위에 올라오는 각종 면색과의 간섭으로 상대적으로 화면이 노랗게 나왔음을 알수있다. 

 

감각이 부족하다면 논리를 세우자

앞으로도 컬러를 짤때도 HI-FI PROTOTYPE을  만들어보고,
컬러를 여러가지를 두고 시험해보는 식으로 테스팅을 진행하면서
더 디벨롭하는 것을 생각해봐야겠다. 미세한 차이지만, 이것이 모여 전체를 판가름한다. 

다시 복기하자면 이렇다.

 

컬러문제가 될때의 워크플로우

1. 문제가 되는 컬러의 문제를 정의한다.
2. 이미 명확하게 잘 보여주는 레퍼런스를 통해 컬러정보를 수집한다. 
3. 컬러를 나열하고, 해당 컬러들이 어떤 성격과 전략을 띄고 있는지 분석한다. 
4. 분석한 전략을 통해 적용할점과 아닌점들을 통해 나의 컬러에 적용한다. 
5. 하이파이 프로토타입을 통해 전과 후를 비교 테스팅한다.
6. 실패한경우 2번으로 회귀한다.