서버에 따른 AlphaImageLoader 미작동

작업을 하다보면 png이미지로 처리하고싶은 유혹에 빠질때가 몇번씩은 있다. 배경색이 복잡한 투명 object나 투명도가 들어간 백그라운드는 gif로 작업하려면 상당한 시간과 짜증이 유발되기 때문인데 개인적인 취향으로 ie6 png hack은 보통 아래와같은 AlphaImageLoader를 사용한다.

.pngbg { background-image: url(bg.png); }

* html .pngbg {
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="bg.png", sizingMethod="crop");
}

이 방식은 지금까지 수도없이 사용했던 방식이었고 테스트서버에서도 아무런 문제가 없었는데 본서버로 데이터를 옮기자 ie6에서 png이미지가 아예 로딩되지 않는 문제가 발생했다.

  1. 동일한 파일인데도 특정서버에서는 png이미지가 로딩되지 않는다.
  2. filter를 지우고 저장한뒤 페이지를 리로드해보면 hack이 적용안된 이미지가 보인다.
  3. 다시 filter를 주고 저장한뒤 페이지를 리로드하면 제대로 png hack이 적용이 된다. :D
  4. 페이지를 이동한뒤 다시 확인해보면 이미지가 사라져있다. :(

아마 서버상의 캐쉬관련 세팅문제일거라고 추측은 되는데 확인할 재주가 없어 gif노가다로 처리할 수 밖에 없었다.

황금같은 주말이브를 말아먹어주신 ie6 ㄱㅅ

ps. png8을 이용한 크로스브라우저를 지원하는 투명png를 만드는 방법이 있긴하다. (링크수정)

png hack 교체

tux님의 말씀처럼 바보브라우저때문에 마음껏 쓰지도 못하던 png를 그동안은 이방법을 사용해서 해결해 왔다. 문제점이라면 <img />태그안의 png만 지원해준다는점인데 Hooney님께서 알려주신 방식으로 바꾸고 나니 <img />는 물론이고 css의 background까지 지원해준다. php로 되어있기때문에 눈에 거슬리는 hack코드도 보이지 않을뿐더러 빠르기까지하다. 대략 감격의 눈물이…ㅠㅠ

Read more…

아쉽구나 PNG

웹디자인작업을 할때 귀찮은 작업중의 하나가 투명파일의 처리이다.
특히나 반복되는 패턴위로 알파값을 가지고 있는 이미지를 표현할경우 작업에 손이 제법가게된다. 물론 의도하던 결과는 제대로 나오지 않게된다. 지금의 내 홈페이지도 그렇다. 페이지 아래부분의 그림파일은 불규칙적인 패턴탓에 그림자를 제대로 표현해낼수가 없었다. 이럴때마다 아쉬워지는것이 PNG파일이다.
알파채널을 포함한 PNG파일로 넣어두면 간단하게 처리될 문제가지고 브라우저 호환성때문에 복잡한 그리고 보기안좋은 방식을 써야된다는게 상당히 불만이다.

M$IE를 제외하고는 기타 (mozilla, netscape, IE for mac, iCab, sapari, omniweb, Konqueror, Opera 등등) 실제 사용되어지는 거의 대부분의 브라우저들이 PNG의 alpha채널을 지원한다.
재미있는건 같은 IE라도 맥용은 PNG를 아주 잘 지원한다는것이다.
아마도 맥개발팀은 어느정도 M$의 콘트롤을 덜 받기때문이 아닐까싶다.

서명운동과 수많은 피드백이 있고 PNG파일이 아무리 사용률이 높아지고 있다고는 해도 M$에서는 이를 해결할 기미조차 보이지 않는걸 보면 M$에서 PNG를 죽이려는건 아닐까하는 생각마저도 들정도다. 자기네 기술이 아닌건 제대로 지원하지 않는 그네들의 특성도 한몫할수도 있다.

언젠가는 해결이 되겠지..하는 기대마저도 M$IE개발종료라는 소식에 무너져버렸다.
아무래도 M$IE점유율이 떨어지기만을 기다리는게 나을듯싶다.

Archives...