맛집이나 상품 홍보용 블로그를 한다면 주변에서 광고요청 혹은 제품 협찬을 통해서 수익 활동을 하는 경우가 많다. 그러나 프로그래밍 혹은 학습적인 정보를 다루는 블로그에서는 이런 수익을 기대하기 어려운데 한 가자 희망적인 것은 배너 광고를 통해서 아주 소박한 수익을 꾀할 수 있다는 점이다. 대표적으로 구글에서 제공하는 Google AdSense, 다음의 AdFit, 텐핑이라는 것이 있다. 


사실 필자도 최근에 티스토리 블로그 활동을 재개하면서 이런 수익 모델이 있다는 것을 처음 알았다. 비록 인터넷 뉴스를 볼 때도 눈에 거슬리는 수 많은 광고 때문에 적잖이 짜증이 났지만 게시된 글에 크게 영향을 미치지 않는 선에서 광고 배너를 설치하는 것은 크게 문제되지 않아 보인다. 비록 미미한 수입이겠지만 한동안 잊다가 수익을 정산해보면 오래된 옷에서 예전에 숨겨놓은 천 원짜리 한 장을 발견한 기쁨정도는 되지 않을까?



1. Google AdSense 등록


가장 먼저 해야할 일은 구글 애드센스에 계정을 등록하는 것이다. 이미 구글에 계정을 갖고 있다면 더 빠르게 진행할 수 있다. 혹여나 구글에 계정이 없다고 해도, 가입 과정이 워낙 간편하기 때문에 누구나 쉽게 할 수 있다. 구글이든, 네이버든, 다음이든 상관없다. 검색 포털에 구글 애드센스로 검색을 하면 페이지로 이동할 수 있다.



이미 계정을 갖고 있다면 우측 상단에 로그인으로, 계정이 없다면 중앙에 표시된 지금 가입하기를 선택하자. 필자는 이미 가입된 관계로 가입 과정은 생략한다.



2. Google AdSense 광고 제작


구글 애드센스를 경험하면서 상당히 만족스러운 부분이었다. 광고의 디자인을 소박하게나마 변경할 수 있으며, 광고의 크기만 선택하면 자동으로 광고를 삽입할 수 있게 코드를 제공해준다. 너무 간편하고 빠르게 광고를 삽입할 수 있는 군더더기 없는 서비스가 좋았으며, 티스토리에서도 구글이 제공한 코드를 손 쉽게 삽입할 수 있도록 안내하고 있다.



[내 광고] 탭에서 광고 [새 광고 단위] 버튼을 클릭하면 위와 같은 화면이 나오는데 여기서 간단한 선택을 통해 내 블로그에서 게시될 광고의 형태를 설정할 수 있다. 필자의 경우 336x280 사이즈의 큰 사격형 형태로 두 개를 제작했으며, 티스토리 블로거라면 이를 추천한다. 그 이유는 티스토리 자체에서 구글의 애드센스를 간편하게 개게재할 수 있도록 플러그인을 제공하는데, 이 플러그인에 적용가능한 크기는 몇 가지로 제한되어 있기 때문이다.


코드 디자인 및 크기를 간단하게 설정하고 [저장 및 코드 생성] 버튼을 누르면 아래와 같이 블로그에 적용할 수 있도록 코드를 생성해준다. 이 코드를 복사하여 티스토리 가 제공하는 애드센스 플러그인에 적용해주면 광고 게재가 완료된다. 그럼 아래의 코드를 일단 복사해놓자.




3. Google AdSense 광고 게재


티스토리의 관리 페이지에서 [플러그인] 탭에 [플러그인 설정] 항목으로 들어가보면 티스토리가 제공하는 다양한 플러그인을 확인할 수 있다. 그 중에 [수익] 카테고리로 이동해보면 아래와 같은 화면을 볼 수 있다.



위에서 언급했던 텐핑과 다음의 AdFit 역시 플러그인으로 제공하고 있음을 알 수 있다. 필자는 현재 구글에서 제공하는 AdSense 광고만 모바일 및 데스크탑 버전으로 사용하고 있다. (왠지 구글이 더 끌려서..) 그럼 Google AdSense (데스크탑 웹용) 레코드에 우측 [설정] 버튼을 눌러보면 아래처럼 탭이 확장되며 광고 유무 및 게재될 광고의 위치를 설정할 수 있다.



필자는 포스팅 하단에 336x280 사이즈의 큰 사각형 광고를 두 개 노출하기로 설정했다. 즉, 구글 애드센스에서 두 개의 광고단위를 설정했고, 코드 두개를 복사했다. Google AdSense에서 복사해 온 코드를 하단의 textarea에 붙여넣고 [저장] 버튼을 누른다면 포스팅에 광고가 함께 게재된다. 



4. Google AdSense 수익 확인


내 블로그에 노출시키는 광고를 통해 얼마의 수익을 올렸는 지, 혹은 광고에 대한 다른 설정이 필요하다면 구글의 애드센스 페이지를 이용하면 된다. 아쉽게도 필자도 구글 애드센스를 적용시킨지 불과 몇 일밖에 되지 않았다. 때문에 $0.24의 수익만 발생할 듯 하다. 현재 환율로 알아보니 약 289.08원이다. (사실, 이마저도 실제 수익과는 거리가 멀다. 단지 페이지 RPM일 뿐이다.) 비록 지금은 매우 적은 금액으로 시작하지만 블로그를 꾸준히 운영하면서 수익이 점차 늘어나는 것을 확인하게 된다면, 그만한 동기부여가 없을 것 같다. (물론 돈을 위해 운영하는 것은 아니지만..)




5. 주의사항


아는 만큼 전달하기 위해 글을 작성했지만, 애매하거나 보다 정확한 정보를 원할 때는 구글에서 제공하는 가이드라인을 확인하는 것 만큼 확실한 것은 없다. 오랜기간 블로그에 함께 자리잡을 광고라면 구글에서 제안하는 사항들을 한 번쯤은 읽어두는 것을 추천한다. 또한 가입 후 위처럼 설정했음에도 불구하고 광고가 게재되지 않는다면 조금 기다려보자. 사용자 및 페이지의 진위여부 등을 검토하고 광고의 승인이 나기까지 일정 시간이 소요된다고 하니까.


필자도 예전에 수익을 위해 블로그를 운영해 본 경험이 있다. 당시에는 투데이 방문객을 높은 수준으로 유치하기 위해 항상 자극적이거나 극히 실용적인 내용으로 글을 작성했는데 나중에 접속해보니 그렇게 난잡하고, 지저분할 수 없었다. 이런 이유로, 지금의 블로그는 내가 공부한 내용을 정리하고, 누군가에게 유용할 수 있는 정보를 공유하기 위한 블로그로 담백하게 운영하고자 한다. 더불어 이따금씩 올라가는 수익을 확인하는 소소한 재미와 함께.





최근에는 블로그가 상당히 활성화되면서 맛집이나 상품, 홍보에 목적을 둔 블로그와 더불어 프로그래밍과 관련된 블로그 공급이 꾸준히 증가하고 있다. 필자 역시 공부한 내용을 정리하는 목적과 다른 사람들과 공유하고자 하는 목적에서 블로그를 시작했다. 그러나 기본적으로 제공되는 HTML/CSS 속에서 가독성 있는 코드를 작성하기란 쉽지 않다. 이런 문제점을 겪는 것이 비단 나뿐만은 아닐 것이라 생각하여 검색해보니 쉽게 답을 찾을 수 있었다. 검색 결과로 몇 가지 방법을 찾을 수 있었으나, 가장 간단했던 Highlight.js를 이용한 방법을 소개하고자 한다. 컴퓨터 전공이 아니더라도 간단한 HTML/CSS 편집은 크게 어려운 점이 없으니 따라해보면 쉽게 적용할 수 있을 것이라 생각한다. 블로그에 코드를 작성하는 사람들에게 도움이 되었으면 좋겠다.


1. 소개




Highlight.js는 파일 확장자에서 파악할 수 있듯이 자바스크립트로 작성된 코드 작성용 라이브러리다. 홈페이지를 통해 무료로 다운받아서 업로드하는 형식 또는 CDN(Contents Delivery Network)을 통해 끌어와서 사용하는 방법이 있다. CDN 방식을 이용하면 몇 가지 단점을 지니지만 간편하게 적용할 수 있으니 이 방법을 통해 진행하고자 한다.



2. 설정


티스토리 블로그 관리 → HTML/CSS 편집창에서 HTML 파일의 <head></head> 영역 사이에 아래의 코드를 삽입해도록 하자. 애매한 위치에 삽입할 경우 후에 알아보기 어려울 수 있으므로 </head> 바로 앞에 삽입하는 것을 추천한다. 삽입 후 바로 적용가능하도록 작성해놨기 때문에 복사해서 붙여넣으면 간단히 적용할 수 있을 것이다.

<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.7/styles/default.min.css">

<script src="//cdn.jsdelivr.net/highlight.js/8.7/highlight.min.js"></script>

<script>hljs.initHighlightingOnLoad();</script>


코드에서 주목할 만한 부분은 첫 번째 라인에 bold체로 표기된 default.min.css 부분이다. Highlight.js는 다양한 언어에 맞게 혹은 각종 IDE에 따라 제공되는 테마를 제공한다. 따라서 이 부분을 원하는 테마로 변경해주면 적용할 수 있다. 기본적으로 default.min.css로 작성했지만 데모 페이지에서 다양한 테마를 확인할 수 있으므로 자신에 취향에 맞는 테마 선택하여 첫 번째 라인에 default.min.css를 변경해주자.



3. 코드 작성


블로그에 글을 작성할 때 Highlight.js를 이용하기 위해서는 HTML 모드에서 다소 귀찮은 과정을 진행해야 한다. 기본적으로 코드는 아래에 [코드 입력 부분]에 기재하면 된다. 

<pre><code>[코드 입력 부분]</code></pre>


그런데 HTML 모드에서 '<' 또는 '/'과 같은 특수문자 처리가 원하는대로 안되는 경우가 발생하는데 이를 수정해줘야 깔끔하게 코드를 작성할 수 있다. 때문에 문제되는 부분을 HTML 특수문자 코드표를 확인한 뒤 문제되는 특수 문자를 치환해주자. 웹에서 글을 작성할 때에는 모든 문자를 한 번에 바꾸는 기능을 제공하지 않는 경우가 많아서 여간 귀찮은 일이 아니다. 따라서 애용하는 IDE 혹은 메모장 같은 텍스트 편집기에서 일괄적으로 변경해주면 편하게 작업할 수 있다. 


4. 확인


필자는 텍스트편집기로 sublimetext를 가장 선호해서 해당 테마로 설정해봤다. 위에서 설정했던 코드에서 default.min.css → monokai_sublime.min.css로 변경했으며, '<' 또는 '>'와 같은 특수문자들을 코드표를 보고 치환해주었다. 결과적으로 아래의 코드화면을 확인 할 수 있다.

<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.7/styles/monokai_sublime.min.css">
<script src="//cdn.jsdelivr.net/highlight.js/8.7/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>




[참고 자료]

http://egloos.zum.com/keep/v/1030642

https://highlightjs.org/static/demo/

http://webdir.tistory.com/439