거대한 용량의 Cufon 글꼴 js 파일로 걱정인데 php 버전이 낮아 minify를 사용하지 못하는 사람을 위한 편법

오늘, 작업중인 웹사이트에 Cufon으로 나눔고딕을 적용했다. 그런데 아무래도 1.3메가바이트나 되는 나눔고딕 Cufon은 트래픽에 부담. 그래서 minify 라이브러리를 이용해 압축 전송을 시도했다. 결과는 좌절.

내가 작업하는 서버는 PHP4였는데 minify 라이브러리의 최소 사양은 5.1.6이었던 것! 이런 젠장. 그럼 포기?

집에 돌아왔다가 깜짝 아이디어가 떠올랐다.

서버에 부하는 좀 주겠지만 트래픽 부하보다야 낫겠지! 하는 생각으로 떠올린 아이디어.

일단 NanumGothic.php 파일을 만들고, NanumGothic.js 에 있는 내용을 모두 복사한다.

파일 용량이 1.3메가바이트나 되니 메모장 따위로는 열 수 없다. 드림위버나 이클립스도 힘들어할 거다. 에디트플러스가 짱이다.

자자, 복사를 했다면, NanumGothic.php 맨 위에 그냥 아래와 같이 적어 준다.

<?ob_start("ob_gzhandler");?>

그러면 php가 알아서 자신을 압축한다.

그리고 아래쪽에 NanumGothic.js 의 내용 전체를 붙여 넣는다.(물론 echo file_get_contents('NanumGothic.js'); 같은 걸로 처리해도 된다.

붙여 넣고 저장할 때 “인코딩 다른 거 고르셈” 뭐 이런 안내문 뜨는데 무시해라. 다른 거 고르지 말라는 말이다. 그냥 저장해라.

그리고 Cufon을 사용해야 하는 곳에서, 아래처럼 불러오면 그만이다.

<script type="text/javascript" src="NanumGothic.php"></script>

저런 식으로 사용할 수도 있는 거다.

Web Page Content Compression Verification 에 가서 검사를 해 보면 압축됐다고 나오는 것을 확인할 수 있고, 또한 작동도 잘 되는 것을 볼 수 있다. 만세!

내가 예시는 Cufon으로 들었지만 이 방법을 사용하면 다양한 응용을 할 수 있다.

물론 이 방법은 한계가 있다. 한 파일만 압축할 수 있다는 거다. 그러나 대용량 파일 하나를 확실히 잠재울 수 있다는 장점은 있다. 그리고 저런 방식으로 아예 변수를 받아 출력해 버리는 php 파일을 만들 수도 있을 것이다.

모든 js와 css 압축해서 내보내는 스크립트 만들기

자, 한 번 아이디어를 구현해 보자.

우선 아래와 같은 php 파일을 만든다. 경로는 편의상 /php-lib/gzip.php 로 하자.

ob_start("ob_gzhandler");
echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . $_GET['f']);

이렇게 만들고, 최상위 경로에 있는 .htaccess 파일을 연다.

그리고 거기에 이거 한 줄을 넣어 준다.

RewriteRule ^(.*\[^wp-admin].(css|js))$ /php-lib/gzip.php?f=$1 [L]

그러면 모든 것이 성공적으로 완료된다.

웹페이지가 압축됐는지 검사해 보면 잘 돼 있는 것을 확인할 수 있다.

이렇게 하면 굳이 src=”/php-lib/gzip.php?f=jquery.js” 이런 식으로 적어 주지 않아도 .htaccess 가 *.js, *.css로 들어온 요청을 알아서 gzip.php 에 통과시킨다.

단, 위 방법이 보안상 어떤 문제를 낳을지 난 잘 모르겠다. ㅋ

카테고리 글 목록 👉

대표글

“거대한 용량의 Cufon 글꼴 js 파일로 걱정인데 php 버전이 낮아 minify를 사용하지 못하는 사람을 위한 편법”에 대한 5개의 응답

  1. […] PHP 최소 사양이다. PHP 5.1.6. 이다. PHP 버전때문에 좌절스런 분들은 약간의 편법을 이용해도 될 […]

  2. 나눔고딕 압축하면 전송되는 용량이 얼마나 될까요? ^^

    1. 300kb쯤 됩니다. 이미지가 좀 많은 웹페이지 하나 다운받는 정도니 부담이 많이 줄죠.

      1. 성공하셨군요^^

  3. […] PHP4를 사용하는 사람이라면 내가 설명한 편법을 사용하는 것도 괜찮은 해법이 […]

댓글 남기기