Oklab 색 공간 창시자 Björn Ottosson과의 인터뷰 — Smashing Magazine

Oklab은 스웨덴 엔지니어 Björn Ottosson이 만든 모든 주요 브라우저에서 지원되는 새로운 지각 색상 공간입니다. 이 인터뷰에서 Philip Jägenstedt는 Björn이 Oklab을 만든 방법과 이유, 그리고 생태계 전체에 확산된 방법을 살펴봅니다.

메모: 원래 인터뷰는 스웨덴어로 진행되었으며 시청 가능.

비요른 소개

필립 야겐슈테트: 당신에 대해 좀 말해주세요, Björn.

비요른 오토손: 저는 FIFA, Battlefield, Need for Speed와 같은 게임 엔진과 게임 업계에서 수년간 일했습니다. 저는 항상 기술과 예술과의 상호 작용에 관심이 있었습니다. 저는 엔지니어이지만 항상 이 두 가지 관심사를 모두 갖고 있었습니다.

색상 작업에 대하여

필립: 색상에 대해 깊이 파고들지 않은 사람에게 색상 작업이 뭐가 그렇게 어렵나요?

비요른: 직관적으로 색상은 매우 단순해 보일 수 있습니다. 색상은 더 밝을 수도 있고 더 어두울 수도 있고, 파란색에 가까울 수도 있고 녹색에 가까울 수도 있습니다. 일반적인 색각을 가진 모든 사람은 색상에 대해 상당히 유사한 경험을 하며 이는 모델링될 수 있습니다.

그러나 소프트웨어에서 색상을 조작하는 방식은 일반적으로 인간의 색상 인식과 일치하지 않습니다. 가장 일반적인 색 공간은 sRGB입니다. 색상을 선택하는 데 일반적으로 사용되는 HSL도 있지만 sRGB를 기반으로 하기도 합니다.

sRGB의 한 가지 문제점은 파란색과 흰색 사이의 그라데이션에서 전환 중간에 약간 보라색이 된다는 것입니다. 그 이유는 sRGB가 실제로 눈이 색상을 보는 방식을 모방하기 위해 만들어지지 않았기 때문입니다. 오히려 그것은 어떻게 하느냐에 달려 있습니다. CRT 모니터 일하다. 즉, 빨간색, 녹색, 파란색의 특정 주파수와 함께 작동한다는 의미입니다. 감마라고 불리는 비선형 코딩. 그것이 작동하는 것은 기적이지만 색상 인식과는 관련이 없습니다. 이러한 도구를 사용하면 그라데이션에 보라색과 같은 놀라운 결과가 나타나는 경우가 있습니다.

그라데이션에 보라색 — 이미지 출처: 소프트웨어에서 색상이 잘못되는 방법. (큰 미리보기)

색상 인식에 대하여

필립: 인간은 어떻게 색을 인지하는가?

비요른: 빛이 눈에 들어와 망막에 닿으면 여러 뉴런 층에서 처리되어 정신적인 인상을 생성합니다. 프로세스가 단순하고 선형적일 가능성은 낮지만 그렇지 않습니다. 그러나 놀랍게도 대부분의 사람들은 여전히 색상을 비슷하게 인식합니다.

사람들은 색상을 이해하려고 노력해 왔으며 수백 년 동안 색상환과 유사한 시각화를 만들어 왔습니다. 20세기에는 컬러 비전에 대한 많은 연구와 모델링이 진행되었습니다. 예를 들어, CIE XYZ 모델은 우리의 광수용체 세포가 다양한 빛의 주파수에 얼마나 민감한지를 기반으로 합니다. CIE XYZ는 여전히 다른 모든 색상 공간의 기반이 되는 기본 색상 공간입니다.

XYZ를 기반으로 인간의 인식과 일치하는 간단한 모델을 만들려는 시도도 있었지만 결과적으로 모든 색각을 그런 식으로 모델링하는 것은 불가능했습니다. 색상에 대한 인식은 엄청나게 복잡하며 무엇보다도 실내가 어둡거나 밝은지 여부와 반대되는 배경색에 따라 달라집니다. 사진을 볼 때 광원의 색상이 무엇이라고 생각하느냐에 따라 달라지기도 합니다. 드레스 상황에 따라 크게 달라지는 색각의 전형적인 예입니다. 이를 완벽하게 모델링하는 것은 거의 불가능합니다.

이러한 모든 복잡성을 고려하려는 모델을 모델이라고 합니다. 색상 외관 모델. 다양한 응용 프로그램이 있지만 시청자가 밝은 방에 있는지, 밝은 방에 있는지 또는 기타 시청 조건에 있는지 알 수 없으면 그다지 유용하지 않습니다.

이상한 점은 sRGB 및 HSL과 같이 우리가 일반적으로 사용하는 도구와 훨씬 오래된 연구 결과 사이에 차이가 있다는 것입니다. 1970년대 HSL이 개발되었을 당시에는 컴퓨팅 성능이 별로 없었기 때문에 이는 어느 정도 의미가 있습니다. 따라서 RGB를 상당히 간단하게 변환한 것입니다. 그러나 그 이후로 별로 변한 것이 없습니다.

이제 우리는 훨씬 더 많은 처리 능력을 갖고 있지만 소프트웨어에서 색상을 처리하기 위한 매우 간단한 도구를 선택했습니다.

디스플레이 기술도 발전했다. 이제 많은 디스플레이에는 빨간색이 더 빨간색, 녹색이 더 녹색 또는 파란색이 더 파란색인 서로 다른 RGB 원색이 있습니다. sRGB는 이러한 디스플레이에서 사용할 수 있는 모든 색상에 도달할 수 없습니다. 새로운 P3 색 공간은 가능하지만 sRGB와 매우 유사하며 약간 더 넓습니다.

Oklab 생성에 대하여

필립: 그렇다면 Oklab은 무엇이고, 어떻게 만들었나요?

비요른: 게임 업계에 종사하다 보면 색상을 더 어둡게 하거나 색조를 바꾸는 등 간단한 색상 조작을 하고 싶을 때가 있었습니다. 나는 기존의 색 공간과 그들이 이러한 간단한 작업을 얼마나 잘 수행하는지 조사한 결과 모든 면에서 문제가 있다는 결론을 내렸습니다.

많은 사람들이 알고 있는 내용은 CIE 연구소. 인간의 색상 인식에 매우 가깝지만 색상 처리는 그리 좋지 않습니다. 예를 들어 파란색과 흰색 사이의 그라데이션은 sRGB와 마찬가지로 CIE Lab에서 보라색으로 나타납니다. 일부 색상 공간은 색상을 잘 처리하지만 고려해야 할 다른 문제가 있습니다.

교육과 컨설팅을 추구하기 위해 게임 업계를 그만두었을 때 이 문제를 해결할 시간이 조금 있었습니다. Oklab은 더 나은 균형을 찾으려는 시도입니다. Lab과 유사하지만 “괜찮습니다”.

저는 Oklab을 다른 두 가지 색상 공간에 기반을 두었습니다. CIECAM16 그리고 IPT. 색상 외관 모델인 CIECAM16의 명도 및 채도 예측을 타겟으로 사용했습니다. 실제로 CIECAM16을 만드는 데 사용된 데이터 세트를 사용하고 싶었지만 찾을 수 없었습니다.

IPT는 더 나은 색상 균일성을 갖도록 설계되었습니다. 실험에서 그들은 사람들에게 밝은 색상과 어두운 색상, 채도가 높은 색상과 불포화 색상을 일치시키도록 요청했으며, 그 결과 주관적으로 색상이 동일한 색상을 갖는 데이터 세트가 생성되었습니다. IPT에는 몇 가지 다른 문제가 있지만 Oklab의 색상의 기초입니다.

이 세 가지 데이터 세트를 사용하여 “괜찮은” 간단한 색상 공간을 만들기 시작했습니다. 나는 IPT와 매우 유사한 접근 방식을 사용했지만 이를 CIECAM16의 밝기 및 채도 추정치와 결합했습니다. 결과 Oklab은 여전히 우수한 색상 균일성을 유지하면서도 밝기와 채도를 잘 처리합니다.

필립: Oklab이라는 이름은 어떻습니까? 왜 그냥 괜찮은 걸까요?

비요른: 이것은 약간의 뺨을 맞대고 어느 정도 겸손합니다.

제가 염두에 두고 있던 작업의 경우 기존 색상 공간은 괜찮지 않았으며, 제 목표는 그런 공간을 만드는 것이었습니다. 동시에 더 깊은 탐구도 가능합니다. 대학에서 이 작업을 수행했다면 많은 참가자를 대상으로 연구를 진행할 수 있었을 것입니다. 주로 컴퓨터 및 휴대폰 화면에서 사용하도록 고안된 색상 공간의 경우 해당 색상 공간이 사용되는 일반적인 환경에서 연구를 실행할 수 있습니다. 더 깊이 들어가는 것이 가능합니다.

그럼에도 불구하고 나는 내가 찾을 수 있는 데이터 세트를 선택하고 내가 가진 것을 최대한 활용했습니다. 목표는 사용하기에 적합한 매우 간단한 모델을 만드는 것이었습니다. 그리고 나는 그것이 괜찮다고 생각하고 더 나은 것을 생각해 낼 수 없었습니다. Björn Ottosson Lab이라 부르고 싶지 않아서 Oklab을 선택했습니다.

필립: 이름은 사물을 괜찮다고 부르는 전통을 따르나요? 나도 있는 걸로 알아 꽤 괜찮은 이미지 체재.

비요른: 아니요, 저는 여기서 어떤 전통도 따르지 않았습니다. Oklab은 제가 생각해낸 이름이었습니다.

Oklab 채택에 대하여

필립: 갑자기 모든 브라우저에 Oklab이 나타났을 때 저는 Oklab을 발견했습니다. 웹에서는 일이 느리게 진행되는 경우가 많지만 이 경우에는 일이 매우 빠르게 진행되었습니다. 어떻게 된 일인가요?

비요른: 나도 놀랐다! 나는 썼다 블로그 게시물 그리고 트위터에 공유했습니다.

저는 게임 업계에 많은 인맥을 갖고 있고, 시각 효과(VFX) 업계에도 몇몇 인맥을 갖고 있습니다. 나는 셰이더나 시각 효과 작업을 하는 사람들이 이것을 시험해 보고 일부 게임에서 부드러운 색상 전환을 위한 효과로 사용될 것이라고 예상했습니다.

그런데 블로그 글이 생각보다 훨씬 더 널리 퍼졌네요. 그것은 Hacker News에 있었고 많은 사람들이 그것을 읽었습니다.

Oklab의 코드 길이는 10줄에 불과하므로 많은 오픈 소스 라이브러리에서 이를 채택했습니다. 이 모든 일은 매우 빠르게 일어났습니다.

크리스 릴리 W3C에서 연락해서 Oklab에 관해 몇 가지 질문을 했습니다. 우리는 그것에 대해 조금 논의했고, 그것이 어떻게 작동하는지, 왜 그것을 만들었는지 설명했습니다. 그는 프레젠테이션 그것에 관한 컨퍼런스에서 그는 CSS에 추가하도록 촉구했습니다.

Photoshop은 또한 Oklab을 사용하도록 그라디언트를 변경했습니다. 이 모든 일은 제가 응원할 필요도 없이 유기적으로 일어났습니다.

Oksl에서

필립: ~ 안에 다른 블로그 게시물두 가지 다른 색상 공간인 Okhsv와 Okhsl을 도입했습니다. 이미 HSL에 대해 이야기했는데 Okhsl이 무엇인가요?

비요른: 색상을 선택할 때 HSL은 매개변수 공간이 단순하다는 큰 장점이 있습니다. 색조(H)의 0~360 값과 채도(S) 및 밝기(L)의 0~1 값은 유효한 조합이며 결과적으로 화면에 다른 색상이 나타납니다. HSL의 형상은 원통형이므로 실수로 해당 원통 밖으로 나갈 수 없습니다.

대조적으로, 좋아요 물리적으로 가능한 모든 색상을 포함하지만 존재하지 않는 색상에 도달할 때 작동하지 않는 값의 조합이 있습니다. 예를 들어 Oklab의 밝고 포화된 노란색에서 시작하여 색상을 파란색으로 회전시키면 해당 파란색은 sRGB에 존재하지 않습니다. 더 어둡고 채도가 낮은 파란색만 있습니다. 왜냐하면 Oklab의 sRGB는 모양이 이상해서 밖으로 나가기 쉽기 때문입니다. 이로 인해 Oklab이나 Oklch에서 색상을 선택하고 조작하기가 어렵습니다.

Oklab의 sRGB 모양. (이미지 출처: 크리스 카메론 데모) (큰 미리보기)

Oksl은 타협을 시도했습니다. 채도가 높지 않고 회색에 가까우며 그 이상으로 모든 sRGB를 포함하는 원통까지 확장되는 색상에 대한 Oklab의 동작을 유지합니다. 또 다른 표현은 Oklab의 sRGB의 이상한 모양이 합리적으로 부드러운 전환을 통해 원통형으로 늘어났다는 것입니다.

결과는 모든 매개변수가 sRGB 외부로 나가지 않고 독립적으로 변경될 수 있는 HSL과 유사합니다. 또한 Okhsl을 Oklab보다 더 복잡하게 만듭니다. HSL이 가지고 있는 특성을 갖기 위해서는 불가피한 타협이 있습니다.

색상과 관련된 모든 것은 타협에 관한 것입니다. 컬러 비전은 너무 복잡해서 실질적인 타협을 해야 합니다.

더 많은 연구가 이루어졌으면 하는 부분입니다. 흰색 배경이 있고 그 위에 넣을 멋진 색상을 선택하고 싶다면 많은 가정을 할 수 있습니다. Oksl은 많은 문제를 해결하지만, 더 나은 결과를 얻을 수도 있나요?

색상 타협에 대하여

필립: Oklab을 사용해 본 사람들 중 일부는 어두운 색조가 너무 많다고 말합니다. 새로운 밝기 추정을 사용하여 Okhsl에서 이를 변경했습니다.

비요른: 이는 Oklab이 노출이 변하지 않고 배경색과 같은 보기 조건을 고려하지 않기 때문입니다. 웹에는 일반적으로 흰색 배경이 있으므로 검은색과 다른 어두운 색상의 차이를 확인하기가 어렵습니다. 그러나 검은색 배경에서 동일한 그라데이션을 보면 차이가 더욱 분명해집니다.

CIE Lab이 이를 처리하고, 저도 Okhsl에서 처리하려고 했습니다. 따라서 Oksl의 그라데이션은 흰색 배경에서 더 잘 보이지만 검정색 배경에서는 다른 문제가 있습니다. 항상 타협입니다.