얼마전 수피아님의 블로그를 방문해보니, 불펌으로 인한 트래픽 오버문제로 속상해하시는 모습을 보았다. 퍼가는 사람이야 아무런 문제의식도 없이 그냥 긇어가는 것이겠지만, 설치형 블로그를 운영하는 블로거의 입장에선 정말 골치아픈 문제가 아닐수 없다.

그러다가 오늘, 우연히 올블을 통해 워터마크를 삽입하는 방법을 알게되어, 이 곳에 소개해 놓는다.

원문 페이지 : 블로그 공장 포럼

먼저 ".htaccess"라는 이름의 파일을 만들어 아래와 같이 쓴다.
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} .*jpg$|.*gif$|.*png$|.*jepg$|.*bmp$ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !loose\.hubweb\.net [NC]
RewriteCond %{HTTP_REFERER} !loose\. [NC]
RewriteCond %{HTTP_REFERER} !google\. [NC]
RewriteCond %{HTTP_REFERER} !search\?q=cache [NC]
RewriteRule (.*) image.php?image=$1

4번째부터 6번째 줄까지는 주소를 적는 부분이다. 위 소스에서는 loose.hubweb.net과 google에게 링크를 허용하였다. 주소를 적는 방법은 "."이 들어간 곳에 \를 써 주면 된다.

예) http://loose.hubweb.net/tatter   ->  loose\.hubweb\.net/tatter

image.php?image=$1 는 허가된 주소외의 페이지에서 그림을 읽어갈때, 이미지와 워터마크를 합성하여 보여주는 곳이다. 그냥 링크만 차단시키고 싶은 경우, 아무 글자나 써 주면 된다.

다음으로 image.php 파일을 만든다.
<?
define ("WATERMARK", "watermark.jpg");

header("Content-type: image/jpeg");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

$pic = strip_tags( $_GET['image'] );

$image_url = urldecode($pic);

if (!@fopen($image_url, "r")) {
$dst_img = imagecreatefromjpeg(WATERMARK);
$res = imagejpeg($dst_img, "", 100);
die();
}

$file = pathinfo($image_url);
switch(strtoupper($file["extension"])) {
case "JPG":
$src_img = imagecreatefromjpeg($image_url);
break;
case "JEPG":
$src_img = imagecreatefromjpeg($image_url);
break;
case "BMP":
$src_img = imagecreatefromjpeg($image_url);
break;
 case "GIF":
$src_img = imagecreatefromgif($image_url);
break;
case "PNG":
$src_img = imagecreatefrompng($image_url);
break;
}

$src_w = imagesx($src_img);
$src_h = imagesy($src_img);

$portion = $src_h / $src_w;
$dest_w = 300;
$dest_h = round($dest_w * $portion);

$dst_img = imagecreatetruecolor($dest_w, $dest_h);
imagecopyresized($dst_img, $src_img, 0, 0, 0, 0, $dest_w, $dest_h, $src_w, $src_h);

$watermark = imagecreatefromjpeg(WATERMARK);

$watermark_w = imagesx($watermark);
$watermark_h = imagesy($watermark);

$overlay_img = imagecreatetruecolor($watermark_w, $watermark_h);
imagecopy($overlay_img, $watermark, 0,0,0,0, $watermark_w, $watermark_h);
imagedestroy($watermark);

$white = imagecolorallocate($overlay_img, 0xFF, 0xFF, 0xFF);
imagecolortransparent($overlay_img, $white);

$offsetX = $dest_w - $watermark_w - 3;
$offsetY = $dest_h - $watermark_h - 3;

imagecopymerge($dst_img,$overlay_img,$offsetX,$offsetY,0,0,$watermark_w,$watermark_h, 100);
imagedestroy($overlay_img);

$res = imagejpeg($dst_img, "", 100);
imagedestroy($dst_img);
?>

중간을 보면
$dest_w = 300;
$dest_h = round($dest_w * $portion);
라는 부분이 있는데, 이 곳이 워터마크 그림의 사이즈를 조절하는 곳이다. 식을 보면 가로 사이즈는 300이고, 높이는 가로사이즈에 맞추어 조절하도록 되어있는데, 워터마크 그림사이즈에 맞추어 원하는 사이즈를 직접 써 넣으면
된다.

이제 마지막으로 워터마크를 제작한다. 적당한 이미지로 제작한뒤, watermark.jpg로 저장하여 준다.

자, 그럼, 이제 작업은 다 끝났다. 위의 순서대로 작업을 마치었다면, .htaccess파일과 image.php, 그리고 watermark.jpg 파일이 있을것이다. 이 파일을 태터폴더 하위의 /attach/1 에 모두 업로드한다. 그럼 끝.

아래에 작업한 파일을 첨부하니, 혹 이해가 안가시는 분들은 참고하시길 바란다. ^^

  1. BlogIcon 마모루 2006.05.19 22:13

    히야~ 대단한데요?! 아직 적용은 안해봤지만, 무지 유용한 팁이겠습니다^^

    • BlogIcon 소금이 2006.05.20 15:25

      이미지를 태터에 직접 올리시는 분들에겐 유용한 팁일듯하네요 ^^*

  2. BlogIcon Lane 2006.05.20 13:22

    우오와~
    유용한 팁 감사합니다.
    오랜만에 들렀다, 귀한거 건지고 가네요. 감사... _(__)_

  3. BlogIcon Lane 2006.05.20 13:25

    덧글남길때 null 에러 나네요.
    이거 트래픽 플러그인등 특정 플러그인을 활성화 시키니까 그러던데, 정확한 원인은 아직 저도 찾질 못했습니다.
    utf-8 인코딩이 플러그인과의 차이에서 발생한다 캐쌓던데, 구체적인 원인이 먼지는.. (-_-)ㅋ
    혹시 소금이님이 찾으시면 저두 좀 갈켜 주십시오.... -_-;;;

    • BlogIcon 소금이 2006.05.20 15:24

      불여우만 써서 몰랐는데, ie에선 에러가 나는군요.. ㅇ_ㅇ;;;
      저도 원인을 찾는대로 알려드릴꼐요. 그럼, 즐거운 하루되시길.. ^^

    • BlogIcon 소금이 2006.05.20 16:14

      도아님의 블로그에 가서 최신버전을 받으니 문제가 해결되었네요. 최신버전을 한 번 받으셔서, 실행해보시면 될 듯...

      아, 그리고 도아님의 블로그에 가시면 댓글 미리보기 플러그인이 있는데, 이 플러그인과 Lane님의 플러그인이 충돌을 일으키네요. ㅠㅠ

      불여우에선 아무문제가 없는데 ie에선 영상 재생이 안된다는.. 도아님이 스크립트를 수정해주셨는데, 적용이 제대로 안된 것같네요 ^^; Lane님도 원인이 무엇인지 알아봐주시면 안될까요 ^^ 부탁드려요 _-_

  4. BlogIcon Lane 2006.05.24 14:39

    움쓰, 또 그런 문제가... (-_-)ㅋ
    요즘 갑자기 몰려드는 일때문에 정신을 못차리고 있는데, 조만간 시간을 내서 저두 함 살펴 보도록 하겠습니다. (-_-)ㅋ

    • BlogIcon 소금이 2006.05.24 15:14

      일단 임시방편으로 불여우의 스크립트를 ie에 삽입하여 쓰고있는데, 아마 익스플로어 패치를 안하신 분은 조금 불편할 것같아서요;; 부탁 좀 드릴꼐요. _-_

    • BlogIcon Lane 2006.05.24 15:19

      근데 도아님의 플러그인이라는게 어떤건지 링크 좀 걸어 주시면 안될까요. (-_-)ㅋ

    • BlogIcon 소금이 2006.05.24 15:37

      앗, 이런 제일 중요한 것을 빼먹었네요 ^^;
      도아님의 댓글 미리보기 플러그인입니다.
      주소는 http://offree.net/481 이고용~ ^^*

  5. BlogIcon Lane 2006.05.24 17:18

    제 블로그에서도 현재 동영상이나 플래시로 포슷힝된 것들이 꽤 되기 때문에 제 블로그에 도아님의 플러그인을 깔아서 테스트 해 보려니, 좀 그렇네요.
    그래서 이래 저래 왔다 갔다 하면서 글들을 읽어보니까, 도아님의 플러그인 기능 중에서, 본문의 문자열을 강제로 치환해 버리는 기능이 있군요.
    그 중에서 쌍따옴표와 홑따옴표도 특정 형태로 치환해 버리는 것 같던데요.
    제가 만든 플러그인의 기능중에서 ie로 출력되는 놈은, 우선 표준embed 태그를 자바스크립트에 다 담아서, 자바 스크립트 펑션을 본문에서 재 호출해 주는 형태거든요.
    아마도 그 스크립트에 담겨 있는 쌍따옴표와 홑따옴표도 도아님의 플러그인이 바꿔버리고 있는거 아닌가 하는 생각이 드네요.
    자바스크립트에 쓰인 따옴표가 바껴 버리면 제대로 작동하지 않음은 당연한거구요.
    아마도 그거 아닐까 싶습니다.
    나중에 제 블로그에서 지장이 없을 시간 즈음에 한 번 테스트를 해보겠습니다.

  6. BlogIcon Adeurian 2007.10.02 12:54

    좋은 정보 감사합니다.^^

    태터툴즈가 프로그램이 버전없을 하면서 워크마크가 살아져서 고민을 하고 있었는데 잘 사용하겠습니다.

+ Recent posts