블로그에 올린 사진 색감, 포토샵에서 보던 것과 달랐던 원인은?

포토샵에서 보던 색상과 브라우저에서 보던 색상이 다르다?

화질과 음질에 대한 지나친 집착은 영화와 음악을 즐기는데 피곤한 요소로 작용할 수 있다는 생각때문에 개인적으로 설정한 최소한의 기준 이상만 만족한다면 더 이상 신경쓰지 않고 영화를 보고 음악을 즐기곤 했습니다.

 

사용중인 모니터 환경 역시 DVI나 HDMI 연결을 통해 D-SUB 연결시 생길 수 있는 화질의 열화를 방지하고, 눈이 피곤하지 않을 정도의 적당한 밝기(Brightness), 밝은 곳과 어두운 곳을 구분할 수 있는 대비(Contrast) 정도만 신경을 썼고, 색상은 기본 값을 그대로 사용하고 있었습니다.

 

사실 이 정도만 신경을 써도 크게 불편없는 수준이라 생각해 왔는데, 블로그 활동을 위해 열심히 사진을 찍고 포토샵으로 살짝 보정을 하여 블로그에 올리는 일을 반복하다보니, 포토샵으로 설정한 사진의 색감과 블로그에 올렸을 때 사진 색감에 많은 차이가 있다는 것을 인지하게 되었고, 한번 그 사실을 알게 되자 사진을 올릴 때마다 무척이나 신경이 쓰이더군요.

포토샵의 색감과 인터넷 익스플로러의 색감

아래 사진에서 오른쪽은 포토샵에서 작업 중인 사진이고 왼쪽은 같은 사진을 인터넷 익스플로러를 이용해 티스토리 블로그에 업로드 했을 때의 사진입니다.

클릭해서 원본 사진을 보세요.

좌우를 비교했을 때 사진의 색감이 다른게 보이죠?

바닷가에서 갈매기를 향해 뛰어가는 상단의 사진에서는 바다/하늘의 색에 확연한 차이가 있습니다.

참치 회를 손질하고 있는 하단의 사진은 요리사의 붉은 옷 색깔에 차이가 있습니다.

 

한마디로 '물이 빠진듯'한 색감인데요, 포토샵에서는 제가 사진을 찍고 사진을 찍을 당시의 분위기에 가장 잘 어울리는 느낌이 살아 있는데, 그렇게 작업한 사진을 티스토리에 올리기만 하면 색이 바래져버리는 것이었습니다.

 

처음에는 이런 증상이 티스토리 사진 업로드 과정에서 뭔가 문제가 있는게 아닌가 생각했습니다.

하지만 티스토리 사진 업로더에 대해 얘기하는 경우를 거의 보지 못한터라, 시간이 되면 다음쪽에다 문의를 해봐야겠단 생각만 하고 있었고, 임시 방편으로 티스토리 포토 업로더로 사진을 올릴 때 [효과] 버튼을 클릭해 강제로 채도와 색상 값을 얼마간 높인 후 업로드하곤 했습니다.

색감 차이의 범인, 인터넷 익스플로러 8

불편함은 느끼고 있었지만 게으름 탓에 원인이 뭔지 심층 조사를 해볼 '생각'만 꽤 오랫동안 하고 있던 와중에 즐겨 방문하는 마루토스님의 블로그에서 '멋진 색감의 사진을 만드는 비법?'이란 포스팅을 읽게 되었고, 사진 전문가 인데다, 같은 티스토리를 쓰고 계시기에 나와 같은 문제를 겪고 있지 않을까 싶어 질문 글을 올렸고 곧 답글이 올라왔습니다.

색공간, 컬러프로파일, 인터넷익스플로러 10...세 가지 단어가 힌트란 생각이 들더군요.

 

특별한 목적이 있지 않는 한 최신 버전 보다는 안정적인 구 버전을 선호하는 저는 웹 브라우저 역시 인터넷 익스플로러 8을 이용하던 중이었습니다.(크롬과 파이어폭스, 그 중에서 크롬도 자주 이용하는 편이지만 블로그의 레이아웃을 살필 목적으로 설치한 것이고 아직까지 메인은 인터넷 익스플로러입니다).

 

인터넷 익스플로러 8과 컬러 프로파일, ICC 프로파일등의 키워드를 검색해보니, 인터넷 익스플로러 8은 ICC 프로파일을 제대로 지원하지 않아 이미지 속성에 따라 포토샵 등의 편집 프로그램에서 보던 색감과 다른 색감을 보게 될 수 있다는 문서들을 확인할 수 있었습니다.^[각주:1]

 

이 문서들을 보고, 같은 사진을 인터넷 익스플로러 8, 구글 크롬, 파이어폭스, 포토샵으로 함께 열어봤더니 '같은 사진'임에도 인터넷 익스플로러 8만 확연히 다른 색감인 것을 확인할 수 있었습니다.

(아...크롬과 파이어폭스를 한 컴퓨터에 깔아 놓은지 벌써 1년이 다 되어가는데, 진작 이렇게 확인하지 않았던게 참...ㅠㅠ)

클릭해서 원본 사진을 보세요.

 

그동안 인터넷 익스플로러 9와 10의 두 단계 업그레이드 버전이 발표됐지만 인터넷 익스플로러 8과 구글 크롬의 조합으로 큰 불편을 느끼지 못했기에 업그레이드하지 않았는데, 이제 업그레이드할 때가 되었다 싶어 바로 인터넷 익스플로러 10으로 업그레이드 했고, 앓던 이가 빠진 듯한 느낌입니다.

내 브라우저는 제대로 된 색을 보여줄까? 확인하는 방법

원인을 알고 나니, 앞서 포토샵에서 보던 색감을 맞추기 위해 티스토리 포토 업로더에서 또 색상을 조절한 것은 정말 바보같은 짓이었다는 것을 알게되었습니다.

마치 썬글라스를 써서 색이 왜곡된 상태에서 색을 제대로 보려면 썬그라스를 벗으면 되는데, 썬글라스에 또 다른 썬글라스를 씌운 것과 마찬가지였던 것이죠(인터넷 익스플로러 8의 왜곡된 색에 맞춰 또 색을 바꿔 놨으니 '정상적인' 브라우저에서는 또 왜곡된 색으로 보였을 것은 당연한일ㅠㅠ)

 

브라우저와 CMS, 컬러프로파일 등으로 인터넷 검색을 하다보니 재미있는 테스트 이미지들을 발견하여 텍스트만 살짝 수정해봤습니다.

아래에 보이는 이미지의 녹색, 파란색, 빨간색이란 글씨의 색깔이 어떻게 보이나요? '녹색'은 녹색 글씨로, '파란색'은 파란색 글씨로, '빨간색'은 빨간색 글씨로 보여야 컬러프로파일을 제대로 처리하는 브라우저입니다.

클릭해서 원본 사진을 보세요.

 

위의 이미지가 아래와 같이 표시된다면, ICC 프로파일을 제대로 지원하지 않는 브라우저(인터넷 익스플로러 8이하) 버전을 이용하고 있는 것입니다^[각주:2].

저는 사진이나 그래픽 전문가가 아니라 색공간이나 컬러 프로파일에 대한 더 이상의 체계적인 설명은 어렵습니다.

해당 지식에 대한 좀 더 자세한 얘기는 인터넷 검색 등을 통해 확인하시기 바랍니다.

 

문제를 해결하는데 큰 힌트를 주신 마루토스의 사진과 행복이야기에 올라와 있는 포스팅 들을 찬찬히 읽어보시면 많은 도움이 될 것입니다. 그 중에서 '색공간'으로 검색한 포스팅들은 꼭 읽어보실 것을 권합니다.

 

관련글

• 2012/07/10 - 무료 이미지뷰어 Imagine을 서브 이미지뷰어로 쓰게 된 사연
• 2012/07/06 - 사진 초보일수록 RAW로 찍어야 하는 이유
• 2012/06/19 - 포토샵 사진 보정책 한 권 추천합니다.
• 2012/05/16 - 모니터 피벗을 한방에! - iRotate
• 2009/10/22 - 사진으로 보는 DVI와 D-SUB의 화질 비교
• 2009/09/28 - LCD 모니터 화질을 최고로 쓰자!! - DVI와 D-SUB 이야기
• 2009/09/11 - [동영상 강좌] Hello PC 6회 - 모니터

1. 알씨 등의 이미지 뷰어도 ICC Profile을 제대로 처리하지 못해 색이 다르게 보입니다. [본문으로]
2. 물론, 이 테스트 파일은 '테스트'를 위한 것으로 실제로는 이렇게 엉망인 색이 표시될 확률은 극히 드문 편입니다. [본문으로]