'파이어폭스'에 해당되는 글 2건

얼마전에 깜짝 놀란 일이 있었다. 블로그의 대부분의 사진들은 사무실의 노트북으로 편집 - 리사이즈, 샤픈, 약간의 색감 조정 정도 - 을 해서 올리고 있는데, 노트북은 밝기도 약간 낮추고, 프라이버시 필터까지 끼워져 있어서 사실 제대로 된 색감을 갖고 있지는 않을 것이라고 어렴풋이 짐작만 하고 있다. 그런데 집에서 인터넷 익스플로러 6.0 버전으로 블로그를 열었더니, 내가 알고 있는 이미지와 너무 다른, 컨트라스트가 지나치게 강하고 좀 다른 색감의 이미지가 나오는 것이 아닌가. 아무래도 노트북의 LCD 환경이 더 안좋아서 그런가보다 하고 지레짐작하고 넘어갔다.

그리고 오늘 사진을 올리면서 얼마전에 스르륵클럽에서 본 글이 생각나서 인터넷 익스플로러로 열어보았다. 그랬더니 역시나, 포스팅을 하면서 인지한 사진과 다른 이미지가 뜨고 있었다.

사용자 삽입 이미지

내가 사용하고 있는 브라우저는 파이어폭스 3.5.2(이하 FF) 와 인터넷 익스플로러 6.0.2900.5522(이하 IE) 버전이다. 이미지의 색공간은 sRGB이고, 파이어폭스의 경우 gfx.color_management.mode가 2로 이미지에 색프로파일이 있는 경우에만 Color Management가 적용된다. (IE는 Color Management가 뭔지도 모를거다)

색을 비교하기에 앞서 위의 사진을 보면 왼쪽 사진이 좀 더 부드러운 느낌이 나는데, 이는 브라우저의 이미지 축소 알고리즘 떄문이 아닌가 싶다. 둘 다 텍스트큐브의 플러그인에 의해 이미지가 축소되는데, FF가 자연스럽게 이미지를 축소하는데 비해 IE는 축소된 사진이라는 티를 팍팍 내듯 픽셀이 계단식으로 일그러지고, 반복되는 패턴(세로 줄무늬 옷)에서 부자연스러운 모습을 보여준다.

사용자 삽입 이미지

두 브라우저간의 큰 차이는 FF는 어둡고 IE는 밝고 노란색이 가미되는 것이다. 이 사진을 포토샵에서 수정할때의 의도와 좀 더 가까운 것은 FF이다. 그렇다고 FF가 정확하게 일치하는 것은 아니고, 본래보다 조금 더 어둡고 색이 빠진 듯한 느낌이 든다. IE는 명암도 더 높고 노란색이 강조되는 듯해서 피부가 마치 황달기가 있는 듯한 느낌이 난다. 

사용자 삽입 이미지

색이 빠지는 느낌이라서 그런지 몰라도, FF는 계조가 깨진 검은색이 회색처럼 보이기도 한다. 혹은 컨트라스트를 주기 전의 느낌도 나고. IE의 경우에는 검은 부분을 더 언더로 만들어주는 것 같다. 하얀색은 하얗게, 검은색은 더 검게, 유채색은 더 강조해서... 이런 정책을 갖고 있는 것 같다.

사용자 삽입 이미지

어느 것이 더 좋을지는 사용자의 취향이겠지만, 글쓴이의 의도와 읽는이의 감상이 차이가 있을 수 있는 것은 아쉬운 점이다. 그런 면에서 FF의 경우에는 버전이 올라갈수록 색표현의 차이를 없애려는 노력이 보이는 것 같지만, IE의 경우에는 - 내가 6.0 이상의 버전을 사용해보지 않아서 확실하진 않지만 - Color Management에 대한 설정 자체도 없고 그런 노력이 잘 보이지 않아서 아쉽다.

물론 브라우저만이 문제는 아니고, LCD 패널의 특성이라던가, 사용자가 조정한 설정의 문제도 있다. CRT시절의 이야기지만, 푸르딩딩한 낮은 색온도의 화면을 좋아하는 사람도 있었으니, 이런 경우는 브라우저의 차이 정도는 문제거리도 아니다. 캘리브레이션을 한 모니터가 그렇지 않은 모니터보다 더 정확한 색을 보여주기도 하고, 기본 색공간에 따라서 다르기도 하고. 하지만 적어도 같은 모니터에서만큼은 어떤 어플리케이션을 사용하더라도 동일한 결과가 나오는 것이 좋지 않을까.

덧.
참고로 구글 크롬 2.0.172.43 버전에서는 FF에 가깝지만 좀 더 하얀 이미지를 보여준다. IE와 비슷하지만, 밝다기보다는 하얗다는 느낌이 든다.

덧2.
LCD의 경우에는 보는 각도에 따라 색이 다른데, 정자세에서도 LCD의 각 위치에 따라 다른 경우도 있다. 화면의 사각 모퉁이와 가운데에서 서로 다른 경우가 있으니, 가급적 화면 가운데에 두고 보는 것이 좋을 듯.
2009/09/03 19:50 2009/09/03 19:50
sense4.com을 다시 만들고 있다. 이번에는 제대로 리뉴얼하겠다는 야심찬 포부를 가지고 방명록만 달랑 남겨놓고 사이트 운영을 팽개쳐버린지 어언 반년이 지나가고 있지만 여태 손가락 하나 까딱하지 않고 내버려두고 있었는데 마침 여유가 약간 생겨 조금씩 건드려보는 중이다.

그런데 파이어폭스 1.0이 나온 후부터 내 메인 웹브라우져는 파이어폭스가 차지하고 있다. 덕분에 웹표준이라는 것에 조금 눈을 떴고, 이번에는 그 망할 TABLE 이라는 것들을 다 치워버리고 표준을 지켜 만들어보자는 결심을 하기에 이르렀는데...

이제 겨우 첫 화면 레이아웃을 잡았을 뿐인데, 파이어폭스로만 결과를 확인하다가 무심결에 IE에서 페이지를 여니, 투명 이미지는 먹지도 않고 레이아웃도 깨져있는게 아닌가. 아, 이런...

문제점 1. IE에서는 반투명 PNG를 투명하게 표시하지 못한다.
문제점 2. POSITION이나 OVERFLOW 등의 스타일을 적용하면 파이어폭스와 IE가 다른 결과를 내기도 한다.

어쩌면 아직 발견하지 못한 문제가 수두룩하게 쌓여있을지도 모르고, 페이지수가 늘어날수록 더 난잡한 소스가 되버릴지도 모르기에 결단을 내려야 했다. 그냥 여태 해왔듯 IE를 기준으로 맞추느냐, 서로 다르게 보일 수 밖에 없는 디자인을 포기하느냐, 노가다를 해서라도 CSS를 분리하느냐...

결국... CSS를 나누기로 했다. 망할 MS!


덧. 오늘 IE를 실행하니 about:blank로 되어 있던 첫페이지에 IE 7.0의 광고가 떡하니 뜨는게 아닌가. 과연 IE 7 에서는 타 브라우저와의 이 갭을 줄일 수 있을까.


덧 2(07.24). CSS에서 기본 스타일에 IE만 조금 다른 스타일을 적용할 수도 있다. 갑자기 문제점이 무위로 돌아갔다. ㅡㅡ;
2006/07/20 15:08 2006/07/20 15:08