본문 | 검색 | 글 분류 | 최근 글 | 최근 댓글 | 기타 | 아래로

IE6에서 PNG-24의 ‘투명/반투명’ 색을 바르게 표현하기.

nmind 님께서 포스팅 해주신 ‘오늘의 링크’ 로부터 ‘IE6에서 PNG파일을 사용할 수 있게 해주는 스크립트‘ 라는 글을 보고 이를 적용하는 방법을 풀어 보았습니다.

이 팁은 IE 6.x 버전의 웹 브라우저에서 PNG-24 파일의 투명/반투명 색을 회색으로 처리해버리는 비표준 렌더링 방법을 개선하기 위한 해결방법 입니다. 기존의 스크립트가 단순하게 <img> 태그에만 적용되는 팁이었다면 이 방법은 CSS 의 Background 속성에도 적용이 가능하다는 점 때문에 높은 점수를 주고 싶습니다.

PNG-24 이미지는 GIF와 달리 투명색 뿐만아니라 반투명색의 투과까지 지원을 해주기 때문에 웹 디자이너 입장에서 그 활용가치가 매우 높다고 말씀드릴 수 있겠습니다. 단점은 GIF 이미지보다 PNG-24 파일의 용량이 약 2배정도 증가한다는 점인데 화면을 PNG-24 으로 도배하지 않는 이상 그다지 걱정할 만한 트래픽 증가는 아닌것 같습니다. 하지만 되도록 큰 이미지에는 PNG-24의 사용을 자제하시는게 좋겠지요.

IE 6.x 버전에서 PNG-24 파일의 투명/반투명 색을 바르게 렌더링 하기 위한 CSS/Javascript 적용방법은 다음과 같습니다.

  1. iepngfix.htc 파일을 다운로드 한 다음 웹 서버의 원하는 폴더에 올립니다.
  2. 1*1px 짜리 투명색으로 처리된 blank.gif 파일을 웹 서버의 원하는 폴더에 올립니다.
  3. iepngfix.htc 파일을 열어서 blank.gif 파일의 경로를 바르게 변경합니다.

    if (typeof blankImg == ‘undefined’) var blankImg = ‘blank.gif‘;
    // 1×1px 짜리 투명 이미지(blank.gif)의 경로를 변경.

  4. 모든 페이지에서 참조하는 css 파일을 열고 원하는 class 에 {behavior:url(iepngfix.htc);} 속성을 추가한 다음 iepngfix.htc 의 경로를 바르게 변경해 줍니다.

    .iePngFix {behavior:url(iepngfix.htc);}
    /* iepngfix.htc 파일의 경로를 바르게 변경합니다 */

  5. 해당 class가 적용된 PNG-24 이미지의 투명/반투명 색이 IE 6.x 버전 에서도 정상적으로 렌더링 됩니다.

IE 6.x 정식버전에서의 렌더링 테스트 결과는 다음과 같습니다.

예제에 사용된 이미지는 포토샵에서 Alpha 50%가 적용된 것입니다. 이미지의 투명/반투명 영역이 체크무늬패턴의 배경을 어떻게 투과시키는지 확인하시면 됩니다. 특히 그림자 부분을 유의깊게 보시구요. 위아래로 같은 이미지이며 좌우로는 파일 형식이 다릅니다. 아래 화면은 IE 6.x 가 정상적으로 설치되어 있지 않은 분들을 위하여 센스있게 미리 캡쳐된 화면입니다. 정상적으로 설치된 IE 6.x 가 깔려있다면 실제로 코딩된 화면을 직접 확인 해보세요. IE6.x Standalone 버전 에서는 아래 화면 대로 렌더링 되지 않으며 스크립트오류까지 만나게 됩니다.

IE6.x 에서 PNG-24의 '투명/반두명' 색을 바르게 표현하기 렌더링 테스트 결과.

IE 5.x 까지 하위버전 호환되지는 않습니다. IE 6.x 버전만을 위한 것이지요. IE 7.x 부터는 이딴짓(?) 안해도 PNG 파일의 투명/반투명 색을 표준에 맞게 렌더링 해줍니다. 따라서 이 팁은 어디까지나 IE 6.x 의 브라우저 호환성을 유지하기 위한 방법이며 IE6.x 브라우저의 하위 호환성을 위하여는 IE8.x 버전이 나오기 전까지 이딴짓을 계속 해야 할 것으로 생각됩니다.

IE 6.x 렌더링 테스트 결과 발견된 문제점

  1. ‘회선속도가 느리거나 웹 문서의 용량이 커지는 경우’ 페이지가 완전히 로딩되기 전까지 투명/반투명 색이 잠깐동안 회색으로 나타나는 증상이 있습니다. 따라서 ‘저회선 사용자의 인터넷 환경’ 을 고려해야 한다거나 ‘포털’ 규모의 웹페이지에 사용하려는 경우 이를 심사숙고 해보아야 합니다. 한편 Apple Mac Pro, Mac OS X Leopard Sneak Peek 페이지 에서도 이 코드를 사용하고 있는것을 보면 그다지 Critical 한 측면은 아닌가 봅니다.
  2. .iePngFix 라는 class 가 적용된 배경이미지의 반복(repeat, repeat-x, repeat-y)과 위치값(left, right, top, bottom & offset value) 적용되지 않습니다.(위 background 렌더링 테스트 결과 참조)
  3. <img> 태그에 padding 값을 주게 되면 padding 값 만큼 PNG 이미지의 크기가 늘어나는 형태로 잘못 렌더링 됩니다. (위 <img> 렌더링 결과 참조)
  4. 2~3번 같은 경우 때문에 공용선택자 ‘*’ 에 behavior 를 적용하는 방법은 지양할 수 밖에 없습니다. repeat 시킬 필요가 없고 padding 값을 줄 필요가 없는 PNG-24 이미지에만 class 를 주어서 현재의 스크립트를 개별적으로 적용 하는 방법을 권장합니다. 사실 PNG-24를 이용하여 투명한 영역을 제대로 렌더링 시켜야 하는 경우는 많지 않으므로 역시 class 를 이용하는 방법을 권장합니다.

    (X) * {behavior:url(iepngfix.htc);}
    (O) .iePngFix {behavior:url(iepngfix.htc);}

    그럼에도 불구하고 이를 공용선택자 ‘*’ 에 일괄 적용하는 것이 나은 케이스라고 판단되면 이 속성을 상속받을 필요가 없는 PNG-24 이미지에는 다음과 같은 class 로 처리하십시오. 이 코드는 공용선택자 ‘*’ 보다 아래쪽에 코딩되어야 우선순위를 갖습니다. 당연하죠.

    .iePngUnFix {behavior:none;}

  5. behavior 라는 속성은 IE 전용 속성입니다. 찜찌름 하죠. ㅡㅡ; 하지만 이러한 속성을 다른 브라우저는 오류로 처리하지 않고 그냥 무시해 버리기 때문에 전혀 문제가 되지는 않습니다. 저같은 경우 CSS hack 이 필요한 순간이 오면 이와같이 IE 전용 속성을 사용해서 문제를 해결하고 있으며 hack 은 한번도 사용해 본적이 없습니다. hack 은 더욱 찜찌름 하기 때문이죠. 특히 IE7.x 에서는 오히려 문제가 되기도 하구요. 좌우지간 hack 은 절대로 쓰지 마세요.

참조문서

관련 포스트

분류: CSS, 웹 디자인, 웹 접근성, 웹 표준, 자바스크립트 | 2006년 12월 15일, 20:51 | 정찬명 | |
트랙백URI - http://naradesign.net/wp/2006/12/15/100/trackback/

29개의 댓글이 있습니다.

  1. 이흥섭 댓글 | 2006년 12월 15일, 21:32

    filt(src, ’scale’); 이 부분에서 ’scale’을 ‘image’로 바꾸면 늘어나지 않을 것 같은데. 확실치는 않아요.

  2. 정찬명 댓글 | 2006년 12월 15일, 21:56

    오~ 정말이네. 그런데 image 으로 변경하는 경우 다시 border 표현에 문제가 생기는구나. 이 부분을 주석으로 설명 추가해 두었다. Thank you very much!

  3. 신현석 댓글 | 2006년 12월 15일, 23:15

    우리나라면 클라이언트가 랜더링 중간에 회색으로 깜빡이는 이미지를 그냥 두지 않을 겁니다. :(

  4. 정찬명 댓글 | 2006년 12월 15일, 23:37

    그럼 그냥 뭐 회색으로 보이도록 냅두죠 뭐. ^^a

  5. hooney 댓글 | 2006년 12월 16일, 0:33

    해당 사이트에도 의견을 남겼지만, 웹디자이너에게 희소식이 될 내용입니다.

    다만, IE의 버그를 위해 IE 전용 스크립트로 해결하는 게 맞는 방법인지 고민되더군요.

    저는 IE6 이하 버전 전용 CSS에 IE 필터를 직접 적용하고 있습니다. IE 필터의 사용법이 어렵지 않고, 알파필터처럼 유용한 게 몇몇 있기에, IE 필터를 알아보는 것도 좋을 것 같아요.

    다만, 이런 류의 ie png hack들이 모두 배경 반복을 지원하지 않는 점이 아쉽습니다. 그라데이션 외곽선을 갖은 박스의 좌우측 이미지를 png로 반복시킬 수 있으면 정말 편할테니깐요~

  6. 정찬명 댓글 | 2006년 12월 16일, 1:04

    hooney 님 블로그에서 관련글이 있을꺼라고 생각하고 링크하기 위해 검색을 시도했는데 검색기능이 없더군요 ㅡㅜ; 너무 과감하신것 아닌가요.^^; 한 가지 궁금한건 IE 전용 CSS filter 적용시 한 가지 색으로만 처리된 투명영역이라면 그것을 보존해 줄것으로 추측(chroma filter 가 그런 식이죠. 특정색을 투명하게 만드는…)되는데 반투명(Alpha 50%) 영역까지 보존해 주는지 궁금합니다. 예를들면 ‘불투명-반투명-투명’ 으로 이루어진 그라디언트(또는 Anti-Aliasing) 에서 반투명 된 부분을 투과해주는지의 여부가 궁금합니다. 관련 포스트가 있다면 링크해주시면 좋겠습니다.

  7. 정찬명 댓글 | 2006년 12월 16일, 1:17

    참, 그리고 IE의 버그를 개선하기 위해 IE전용 속성을 사용하는 방법은 접근성에 문제가 없기 때문에 나쁘지 않다고 생각 합니다. 웹 표준을 지키려는 상위의 목적 가운데 하나가 바로 접근성(여기서는 Vendor간 호환)이기 때문에 접근성을 위해서라면 웹 표준을 위한 ‘Validation 검증’ 을 잠깐 희생시켜도 좋다는 생각입니다. 다시말해 ‘표준을 지키기 위한 표준이 아닌, 접근성을 지키기위한 수단으로서의 웹 표준’ 으로서 만족해야 하지 않을까 라는 생각을 가지고 있습니다. 이런 맥락에서 ‘hack 을 절대로 쓰지 마세요’ 라고 말했지만 Vendor 간 호환성을 보장해주는 hack 이라면 어쩔 수 없는 경우에는 사용해도 좋다고 생각합니다. Vendor 간 호환성을 높이는 것이 웹 표준보다 상위의 목적인 접근성을 높여주니까요. 논란의 여지가 있긴 합니다만 뭐 제 생각은 그렇습니다.

  8. nmind 댓글 | 2006년 12월 16일, 1:24

    역시 찬명님:-) 깔끔한 정리 감사합니다!

  9. hooney 댓글 | 2006년 12월 16일, 10:59

    제가 ie는 ie를 위한 comment 핵[if IE]을 권장한답니다. ie의 css 랜더링 버그나 기타 png 버그 같은 것들을 해결하는데 ie 전용 css로 해결하는 게 깔끔하다고 생가해요. 다른 일반적인 modern 브라우저들을 위한 css에 이런 hack들을 안쓰려고 한답니다.

    이는 제가 vaild css에 대한 강박관념일 수 있어요. 나만 이런 강박관념에 빠져있나 싶었더니, 위에 비헤비어를 만드신 분의 블로그에 답글을 써주신분 중에서 저와 같은 의견을 갖는 분이 상당히 있더라구요~

    어디까지나 기호의 선택이라고 봐요. css에서 중요한 건 vaild 보단 최적화라고 생각합니다. ㅎㅎ

  10. 정태영 댓글 | 2006년 12월 16일, 11:46

    png 가 gif 보다 나은 점은 알파채널만은 아닙니다. gif 는 256 color 밖에 지원하지 않지만 png 는 true color 를 지원하죠.

  11. 정찬명 댓글 | 2006년 12월 16일, 11:47

    훈님의견에 저도 공감합니다.
    IE 전용 property 와 CSS hack 의 사용에 대하여 더 많은 견해가 궁금한 분들이 계시다면 아래 글타래를 참조해 주세요.

    제목 : IE전용 CSS property 와 CSS hack 어떻게 생각하세요?
    http://forum.standardmag.org/viewtopic.php?pid=5089

  12. 정찬명 댓글 | 2006년 12월 16일, 11:49

    태영님, 부족한 글을 채워주셔서 감사합니다.^^a

  13. 김주원 댓글 | 2007년 1월 31일, 13:00

    위 소스를 사용할 경우에 문제점은…

    배경이 png일 경우 배경위로 form 태그등…input,check박스위로 마우스의 text 커서가
    나타나질 않네요. tab키로 이동할수밖에 없습니다.
    7.0에서는 문제없이 작동합니다만…어차피 7.0에서는 핵이 필요없으니
    제길슨 MS….

  14. 정찬명 댓글 | 2007년 1월 31일, 13:31

    김주원님께, 새로운 문제점이네요. Report 감사합니다.

  15. 정찬명 댓글 | 2007년 3월 6일, 0:27

    이 팁을 배경이미지 방식으로 사용하는 경우 배경이미지의 위치 값이 적용되지 않는다는 사실을 추가로 발견하였습니다. 이런 된장 이군요 ㅡㅜ;

  16. 문영신 댓글 | 2007년 5월 3일, 17:31

    PNG 에 클라이언트 이미지맵 링크를 적용할려고 했는데, (반)투명 부분에 링크가 제대로 안걸리는군요

  17. 정찬명 댓글 | 2007년 5월 3일, 17:50

    리포트 감사합니다. 아직 PNG에 이미지맵 걸어본 적이 없어서 모르고 있었습니다. 좋은 하루 되세요 ^^a

  18. freeism 댓글 | 2008년 3월 4일, 0:05

    “IE6.x Standalone 버전 에서는 아래 화면 대로 렌더링 되지 않으며”… 털썩;;;
    IE6 때문에 이걸 사용하려고 하고 있는데요… ㅠㅠ
    Standalone 버전에서는 확인 할 수 있는 방법이 없을까요?
    (VPC를 돌리기엔 집 컴은 리소스사 부족할 듯 하여 말이죠. ㅠㅠ 흑흑)

  19. 정찬명 댓글 | 2008년 3월 4일, 1:06

    freeism님, Multiful IE 에서는 정상적으로 렌더링 됩니다.

    Multiful IE 소개(IE 3~6 버전을 선택적으로 설치할 수 있는)
    http://tredosoft.com/Multiple_IE

    Download Multiple IE installer
    http://tredosoft.com/files/multi-ie/multiple-ie-setup.exe

  20. 조상현 댓글 | 2008년 5월 7일, 11:36

    개발자들이 모두 동참해서 IE를 지원하지 않는다면
    IE만 패치돼면 그만일텐데..
    ie가 참 사람 힘들게 하네요;;

  21. 조상현 댓글 | 2008년 5월 16일, 17:47

    로딩시에 잠깐보이는 회색바탕이 문제가 되는군요.
    처음에 아래처럼 display:none으로 두고
    img src=”/img/target.png” style=’display:none’

    behavior로 htc파일을 처리한후에

    javascript로
    img.style.display=’inline’;
    이렇게 할순 없을까요?

  22. 정찬명 댓글 | 2008년 5월 17일, 3:33

    조상현님 안녕하세요? 한번 적용해 보시고 저좀 알려주세요 ^^; 잘하면 훌륭한 팁이 될 수도 있겠네요~ 즐거운 주말 되세요 ^^

  23. 타나토스 댓글 | 2008년 5월 22일, 22:03

    참 좋은 소스를 잘 사용하고 있습니다.
    보여지는 것에 대한 문제는 전혀 없고 아주 잘됩니다.
    그런데 버튼으로 사용할려니까 버튼이 안잡히네요.
    png 배경 위의 png 버튼을 클릭할려면 안잡힙니다.
    이것 좀 해결 해주시면 정말 정말~ 고맙겠습니다 ^^

  24. 정찬명 댓글 | 2008년 5월 22일, 22:42

    타나토스님, 안녕하세요? IE에서는 png배경이 사용된 엘리먼트에 position 속성이 들어가게 되면 자식요소의 a에 마우스로 접근할 수 없는 버그가 있습니다. png배경이 포함된 요소에 position 속성을 제거하거나 또는 a요소에 position:relative 또는 position:absolute 속성을 부여해 보세요. 그래도 문제해결이 안되실때엔 URL을 공개해 주시면 한번 확인해 보겠습니다. 감사합니다.

  25. 김세민 댓글 | 2008년 6월 24일, 19:14

    저도 이 핵을 쓰고 있는데요…다른건 다 좋은데 반복이 안되는게 참 …
    이건 그렇다고해도 벡그라운드로 적용시 포지션 지정도 안되는건지? …
    아시는분 있을까요?

  26. 정찬명 댓글 | 2008년 6월 24일, 19:47

    김세민님, 안녕하세요.^^; 네, 반복도 안되고 배경이미지 위치도 지정이 안됩니다. ㅡㅡ;

  27. 김세민 댓글 | 2008년 6월 24일, 20:07

    허허 빠르게 답변글이 올라오네요
    감사합니다
    뭐하는 사이트인지도 몰르고 들어왔는데…(아직도 잘 모르지만)
    앞으로 자주 들어와야겠네요.
    반갑습니다

  28. 이원민 댓글 | 2008년 7월 20일, 9:09

    얼마전 봄눈님의 도움으로 새로운 IE6 버그 해결법 영문사이트 출처를 찾았습니다. IE6브라우저에 PNG이미지를 올바르게 표시하지 않는 버그를 간단하게 자바스크립트 호출만해도 해결가능하다는 얘기입니다. 더 기쁜 것은 백그라운드와 이미지둘다 적용이 된다 라는 점입니다. 테스트를 해봤지만 css 백그라운드 처리할 때 repeat-x, repeat-y 속성을 지원하지 않는 것 같군요. 구글키워드는 “Unitpngfix” 이겁니다. 이 것에 대한 추가적인 내용과 간단한 리뷰와 속도 테스트를 감히 부탁드려봅니다..^^

  29. 정찬명 댓글 | 2008년 7월 21일, 22:51

    소개해주신 PNG 기법은 얼마전에 ‘웹 초보의 Tech 2.1(http://www.choboweb.com/348)’ 이라는 블로그를 통해서 저도 접했습니다. 소스코드를 제공하는 곳은 ‘유닛인터렉티브, http://labs.unitinteractive.com/unitpngfix.php‘ 라는 곳이었구요.

    간단하게 살펴본 결과 MS 전용 filter를 사용하는 것과 투명한 gif 이미지를 하나 사용한다는 점 그리고 배경이미지의 반복과 배경이미지의 포지셔닝을 제어할 수 없다는 점이 동일했습니다.

    다른점은 iepngfix.htc 파일이 IE 6.0~5.5 버전을 모두 지원하는데 반해 최근 소개된 Unit PNG Fix는 IE 6.0 만을 지원하고 있다는 점이 달라서 저로서는 실무에 사용할 수 없었고 리뷰하지 않았습니다.

    또한 iepngfix.htc 파일의 경우 필요한 곳에만 적용하지만 unitpngfix.js 파일은 png 이미지가 사용된 모든(전경이든 배경이든) 엘리먼트에서 코드를 실행하기 때문에 미세하겠지만 속도차이는 발생할 것으로 추측됩니다.

    타겟 브라우저로서 IE 5.5를 고려하지 않아도 된다면 iepngfix.htc 방식보다 사용이 편리하기 때문에 꼭 나쁘다고 말씀드리기도 어렵네요 ^^

댓글 남기기.

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능합니다. 그러나 코드 예제가 그대로 출력되기를 원하시면 <꺽쇠>는 [괄호]로 변환해 주세요.

본문 | 검색 | 글 분류 | 최근 글 | 최근 댓글 | 기타 | 위로