나를 미치게 하는 PNG HTML/ CSS
2008.04.01 11:42 amati Edit
인터넷 브라우저에서 사용할 수 있는 이미지는 아시다시피 GIF, JPG, PNG 가 있습니다.
그중, 웹에서 사용할 수 있는 이미지로서의 PNG 는 GIF 나 JPG 에 비해 많은 장점을 가지고 있습니다. PNG 는 "Portable Network Graphics" 의 약자이며, 프리웨어이고, JPG 와는 달리 무손실압축(원본과 완전히 같음)을 지원하며, 24bit(1670만) 컬러를 구현합니다. 무엇보다도 알파채널, 즉 반투명을 지원한다는 큰 장점이 있죠. 단점이라면, GIF 처럼 애니메이션을 지원하지 못한다는 것과, 파일 크기가 다소 크다는 점이지만, 큰 단점은 아닙니다. (사실, 구버전의 포토샵에서 PNG로 저장할 때 용량이 비정상적으로 커지는 버그 때문에 PNG 에 대한 편견이 부각된 점도 있습니다.)
자세한 설명은 위키를 참고하세요!
http://ko.wikipedia.org/wiki/PNG
PNG 의 가장 큰 장점이자 특징이라면 알파채널을 지원해서 반투명도 표시할 수 있다는 점인데요, 그만큼 표현할 수 있는 범위가 상당히 넓어진다는 장점이 있어서 최근들어 비주얼이 강조되는 사이트에서 많이 사용되고 있습니다. 하지만, 현재로선 가장 높은 점유율을 가지고 있는 IE6 에서는 png를 사용할 때 치명적인 버그가 존재합니다.
1. IE6 에서는 PNG 의 투명 영역을 회색으로 표시함.
반투명의 영역을 회색으로 표시하는 버그 때문에 가장 큰 장점인 알파 채널을 사용할 수 없습니다. 굳이 PNG 이미지를 사용할 이유가 없어지는 것이죠. 따라서 IE 에서는 이 문제를 해결하기 위해 AlphaImageLoader 라는 내장필터를 제공하고 있습니다. 해당 필터에 대한 자세한 설명은 다음 페이지를 참고해주세요.
http://msdn2.microsoft.com/en-us/library/ms532969.aspx
이를 해결하기 위한 방법으로는 검색해보시면 아시겠지만, 일명 iepngfix.htc 를 이용한 방법이 가장 쉽게 해결할 수 있는 방법입니다. 이 방법도 따지자면 위에 언급한 AlphaImageLoader 필터를 사용하여 해결하였는데요, 이에 대한 포스팅은 다음을 참조해주세요.
http://naradesign.net/wp/2006/12/15/100/
2. 색상이 더 짙게 표현됨
위 이미지는 포토샵에서 #333333 색상을 이용한 이미지를 각각 GIF 256color Transparency, JPG very high quality, PNG 24bit Transparency 옵션으로 각각 저장한 후 웹브라우저로 렌더링 해본 결과입니다.
만약 미세한 색상을 구분할 수 있으시다면 사파리, 오페라, 파이어폭스에서는 전혀 문제가 없다는 것을 확인하실 수 있지만, IE계열에서는 jpg, gif 보다 png 쪽 이미지가 약간 짙게 표현되는 것을 확인 하실 수 있을 겁니다.
각각의 이미지로 표현된다면 별 문제는 안되겠지만, 같은 색상의 이미지 위에 반투명 표현을 위해 png 이미지를 사용한 것이라면 문제가 생길 수 있겠죠. 이 문제는 IE 의 AlphaImageLoader 필터를 사용해도 공통적으로 발생하는 문제인 것을 보면 HTML 수준에서 해결할 수 있는 방법은 없다는 것을 예상할 수 있겠습니다.
저도 예전에 png를 많이 사용한 프로젝트를 진행하면서 위 문제때문에 상당히 고생했었던 기억이 있는데요, 비주얼이 특히 화려한 한게임 계열 사이트를 작업하시는 분들은 PNG 가 사용되는 상황이 되면 머리를 싸매시더군요 ㅠ_ㅠ
위의 문제들이 해결된(사실은 원래 없었던) 파이어폭스나 기타 표준계열 브라우저가 있다고는 해도, 아직까지는 점유율 80% 이상을 차지하는 IE6 을 무시할 수 없는 상황에서... PNG 를 쓰는 것은 과연 옳은 걸까요?
Trackbacks 0
Comments 5
-
어이없다
2008.04.02 08:13
*.189.20.86
-
A2
2008.04.02 08:13
*.255.6.239
-
fuwa
2008.04.05 18:11
*.232.125.123
안녕하세요~
png 검색하다가 amati님 포스트를 읽게됐는데
이렇게 상세한 비교..감사드립니다
전 gui디자이넌데..
gui전문에이전시를 다니는 건 아니구
한 전자회사의 gui디자이너로 일하고있는 실정이라 전문용어는 잘 모르겠습니다만.;;;
윈도우어플리케이션도 다루고..
윈도우가 아닌 (이걸 system gui라고 하던가;;)방식에서의 gui도 다루고있습니다
윈도우나 시스템이나 파일포맷이 bmp라서..
시스템쪽은 어쩔 수 없다해도
윈도우에서는 png파일을 써서 배경위에 png버튼을 이용해 손쉽게?? 버튼을 제작하고싶은맘에 개발자분께 건의를 했었거든요
요새 한참 긍정적인 방향으로 검토중인데
아직5~6개월차 디자이너라 모르는게 많습니다 ;ㅁ;..
웹디자인쪽에서만 png가 단점이 많아지는건가요..?
아님 gui파일포맷에서도 그러는건가요>..??
;ㅁ;..... -
새빛
2008.04.16 21:51
*.153.69.251
우왕... 미세한 색상의 차이까지 캐치해내시다니 예리하시군요..
그런데 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ........ 이거 알려드릴까요, 말까요? ^^;; 오랫만에 nhndesign.com 사이트 들어와서 좋은 정보 많이 보았으니, 2번 문제의 해결법을 알려드리지요.
TweakPNG라는 프로그램이 있습니다. 구글에다 "twaekpng"로 검색해서 나오는 검색결과중 첫번째 사이트가 제작자 홈페이지입니다. 아무튼 그걸 받으셔서, PNG파일을 열어보세요. 그러면 chunk들 목록이 쭈악 나올겁니다. 그중에서 "gAMA" 청크를 Delete키 눌러서 삭제하고 저장하세요. 저장한 PNG를 서버에 업로드하고 IE에서 새로고침해서 제대로 보이는지 확인하세요. :)
PNG파일의 구조와 gAMA 청크의 역할에 대해서는 검색해보면 어렵지 않게 찾을 수 있을 겁니다. gAMA chunk에는 감마값이 저장되는데 통상 Windows 환경의 감마값인 2.2의 역수인 0.45455가 저장되더군요. (왜 역수로 저장되는지는 저도 잘 모르겠습니다만..^^) '감마(Gamma)'에 대해서 알고 싶으시면 역시 검색질..^^;;
TweakPNG에서 gAMA chunk의 값을 이리저리 바꿔가며 여러 브라우저에서 어떻게 보이는지 한번 테스트해보세요. 가령 gAMA chunk의 값을 2.0정도로 확 올려서 저장해 버리면 #333(80% 회색)은 33% 정도의 회색으로 보일 겁니다. 제 컴퓨터에는 IE7과 FF3 beta 5밖에 안깔려있어서 두가지로만 확인해봤습니다. IE7과 FF3 양쪽에서 모두 하트의 바깥쪽이 허여멀건하게 보이는 걸로 판단컨대, 이 현상은 아무래도 IE에서 PNG의 감마 보정을 제대로 못하는 버그라고밖에 이야기할 수 없을 것 같습니다.
단 PNG파일에 gAMA chunk가 없으면 IE와 FF 모두 별도의 보정을 거치지 않고 원본 데이터 그대로 보여주기 때문에 이같은 IE의 버그를 피해갈 수 있습니다. 물론 다른 브라우저에서도, 또 윈도우 뿐만 아니라 Mac이나 다른 환경에서도 문제없이 잘 보여지는지는 별도로 확인해야 할 겁니다. 원래 gAMA chunk는 서로 다른 기종간의 다른 감마값을 보정하기 위해서 있는 걸로 알고 있는데, 그렇기 때문에 이 방법이 임시방편은 될 수 있어도 근본적인 해결책은 될 수 없겠죠. 근본적으로는 IE의 버그가 수정되어야 하겠습니다.
TweakPNG는 소스가 공개되어 있으니, C 프로그래밍이 가능하다면 TweakPNG의 소스를 참고하여 한 디렉토리 내의 모든 PNG파일의 gAMA chunk를 일괄적으로 제거해주는 유틸리티 프로그램을 만들어서 쓰는것도 좋을 듯 합니다. 파일 하나하나마다 일일히 TweakPNG로 열어서 다시 저장하는 건 귀찮은 일이니까요. 아니면 디버거나 디스어셈블러를 이용해서, 포토샵에서 PNG로 저장할 때 gAMA chunk가 기록되지 않도록 Reverse Engineering을 해서 쓰는 것이, 조금 어렵긴 하지만 일하는 데는 더 편할 것 같습니다. (실제로 저는 예전에 개인적으로 페인트 샵 프로를 그런식으로 패치해서 쓴 적이 있었습니다. 그것도 벌써 6년전의 일이군요;;;;; ) -
워터
2008.07.07 12:30
*.135.219.124
NULI 블로그입니다.
ㅣ