설치형 워드프레스 블로그에서 트래픽 소모를 줄이는 7가지 방법

1 .설치형 블로그에서 트래픽이란?

한국에서 블로그를 운영하는 사람들의 대부분은 가입형 블로그를 이용한다. 많은 방문자와 이웃 블로거들과의 소통, 한국 1위 포털인 네이버의 버프를 원하는 사람들은 네이버 블로거를, HTML과 CSS를 직접 수정해서 자유롭게 블로그를 꾸미길 원하거나, 구글 애드센스를 달아서 수익을 올리고 싶은 사람들은 티스토리 블로그를 이용하곤 한다.

가입형 블로그 최고의 장점을 하나만 꼽으라면 그것은 바로 용량과 트래픽에 대한 제한이 없다는 것이 될 것 같다. 사진을 수십, 수백장을 올려도, 그리고 그 글에 수많은 사람들이 들어와도 아무런 문제가 없다. 그래서 한국에서 가입형 블로그를 운영하다가 설치형 블로그로 이사한 사람들이 처음 느끼는 가장 큰 단점이 바로 트래픽과 용량의 제한이다.

사실 자신의 블로그에 많은 방문자가 찾아온다는 것은 블로그 운영자로서 매우 기쁜 일이다. 하지만 트래픽이 곧 돈인 상황에서 마냥 즐거워하기만 하기는 힘들다. 그래서 이 글에서는 어떻게 하면 최대한 워드프레스 블로그의 트래픽 소모를 줄일 수 있을 지에 대해서 설명해 보려고 한다.

다만 여기서 주의해야 할 것이 있다. 이전에 워드프레스의 속도를 향상시키는 방법에 대해서 글을 쓴 적이 있었는데, 워드프레스의 속도를 향상시키는 방법과 트래픽 소모를 줄이는 방법이 상충되는 경우가 있다. 예를 들어 트래픽을 줄이기 위해서 피카사나 플리커와 같은 외국 이미지 호스팅 서비스를 쓰면, 서버가 외국에 있기 때문에 이미지 로딩 속도가 느려지게 된다. 따라서 두 개의 글을 잘 읽어보고, 트래픽 절약과 성능 사이에서 잘 균형을 맞추는 것이 필요하다.

2. 워드프레스 블로그에서 트래픽 소모를 줄이는 7가지 방법

2.1 브라우저 캐시 사용하기

원래 웹브라우저는 서버로부터 파일을 다운받은 다음에 자체적으로 PC의 하드 드라이브에 저장해 놓는다. 다음에 그 사이트에 접속할 때는 이미 저장되어 있는 파일을 다시 다운받지 않고 하드 드라이브에서 블러와서 훨씬 더 빠르게 로딩이 이루어진다. 이것을 브라우저 캐시라고 한다.

예를 들어 어떤 사이트에 10MB의 이미지 파일이 20개 있다고 하면 총 200MB의 이미지를 다운받아야 한다. 한국의 인터넷 속도는 세계 최고 수준이므로 그리 오랜 시간이 걸리진 않지만 그래도 어느 정도의 로딩 시간이 필요하다. 하지만 두 번째 그 사이트에 접속할 때는 이미 그 이미지 파일들이 하드에 저장되어 있기 때문에 하드에서 바로 불러온다. 물론 처음 접속할 때에 비해서 훨씬 빠른 속도로 로딩될 것이다.

그런데 브라우저 캐시에는 문제가 하나 있다. 만약에 그 사이트의 운영자가 이미지를 다른 것으로 교체해버린다면, 그것도 브라우저가 알아차리기 힘들도록 이미지 파일 이름도 동일하게 썼다면 어떻게 될까? 아마도 브라우저는 이미지가 바뀐 것을 인식하지 못하고 이전에 다운받아두었던 이미지를 보여주게 될 것이다. 그래서 브라우저들은 기본적으로 너무 오랜 시간동안 캐시를 보관하지 않는다.

그런데 워드프레스 사이트에서 전송되는 파일들 중에서는 오랜시간동안 캐시되어 있어도 상관없는 것들이 많다. 동일한 방문자가 2~3일에 한 번 내 사이트에 방문하는데, 계속 같은 파일을 다운받아 간다면 그만큼 트래픽이 낭비가 되는 것이다.

물론 이런 상황을 방지할 수 있는 방법이 있다. 파일의 만료시간을 설정해주는 방법이다. 예를 들어 전혀 바뀔 것 같지 않은 파일을 1년동안 캐시에 가지고 있으라고 지정해주고, 계속 바뀔 것 같은 파일은 캐시에 보관하지 말라고 지정하는 것이 가능하다는 말이다.

이 것을 지정하기 위해서는 워드프레스가 설치된 폴더에 .htaccess1라는 파일을 수정해야 한다. 그 파일을 텍스트 에디터로 연 후에 다음 코드를 입력하고 저장한다.

AddType image/x-icon .ico

<IfModule mod_headers.c>
# YEAR
<FilesMatch ".(ico|gif|jpg|jpeg|png|flv|pdf)$">
 Header set Cache-Control "max-age=29030400"
</FilesMatch>
# WEEK
<FilesMatch ".(js|css|swf)$">
 Header set Cache-Control "max-age=604800"
</FilesMatch>
# 24 HOURS
<FilesMatch ".(html|htm|txt|php)$">
 Header set Cache-Control "max-age=86400"
</FilesMatch>
</IfModule>

여기서 max-age 값은 초(second)단위로 되어 있으니 필요하다면 수정이 가능하다. 또한 파일의 확장자를 통해서 캐시를 얼마동안 보관할 지 지정하고 있으므로 쉽게 자신의 사이트에 맞춰서 수정할 수 있을 것이다.

만약에 이후에 minify 플러그인을 적용할 예정이라면 js, css 파일의 캐시 만료시간을 플러그인에서 설정 가능하므로, js와 css를 코드에서 제외하는 것이 좋다.

2.2 gzip 전송하기

파일들을 압축해서 전송하면 상당한 트래픽을 절약할 수 있다. 특히 텍스트 파일 형태로 되어있는 파일들은 압축률이 꽤 높다. 예를 들어 jquery.min.js 파일은 압축 전에는 96KB 정도지만 압축을 하면 33KB 정도로 거의 3분의 1정도의 크기로 줄어든다.

gzip 압축 전송을 하는 방법은 간단하다. [브라우저 캐시를 설정]할 때와 마찬가지로, 워드프레스가 설치된 폴더에 .htaccess라는 파일을 텍스트 에디터로 연 후에 다음 코드를 입력하고 저장해주면 된다.

<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript text/javascript
</ifmodule>

만약에 이후에 minify 플러그인을 적용할 예정이라면 js, css 파일을 압축할 필요가 없으니 위의 코드에서 ‘text/css’, ‘application/x-javascript’, ‘application/javascript’, ‘text/javascript’를 빼준다.

2.3 Minify로 js, css 압축하기

2.3.1 Minify란?

minify란 파일의 공백이나 주석등을 제거하고, 중복되는 부분을 합치는 등의 방법을 이용해서 파일의 크기를 줄이는 것을 의미한다. 또한 js와 css 파일이 여러 개일 경우, 그 파일들을 하나의 파일로 합쳐서 전송함으로써 로딩 속도 향상에도 큰 역할을 한다. 물론 파일을 크기를 줄이는 역할도 하므로 트래픽 절약에도 효과가 있다. minify의 효과에 대해서는 다음 링크를 확인해보면 자세히 알 수 있다.

minify할 수 있는 방법은 여러가지가 있다. 그 중에서 워드프레스에서 사용하기 가장 편한 방법은 php를 이용한 minify 라이브러리를 사용한 플러그인을 적용하는 것이다. [php minify 라이브러리](https://code.google.com/p/minify/](https://code.google.com/p/minify/)는 PHP 5.2.1 이상을 요구하고, 아파치에 zlib 확장이 설치되어 있어야 정상적으로 작동한다. 이 요구사항을 만족한다면 minify 플러그인을 설치해서 사용할 수 있다.

이 글에서는 최근까지 가장 활발히 개발이 이루어지고 있는 Better WordPress Mnify 플러그인 사용법에 대해서 설명하려 한다.

2.3.2 Better WordPress Mnify 플러그인을 사용해서 js, css를 minify 압축 전송하기

1. 워드프레스 대시보드에서 ‘플러그인’ 》 ‘플러그인 추가하기’로 이동한 뒤, 검색창에 “Better WordPress Mnify”라고 입력, 검색후 검색 결과에서 플러그인을 설치, 활성화한다.

2. 워드프레스 대시보드에서 BWP Minify로 이동해서 아래 이미지를 참고해서 설정한다.

Better WordPress Mnify 설정
▲ Better WordPress Mnify 설정

빨간색으로 표시한 부분이 기본 설정에서 수정한 부분이다. 여기서 트래픽 절약과 블로그 속도에 가장 큰 영향을 주는 부분이 바로 ‘Cache age’ 설정이다.

‘Cache age’는 브라우저에게 얼마만큼의 시간동안 캐시를 보관하고 있을지를 지정해주는 설정이다. 즉, ‘Cache age’를 하루로 지정하면 Better WordPress Mnify에 의해서 전송되는 js, css 파일들을 하루만 보관하고 하루가 지나면 다시 서버로부터 그 파일들을 다운받게 된다는 말이다.

따라서 Cache age를 길게 잡으면 잡을 수록 트래픽 절약과 블로그 속도에 도움이 된다. 하지만 무작정 그렇게 할 수는 없다. 만약에 Cache age를 1년으로 설정했는데, 중간에 블로그 운영자가 css는 js 파일을 수정해 버리면, 그 전에 블로그에 방문했던 사람은 새로운 css나 js 파일을 다운받지 않아서 수정 사항이 그 사람에게는 적용되지 않을 것이다.

그래서 Better WordPress Mnify에서는 ‘For cache buster, use’ 라는 옵션을 제공한다. minify된 파일들을 전송할 때 뒤에 버전 넘버를 붙여서 전송해서, css나 js 파일이 변경되면 방문자가 새로운 파일을 다운받도록 하는 옵션이다. 여기서는 ‘Cache folder’s last modified time’으로 설정해주면 된다.

cache 폴더의 날짜는 BWP Minify 설정 페이지에서 “Flush cache” 버튼을 누를 때마다 바뀌므로, js나 css파일을 변경했을 때, “Flush cache” 버튼을 눌러서 캐시를 비워주면 maxage 설정값을 크게 잡았더라도 아무런 문제가 없다.

파란색으로 표시한 ‘Leave external files at their original positions?’ 옵션은 다른 플러그인과의 호환성 문제가 생길 때 설정하면 된다. 이 것은 외부에서 불러오는 css나 js 파일도 내 서버에서 전송하게 하는 옵션이다. 하지만 이 옵션을 활성화하면 트래픽 소모가 더 커질수 있으므로, 잘 생각해보고 사용하야 한다.

2.3.3 Better WordPress Mnify 이외의 추천 minify 플러그인

  • Autoptimize은 옵션이 Better WordPress Mnify 플러그인에 비해서 적지만 그만큼 사용이 편리하고 HTML까지 minify하는 옵션도 있다. 최근까지 업데이트가 이루어지고 있고 안정적이어서 Better WordPress Mnify와 함께 가장 추천할만한 플러그인이다.
  • W3 Total Cache‘minify’ 옵션을 활용하면 js, css, html을 모두 minify해서 전송할 수 있다.
  • CloudFlare CDN‘Rocket Loader’ 사용. 자신의 도메인을 가지고 있으면 CloudFlare을 네임서버로 설정한 후 ‘Rocket Loader’ 옵션을 활성화해서 자동으로 minify가 되도록 할 수 있다.
  • WP Minify는 2년 넘게 업데이트가 되고 있지 않으므로 사용하지 않는 것이 좋다.

2.4 공통 라이브러리를 외부 서버에서 불러오기

다음과 같은 플러그인을 이용해서, jquery와 같은 공통 라이브러리를 외부 서버에서 불러오는 방법으로 트래픽을 절약할 수도 있다.

우선 첫 번째 소개한 Use Google Libraries 플러그인은 Google에서 jquery에 관련된 라이브러리를 불러오도록 해주는 플러그인이다. 이 플러그인은 워드프레스 플러그인 저장소에 있으므로 워드프레스 대시보드에서 쉽게 설치 가능하다. 설정을 따로 해줄 게 없기 때문에 설치 후 활성화만 하면 작동한다. Use Google Libraries 플러그인에서 대체해서 전송하는 라이브러리는 다음과 같다.

Dojo, jQuery, jQuery UI, MooTools, Prototype, script.aculo.us, swfobject

두 번째 소개한 Use WPcom Libraries 플러그인은 현재 워드프레스 플러그인 저장소에 존재하지 않는다. 이 플러그인을 설치하려면 먼저 링크를 따라가면 우측에 ‘Download ZIP’ 버튼을 눌러서 플러그인을 다운받는다. 이제 워드프레스 대시보드에서 ‘플러그인’ 》 ‘플러그인 추가하기’ 》 ‘업로드’로 이동한 후, ‘찾아보기’ 버튼을 눌러서 다운받은 파일을 선택한 다음에 ‘설치하기’ 버튼을 누르면 플러그인을 설치할 수 있다.

역시 이 플러그인도 설정이 따로 필요없으므로 활성화만 하면 작동한다. 이 플러그인이 Use Google Libraries 플러그인과 다른 점은, 구글이 아니라 WordPress.com 서버에서 라이브러리를 전송한다는 점이다. 구글과 달리 Jquery뿐만 아니라 워드프레스 공통 라이브러리를 모두 전송해주므로 트래픽 절약 효과가 좀 더 좋다고 할 수 있다. 다만 WordPress.com 서버는 언제나 최신 버전의 라이브러리만 전송하므로, 자신의 워드프레스도 언제나 최신 버전으로 유지해줘야 정상 작동할 수 있다는 점에 유의해야 한다. 또한 구글 CDN 보다는 속도가 좀 느린 편이다.

2.5 이미지 호스팅 사용하기

2.5.1 이미지는 블로그 트래픽 초과의 주범?

이미지는 블로그의 트래픽을 가장 많이 소모시키는 요소중 하나다. 내 글중에서 마크다운(Markdown)으로 글을 써보자를 분석해보면 본문에 이미지가 딱 7개만 쓰였을 뿐인데, 전체 트래픽의 43% 가량을 차지하고 있다.2

Blog Image Bandwidth Proportion
▲ 블로그에서 이미지가 트래픽에서 차지하는 비율

요즘 많은 워드프레스 테마에서 특성 이미지(Featured Image)를 적극적으로 활용하고 있기 때문에, 워드프레스 사이트를 좀 더 멋지게 꾸미려는 분들은 그만큼 많은 이미지를 사용할 것이다. 또한 고화질의 이미지를 자주 올리는 분들도 꽤 많은 것으로 알고 있다. 그래서 아마 많은 워드프레스 사이트들이, 트래픽에서 이미지가 차지하는 비중이 내 블로그에 비해서 많이 높을 것이다.

예를 들어서 한 포스트에 1MB 용량의 이미지를 10개 올렸다고 해보자. 그러면 방문자가 그 글을 읽을 때마다 10MB의 트래픽이 감소한다. 카페24 기준으로 월 1,100원짜리 호스팅의 트래픽 제한이 800MB이므로, 80명만 그 글을 읽으면 트래픽 제한을 넘어버린다는 말이다.

그 뿐만 아니다. 만약에 누군가가 내 글을 다른 곳으로 퍼간다면 문제는 더 심각해진다. 누군가가 내 블로그에 있는 글을 퍼가면 글 내용 자체는 그 사이트에 저장되고 또 그 사이트에서 전송된다. 하지만 이미지는 내 웹호스팅 서버에서 가져가게 된다. 즉, 내 사이트에서 글을 읽는 것도 아니면서 내 트래픽을 잡아먹는다는 말이다. 퍼간 사이트가 작은 사이트라면 다행이지만 대형 사이트라면 아무리 트래픽 제한이 커도 그 제한을 넘기는 것은 순식간이다. 앞에 링크한 도아의 세상사는 이야기에서는 600KB 정도 되는 이미지가 대형 사이트에 펌질되면서 오전이 지나서 20GB의 트래픽 제한이 초과되었다고 한다.

이처럼 이미지는 블로그에서 가장 많은 용량을 차지하는 요소다. 따라서 이미지에 대한 부분을 해결하는 것이 트래픽 절약에 가장 중요한 부분이라고 볼 수 있다.

2.5.2 워드프레스에서 이미지 호스팅을 사용할 때 고려할 점

이미지 호스팅은 유로도 있고 무료도 있다. 하지만 트래픽을 절감하려는 가장 큰 목적은 설치형 블로그를 운영하면서 발생하는 비용을 최소화하려는 것이므로 여기서는 무료 이미지 호스팅에 대해서만 언급할 것이다.

문제는 한국에 서버가 있는 이미지 호스팅 업체는 모두 유료라는 것이다. 따라서 무료 이미지 호스팅을 사용하려면 속도 문제에 대해서 고민해봐야 한다.

이미지 호스팅을 사용할 때 경험할 수 있는 단점은 속도 뿐만이 아니다. 이미지를 외부에 올리는 방식을 쓰면 특성 이미지(Featured Image)로 설정하는 것이 불가능하고3, 워드프레스 자체 기능의 적용이 불가능하다. 예를 들면 워드프레스에 직접 이미지를 올리면 워드프레스에서 간단하게 이미지를 편집하는 것이 가능하지만 외부에 이미지를 올리면 그런 기능들을 활용하는 것이 불가능해진다. 따라서 이미지 호스팅을 사용하려면 이런 단점들도 미리 고려해야 한다.

무료 이미지 호스팅은 피카사플리커, imgur가 가장 유명하다.

플리커는 야후에서 운영하는 이미지 호스팅 서비스다. 속도가 좀 느리고 웹사이트의 편의성이 좀 떨어지지만 1TB라는 엄청난 용량을 제공하기 때문에 고화질, 고해상도의 이미지를 많이 올리는 용도로 제격이다. 특히 피카사는 2048×2048 사이즈가 넘어가면 15GB의 용량을 소모하기 때문에 고해상도의 이미지를 많이 올리는 경우 부담될 수 있다.

imgur은 속도도 괜찮은 편이고 편의성도 우수하지만, 무료 사용자에 대한 제한 때문에 사용하기 꺼려질 수 있다. 무료 사용자는 최근에 올린 225개의 이미지만 관리 가능하고, 6개월동안 접근이 없는 이미지는 삭제된다. 따라서 블로그에 올릴 이미지를 호스팅하는 용도로는 추천하기 힘들 듯 하다.

마지막으로 피카사는 구글에서 운영하는 이미지 호스팅 서비스다. 현재는 구글 플러스 포토의 형태로 서비스되고 있지만, 피카사로 접속하는 것도 가능하다. 속도가 가장 빠르고, 이미지 주소를 조금 수정하는 것으로 이미지의 크기를 쉽게 조정할 수 있기 때문에 다른 이미지 호스팅보다 더 추천할만 하다. 2048×2048 사이즈 이하의 이미지는 거의 무한대로 올릴 수 있다는 것도 큰 장점이다. 블로그 용도로 그보다 큰 사이즈의 이미지를 올릴 일은 거의 없기 때문이다. 물론 구글에서 운영하는 서비스이니만큼 안정성도 훌륭하다.

개인적으로는 피카사를 가장 추천한다. 하지만 잘 알아보고 자신에게 가장 잘 맞는 이미지 호스팅 서비스를 찾는 것이 최선일 것이다.

2.5.3 워드프레스에서 이미지 호스팅을 사용하는 방법

워드프레스에서 이미지 호스팅을 이용하는 방법은 두 가지다. 그냥 이미지를 따로 이미지 호스팅에 올리고 그 주소를 따와서 워드프레스 에디터에 붙여넣는 방법과 플러그인을 이용하는 방법이다.

첫 번째 방법은 상당히 불편할 수 있다. 웹브라우저로 피카사플리커에 접속해서 이미지를 업로드한 후, 이미지 주소를 따서 워드프레스 에디터에 붙여 넣어야 하니 꽤 불편할 수 밖에 없다.

개인적으로는 모든 글을 PC용 에디터에서 마크다운으로 작성하고 있어서 PC용 프로그램인 ShareX를 이용해서 이미지를 올리는 방법은 선호한다. 나처럼 마크다운으로 글을 작성하지 않더라도, ShareX가 워낙 편리한 프로그램이라서 ShareX를 사용하는 것이 더 편할 수 있을 것이다. 그 방법에 대해서는 다음 링크를 참조하면 자세히 알 수 있다.

플러그인을 활용하는 방법도 생각보다 그리 편하진 않다. 업로드를 워드프레스에서 직접할 수 없어서 먼저 피카사플리커에 들어가서 이미지를 업로드한 후, 워드프레스에서 불러오는 방법을 써야하기 때문이다.

하지만 만약에 피카사를 이용한다면 피카사의 자동 백업 프로그램을 이용해서 특정 폴더에 넣은 이미지를 자동으로 피카사로 업로드하고 워드프레스 플러그인을 통해서 그 이미지를 불러오는 방식으로 좀 더 쉽게 피카사 이미지를 이용할 수 있기는 하다. 플리커 역시 자동으로 이미지를 업로드해주는 프로그램이 있으므로 플리커를 사용하고자 하는 사람은 그 프로그램을 이용하면 된다.

플러그인은 다음 플러그인들을 사용하면 된다.

사용법은 그리 어렵지 않으니 설치 후에 몇 번 테스트를 해보면 쉽게 사용할 수 있을 것이다. 다만 Picasa and Google Plus Express 플러그인은 옵션에서 Return HTML instead of shortcode 에 체크해줘야 플러그인을 삭제했을 때도 이미지가 정상적으로 출력된다는 점에 유의해야 한다.

2.5.4 젯팩 플러그인의 포톤 모듈 사용하기

이렇게 이미지 호스팅을 활용해서 트래픽을 절약하는 방법에도 단점이 또 있다. 바로 특성 이미지(Featured Image)는 워드프레스에 올린 이미지만 지정 가능하다는 것이다. 그래서 특성 이미지를 많이 사용하도록 만들어진 테마를 쓸 경우에는 이미지 호스팅을 써도 꽤 큰 트래픽을 소모할 수가 있다.

이럴 때 젯팩 플러그인에서 제공하는 포톤 모듈을 사용하면 좋다. 포톤은 일종의 이미지 CDN 서비스로 워드프레스의 제작사인 Automattic에서 무료로 제공하는 서비스다. 젯팩 플러그인을 설치한 후 포톤 모듈만 활성화하면 자동으로 작동되므로 아주 편리하다.

작동 방식은 간단하다. 워드프레스에 이미지를 올리면 그 이미지를 워드프레스 CDN 서버에서 캐시한다. 그리고 그 후부터는 이미지를 워드프레스 CDN 서버에서 대신 전송한다. 따라서 이미지에 대한 트래픽이 획기적으로 줄어들 수 있다. 다만 단점이 있다. 워드프레스 CDN 서버가 한국에서 별로 빠르지 않다. 그리고 화질을 낮춰서 전송한다. 또한 gif 파일이 움직이지 않게 되는 경우도 있다. 하지만 그럼에도 불구하고 트래픽 절약 측면에서도 상당히 좋은 서비스다. 포톤의 사용법에 대해서는 다음 링크를 참조하면 쉽게 할 수 있을 것이다.

※ 첫 번째 글에서 설명했던 포톤 모듈의 활성화 방법은 젯팩이 업그레이드 되면서 조금 달라졌다. 하지만 활성화 방법이 어렵지는 않으므로 플러그인을 설치한 후 잠깐 살펴보면 금방 사용법을 알게 될 것이다.

2.6 직접 링크 방지하기

이미지 호스팅 사용하기에서 간단하게 설명했지만, 누군가가 내 블로그에 올려진 이미지를 그대로 퍼가면 트래픽 소모가 커질 수 있다. 블로그에 모두 외부 이미지만 사용하는 것이 아니라면 직접 링크를 막아서 펌질로 인한 트래픽 소모를 막을 수 있다.

이번에도 역시 .htaccess 파일을 이용한다. 하지만 앞에서와는 달리 이번에는 텍스트 에디터를 이용해서 .htaccess 파일을 작성한 후, 이미지가 저장되는 장소에 넣어줘야 한다. 워드프레스의 경우 첨부파일이 모두 ‘워드프레스 설치 폴더/wp-content/uploads’에 저장되므로 .htaccess 파일을 그 폴더에 넣어주면 된다. .htaccess 파일은 다음과 같이 작성한다.

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain2.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ http://i.imgur.com/rI02Hx7.png [NC,R,L]

여기서 수정해줘야 할 부분은 두 가지다.

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain2.com [NC]

위의 코드에서는 이미지 직접 링크를 허용할 도메인을 지정해준다. 자신의 블로그 주소를 기입하면 된다. 자신의 블로그 주소가 kkk.com 이라면 yourdomain.comkkk.com으로 바꿔주면 된다. 또한 검색 사이트에 이미지가 제대로 나오도록 하고 싶다면 다음처럼 검색 사이트의 주소도 추가해줘야 한다.

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?naver.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?nate.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?daum.net [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?paran.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yahoo.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.co.kr [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]

마지막줄에 있는 코드는 허용 도메인이 아닌 곳에서 이미지 파일을 요청했을 때 네이버처럼 다른 이미지를 보여주는 코드다.

RewriteRule \.(jpg|jpeg|png|gif)$ http://i.imgur.com/rI02Hx7.png [NC,R,L]

여기서 자신이 원하는 이미지 파일을 지정해주면 된다.

이 코드를 좀 더 쉽게 만들어주는 사이트도 있다. 직접 .htaccess 파일을 만드는 것이 어렵게 느껴진다면 다음 사이트를 이용해서 좀 더 쉽게 .htaccess 파일을 만들 수도 있다.

2.7 CDN(Content Delivery Network) 사용하기

CDN이란 콘텐츠 전송 네트워크를 의미하는 것으로, 여러 곳에 있는 CDN 서버에 파일을 저장해 놓았다가 사용자의 위치에 따라 가장 효율적인 경로로 파일을 전송하는 시스템을 의미한다. 이는 세계적으로 서비스를 하는 인터넷 업체가 세계 어느 곳에서도 빠른 속도로 서비스를 제공하기 위해서 많이 사용하는 기술이다.

예를들어 구글에서 파일을 하나 다운 받는다고 할 때, 한국에서 접속하면 한국과 가장 가까운 서버에서 파일을 전송하고, 영국에서 접속하면 영국과 가장 가까운 서버에서 파일을 전송하는 식이라고 생각하면 된다.

결국 CDN은 기본적으로 트래픽 절감을 위한 기술이라기보다는 사이트의 로딩속도를 감소시키는 것이 주목적인 기술이라고 봐야 한다. 하지만 우리나라에서 가장 많이 사용하는 웹호스팅업체인 카페24에서 CDN을 제공하므로 그 것을 활용하면 트래픽을 좀 더 줄일 수 있을 것이다.

다만 주의할 것이 있다. 첫 째로 카페24의 CDN 서비스 역시 트래픽 제한이 있으므로 그 제한이 넘지 않도록 주의해야 한다. 둘 째로 카페24의 CDN 서비스는 이미지 CDN 서비스이므로 JPG, GIF, BMP, PNG의 이미지 파일만 CDN에서 전송 가능하다는 것이다.

그래서 가장 적절하게 카페24의 CDN을 이용하는 방법은, 일반적인 이미지는 피카사등의 이미지 호스팅 서비스를 이용하고, 외부 이미지를 이용할 수 없는 특성 이미지(Featured Image)에만 CDN을 이용하는 것이 아닐까 싶다.

하지만 CDN에 FTP를 이용해서 이미지를 올리고 그 링크를 따서 쓰는 방법은 너무 복잡하다. 그래서 카페24의 CDN을 본격적으로 사용하려면 Hacklog Remote Attachment 플러그인을 사용하는 것이 좋다. Hacklog Remote Attachment 플러그인은 워드프레스에서 올리는 파일을 FTP를 이용해서 다른 곳에 자동으로 올려주고 워드프레스에는 외부에 올린 파일을 사용하도록 하는 플러그인이다.

Hacklog Remote Attachment를 활성화한 후부터, 워드프레스에 올리는 모든 파일은 내 워드프레스가 설치된 계정이 아니라, 플러그인 세팅에 설정한 계정으로 업로드되고, 이미지나 파일 모두 그 계정에서 전송된다. 즉, 평소처럼 워드프레스에 이미지를 올려도 그 이미지가 자동으로 CDN 계정을 통해서 전송된다는 말이다.

플러그인의 설치는 역시 대시보드에서 ‘플러그인’ 》 ‘플러그인 추가하기’로 이동한 뒤, 검색창에 “Hacklog Remote Attachment”라고 입력, 검색후 검색 결과에서 플러그인을 설치, 활성화하는 방법을 사용하면 된다. 또한 대시보드에서 ‘설정’ 》 ‘Remote Attachment’로 이동하면 설정을 할 수 있다. 설정은 다음 이미지와 설명을 참조하면 쉽게 할 수 있을 것이다.

Hacklog Remote Attachment 설정
▲ Hacklog Remote Attachment 설정

  1. Ftp server: 카페24에서 제공하는 CDN의 FTP 주소를 입력한다.
  2. Ftp server port: 카페24에서 제공하는 CDN의 FTP 포트를 입력한다. 일반적으로 21을 그대로 쓰면 될 것이다.
  3. Ftp username: 카페24에서 제공하는 CDN의 FTP 아이디를 입력한다.
  4. Ftp password: 카페24에서 제공하는 CDN의 FTP 비밀번호를 입력한다.
  5. Ftp timeout: 기본값인 30을 그대로 쓴다.
  6. Remote base URL: http:// 로 시작하는 CDN의 웹 주소를 입력한다. 이 때 뒤의 경로까지 다 쓰는 것이 아니라, 그 주소가 http://cdn.kalkin7.com/html/cdn 이라면 http://cdn.kalkin7.com 까지만 쓴다. 마지막에 /는 입력하지 않는다.
  7. FTP Remote path: CDN으로 사용할 폴더의 위치를 입력한다. FTP 프로그램으로 접속해서 보면 자신의 계정 앞에 다른 폴더가 있는 경우가 있다. 그럴 땐 그 폴더 경로도 함께 써준다. 예를 들어 FTP 프로그램으로 봤을 때 아래 이미지와 같은 경우라면 html/cdn과 같이 입력하면 된다.
    Hacklog Remote Attachment 설정 (FTP Remote path 참고 사항)
  8. HTTP Remote path: FTP상의 경로와 HTTP상의 경로가 다를 수 있다. 그걸 감안해서 경로를 입력해준다. 예를 들어 위의 예와 같은 경우에, html은 HTTP 경로상에 나타나지 않으므로 cdn이라고만 적으면 된다.
  9. Move: 이 플러그인을 활성화하기 전에 워드프레스 상에서 파일을 올렸었다면 그 파일들을 모두 CDN 계정으로미리 옮겨줘야 한다. 즉, ‘워드프레스 설치 폴더/wp-content/uploads’에 있는 파일 모두를 자신의 CDN 계정으로 옮겨주면 된다. 그 후에 9번 항목에 있는 here링크를 눌러서 기존에 있는 글들의 첨부파일 경로를 CDN 계정으로 바꿔준다.
  10. Recovery: 플러그인을 사용을 그만두기 전에 CDN 계정에 있던 파일들을 다시 워드프레스가 설치된 계정으로 옮겨주고, here 버튼을 눌러서 다시 기존의 글들의 첨부파일 경로를 원래 계정 주소로 바꿔주는 작업을 해야 한다.

이 방법도 단점이 있다. 카페24의 CDN 서비스는 이미지 파일만 저장이 가능하므로, 첨부 파일에 이미지 파일 이외의 것을 저장하려고 하면 제대로 파일이 올라가지 않을 것이다. 하지만 용량이 큰 첨부파일을 워드프레스 계정에 올리는 것은 트래픽 소모를 촉진시킬 위험이 있으므로, 파일을 배포하려면 드롭박스등의 클라우드 서비스를 이용하는 것이 좋을 것이다.

지금 설명한 방법은 카페24 CDN 계정에서 실제로 테스트해 본 것이 아니다. 내가 카페24를 쓰고 있지 않기 때문이다. 그래서 이 방법이 카페24의 CDN 서비스와 잘 호환이 될지는 미지수다.

하지만 Hacklog Remote Attachment 플러그인에 대한 테스트는 많이 해봤다. 나스를 가지고 있어서 나스를 외부 CDN 처럼 사용할 수 있었기 때문이다. 다만 내가 소유한 나스는 그리 성능이 뛰어나지 않아서 많은 사람들이 동시에 접속했을 때 무리가 올 수 있다. 그래서 젯팩 플러그인의 포톤 서비스를 이용해서 이미지가 워드프레스 CDN을 통해서 전송되도록 세팅했다.

그리고 Hacklog Remote Attachment 플러그인의 단점도 있다. 다른 환경에서는 어떨지 모르겠지만 내가 테스트했을 때는, 워드프레스에 올린 파일을 삭제해도 CDN 계정에 있는 파일이 잘 삭제되지 않았다. 내 나스에서는 특이하게 원본 파일만 남겨지고 리사이즈된 이미지들만 삭제되는 현상을 보여줬다. Hacklog Remote Attachment 플러그인을 소개해준 분의 환경에서는 정상적으로 작동했다고 하니, 계정의 환경에 따라 달라질 수 있는 것이 아닌가 싶다.

3. 맺으며

설치형 블로그를 운영한다는 것은 쉬운 일이 아니다. 특히 처음 트래픽에 대한 개념을 알게되면, 가입형 블로그의 무제한 트래픽을 부러워하게 되는 경우도 상당히 많다. 하지만 설치형 블로그헤 한 번 익숙해지면 다시 가입형 블로그로 가기가 망설여지는 경우가 많다. 나 역시 마찬가지다.

하지만 많은 방문자는 결국 비용일 수밖에 없는 설치형 블로그를 운영하다보면, 비용 때문에 가입형 블로그로 넘어가고 싶은 생각이 생길 수 있다. 그러나 몇 가지 방법을 통해서 트래픽을 절약한다면 큰 비용을 들이지 않고서도 자신만의 설치형 블로그를 운영할 수 있다.

아마 이런 방법을 몰랐다면 나 역시 가입형 블로그로 넘어가거나, 블로그에 광고를 달고 운영했을 수도 있다. 하지만 여기서 소개한 방법들을 적용한 결과, 적은 비용으로 블로그를 운영할 수 있게 되어서 광고에 대한 유혹을 떨쳐버릴 수 있었다.

처음으로 설치형 워드프레스를 운영하기 시작한 사람들은 나처럼 트래픽 때문에 고민을 하는 경우가 있을 것이다. 이 글이 그 분들에게 조금이나마 도움이 되었으면 하는 바람이다.

4. 함께 읽기


  1. 유닉스나 리눅스에선 파일이나 디렉토리 앞에 .을 붙이면 숨김 파일이 된다. 
  2. 물론 내 블로그가 상당히 가볍기 때문에 이미지의 비중이 높아진 것도 있기는 하다. 
  3. 방법이 없는 것은 아니지만 조금 복잡하다. 방법은 워드프레스에서 외부 이미지를 특성 이미지(Featured Image)로 사용하기를 참조하면 알 수 있을 것이다. 

이 글 공유하기:

댓글 남기기

61 댓글 / "설치형 워드프레스 블로그에서 트래픽 소모를 줄이는 7가지 방법"

댓글 이메일 구독
avatar
정렬:   최신순 | 오래된 순
wpDiscuz