왜 'Safari 3' 인가? - "웹 브라우저의 색감 차이에 관하여"

from Column 2008.02.20 15:23

Share |

먼저 글을 작성하기에 앞서 '의외로 수상한 사람' 블로그를 운영중이신 '수상한 사람' 님과
OSXDEV 에 관련된 글을 번역해서 올려주신 'JongAm' 님께 감사의 말씀 드립니다.


다른 맥유저 분들과 마찬가지로 저 역시 사파리 (Safari) 와 웹킷 (Webkit) 을 기본 웹 브라우저로 사용하고 있습니다.
가장 큰 이유는 역시 속도 때문이고, 또 다른 이유가 바로 올바른 색감 표현 때문입니다.
이미 웹 브라우저의 각기 다른 색감 표현에 관련된 글들을 읽어보신 분들이라면 아시겠지만,
Firefox, IE (Internet Explorer), Safari 에서 같은 이미지를 봐도 색감이 다른 경우가 있습니다.

대부분의 일반 사용자분들에게는 별로 상관 없는 일일 수도 있지만,
요즘 같이 DSLR이 대중화 되고, 또 그로 인해 사진을 취미로 즐기시는 분들이 늘어난 때에는 한번 되짚어 볼 문제가 아닌가 싶네요.
특히 사진을 찍어서 웹에 게시하는 분들이나 사진 관련 블로그 혹은 커뮤니티를 운영하시는 분들이라면 시간내서 한번만 읽어봐주셨으면 좋겠습니다. :-)

본론으로 돌아가서, 그럼 이런 문제가 왜 발생하는 것일까요?

이에 대해 이해하기 위해서는 '수상한 사람' 님이 말씀하셨던 것처럼 색공간 (Color Space) 에 관한 이해가 어느 정도 필요합니다.








위 이미지는 현존하는 색공간 (Color Space) 들을 비교한 것입니다.
간단히, 색공간의 범위에 대해 설명해놓은 이미지라고 보시면 됩니다.
일반적으로 범위가 클수록 더 많은 (다양한) 색을 표현할 수 있다고 보시면 됩니다.

우리가 사용하는 컴퓨터의 모니터는 일반적으로 빨강, 초록, 파랑의 세 가지 색으로 이루어진 RGB 색공간을 사용합니다.
RGB는 가산 혼합 방식으로 색을 첨가하면 첨가할수록 명도가 높아지게 됩니다.
이 RGB 가산 혼합의 종류로는 sRGB, Adobe RGB 등이 대표적입니다.
아래 이미지를 참고하시면, 가산 혼합 방식이 무엇을 말하는건지 쉽게 이해하실 수 있으실 겁니다.




가산 혼합 방식의 예



물론 색공간은 RGB 말고도 Cyan, Magenta, Yellow, Black 을 원색으로 하는 CMYK,
색상 (Hue), 채도 (Satulation), 명도 (Value) 를 색의 기준으로 하는 HSV 등등 다양하지만,
오늘 주제는 '웹 브라우저에서의 색감 차이' 인 만큼 그런 부분은 제외하도록 하겠습니다. :-)


자 그럼 이제 RGB 색공간에 포함되는 sRGB, Adobe RGB 등에 대해 알아보도록 하겠습니다.


sRGB는 모니터, 프린터, 인터넷 등에 사용하기 위해 마이크로소프트와 HP가 함께 만든 RGB 표준입니다.
1995년 Ralf Kuron에 의해 처음으로 제안되었으며, 곧 ICC (International Color Consortium) 에 실질적인 안이 제출되었습니다.
그 후로, W3C, Exif, Intel, Pantone, Corel 등에서도 사용하기 시작했으며, 대표적인 오픈 소스 소프트웨어인 Gimp도 이 sRGB를 준수합니다.
sRGB는 현재까지 가장 잘 알려지고, 또 대중적으로 사용되고 있는 색공간으로써 현재 판매되고 있는
CRT, LCD, 디지털 카메라, 프린터, 스캐너, PMP 등도 모두 이 표준을 따르고 있습니다.







위의 이미지는 동일한 환경에서 사파리와 파이어폭스의 색감 차이를 잘 나타내주는 예입니다.
해파리의 색을 보시면 아시겠지만, 사파리에서는 올바른 색을 보여주고 있는 반면, 파이어폭스에서는 전혀 다른 색으로 표현되고 있습니다.

이렇게 되는 이유는 무엇일까요?

이게 바로 오늘 말하고자 하는 요점인, Color Management 때문입니다.
사파리는 해당 사진에 인코딩된 컬러프로파일 (Color Profile) 을 읽어들여서, 최대한 작가가 의도했던 색을 표현해주지만,
파이어폭스나 IE의 경우에는 이를 무시하고 이미지를 Generic RGB로 바꿔서 표현하기 때문에 색이 바뀌게 되는 것입니다.
간단히 말해 파이어폭스 (2.0 or below) 나 IE (Internet Explorer) 의 경우에는 컬러 매니지먼트를 하지 못하는 것이죠.

한마디로 Adobe RGB로 인코딩된 사진을 웹에 올릴 경우, 사파리 (3.0 or above) 는 제대로 표현을 해주지만,
파이어폭스 (2.x) 나 IE 의 경우에는 컬러프로파일을 지원하지 못하기 때문에 위의 이미지처럼 색깔이 왜곡되서 표현된다는 것입니다.

아직도 이해가 잘 안되시는 분들을 위해 아래 이미지를 준비했습니다. 보고 직접 대조해보시기 바랍니다.
참고로 아래에 있는 이미지는 '수상한 사람' 님이 블로그에 포스팅하신 글에 포함되어 있는 이미지입니다.

아래 이미지들은 모두 보통 빨간색을 색공간만 바꿔서 (각기 다른 컬러프로파일을 적용) 저장한 것입니다.
이렇게 하면 눈에 보이는 색은 빨간 색으로 모두 동일하지만, 실제로 색이 존재하고 있는 색공간이 다르므로,
웹 브라우저상에서의 색감 차이를 쉽게 알아볼 수 있습니다.




sRGB (255,0,0)


Adobe RGB (219,0,0)


Prophoto RGB (179,70,27)



동일하게 보이시나요?
아마 여러분이 파이어폭스 (2.0 or below) 나 IE를 사용하고 계신다면 다 다른 색으로 보이실 겁니다.
하지만 이건 엄연히 같은 빨간색입니다. 다만 색공간만 다를 뿐이죠.
바꿔 말한다면 각기 다른 컬러프로파일이 적용되었을 뿐입니다.

못 믿으시겠다고요?

이미지를 다운로드 받으셔서 포토샵등의 툴로 열어보시면 금방 같은 색이라는 걸 아실 수 있습니다.
만약 사파리 (3.0 or above) 나 웹킷 사용자시라면 웹 브라우저 상에서도 동일한 색상으로 표현이 될 겁니다. :-)
한마디로 현재 대중화된 웹 브라우저 중에서는 Safari 만 올바른 색을 표현해준다는 것입니다.


오해의 소지가 있어 내용을 추가합니다.
여기서 사파리만 올바른 색을 표현한다는 것은 파이어폭스 (2.0 or below) IE, Safari 3를 비교했을 때를 말합니다.
아래 써놓았듯이 파이어폭스 3.x 버전 부터는 'Color Management' 를 지원합니다.
마찬가지로 Safari도 이전 버전에서는 제대로 된 'Color Management' 를 지원하지 못했고,
이번에 3.0 버전으로 판올림되면서 제대로 된 지원을 시작하게 된 것입니다.

그래서 제가 제목을 '왜 사파리인가' 가 아니고, '왜 사파리 3인가' 로 정한 것이고요.
이 부분에 관해서 오해 없으시길 바랍니다. :-)

또 다운 받아 보시라는 것도 위에서 말씀드린 대로 포토샵 정도의 툴로 보셔야 다르게 보실 수 있습니다.
어플리케이션 중에서도 Color Management 를 지원하지 않는 것들이 있는데,
그런 어플리케이션에서 보시면 IE나 파이어폭스 (2.0 or below) 에서 보시는 것처럼 다 다른 색으로 보이실 겁니다.
Color Management 를 지원하는 뷰어에서 열어보시기 바랍니다. :-)



저기 위에 해파리 사진을 찍어서 올린 외국인도 마찬가지의 경우입니다.
이 분은 맥 사용자가 아니라, 윈도우에서 사파리를 사용하시는 분입니다.
이 분이 올린 글의 일부분을 보면, 사람들은 사파리가 버그 덩어리다, 안티 앨리어싱이 부담스럽다는 등의
안 좋은 말들을 일삼곤 하는데, 자기는 '자신의 사진을 제대로 표현해주지 못하는 웹 브라우저들이 더 이해가 안간다' 라고 말합니다.

또 자신이 공 들여 찍은 사진들을 웹에다 게시하는데 대부분의 웹 브라우저가
그 컬러프로파일 (Color Profile) 을 인식하지 못하고, 왜곡된 색으로 표현할 때마다 사진을 찍는게 참 허탈해진다고 말합니다.

요즘에는 'DSLR이 대세다' 라는 말이 나올 정도로 DSLR을 비롯한 디지털 카메라의 가격이 많이 떨어졌고,
그로인해 사진을 취미 삼아 즐기시는 분들이 많이 계십니다.
또 Flickr 와 같이 서로의 사진을 공유하는 곳들이 엄청난 인기 몰이를 하고 있는 상태이고요. :-)


여러분들이 찍은 멋진 사진들을 '제대로' 남들에게 보여주고,
반대로 다른 사람이 찍은 멋진 사진을 '제대로' 보고 싶다면 'Safari 3' 를 사용해보는 것은 어떨까요?



위에 해파리 사진을 찍으신 분의 말을 다시 한 번 인용해보겠습니다.


"여러분이 Safari 3에 대해 어떻게 생각하시든간에, 다른 사람들이 찍은 사진을 보실 때는, 한 번쯤 그 사용을 고려해보시기 바랍니다.
의도된 대로 보여지는 사진을 즐기심으로써, 여러분 자신과 그 사진을 찍은 작가에게 큰 호의를 베푸시게 될 겁니다.
제 사진 원본을 보시려면 Flickr 로 오십시오."



이제 웹 브라우저에서 올바른 색을 표현해주는게 중요할지도 모른다는 생각이 드시나요?
어쩌면 여러분들이 이제까지 봐오신 사진들은 작가가 의도하지 않은 사진일 수도 있습니다.

참고로 모질라에서도 이에 대한 피드백을 많이 받았고 그 중요성을 인정해,
곧 나오는 파이어폭스 3 에서는 컬러매니지먼트 (Color Management) 를 지원한다고 합니다.

마지막으로 '수상한 사람' 님의 글 끝 부분을 인용하면서 이 글을 마치도록 하겠습니다.

"참고로, Mac OSX 은 색공간에 대한 개념이 제대로 잡혀있어서, 색공간, 감마값등을 자유롭게 변환할 수 있는
기능들이 기본 장착 되어있다. 윈도우에서는 Adobe를 설치하지 않으면 못 쓰는 기능들 말이다."




글 읽으시는 분들의 이해를 돕고자 이미지를 하나 추가합니다. (글 가장 하단에 있습니다)
사파리 3와 파이어폭스 2의 색감 차이를 나타내주는 이미지입니다.
참고로 이미지에는 어떤 조작도 없으며, 단지 사파리와 파이어폭스에서 찍은 스크린 샷 두장을 붙여 놓은 것 뿐입니다.



내용을 추가합니다.

현재 파이어폭스 3.x 에서도 Color Management 를 제외합니다.
아래 방법을 따라해 보세요. 아마 다음 버전에서는 공식 지원하지 않을까 싶네요. :-)


1. 빈탭을 하나 열고, about:config 라고 입력
2. gfx.color_management.enabled 값을 'true' 로 전환
3. 파이어폭스 재시동



또 이외에도 웹킷 기반의 웹 브라우저에서는 모두 Color Management 를 제공합니다.
구글의 크롬 (Chrome) 역시 랜더링 엔진으로 웹킷 엔진을 사용하기 때문에 마찬가지입니다.

제가 이 글을 쓸 때만 해도, Color Management 를 지원하는 웹 브라우저는 거의 사파리 3가 유일했는데,
이제 하나 둘씩 지원하는 웹 브라우저가 늘어나는 걸 보니 기분이 좋네요. :-)

하지만 아직도 IE (Internet Explorer) 는 지원할 기미를 보이지 않고 있는데다가,
Color Management 를 제외하더라도 웹 표준을 제대로 지원하지 못해 오류가 발생하는 경우가 허다합니다.

앞으로도 더 많은 관심을 갖고 개선해 나갔으면 좋겠습니다. :-)



최근 업데이트 (2008년 11월 9일)
HTML 코드 간소화 (티스토리가 업데이트 되면서 사파리도 지원을 하기 때문에 이 기회에 코드를 많이~ 간소화 했습니다.)
이미지 수정 (기존 티스토리 이미지들은 외부 링크가 안되서 외부 링크가 되도록 수정했습니다.)














Email Print Favorites Twitter Facebook Google Buzz Google My Space Delicious Digg Reddit Stumbleupon Friendfeed More