웹에서 넓리 사용되는 PNG 그림 형식에는 크게 두 종류로 나뉘는데 PNG-8과 PNG-24 버전이 있다. 물론 PNG-24 버전은 거의 완벽한 alpha transparency 재현이 가능하지만, 잘 알려졌다시피 IE 6에서 보기 흉하게 보이는 이유 때문에, 이를 해결하기 위한 몇몇 IE 6 PNG fix 관련 JavaScript 라이브러리들이 존재한다. 하지만, 기술적 의존도와 겹쳐저서 깔끔한 해결책이 될 수 없기에 찜찜함이 남는다.

이런 상황에서, 또 하나의 해결책이 될 수 있는 방법으로 Adobe의 Fireworks를 사용 여러 단계의 부드러운 alpha transparency가 적용된 PNG-8 파일을 생성하는 법이 주목받았지만, 문제는 다른 그래픽 어플리케이션에서는 이와 같은 방법을 그대로 사용할 수 없다는 것이 제약으로 다가올 수 밖에 없다.

그래서, 다른 방법을 찾아보다 위의 글에서도 잠깐 언급되었던 터미널 도구인 pngnq에 주목.
물론 Fireworks에서 저장하는 것처럼 언제나 휼륭한 결과물을 얻을 수는 없겠지만, 대부분 만족할 만한 효과를 낼 수 있어서 대체 방법으로 충분하다. pngnq 바이너리 파일은 여러 플랫폼들을 지원하고 있는데, 불행히도 정상적인 작동을 위해서 필요한 libpng가 Mac OS X에는 기본적으로 설치되어 있지 않아서, Mac에서 libpng 설치를 위한 간단한 패키지 인스톨러를 가지고 libpng 라이브러리 설치한 후, 내려받은 pngnq 바이너리를 /usr/bin이나 /usr/local/bin에 복사해서 사용.

pngnq 설명서를 보면 얼핏 복잡해 보이지만 기본적인 사용법은 상당히 간단하다:

$pngnq [input files]

터미널에서 위와 같이 입력하면, 원래 그림의 같은 디렉토리에, 이름 뒤 -nq8.png가 붙은 새로운 alpha transparency가 적용된 PNG-8 그림 파일을 얻을 수 있다. 변환 후 PNG 압축 도구를 이용한 후 처리도 필수.

헌데, 이렇게 IE6를 위한 꼼수들을 차곡차곡 모아 두어도 절대 개운한 기분은 아니군. 🙁

웹 디자인에 있어서 투명도가 섞인 PNG 그림 파일은 창의적인 디자인의 활용 폭을 넓혀주지만, 사용하는데는 한 가지 걸림돌이 있다. IE6에서 보여지는 alpha transparency가 적용된 PNG 파일은 흉측하기 마련. 그래서 여러가지 CSS hacks이 사용되기 마련인데, 그 중 가장 간단하고 효율적인 도구로 생각되는 것이 바로 Unit PNG Fix.

무엇보다도 사용법이 너무나 간단해서, 어떤 그림 파일의 조작 없이 아주 작은 크기(<1kb)의 js 파일을 올려두고 아래 코드를 추가해주면 다른 것은 잊어버려도 된다.

<!--[if lt IE 7]>
  <script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->

더군다나, 최근(08.26.08) 또 새롭게 갱신되면서 과거 불가피하게 사용되던 clear.gif 그림 파일이 더는 필요 없게 되어 한결 사용이 쉬워졌다.

그나저나, 8월 27일로 IE6의 탄생 7 주년이라는데, 끈질긴 생명력에 지쳐가는 시선들만 쌓이는군.

덧붙임 (2008.12.20): 어쩌면 골치아픈 IE6의 PNG 문제를 시원하게 해결해 줄 수 있는 새로운 치료약의 등장일지도 모르겠다. 이름이 약간 기억하기에 생소한 DD_belatedPNG로 기존 해결책들의 단점을 모두 해소한 듯.
과거 문제가 되던 background-position (fixed 제외) 과 background-repeat 속성을 모두 지원하고, MS 전용 AlphaImageLoader 속서을 사용하지 않아서 z-index 관련 버그 걱정을 덜 수 있단다. IE를 위한 둥근 모서리 표시 기능을 제공하는 자매품 DD_roundies도 유용.