PNG를 사용하여 자바크스립트 소스 대폭 압축하기

[출처] NIHILOGIC
제목: Compression using Canvas and PNG-embedded data
링크: http://blog.nihilogic.dk/2008/05/compression-using-canvas-and-png.html

이 글은 자바스크립트 소스를 Canvas를 이용해 무손실 PNG 파일로 기록함으로서 용량을 대폭 줄이는 방법을 소개하고 있습니다.

기본원리 부분을 인용하면

"For PNG we have two options, 24 bit and 8 bit. Using 24 bit RGB colors, we can store 3 bytes of data per pixel while 8 bit indexed colors only gives us 1 byte per pixel."
PNG 파일은 8비트와 24비트 옵션이 있습니다. 이중 24비트 컬러를 사용한다면 1픽셀당 3바이트를, 8비트는 1픽셀당 1바이트를 기록할 수 있습니다.

실제 이 방법을 사용해서 prototype.js (124kb) 를 30kb (=30,115 byte) 의 이미지로 줄였습니다. (-_-!!)

• 자바스크립트 소스를 이미지로 변환:
  http://dean.edwards.name/packer/
  　
• 예제로 변환한 이미지 사용 예:
  http://www.nihilogic.dk/labs/canvascompress/
  　
  
• 변환된 PNG 파일 호출 함수 예:
  http://www.nihilogic.dk/labs/canvascompress/pngdata.js

제가 IE7 에서 테스트 해본 결과, IE7 에선 작동이 안되더군요. (IE 버전 문제인지 아님 내가 문제인지(-_-) 모르겠지만.)
FF 에선 정상 작동을 확인했습니다.

단, 몇가지 문제는 있습니다.

1. 해당 사이트에서도 말하고 있는 자바스크립트 용량이 클 경우(대략 255kb 정도 이상) 클라이언트에서 재 해석하는데 약간 시간이 걸립니다. (브라우저 멈춤 현상이;)
   이정도 크기의 스크립트가 아니라면 소요시간은 그리 크지 않습니다.
   　
2. 머리 좋으신(?)분들은 다른 용도로도 쓸 수 있겠죠. (물론, 자바스크립트의 성격상 제한사항이 있긴 합니다.)

   
   게시판 등에 스크립트 작성이 가능하다면 해킹 가능성이 있습니다. 스크립트 허용 여부를 체크하시고, 가능하다면 PNG 헤더까지 체크해야 안전할듯 싶습니다.

사실 이러한 방법은 PSP 해킹에도 사용되었던 방법입니다. PNG 파일에 코드를 넣어서 해킹함으로서 PSP에서 홈브루를 돌릴 수 있었습니다. 따라서 해킹의 문제는 피할 수 없습니다.

그러나 PNG 파일만 가지고는 해킹은 어렵습니다. PNG 파일에 스크립트를 압축해서 다른 사이트에 올린다고 해서 해킹할 수는 없습니다. PNG 파일을 해석하는 스크립트가 있어야 합니다.

사용하기에 따라 굉장히 유용하리라 생각합니다.
자세한 사항은 해당 사이트를 참조하시기 바랍니다.