CIE 1931 컬러 스페이스 이해하기.
NTSC, ADOBE RGB, REC. 709, sRGB의 개념 이해하기
CIE 1931 컬러 스페이스 그래프. 모니터가 표현할 수 있는 크로마값 (명도 값에서 독립된 고윳값)의 영역을 보여준다.모니터들을 구매하게 되면 NTSC 94%, sRGB 104 % 와 같은 표기가 붙어있는 것을 보게 됩니다. 대충 값은 높아 보이는데, 대체 이게 뭘 의미하는 건지 알고 싶었던 경우 있으셨나요? 오늘은 디지털 색공간의 기준이 된 CIE 1931 컬러 스페이스를 이해해 보는 시간을 가지도록 하겠습니다.
1. CIE 1931 컬러스페이스의 중요성
CIE 1931 컬러스페이스는 물리적 법칙에 기반한 '객관적인 색의 기준'입니다. 흔히들 빨간색이라고 하면 빨간색, 다홍색, 붉은색 등등 상대적인 이름을 부르기 마련입니다. 따라서 정확한 색의 재현을 위해서는 객관적인 지표인 CIE 1931 컬러스페이스를 사용할 수밖에 없습니다.
2. 빛의 속도, 광도, 휘도
루미너스 플럭스 = 광원에서 나오는 빛의 총량 (lm)
루미너스 인텐시티 = 광도 (cd)
일루미넌스 = 조도 (lx)
루미넌스 = 휘도 (nit 또는 cd/m^2) = 우리가 인식하는 빛의 세기값
3. 디지털카메라가 빛을 이미지 데이터로 변환하는 원리.
I. 디지털카메라에는 빛을 밫아들이는 렌즈가 있고 그 빛을 받는 모자이크 패널이 있습니다.
II. 그 모자이크 패널은 프리즘이 하얀빛을 여러 갈래 색의 빛으로 나누듯이 빛을 나눕니다.
III. 나눠진 빛은 픽셀마다 센서가 촘촘히 박혀있는 이미지 센서판으로 이동합니다.
IV. 이미지 센서에서 처음에 나오는 값은 아날로그 전기신호, 즉 바이너리코드로 이루어진 수치값입니다.
V. 이것을 다시 어셈블리 역할을 하는 아날로그/디지털 컨버터(AD 컨버터)가 전자기기가 이해할 수 있는 언어로 바꿔줍니다. 사진을 JPEG, PNG, RAW 형태의 파일로 변환해 주는 과정이 여기에 포함됩니다.
VI. 변환된 디지털 데이터는 마치 택배처럼 단기적으로 저장될 공간이 필요한데, 이 단기적 물류 센터 역할을 하는 것이 버퍼입니다.
VII. 이후에 버퍼에서 장기기억장치인 하드디스크 또는 마이크로 SD 카드에 옮겨집니다.
카메라가 빛을 이미지 형태로 변환하는 과정.4. 모니터의 색 구현 방식
= 루미넌스 + RGB 크로마 조합값
모니터의 색 구현방식은 디지털카메라가 만든 JPEG, PNG, RAW 이미지의 데이터 값을 모니터에 각각 R, G, B 발광 다이오드 소자의 세기 값으로 다시 변환해 특정 색을 재현하고 각 소자의 명도값이나 백라이트를 조절해 최종 출력값을 만드는 방식입니다. 여기서 명도값을 ‘Luminosity'라고 하는데, '루미넌스'와 같은 개념입니다. 값에서 독립적으로 존재하는 색상 값을 ‘크로마시티‘라고 합니다. 이 크로마시티는 인체가 색을 인지하는 원리와 특정한 공식을 통해서 만들어집니다.
먼저 간단히 설명하자면, CIE 컬러 스페이스 그래프에서 우리가 보는 색의 영역이 바로 '크로마시티'이며 2D 그래프에는 보이지 않지만 우리가 보는 시선 방향 쪽으로 뻗은 Z 축이 바로 '루미넌스'입니다. 좀 더 자세히 들어가 보겠습니다.
5. 베버의 법칙 (전체의 양이 많을수록 인간이 인식할 수 있는 변화량은 낮아진다)
우리는 형광등이 하나만 있을 때는 명과 암의 차이를 확실하게 구분할 수 있습니다. 하지만 형광등이 20개가 켜져있는 카페에서 등 하나가 꺼진다고 그 차이를 명확하게 인지하지는 않습니다. 카페가 여전히 밝다고 느낄 겁니다. 이것은 베버의 법칙이라고 알려져 있는 인간의 변화량 인지원리에 숨어있는 규칙 때문입니다. 루미너스 인텐시티가 높아질수록 인간의 눈이 인지하는 빛의 양인 루미넌스의 변화량은 정비례해서 늘어나지 않습니다.
(편집중인 부분)
1. 원본(리니어)에 지수 ^0.45를 곱해서 sRGB 이미지로 변환 (왜냐고? 모니터는 원래 어둡게 출력하기 때문에 우리가 컬러를 볼 때 원본값을 보려면 조금 더 밝게 만들어주는거야. 그래야 편집할 때 원본값이랑 똑같아지지.)
2. 변환된 sRGB 데이터를 모니터가 다시 감마값 ^2.2를 곱해서 원본 값으로 출력
이 과정을 3D 렌더러로 옮겨오면
렌더러가 인식하는 텍스처 값이 리니어로 출력, 그리고 색 영역은 sRGB로 변환 뒤 출력.
5. 크로마 값 유도 원리 = 인체 시각세포 원리 + 1931년 CIE의 실험 결과
조금 어려울 수 있지만, 먼저 사람의 인체가 색을 인식하는 원리를 천천히 설명해 보겠습니다. 먼저 햇빛이나 인공조명에서 발산한 전자기파 형태의 빛이 자동차의 보닛이나 책과 같은 사물에 반사됩니다.
가시광선 영역에서 시금치의 빛반사양 그래프CIE는 이 물체로 시금치를 사용했습니다.
다음은 가시광선 영역에서 시금치의 빛 반사양을 보여주는 그래프입니다. 가시광선의 그래프와 비교했을 때 초록색 영역과 붉은색 영역에서 빛반사가 높게 일어난 것을 확인할 수 있었습니다.
가시광선 그래프.그 반사된 빛의 형태는 우리의 눈의 동공을 통과해 망막에 거꾸로 맺힙니다. 망막에는 두 가지 종류의 시각세포가 있는데, ‘콘'과 '로드'입니다.
아래부터 위로 콘과 로드 시각세포.콘에는 L, M, S 세 가지 종류가 있는데 각각 빨간색, 초록색, 푸른색을 감지합니다. 로드는 밝음과 어두움을 인지합니다. 이 시각세포들이 빛에너지를 받으면 그것을 전기신호로 변환해 뇌의 후두부에 의치한 시각정보처리 시냅스에 전달합니다. 여기서 뇌가 다시 거꾸로 맺힌 상을 우리가 인식하는 모습으로 바로잡는 것입니다.
망막에 위치하고 있는 시각세포들이 빛을 받아들이는 과정
빛의 주파수에 따른 L, M, S 콘의 민감도 그래프. 가운데 검은색은 시금치의 빛 반사양 그래프이다. 이 L, M, S 콘들은 빛의 주파수에 따라서 반응하는 정도가 다릅니다. L콘은 대략 400 나노미터에서 800 나노미터 사이에서 반응하며 610 나노미터 주파수에서 가장 활발하게 반응합니다. M콘은 375 나노미터에서 550 나노미터, 초록은 400 나노미터에서 650 나노미터 사이에서 반응합니다. 즉, L, M, S 콘의 인지 범위가 우리가 볼 수 있는 빛의 주파수 범위, 즉 가시광선(Visible Spectrum)이 되는 것입니다.
여기서 또 하나 알 수 있는 점은 주파수가 다른 빛에도 각각의 콘이 색을 인지하는 정도가 같을 수 있다는 점입니다. L콘을 보게 되면, 500 나노미터와 650 나노미터에서의 민감도 값이 같음을 알 수 있습니다. 쉽게 말해서, 우리는 500 나노미터의 빛이나 650 나노미터의 빛이 가진 빨간색을 똑같이 생각한다는 것입니다. 이 결과를 토대로, 각 주파수 별로 각각의 콘들이 얼마나 민감하게 반응하는가가 해당 색깔을 우리가 인식하는 세기가 될 것입니다. 그리고 그 세기를 각각 R, G, B라고 합시다.
R = 우리 눈이 인식하는 붉은빛의 루미넌스 값 = 빨간빛에 대한 눈의 민감도
G = 마찬가지로 초록빛의 루미넌스 값 = 초록빛에 대한 눈의 민감도
B = 파란빛의 루미넌스 값 = 파란빛에 대한 눈의 민감도
하나 더 생각해봐야 할 점은 빨간색, 초록색, 파란색의 밝기는 같은 밝기를 가진 빛에도 다른 민감도를 보인다는 것입니다. 그럼 얼마만큼의 값을 곱해야 서로 비슷한 명도를 가진 것처럼 보일까요?
과학자들은 이 값을 찾기 위해서 몇 번의 컬러 매칭 실험을 진행했습니다. 컬러 매칭 실험은 두 가지 다른 전자기파 광선으로 만든 빛의 색깔을 하나의 전자기파 광선이 내는 빛과 같게 하는 실험입니다.
컬러 매칭 실험의 역사. 여기서 우리는 상수값인 1, 4.5907, 0.0601을 알 수 있다.CIE는 1931년 한 가지 실험을 했습니다. 가시광선 스펙트럼 중 700nm, 546.1nm 그리고 435.8nm에 해당하는 빛을 각각 R, G, B의 세 가지 원광(圓光)으로 만들어서 이 세 가지 색의 조합만으로도 우리가 볼 수 있는 모든 색을 만들 수 있는지 실험한 것입니다. 그리고 각각의 R, G, B 색에 곱해져야 하는 밝기 조절 상수값이 1, 1/4.5907, 그리고 1/0.0601이라고 명시했습니다. 다음의 그래프는 위에서 봤던 가시광선의 색을 만들기 위해서 세 가지 R, G, B 원광이 얼마만큼의 밝기값과 곱해져 조합되어야 하는지에 대한 수치를 모아서 만든 선형 그래프입니다.
주파수별 R, G, B의 세기.그래프를 봐도 아직 감이 잘 안 옵니다. 610 나노미터를 함수의 λ 타깃값으로 놓고 해당하는 R, G, B 값을 추정하면 r(λ) = 0.34756, g(λ) = 0.04776, b(λ) = -0.00038이라는 값이 나옵니다. 이와 같은 방법으로 다른 함수들의 값도 구할 수 있다는 것이 과학자들의 설명입니다. 이렇게 되면 r, g, b 함수의 값을 다시 X, Y, Z 축으로 놓고 λ의 값을 넣어서 3차원의 선을 그릴 수 있습니다.
* 참고: 왜 0부터 시작하지 않고 -0.1부터 시작하는 것일까요? 빛의 밝기의 음수값은 실험에서 조합하게 되는 R, G, B가 아니라 조합된 색과의 비교에 쓰이는 가시광선에 빛이 추가되었음을 의미합니다.
이미지 출처: Chandler Abraham다음의 이미지에서 왼쪽은 실험에서 쓰인 세 가지 원광들과 그 조합을 보여줍니다. 오른쪽에는 비교군이 되는 가시광선과 음수값에 해당하는 원광이 있고 그 둘의 조합된 빛이 있습니다. 그리고 조합된 두 가지 색은 시야각 2도의 공간을 통해서 관찰됩니다.
6. XYZ 스페이스로의 변환, 그리고 다시 xyY스페이스로의 변환.
그럼 여기서 우리가 알고 있는 2차원의 그래프는 어떻게 만들 수 있을까요? 과학자들은 루미너시티를 분리하기 위해서 다음과 같은 공식을 만들었습니다.
X = 빨강의 크로마 값 r(λ) = R(λ) / R(λ) + G(λ) + B(λ)
이하 (λ) 생략
Y = 초록의 크로마 값 g(λ) = G / R + G + B
Z = 파랑의 크로마 값 b(λ) = B / R + G + B
X + Y + Z = 크로마 값을 다 더한 값 = r + g + b = 1
이제 X와 Y만 알면 Z의 값을 알 수 있기 때문에 Luminosity에 해당하는 Z의 값을 생략할 수 있습니다.
위에 그래프에서는 u' = x = red, v' = y = green, L = Y = Luminosity, U자형 곡선 = 각 주파수에 따른 가시광선에 해당하는 선으로 나타납니다. 저렇게 생긴 3차원 공간에서 높이를 빼고 XY 평면 위에 압착시키면 다음과 같은 그래프가 나오게 됩니다.
다시 이 대문자 XY 평면 위에 그려진 삼각형 공간의 끝점을 Cg, Cr, Cb로 정하고 각각을 새로운 공간인 소문자 xy평면의 (0,1), (0,0), (1,0)의 위치에 놓게 되면 공간의 변형이 일어나면서 제1사변형 사이로 가시광선 영역이 들어가면서 그래프의 모든 지점이 양수에 위치하게 됩니다. 이렇게 얻은 컬러 스페이 스을 CIE xyY 컬러 스페이스라고 합니다. 대문자 Y는 루미너시티 값인 Z 축을 의미하는데 CIE는 Z 축을 초록색으로 Y를 파란색으로 놓고 공간을 구성했기 때문에 Y를 루미너시티로 표기합니다. 그리고 바로 이 공간이 우리가 알고 있는 CIE 1931 컬러 스페이스가 되는 것입니다.
CIE xyY Color Space. 모노크로마틱 가시광선이 이루는 둘레 위의 두 점을 이어서 생긴 선의 중간값이 두 광선의 조합 결과가 된다.여기까지 읽어주신 여러분, 정말 감사합니다. 무슨 소리인지 모르시겠다는 분들이 계신다면, 죄송합니다. 제가 아직 어리고 색이론에 대한 이해가 짧은 것 같습니다. 그냥 이런 게 있구나~ 하는 정도로만 알고 계셔도 디지털 컬러 작업을 하실 때 큰 문제가 없을 것이라고 생각합니다.
이제 sRGB 컬러 스페이스, Adobe RGB 컬러 스페이스, 그리고 REC. 709 컬러 스페이스의 의미를 알아볼 차례입니다.
참고자료목록
디지털카메라 센서와 원리: https://steemit.com/photography/@apteacher/digital-camera-sensor
CIE 컬러 스페이스에 대한 이해를 돕는 기사: https://medium.com/hipster-color-science/a-beginners-guide-to-colorimetry-401f1830b65a
CIExyz 스페이스에 대한 논문: https://graphics.stanford.edu/courses/cs148-10-summer/docs/2010--kerr--cie_xyz.pdf
컬러 스페이스 설명 영상: https://youtu.be/99v96TL-tuY?feature=shared
컬러 스페이스 컨버젼: https://www.cambridgeincolour.com/tutorials/color-space-conversion.htm
