02 · 색공간 (Color Spaces)
이 문서가 답하는 질문: sRGB · Display P3 · Rec.2020 · Adobe RGB — 왜 같은
(255, 0, 0)이 다른 빨강인가?
한 줄 답 (Pyramid Top)
RGB 값은 상대 좌표일 뿐이고, 그 좌표가 어떤 색공간에 찍힌 점인지를 모르면 절대 색은 정해지지 않는다. 색공간 = 좌표계의 원점·축·범위이고, ICC 프로파일이 그 좌표계를 바이트로 기술하는 표준이다.
Why — 왜 색공간이 여러 개 필요한가
이론적으로는 모든 색을 표현하는 색공간 하나면 되지만, 실제 디스플레이는 표현 가능한 색의 범위(gamut)가 다르다. 그래서 색공간은 디스플레이가 만들 수 있는 색의 한계를 정의하는 약속이다.
- 1996 sRGB : 당시 CRT 모니터의 평균 능력 → 30년간 웹 표준
- 2010s Display P3 : 디지털 시네마에서 시작, 2016년 iPhone 7로 대중화
- 2012 Rec.2020 : 4K/8K UHD 방송 표준 — 사람 눈의 약 75% 색을 커버
- 1998 Adobe RGB : 인쇄 출판용 — sRGB보다 청록·녹색 영역이 넓음
핵심: 색공간은 능력의 차이가 아니라 약속의 차이다. 같은 (1, 0, 0)이 sRGB에서는 sRGB의 빨강 끝, Rec.2020에서는 더 진한 빨강 끝을 가리킨다.
How — 색공간이 어떻게 정의되는가
1) 색공간의 3요소
모든 RGB 색공간은 다음 3가지로 정의된다:
| 요소 | 의미 | sRGB 예 |
|---|---|---|
| Primaries | R, G, B 각각이 CIE xy 색도도 위에서 어디인가 | R=(0.64, 0.33), G=(0.30, 0.60), B=(0.15, 0.06) |
| White Point | (1,1,1)이 만드는 흰색은 무슨 흰색인가 | D65 (6504K) |
| Transfer Function | 저장값 ↔ 선형 빛 변환 곡선 | piecewise γ≈2.2 |
2) 주요 색공간 비교
| 색공간 | Primaries | White Point | Transfer | 가시광 커버 |
|---|---|---|---|---|
| sRGB | BT.709 | D65 | piecewise γ≈2.2 | ~35% |
| Display P3 | DCI-P3 | D65 | sRGB와 동일 | ~45% |
| Adobe RGB | Adobe 1998 | D65 | γ=2.2 (단순) | ~50% |
| Rec.2020 | BT.2020 | D65 | BT.1886 / PQ / HLG | ~75% |
| DCI-P3 | DCI-P3 | DCI (6300K) | γ=2.6 | ~45% |
| ProPhoto RGB | ROMM | D50 | γ=1.8 | ~90% (가상색 포함) |
3) ICC 프로파일 — 색공간을 바이트로 기술
ICC (International Color Consortium) 프로파일은 .icc 파일로 색공간 정보를 직렬화한 포맷.
ICC 프로파일 구조 (간략):
├─ Header (128 bytes)
│ ├─ Profile size, CMM type, version
│ ├─ Device class (Display / Input / Output)
│ ├─ Color space (RGB / CMYK / Lab)
│ └─ PCS (Profile Connection Space) — XYZ or Lab
├─ Tag table
└─ Tag data
├─ rTRC, gTRC, bTRC (Transfer curves)
├─ rXYZ, gXYZ, bXYZ (Primaries in XYZ)
├─ wtpt (White point)
└─ desc (Profile description)이미지 파일에 ICC 프로파일이 임베딩되어 있으면, 디코더는 그 프로파일을 읽어서 픽셀의 절대 색을 계산할 수 있다.
| 포맷 | ICC 임베딩 |
|---|---|
| JPEG | APP2 마커 (ICC_PROFILE) |
| PNG | iCCP 청크 |
| WebP | ICCP 청크 |
| AVIF / HEIF | colr 박스 (ISOBMFF) |
| TIFF | ICC Profile 태그 (34675) |
4) 색공간 변환 — Gamut Mapping
P3 사진을 sRGB로 변환할 때 처리 방법(Rendering Intent):
| Intent | 동작 | 용도 |
|---|---|---|
| Perceptual | 모든 색을 비례적으로 압축 | 사진 (자연스러움 우선) |
| Relative Colorimetric | sRGB 안에 있는 색은 그대로, 밖은 가장자리로 clip | 로고 (정확성 우선) |
| Saturation | 채도 유지 | 차트 / 그래프 |
| Absolute Colorimetric | 흰 점까지 정확히 보존 | 교정 / 인쇄 |
웹 브라우저 기본은 Perceptual. 그래서 P3 사진을 sRGB 모니터에 띄우면 전체적으로 채도가 낮아져 자연스럽게 보인다.
What — 구체 사양과 수치
CIE xy 색도도 위에서 본 Primaries
sRGB: R(0.640, 0.330) G(0.300, 0.600) B(0.150, 0.060)
Display P3: R(0.680, 0.320) G(0.265, 0.690) B(0.150, 0.060)
Rec.2020: R(0.708, 0.292) G(0.170, 0.797) B(0.131, 0.046)
Adobe RGB: R(0.640, 0.330) G(0.210, 0.710) B(0.150, 0.060)P3가 sRGB와 다른 점: 빨강(R)과 녹색(G)이 더 멀리 있다 → 더 진한 빨강과 녹색을 표현 가능.
sRGB → Display P3 변환 행렬 (선형 공간)
[ P3.R ] [ 0.8225 0.1774 0.0000 ] [ sRGB.R ]
[ P3.G ] = [ 0.0332 0.9669 0.0000 ] × [ sRGB.G ]
[ P3.B ] [ 0.0171 0.0724 0.9108 ] [ sRGB.B ](sRGB와 P3는 White Point가 같은 D65라 단순 선형 변환)
CSS Color Module Level 4 — 색공간 명시
/* sRGB (전통) */
.a { color: rgb(255 0 0); }
.b { color: #ff0000; }
/* Display P3 (CSS Color 4, 2022~) */
.c { color: color(display-p3 1 0 0); }
.d { color: color(display-p3 1 0.5 0); }
/* 기타 */
.e { color: color(rec2020 1 0 0); }
.f { color: lab(50% 80 60); }
.g { color: oklch(0.7 0.15 30); }브라우저 지원 (2026 기준):
| 브라우저 | display-p3 | rec2020 | oklch |
|---|---|---|---|
| Chrome 111+ | O | O | O |
| Safari 16.4+ | O | O | O |
| Firefox 113+ | O | O | O |
What-if — 색공간 mismatch가 만든 실제 사고
사례 1) “내 분홍이 죽었다” — P3 → sRGB strip
상황: 이커머스 사이트에 디자이너가 iPhone에서 찍은 파스텔 핑크 옷 사진 업로드. 증상: 업로드한 후 미리보기에서 분홍이 회분홍, 채도가 죽음.
원인:
- iPhone 카메라가 Display P3로 사진 저장 (HEIF + ICC profile)
- 백엔드 이미지 라이브러리(예:
sharp옛 버전 또는 ImageMagick 기본)가 ICC 프로파일을 strip하면서 RGB 값만 보존 - 결과: P3 좌표계의 (250, 180, 200)이 sRGB 좌표계의 (250, 180, 200)으로 잘못 해석됨 → 더 좁은 sRGB 안에서 색이 축소된 것처럼 보임
올바른 처리:
# ImageMagick — 색공간 명시 변환
convert input.heic -profile sRGB.icc output.jpg
# sharp (Node.js)
sharp(input)
.toColourspace('srgb') // ICC 변환 적용
.jpeg()
.toFile(output);사례 2) Photoshop의 “Convert to Profile” vs “Assign Profile”
| 기능 | 동작 | 결과 |
|---|---|---|
| Convert to Profile | RGB 값을 변환해서 보이는 색을 유지 | 좁은 색공간이면 일부 색 clip |
| Assign Profile | RGB 값은 그대로, 해석만 바꿈 | 보이는 색이 변함 |
이걸 헷갈려서 RAW 사진의 ProPhoto RGB를 sRGB로 Assign하면 사진이 무지개처럼 변함.
사례 3) “Wide Gamut 모니터에서만 빨개진다”
상황: 디자이너의 P3 모니터에서는 정상인데, QA의 sRGB 노트북에서만 로고가 어둡다.
원인: 웹사이트가 ICC 프로파일 없는 sRGB 이미지를 사용 → 브라우저가 디스플레이의 native 색공간으로 그냥 출력.
- sRGB 모니터: 의도한 sRGB 빨강
- P3 모니터: P3의 (1,0,0) → 더 진한 빨강
해결: 이미지에 ICC 프로파일 임베드 (또는 <meta name="color-scheme" content="..."> + CSS color())
사례 4) HDR 비디오의 첫 프레임 = 까만 화면
상황: HDR(Rec.2020 + PQ) 영상의 썸네일 추출 → SDR 모니터에서 까맣게 보임.
원인: PQ 곡선의 SDR 값(약 0.1 nits 이하)이 거의 검정에 매핑됨.
해결: HDR → SDR tone mapping 적용 (예: BT.2390, Reinhard).
Insight — 색공간의 역사
“sRGB의 정체는 1996년 HP + Microsoft의 정치다”
1996년 IEC 61966-2-1 표준화 — 당시 평범한 CRT 모니터의 능력을 최소 공배수로 정의. 30년이 지난 2026년에도 여전히 웹의 기본 색공간인 이유: 변경 비용이 너무 크다. sRGB를 P3로 바꾸려면 수십억 개의 이미지·이미지 라이브러리·운영체제가 동시에 바뀌어야 한다.
“iPhone 7 (2016)이 색공간 전쟁을 시작했다”
Apple이 디스플레이를 sRGB → Display P3로 전환하면서, 일반인이 처음으로 wide gamut 사진을 찍기 시작. Twitter / Instagram / 카카오톡 같은 서비스는 한동안 이 사진을 sRGB로 strip했고, 사용자들은 “왜 내 사진이 죽었지” 라며 항의. 2020년경 대부분 SNS가 P3 보존을 지원했지만, 사진 공유 → 다운로드 → 다른 SNS 업로드 사이클에서 strip이 한 번이라도 일어나면 색이 죽는다.
“oklch가 차세대 표준이 될 수도 있다”
CSS Color 4의
oklch()는 OKLab 기반 — 지각적으로 균일한 색공간. 같은 lightness 값이면 인간 눈에 같은 밝기로 보인다 → UI 디자인의 그라디언트·색상 시스템 설계가 훨씬 직관적. Tailwind v4도 oklch 기반으로 전환.
한 단락 요약
색공간은 RGB 좌표계의 원점·축·범위를 정하는 약속이고, ICC 프로파일이 그 약속을 바이트로 직렬화한다. 같은 (255, 0, 0)이라도 sRGB / P3 / Rec.2020에서 다른 빨강이며, 이 정보를 strip하면 분홍이 죽고 그라디언트가 끊긴다. 다음 문서(
03-bit-depth-and-hdr.md)는 색공간의 수직축인 비트심도와 HDR을 다룬다.