Random Photo Viewer 확장

태터 플러그인 중 꼭 설치해보고 싶었던 플러그인은 바둥이님의 Random Photo Viewer였다. Random Photo Viewer는 현재 사용중인 태터툴즈 플러그인에서 설명했듯이 블로그에 올린 그림을 분류를 기준으로 랜덤하게 출력해 주는 플러그인이다.

그런데 이 플러그인은 블로그에 올린 그림을 조각 그림으로 만들어 전송하는 것이 아니라 단순히 'WIDTH 속성'과 'HEIGTH 속성'을 이용해서 그림 크기만 줄이는 것이기 때문에 이 플러그인을 설치하면 전송량이 엄청나게 증가한다. 한 예로 블로그에 올린 그림 파일의 크기가 평균 100KB이고, 플러그인에서 한번에 10개의 그림을 가져오도록 설정했다면 페이지를 한번 읽을 때 다만 산술적으로 1M의 전송량 소비하게된다.

나처럼 하루 전송량이 400M인 블로그에서는 400 페이지만 보면 하루 전송량을 모두 소모하게 되는 셈이다. 여기서 400 페이지는 방문자 수가 아니기 때문에 경우에 따라서는 한 사람만 방문해도 전송량이 모두 소진될 수 있다.

따라서 전송량의 압박이 심한 사람에게 Random Photo Viewer는 그림의 떡이었다. 그러던 중 웹 호스팅을 하고 있는 Cafe24에서 CDN 서비스를 제공한다는 소식을 듣고 블로그의 그림을 모두 CND으로 옮기고 'Random Photo Viewer'를 설치하면 괜찮을 것 같아 이미지를 Cafe24의 CDN 서버로부터 이미지를 가져오도록 'Random Photo Viewer'를 바꾸었다.

내가 사용한 CDN 서버는 블로그를 호스팅한 서버가 아니라 QAOS.com을 호스팅하고 있는 서버이기 때문에 하루 전송량이 3.5G 이다. 그런데도 'Random Photo Viewer'에서 그림을 10개 가져오도록 설정하면 채 하루가 지나기 전에 3.5G의 전송량을 모두 소모 하는 것이었다.

그래서 결국 'Random Photo Viewer'에서 실제 그림을 가져오는 것이 아니라 원본 그림을 지정된 크기로 줄인 뒤 그림을 전송하는 패치 및 'Random Photo Viewer'의 확장을 만들게 되었다.

사용법

기본적으로 이 플러그인은 바둥이님의 Random Photo Viewer를 필요로 한다. 따라서 이 플러그인을 설치하기 전에 먼저 바둥이님의 Random Photo Viewer를 먼저 설치하기 바란다.

1. RPV 확장: RPVExtend.zip
2. RPV 플러그인: rpv.zip

RPV 확장 설치

RPV 확장을 사용하기 위해서는 바둥이님의 Random Photo Viewer를 먼저 설치해야 한다. 확장의 설치는 'Random Photo Viewer'가 정상적으로 설치되어 있는 것을 가정하고 설명하겠다.

1. 내려받은 파일의 압축을 푼 뒤 images.php 파일을 RPV가 설치된 폴더로 업로드한다.

2. 좋아하는 편집기로 서버의 .htaccess 파일을 연뒤 다음 행(적색으로 표시한 행)을 추가한다.

   RewriteRule ^images/.+$ plugins/RandomPhotoViewer/images.php [E=SURI:1,L]
   RewriteRule ^$ blog/index.php [E=SURI:1,L]
   

   반드시 RewriteRule ^$ blog/index.php [E=SURI:1,L] 바로 윗줄에 삽입하기 바란다.

RPV 패치

PRV에서 원본 그림이 아니라 조각 그림을 가져오도록 하려면 RPV의 index.php를 다음처럼 패치해야 한다. 30 행: 경로명에 // 가 반복되는 것을 막기위해 /attach/를 attach/로 변경

변경전
30    $attachURL = "/".불arr[1]."/attach/".불owner."/";

변경후
30    $attachURL = "/".불arr[1]."attach/".불owner."/";

32 행: 조각 그림을 가져오기 위해 첨부 파일의 URL을 확장의 URL로 변경

변경전
32    if(!($dp = opendir(ROOT."/attach/".불owner))) return "Path Error!";

변경후
32    $attachURL=$blogURL.'/images'.불attachURL;
34    if(!($dp = opendir(ROOT."/attach/".불owner))) return "Path Error!";

36 행: 0.9x에서 가져온 이미지도 불러오기 위해 정규식 변경

변경전
36    if(eregi("^[0-9]{10}",$tfile)) {

변경후
36    if(eregi("^[0-9]{6,10}",$tfile)) {

75~79 행: 주석 처리된 75행, $Title .= 행(78)과 $TitleList 행(79)을 지우고 77 행을 추가 $TitleLen 변수값에 따라 제목이 변경되지 않는 문제 해결

변경전
75 // $ImgPath .= "'".불blogURL."/attach/".불owner."/".불tmpfile[$arr_rand]."',";
76    $ImgPath .= "'".불attachURL.불tmpfile[$arr_rand]."',";
77    $LinkPath .= "'".불blogURL."/".불id."',";
78    $Title .= "'".htmlspecialchars(UTF8::lessenAsEm($myrow["title"],$TitleLen))."',";
79    $TitleList .= "'".불title."',";

변경후
75    $ImgPath .= "'".불attachURL.불tmpfile[$arr_rand]."',";
76    $LinkPath .= "'".불blogURL."/".불id."',";
77    $TitleList .= "'".htmlspecialchars(UTF8::lessenAsEm($title,$TitleLen))."',";

124~126행: 조각 그림의 크기에 따라 테이블의 크기가 변하도록 변경

변경전
124   <td>
125   <a href=gotoshow()><img src='#'
name=slide  width=".불ImageWidth." height=".불ImageHeight."
style=filter:progid:DXImageTransform.Microsoft.Pixelate
(MaxSquare=15,Duration=1)></a>
126   </td>

변경후
124   <td height=".불ImageHeight."px valign=center>
125   <a href=gotoshow()><img src='#' name=slide 
style=filter:progid:DXImageTransform.Microsoft.Pixelate
(MaxSquare=15,Duration=1)></a>
126   </td>

이 확장을 설치한 뒤 블로그에서 운영해본 결과 약 100M의 전송량이 부족했다. 즉, 이 확장을 설치해도 블로그 호스팅에는 약간 부족했다. 따라서 현재 그림 이미지는 다른 서버에 두고 RVP를 사용하고 있다. 이 경우 RPV 확장 역시 다른 서버에 두고 index.php 파일에서 외부 서버에서 그림을 가져오록 경로만 바꾸면 된다.