투명 PNG를 IE6에서 보이게 하는 방법 소개 #1 : 어려운 방법

IE6에서는 이상하게 나오는 투명 PNG

위의 이미지는 Internet Explorer 6.0에서는 정상적으로 보이지 않습니다.
글자의 주변이 투명한 투명 PNG를 IE6에서는 제대로 그려내지 못하기 때문입니다.
(정확히는 투명 PNG가 아니라 알파채널이 있는 PNG로 불러야 합니다. 각 점별로 불투명도를 0~255 단계로 정할 수 있기 때문입니다)

제 블로그의 헤더도 투명 PNG를 사용합니다.
그런데, IE6에서 PNG를 잘 그리지 못하기 때문에 IE6 이하에서는 투명 PNG 대신에 투명 GIF를 출력하도록 했습니다.
이렇게 브라우저의 버전에 따라 다른 이미지를 출력하게 하려면 쉬운 방법은 없고, 자바스크립트로 떡칠을해야 됩니다.
※ 무조건 투명 GIF를 사용해도 되지만, 알파채널이 적용된 투명 PNG보다 화질이 훨씬 떨어지므로 PNG를 선호합니다

이런 기능을 부여하려면 아래와 같은 절차에 따라서 작업하면 됩니다.

---

1. 우선, IE의 버전을 알려주는 함수를 헤더에 삽입합니다.

<!-- IE 버전 확인 함수 -->
<script type="text/javascript">
<!--
function getIEversion()
{
   var version;
   if (navigator.appVersion.indexOf("MSIE")!=-1)
   { temp=navigator.appVersion.split("MSIE"); version=parseFloat(temp[1]); }
   else version=999.0;
   return version;
}
-->
</script>
<!-- IE 버전 확인 함수 -->

2. 스킨 파일(skin.html)에서 투명PNG를 뿌려주는 코드를 찾습니다

아래와 같은 코드를 찾는 것입니다. testtrans.png가 투명 PNG 파일입니다.

<img src="./images/testtrans.png" width="331" height="69" usemap="#_bnl_title">

3.  이 투명 PNG와 같은 크기의 투명GIF 파일을 만듭니다

Paint.NET 과 같은 프로그램에서 PNG 파일을 읽은 뒤 GIF 파일로 저장하면 투명 GIF로 만들어줍니다.
Paint.NET에서는 기본적으로 투명도가 128 이상이면 투명으로, 128 이하면 불투명으로 만듭니다.
여기서는 testtrans.gif를 만든 것으로 가정하겠습니다.


4. 투명 GIF를 업로드합니다


5. <img> 코드를 아래와 같이 고칩니다.

<script type="text/javascript">
<!--
document.write('<img src="./images/');
if (getIEversion()<=6.0) document.write('testtrans.gif');
else  document.write('testtrans.png');
document.write('" width="331" height="69" usemap="#_bnl_title">');
-->
</script>

---

많이 복잡하죠? 복잡하기만 할 뿐 아니라 느리기까지 합니다.
자바스크립트는 클라이언트 쪽에서 동작되기 때문에, 이런 식으로 구현하면 PC의 속도가 조금만 느려도 버벅거리는 현상이 비일비재합니다.

물론, 복잡하기 때문에 변환하는 과정도 어질어질하고, 버그가 발생할 가능성도 높습니다.

훨씬 쉽고 간결한 방법은 #2 : 쉬운 방법에서 소개하겠습니다.