색역 매핑: 색상 공간 간 변환

전문 카메라로 생생한 일몰을 촬영하고 웹 브라우저에서 열면 뭔가가 손실됩니다. 카메라의 넓은 영역 센서가 기록한 짙고 채도가 높은 주황색과 보라색은 모든 디스플레이에서 정확하게 재현될 수 없으며, 재현이 가능하더라도 해당 색상이 웹 안전 형식으로 변환된 후에는 유지되지 않을 수 있습니다. 한 색상 공간에 존재하는 색상을 다른 색상 공간의 경계 내에 맞추기 위해 조정하는 과정을 색역 매핑이라고 합니다. 이는 전체 디지털 컬러 파이프라인에서 가장 눈에 띄지 않지만 가장 중요한 작업 중 하나이며, 디자인부터 생산까지 색상 정확도를 걱정하는 모든 사람에게 이를 이해하는 것이 필수적입니다.

영역 매핑이란 무엇입니까?

색역은 특정 장치, 형식 또는 색상 공간이 표현할 수 있는 전체 색상 범위입니다. 모든 영역에는 경계가 있습니다. 경계 내에 속하는 색상은 정확하게 표현될 수 있습니다. 그 밖의 색상은 불가능합니다.

다양한 장치와 색상 공간에는 다양한 영역이 있습니다.

색상을 더 큰 영역에서 더 작은 영역으로 이동하면 일부 색상이 목표 영역을 벗어날 수 있습니다. 이를 색상 영역 외 색상이라고 합니다. Gamut 매핑은 이를 어떻게 할지 결정하는 과정입니다.

더 작은 영역에서 더 큰 영역으로 이동하는 반대의 경우는 모든 소스 색상이 대상에 맞기 때문에 일반적으로 손실이 없습니다. 디스플레이 P3 모니터에 표시되는 sRGB 파일은 단순히 해당 모니터 범위의 하위 집합을 사용합니다. 영역 매핑이 필요하지 않습니다.

색역 외 색상 문제

sRGB에서 선명한 청록색인 #00FFFF(#00FFFF)를 고려하세요. 이 색상은 sRGB 영역의 가장자리 근처에 있습니다. 디스플레이 P3에는 sRGB가 전혀 표현할 수 없는 색상인 채도가 더 높은 청록색을 사용할 수 있습니다.

이제 sRGB 외부에 있는 선명한 녹색(대략 color(display-p3 0.0 0.9 0.3))을 사용하여 디스플레이 P3에서 인터페이스를 디자인한다고 상상해 보십시오. sRGB의 #00E84A(#00E84A)보다 채도가 훨씬 높은 녹색입니다. 사용자가 표준 sRGB 모니터에서 이것을 볼 때 브라우저는 결정을 내려야 합니다. 재현할 수 없는 이 녹색을 어떤 sRGB 색상으로 나타내야 할까요?

이 결정은 영역 매핑이며 서로 다른 절충안을 가진 여러 가지 접근 방식이 있습니다.

클리핑과 인지적 압축 비교

색역 외 색상을 처리하기 위한 두 가지 기본 전략은 클리핑과 지각(압축) 매핑입니다.

클리핑

클리핑은 가장 간단한 접근 방식입니다. 색역 외부의 색상은 색역 경계의 가장 가까운 지점에 맞춰집니다. 이는 0~1 척도에서 1.5의 값을 가져와 간단히 1로 설정하는 것과 유사합니다.

색 영역을 벗어난 채도 값이 있는 색상의 경우 클리핑은 해당 채도를 대상 색 영역에서 허용하는 최대 값으로 설정하는 동시에 밝기와 색조는 변경하지 않습니다. 결과:

• 경계 근처의 색상: 눈에 보이는 변화가 최소화됨
• 색상 영역을 훨씬 벗어난 색상: 색상 정확도가 크게 손실되고 색상이 원본과 매우 다르게 나타날 수 있습니다.

클리핑의 가장 큰 문제는 색조 변화입니다. 색상 영역을 벗어난 많은 색상은 색상이 눈에 띄게 바뀌는 방식으로 잘립니다. 생생한 녹색은 황록색으로 잘릴 수 있습니다. 진한 보라색은 파란색으로 잘릴 수 있습니다. 원래 색상은 보존되지 않습니다.

클리핑은 또한 밴딩을 생성합니다. 다양한 소스 색상은 모두 동일한 최대 채도 경계점에 클립되어 연속적으로 나타나야 하는 그라데이션 또는 부드러운 색상 전환에서 눈에 띄는 단계를 생성합니다.

이러한 단점에도 불구하고 클리핑은 계산적으로 간단하기 때문에 정적 이미지와 CSS에 일반적입니다.

지각적 렌더링 의도(압축)

압축 매핑이라고도 하는 지각 렌더링은 다른 접근 방식을 취합니다. 영역 밖의 색상만 조정하는 대신 전체 영역을 비례적으로 조정합니다. 소스에서 가장 채도가 높은 색상은 대상에서 사용할 수 있는 가장 채도가 높은 색상으로 매핑되며, 다른 모든 항목도 이에 따라 조정됩니다.

자르기 대신 전체 그림을 비례적으로 줄여 큰 그림(디스플레이 P3 영역)을 작은 캔버스(sRGB 영역)에 맞추는 것을 상상해 보십시오. 색상이 잘리지 않습니다. 대신 색상 간의 모든 관계가 유지됩니다. 즉, 압축만 됩니다.

지각 압축의 장점: - 부드러운 그라데이션은 부드럽게 유지됩니다(밴딩 없음). - 색상 간의 상대적 관계가 유지됩니다. - 일반적으로 사진 및 그라디언트에 시각적으로 더 좋습니다.

단점: - 필요하지 않은 경우에도 색역 내 색상도 이동됩니다(채도가 약간 축소됨). - 색상을 정확하게 재현할 수 있었더라도 원본보다 약간 덜 선명하게 보일 수 있습니다.

지각적 렌더링 의도는 인쇄 및 전문 사진 작업 흐름에서 ICC 색상 프로필에 사용되는 기본값입니다. 이는 CSS 영역 매핑 알고리즘에서 사용되는 접근 방식이기도 합니다.

상대 색도계(검은 점 보정 포함)

세 번째 접근 방식인 상대 색도계는 색역 내 색상을 정확하게 매핑하고 색역 외 색상을 잘라내는 동시에 소스와 대상 간의 흰색 점 차이를 조정합니다. 지각보다 색역 내 정확도를 더 잘 유지하므로 색역 외 색상이 거의 없는 문서에 적합합니다.

채도 렌더링 의도

주로 비즈니스 그래픽에 사용되는 네 번째 의도는 색상 정확도를 희생하여 채도를 최대화하는 것입니다. 정확한 색상 재현보다 생생하고 뚜렷한 색상이 더 중요한 막대 차트 및 원형 차트에 사용됩니다.

CSS 영역 매핑

CSS는 CSS 색상 레벨 4 사양 이후 다양한 색상 공간을 지원해 왔으며 이제 색상 영역 매핑이 CSS 색상 해상도 알고리즘에 내장되어 있습니다.

CSS에서 넓은 범위의 색상 지정

/* sRGB (traditional) */
color: #22C55E;
color: rgb(34, 197, 94);

/* Display P3 (wide gamut) */
color: color(display-p3 0.05 0.8 0.35);

/* Rec. 2020 (ultra-wide) */
color: color(rec2020 0.1 0.7 0.2);

/* OKLCH (perceptually uniform, can address wide-gamut colors) */
color: oklch(0.75 0.25 150);  /* Very vivid green — may be out of sRGB */

CSS가 Gamut Overflow를 처리하는 방법

CSS 색상 값이 디스플레이 색상 영역 외부의 색상을 처리하는 경우 브라우저는 CSS 색상 레벨 4에 정의된 CSS 색상 영역 매핑 알고리즘을 적용합니다. 이 알고리즘은 OKLCH 색상 공간에서 이진 검색을 사용하여 deltaE 2000(지각적 색상 차이 측정 기준)을 거리 측정값으로 사용하여 가장 유사한 색상 영역 내 색상을 찾습니다.

그 결과 다음을 우선시하는 영역 매핑 접근 방식이 탄생했습니다. 1. 가벼움을 먼저 보존합니다(가벼움의 변화가 가장 눈에 띕니다) 2. 색조 초 보존 3. 색상이 목표 색역에 맞을 때까지 채도(채도)를 줄입니다.

이는 단순한 sRGB 클리핑에 비해 상당한 개선이 이루어졌습니다. CSS 알고리즘은 색 영역을 약간 벗어난 색상에 대해 인지적 압축에 더 가까운 결과를 생성하는 반면, 훨씬 더 먼 색상에 대해서는 우아하게 저하시킵니다.

색 영역 미디어 쿼리

CSS는 디스플레이가 지원하는 영역을 감지하는 미디어 쿼리를 제공하므로 다양한 기능에 다양한 색상을 제공할 수 있습니다.

/* Default: sRGB colors for all displays */
.brand-color {
  color: #22C55E;
}

/* Enhanced: more vivid P3 colors for capable displays */
@media (color-gamut: p3) {
  .brand-color {
    color: color(display-p3 0.05 0.8 0.35);
  }
}

/* Ultra-wide: maximum vibrancy for Rec. 2020 displays */
@media (color-gamut: rec2020) {
  .brand-color {
    color: color(rec2020 0.1 0.7 0.2);
  }
}

color-gamut의 세 가지 값: - srgb — 디스플레이는 대략 sRGB 영역을 포괄합니다(가장 일반적). - p3 — 디스플레이는 대략 Display P3 영역(최신 Mac, iPhone, 고급 Android)을 포괄합니다. - rec2020 — 디스플레이는 Rec. 2020 색 영역(전문가 및 HDR 디스플레이)

OKLCH 및 넓은 영역

OKLCH는 높은 채도 값이 자연스럽게 sRGB 외부의 색상을 처리하므로 넓은 범위의 디자인 작업에 특히 적합합니다. OKLCH에서 약 0.37을 초과하는 채도 값은 대부분의 색상에 대해 sRGB 영역을 벗어나 디스플레이 P3 이상에 도달합니다.

/* In sRGB: vivid green */
color: oklch(0.75 0.22 145);

/* Out of sRGB, in Display P3: more vivid green */
color: oklch(0.75 0.35 145);

/* Far out of sRGB: browser will gamut-map down */
color: oklch(0.75 0.5 145);

OKLCH 색상이 영역을 벗어나면 CSS는 자동으로 영역 매핑 알고리즘을 적용합니다. 이를 수동으로 처리할 필요는 없습니다. 브라우저가 이를 해결합니다.

색상 변환기를 사용하여 색상 공간 간에 색상을 변환하고 sRGB, 디스플레이 P3 및 OKLCH 표현 간에 이동할 때 값이 어떻게 이동하는지 확인하세요.

디자이너를 위한 실용적인 솔루션

색역 매핑을 이해하면 화면의 색상 작업에 접근하는 방식이 달라집니다.

1. 목표 영역의 디자인

제품이 여러 장치를 사용하는 웹 사용자를 주로 대상으로 하는 경우 sRGB로 디자인하세요. 청중이 주로 최신 Apple 하드웨어(Mac, iPhone)를 사용하고 있다는 것을 알고 있다면 디스플레이 P3에서 디자인하고 sRGB 폴백을 제공하는 것을 고려해 보십시오.

2. 생생한 색상의 색역 상태를 파악하세요

Figma(Apple 하드웨어에서 Display P3 사용)와 같은 도구에서 "작동"하는 많은 생생한 색상은 웹용으로 sRGB로 내보낼 때 다르게 보일 수 있습니다. Figma가 화면에 렌더링하는 것뿐만 아니라 명시적으로 정의한 CSS 값으로 최종 색상을 항상 확인하세요.

Design P3의 매우 선명한 녹색, 청록색, 자홍색 중 일부에는 sRGB와 동등한 색상이 없습니다. 브랜드 색상이 color(display-p3 0.0 0.9 0.3)(어떤 sRGB 녹색보다 더 선명한 녹색)인 경우 어떤 sRGB 대체를 사용할지 결정하거나 sRGB 사용자가 덜 선명한 버전을 보게 된다는 점을 인정해야 합니다.

3. 전체 영역에 걸쳐 그라데이션 전환 테스트

두 개의 넓은 색역 색상 사이의 그라데이션은 sRGB 모니터에 표시될 때 줄무늬를 생성할 수 있습니다. P3에서 뚜렷하게 보였던 중간 색상은 모두 유사한 sRGB 값(그라데이션 중간의 색상 클리핑)에 매핑되기 때문입니다. 그라데이션에 밴딩이 나타나는 경우 다음을 시도해 보세요.

• 두 끝점의 채도를 sRGB 안전 수준으로 줄입니다.
• 전환을 확산시키기 위해 중간 그라데이션 정지점을 추가합니다.
• 인지적으로 균일한 간격을 위해 OKLCH를 통해 그라데이션 라우팅

4. 올바른 내보내기 형식을 사용하세요

광범위한 색상이 포함된 이미지의 경우: - JPEGs: 색상 프로필을 포함합니다(디스플레이 P3 또는 Adobe RGB) - 브라우저는 색상 관리를 위해 이를 사용합니다. - PNG: 동일 — 프로필 삽입 - WebP: ICC 프로필을 지원합니다. 정확한 색상을 위해 삽입하세요. - SVG: 색상은 CSS에 지정됩니다. 넓은 영역을 위해 color() 기능을 사용합니다.

내장된 프로필이 없는 이미지는 sRGB로 간주되며 색역 변환 없이 표시됩니다. 내장된 프로필이 없는 넓은 영역의 이미지는 P3 디스플레이에서 의도한 것보다 더 바랜 것처럼 보입니다.

5. 안전한 광역 접근 방식

여러 색 영역 대상을 관리하는 복잡성 없이 더 풍부한 색상을 원하는 디자이너를 위해 중간 채도(0.18~0.25)를 갖춘 OKLCH는 대부분 sRGB 내에 유지되면서 해당 범위의 일반적인 RGB 색상보다 약간 더 생생한 결과를 제공합니다. CSS 영역 매핑은 모든 극단적인 경우를 자동으로 처리합니다.

/* Vivid but mostly sRGB-safe blues */
--color-primary: oklch(0.55 0.22 255);
--color-primary-hover: oklch(0.60 0.22 255);

주요 내용

• 색역은 장치나 색상 공간이 표현할 수 있는 색상 범위입니다. sRGB는 표준 웹입니다. 디스플레이 P3는 최대 26% 더 크며 최신 Apple 및 고급 장치에서 사용할 수 있습니다.
• 색상 영역 외 색상은 목표 색 영역을 벗어나 해당 장치에서 정확하게 재현할 수 없는 색상입니다. 이러한 색상을 범위로 가져오려면 어떤 일이 발생해야 합니다.
• 클리핑은 색상 영역을 벗어난 색상을 색상 영역 경계에 맞춰줍니다. 속도는 빠르지만 색상 변화와 밴딩이 발생할 수 있습니다. 지각적 압축은 전체 영역을 비례적으로 확장합니다. 속도는 느리지만 색상 관계와 그라데이션은 유지됩니다.
• CSS 색상 레벨 4는 OKLCH 및 deltaE 2000을 사용하여 밝기와 색조를 유지하면서 채도를 지능적으로 줄이는 색역 매핑 알고리즘을 정의합니다. 이는 순진한 sRGB 클리핑보다 훨씬 뛰어납니다.
• color-gamut 미디어 쿼리를 사용하면 다른 디스플레이에 대해 sRGB 폴백을 유지하면서 가능한 디스플레이에 더 생생한 color(display-p3) 색상을 제공할 수 있습니다.
• 광역 디자인 함정: Apple 하드웨어의 Figma는 기본적으로 디스플레이 P3을 렌더링합니다. Figma에서 선명하게 보이는 색상은 웹용으로 sRGB로 내보낼 때 채도가 덜해 보일 수 있습니다. 항상 명시적인 CSS 값으로 확인하세요.
• 색상 변환기를 사용하여 sRGB, 디스플레이 P3 및 OKLCH에서 색상이 어떻게 변환되는지 검사하여 색역 상태를 이해하고 가장 가까운 색역 내 해당 항목을 찾습니다.