광색역 모니터와 웹브라우저의 Color Management System

글을 시작하기에 앞서 아래 사진을 보자. 좌우가 같은 하나의 이미지로 보이는가? 아니면 각각의 이미지로 나뉘어 보이는가? 하나의 이미지로 보이는 경우, 당신은 CMS에 대해 이미 이해하고 실행하고 있는 것이거나 색이 잘 구별이 안가는 색맹급의 나쁜 모니터를 쓰는 경우 중의 하나일 것이다. 

 

아래 글은 사진이 나뉘어 보이는 환경을 어떻게 개선할지에 대한 내용을 담고 있다. 모니터 캘리브레이션(Calibration)이나 Color Management System(CMS), 컬러 개멋(gamut)과 같은 복잡한 내용들이 많은데, 잘 모르겠으면 건너뛰면 된다. -.-;;

* * * * *

사진을 접하는 경로는 전시회나 사진집도 있겠지만, 인터넷이 절대적으로 많을 것이다. 인터넷으로 사진을 본다는 것은 결국 모니터로 감상하는 것이다. 이때의 문제점은 모니터에 따라 조금씩 다르게 제각각으로 보인다는 것이다. 조금 밝게 보이는 모니터도 있고, 조금 더 붉게 보이는 모니터도 있고...

특히 요즘 나오는 모니터들은 상당수가 기존의 sRGB영역을 넘어서 AdobeRGB영역에 근접하는 광색역이기 때문에, 더더욱 조심해야 한다. 컬러 개멋(gamut)에 관한 이야기를 하자면 이야기가 아주 길어질 수도 있는데, 간단히 설명하자면 기존 모니터들에 비해 요즘 나오는 광색역 모니터들은 훨씬 생생한 색상들을 표현할 수 있다는 것이다.

가운데 흰색 영역이 sRGB, 바깥쪽 검은색 영역이 AdobeRGB로서 표현할 수 있는 색의 범위가 그만큼 넓어졌다.

더욱 생생한 색을 표현하는 것이 좋은 것이긴 한데, 컴퓨터가 - 정확히 말하면 MS가 - 바보라면, 오히려 재앙이 될 수도 있다. 기존의 sRGB 영역으로 맞춰둔 사진 이미지들의 색이 그만큼 과장되어 이상한 색으로 보이게 되는 것이다. 

컴퓨터에서 색의 표현은 R(Red), G(Green), B(Blue)의 삼원색을 조합하여 사용하는 RGB체계를 주로 이용한다. 채널당 8bit를 사용하면 각각의 삼원색을 0~255까지의 단계로 표시하고, 각각의 삼원색을 조합하여 색을 표시한다. 예를 들어 R=255, G=0, B=0의 빨간색이라고 하면, 최대의 순수한 빨간색을 표시하는데, 기존의 sRGB급의 모니터에 비해 AdobeRGB급의 광색역 모니터에서는 보다 생생한 빨간색을 표시할 것이다. 이런 이유로 기존의 sRGB환경에 맞춰둔 사진은 광색역의 모니터에서 색이 과장되어 나타나게 된다.

이때 사진에 sRGB 영역으로 맞춰둔 것이라는 태그를 달아두고 그에 맞춰서 화면에 표시해줄 수 있다면 과장되지 않은 이미지를 볼 수 있을 것이다. 이런 것을 Color Management System(CMS)라고 한다.

복잡하면 아래 정도만 이해하고 넘어가자.
○ 기존 모니터 = sRGB 색영역 = 색영역이 좁다.
○ 광색역 모니터 = AdobeRGB 색영역에 근접 = 색영역이 넓다. 보다 생생한 색을 볼 수 있다.
○ CMS는 모니터 등 이미지를 표현하는 환경에 맞추어 일관된 색을 보게 한다.

 

1. 당신이 사용하는 웹브라우저는 Color Management System(CMS)를 지원하는가?
다시 처음에 보았던 이미지이다.

원래 sRGB 색영역의 이미지에서 왼쪽은 sRGB 그대로, 오른쪽은 AdobeRGB로 변환한 것이다. Firefox와 같은 CMS를 지원하는 웹브라우저에서는 이미지에 붙은 색영역 정보 태그를 읽어 원래대로 표현할 수 있도록 해준다. 그래서 왼쪽과 오른쪽이 차이가 나지 않게 되는 것이다.

위 사진의 좌우 차이가 드러나 보인다면, 당신은 CMS를 지원하지 않는 웹브라우저(대표적으로 Microsoft의 Internet Explore)를 사용하고 있는 것이다.

불행히도 대한민국에서 절대적인 점유율을 보이는 MS의 IE에서는 CMS를 지원하지 않는다. 애플의 사파리(Safari)나 모질라 재단의 파이어폭스(Firefox) 등의 웹브라우저를 별도로 설치하여야 한다. 대한민국의 인터넷 환경상 IE를 쓸 수 밖에 없는 곳이 많지만, 웹 갤러리를 서핑할 때에는 Firefox 3.5 이상을 추천한다.

 

2. 당신의 모니터는 광색역인가? 

위 사진은 PhotoProRGB라는 아주 넓은 색영역에서 왼쪽은 AdobeRGB로, 오른쪽은 sRGB로 변환한 것이다.

(1) 광색역 모니터에서는...
CMS를 지원하는 브라우저에서는 왼쪽이 약간 더 생생한 색을 볼 수 있을 것이다. 오른쪽에서는 색 영역이 약간 축소되어 AdobeRGB에서 표현할 수 있는 생생한 푸른색이 sRGB에 맞게 약간은 칙칙하게 표현된다. CMS를 지원하지 않는 브라우저에서는 반대로 오른쪽이 훨씬 과장된 색으로 나타나게 된다.

(2) 기존의 sRGB영역 정도를 커버하는 모니터에서는...
CMS를 지원하는 브라우저에서는 왼쪽의 AdobeRGB 색영역을 sRGB영역의 모니터에 맞춰 축소하므로 왼쪽과 오른쪽이 거의 비슷하게 보이게 된다. CMS를 지원하지 않는 브라우저에서는 AdobeRGB 영역의 왼쪽이 약간 칙칙한 색으로 나타날 것이다.

 

3. Firefox의 CMS 설정을 조정하자.

Firefox로 이 페이지를 보고 있다면 위 사진이 어떻게 보이는가. 좌우가 똑같이 보이면서 색이 과장되지 않으면 제대로 설정이 된 것이다. (IE 등 CMS가 되지않는 웹브라우저에서는 좌우가 똑같이 보일 것이다. 단지 광색역 모니터라면 색이 상당히 과장되어 보인다.)  좌우가 다르게 보이면 아래와 같이 설정을 변경하자.

Firefox의 주소창에 about:config를 치고 설정 변경을 위한 화면으로 들어간다.

(1) gfx.color_management.display_profile => 그냥 둔다.
컬러 프로파일을 설정하는 것이다. 그냥 두면 모니터에 설정된 default 값을 사용하므로 그냥 두면 된다.

(2) gfx.color_management.enablev4 => true로 설정
ICC version 4 color management를 사용할 수 있게 한다.

(3) gfx.color_management.mode => 1로 설정
기본 설정으로 2가 지정되어 있다. 2로 지정되면 이미지 파일에 컬러 프로파일 태그가 붙어 있는 경우에만 CMS를 지원한다. 따라서 컬러 프로파일이 붙어있지 않은 이미지들은 색깔이 과장되어 나타날 것이다. 따라서 1로 변경하는 것이 좋다. 1로 변경하면 컬러 프로파일이 붙어있지 않은 경우에는 sRGB프로파일을 적용한다. 0으로 설정하면 컬러 매니지먼트를 하지 않는다.

(4) gfx.color_management.rendering_intent => default 값인 0으로 둔다.
 -1 - 이미지에 명기된 Rendering Intent를 따른다
 0 - Perceptual.
 1 - Relative Colorimetric  (포토샵은 이 설정을 사용한다. 포토샵과 동일하게 하고 싶으면 1번 설정)
 2 - Saturation
 3 - Absolute Colorimetric

* * * * *

자, 복잡해서 다 건너뛰었다면 다음만 기억하자. 인터넷으로 사진을 감상할 때에는 Firefox와 같은 CMS를 지원하는 웹브라우저를 권장한다. 특히나 요즘 나오는 광색역 모니터들의 경우에는 꼭 사용해 보자.

그리고 이왕이면 모니터마다 제각각의 색상을 표시하는 것을 표준적인 색감으로 조정하기 위한 모니터 캘리브레이션을 해보는 것이 좋다. 카메라에 백만 원이 넘는 돈을 투자하는 사진가라면 내 사진이 웹에서 어떻게 보일지도 고민해 봐야 한다. 물론 감상하는 쪽에서 CMS를 정확히 한다는 보장이 없다. 하지만 원본 이미지 자체가 색이나 컨트라스트가 틀어져 있다면 문제가 있다.

모니터 캘리브레이션 도구를 사는 것이 비용적으로 부담이 되면 www.slrrent.com과 같은 렌탈 업체에서 필요할 때마다 빌려서 조정할 수도 있다.
 

제 사진 갤러리를 볼 때에는 Firefox 3.5 이상 버전의 웹브라우저에 Gfx.color_management.mode 설정을 1로 하는 것을 권장합니다.