컬러값은 맞는데, 그라디언트는 왜 어색할까?

*원문을 번역한 글입니다.

*원문은 발행 이후 수정될 수 있으며, 본 번역은 발송 시점 기준으로 작성되었습니다.

저는 제 경력 내내 수많은 색상 팔레트를 만들고 다양한 색상과 그라데이션을 선택해 왔습니다. 그런데 너무나 흔했던 문제는 아름다운 그라데이션을 디자인하려고 애쓰면서, 마치 부드럽고 풍부한 전환을 만들어낼 것처럼 보이는 두 가지 강렬한 색상을 고르는 것이었습니다.

대신, 정중앙에 칙칙하고 색감이 바랜 진흙 같은 띠가 나타납니다. 헥스 코드를 이리저리 만져보고, 슬라이더를 조절해 보지만 결국 "이 정도면 괜찮네"라는 결과에 만족하게 됩니다.

제 말이 무슨 뜻인지 보여드리기 위해 이것을 보세요.

이 두 가지 그라디언트는 모두 동일한 의도에서 시작합니다.

짙은 파란색에서 연한 파란색으로 부드럽게 전환됩니다.

하지만 그중 하나만이 당신이 예상하는 대로 작동합니다. 나머지 하나는요? 바로 당신의 색상 선택기가 지금까지 계속 보여주었던 색상입니다.

색감에 대한 감각이 부족한 것이 아니라, 색감을 선택하는 기준에 문제가 있는 것은 아닐까요?

Figma, Photoshop, Illustrator, 심지어 운영체제 색상 선택기까지, 여러분이 사용해 본 모든 디자인 도구는 색상을 질서정연한 무언가로 표현합니다. 깔끔한 원, 완벽한 정사각형, 모든 방향이 수학적으로 동일한 것처럼 느껴지는 RGB 큐브처럼 말이죠.

그렇지 않아요.

그 기하학적 구조는 화면의 물리적 특성에서 비롯된 것이지, 지각의 물리적 특성에서 비롯된 것이 아닙니다. RGB 는 디스플레이가 빛을 방출하는 방식을 기반으로 구축된 것이지, 인간이 빛을 경험하는 방식을 기반으로 한 것이 아닙니다. 이 두 가지는 전혀 다른 시스템입니다.

당신의 시각은 애초에 불균형하게 설계되어 있습니다. 초록색의 작은 변화는 파란색의 비슷한 변화보다 훨씬 더 크게 느껴집니다. 빨간색과 마젠타색은 강도가 빠르게 변할 수 있는 반면, 노란색과 청록색은 선형 RGB 좌표에 깔끔하게 대응되지 않는 방식으로 움직입니다.

따라서 RGB 공간을 이동할 때, 균일하게 이동하는 것이 아닙니다. 숨겨진 압축과 왜곡이 있는 지형을 가로지르는 것입니다. 어떤 영역은 늘어나고, 어떤 영역은 수축합니다. "형태"가 제대로 잡히지 않는 것입니다.

그래서 그라데이션이 깨지는 겁니다. 숫자상으로는 균등하게 간격이 있는 것처럼 보이는 두 색상이 시각적으로는 불균형하게 느껴질 수 있는 이유도 바로 그 때문입니다.

완벽한 정사각형 뒤에 숨겨진 불편한 진실

우리가 잘 알고 있는 RGB 큐브는 모니터 하드웨어의 물리적 원리에 기반한 것이지, 인간 시각의 생물학적 원리에 기반한 것이 아닙니다. 즉, "+10 빨간색" 변화가 "+10 녹색" 변화와 우리 눈에 완전히 똑같이 보인다고

가정하는 것이죠. 하지만 실제로는 그렇지 않습니다.

우리 눈은 카메라 센서처럼 정밀하게 조정되어 있지 않습니다. 눈은 녹색의 변화에는 매우 민감하지만 파란색의 변화에는 상대적으로 둔감합니다. RGB 값에서 균일한 수치 변화처럼 보이는 것도 우리 눈에서는 불규칙적인 시각적 변화로 인식되는 경우가 많습니다.

이것이 바로 "큐브"라는 용어가 오해를 불러일으키는 이유입니다. 실제로 큐브는 거리가 일정하게 느껴지는 공간이 아닙니다. 거리가 코드상으로만 일정할 뿐, 실제 지각에서는 일정하지 않은 공간입니다.

디스플레이가 실제로 사람의 눈에 어떻게 보이는지 시각적으로 표현하려고 하면, 그 모양은 더 이상 정육면체처럼 보이지 않습니다. 보는 사람의 시각이 해당 색 영역에 얼마나 민감한지에 따라 어떤 방향으로는 불균등하게 확장되고, 어떤 방향으로는 압축되는 것처럼 보입니다.

인간의 시각을 기준으로 표준 화면의 실제 시각적 도달 범위를 그래프로 나타낸다면 , 정육면체 모양과는 전혀 다르게 보일 것입니다. 오히려 붉은색과 파란색 영역에서는 두껍고 노란색과 청록색 영역에서는 좁고 흐릿한, 울퉁불퉁하고 불규칙한 덩어리처럼 보일 것입니다.

기묘하고 아름다운 덩어리, OKLCH를 만나보세요.

이 복잡한 영역을 탐색하는 더 나은 방법이 있습니다. 바로 OKLCH라는 색 공간인데, 이는 우리가 실제로 색을 느끼는 방식을 나타낸 지도입니다 .

OKLCH는 색상을 경직되고 부정확한 틀에 억지로 끼워 넣는 대신, 인간의 지각을 기반으로 3차원으로 색상을 표현합니다.

밝기(인지된 밝기)

크로마(인지되는 강도 또는 채도)

색조(실제 색상 각도)

여기서 놀라운 점은 좌표가 사용자의 시각 에 맞춰 조정되기 때문에 Chroma에서 "10포인트"만큼 수학적으로 조정하면 지도 전체에서 동일한 변화처럼 보인다는 것입니다.

OKLCH에서 그라디언트를 만들 때, 더 이상 색상을 시각적 움푹 패인 곳으로 끌어당기는 것이 아닙니다. 색상 간의 거리가 눈으로 직접 측정되는 공간을 부드럽게 통과하는 것입니다. 그 결과, 시작부터 끝까지 생생한 색감을 유지하고 중간에 흐릿한 회색 영역이 생기지 않는 매우 매끄러운 그라디언트가 만들어집니다.

추측과 검증을 통한 디자인의 종말

우리는 "균형 잡힌" 색상 팔레트를 만들려고 헥스 코드를 뚫어져라 쳐다보며 민망할 정도로 많은 시간을 허비합니다. 노란색이 파란색만큼 "진하게" 느껴지도록 밝기를 높이고 채도를 낮추려고 애씁니다.

OKLCH에서는 이것이 풀린 수학 방정식이 됩니다. 명도와 채도가 완벽하게 균일한 10가지 색조 팔레트를 원한다면 예리한 눈이 필요한 것이 아니라 일관된 수치만 있으면 됩니다. 균일성은 시스템 자체에 내재되어 있습니다.

여기에는 또 하나의 조용한 장점이 있습니다. OKLCH는 현재 모니터에서 표시할 수 있는 작은 직사각형 색상 영역(sRGB 색역)에 국한되지 않습니다. 인간이 볼 수 있는 모든 색상을 포괄하도록 설계되었습니다.

지금 여러분은 마치 방 안에 도구가 여기저기 흩어져 있는 것처럼, 필요 이상으로 좁은 공간에서 디자인 작업을 하고 있습니다. 하지만 Display P3와 더 넓은 색 영역을 지원하는 모니터가 보편화됨에 따라, RGB 큐브 밖에 갇혀 있던 색상들도 마침내 표현 가능해질 것입니다. OKLCH 색 영역을 사용하고 있다면, 이미 미래 화면의 기본 언어를 구사하고 있는 것입니다. 이 문제를 계속해서 접한 끝에, 결국 OKLCH에서 직접 작동하는 간단한 색상 팔레트 편집기를 만들게 되었습니다.

지각 색 공간에서 작업해 본 적이 없다면, 이는 그라데이션과 팔레트를 구성하는 훨씬 더 정직한 방법입니다.

단순히 글로 읽는 것보다 직접 그 차이를 느껴보고 싶다면, Rhex를 사용해 보세요 . 더욱 편리한 삶을 누릴 수 있습니다.

원문 출처: https://medium.com/illumination/your-color-picker-is-lying-to-you-and-its-ruining-your-gradients-60298642baa5

DEET를 구독하고 커리어 성장을 위한 작은 습관을 시작해 보세요.