요약

블로그에 구글 광고를 붙여서 자잘한 부수입을 얻는 경우가 많습니다.
Google ADs 에는 ID 매칭 로직이 포함되어 있어서 다른 사람의 블로그 포맷을 가져온다고 타인의 광고 수입을 대신 만들어주는(?) 블로그가 되는건 아니지만
레이아웃에 빈 박스가 있는게 싫어서 해당 박스들을 주석처리 하는 방법에 대해 간단히 작성해보았습니다.

들어가기에 앞서

이 방법은 현재 적용된 블로그 포맷에 적합한 방법입니다.
큰 틀에서의 방법은 비슷할 수 있으나, 모든 jekyll 테마 블로그에 호환되는 내용은 아닐 수 있습니다.
( 개인 기록으로서의 느낌으로 적었습니다 )

방법

구글 AdSense 는 페이지의 HTML 소스에 스크립트를 삽입하여 광고가 나타나도록 하는 방식입니다.
스크립트의 기본적인 형식은 대략 아래와 같습니다.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <ins class="adsbygoogle"
       style="display:block; width:98%; height:300px;"
       data-ad-client="구글에서_지정해주는_광고_식별용_ID"
       data-ad-format="auto"></ins>
  <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
  </script>

블로그의 모든 부분을 처음부터 직접 개발하지 않고 다른 블로그 저장소를 fork 해 오거나, 기존에 작성된 jekyll 테마를 다운 받는 경우 블로그 소스 사이에 위와 같은 구글 광고 스크립트가 포함되어 있을 수 있습니다.

물론 해당 소스가 삽입되어있다고 해서 내 블로그가 다른 사람의 광고 수입을 만들어주는 숙주(?)가 되는것은 아니에요.
자신의 페이지에 구글 광고를 삽입 하려고 할 때, 구글은 그 페이지의 관리자가 누구인지 확인을 하고 확인된 페이지의 도메인과 광고 식별용 아이디가 매칭되지 않으면 광고가 뜨지 않도록 구성이 되어있습니다.
그래서 타인의 data-ad-client="구글에서_지정해주는_광고_식별용_ID" 가 포함된 소스를 가져오더라도 내 페이지에서 다른 사람을 위한 광고가 뜨는 일은 없습니다.

다만… 아무것도 없는 흰 빈 박스 영역이 블로그 레이아웃에 포함되어 있겠죠…
그걸 피하려면, 위 소스들을 주석 처리해서 광고 영역 박스를 없애면 됩니다!
( 블로그 레이아웃은 예쁘게? 유지하고 싶은 욕심 )

이 페이지의 경우 /_includes 하위에,

• contents.html
• post.html
• right-side.html

세 파일에 위와 같거나 유사한 구글 광고 스크립트가 작성 되어있었고, 현재는 해당 부분들을 주석처리 해서 광고 레이아웃을 안 보이도록 처리 하였습니다.
( 자세한 변경 사항은 아래 커밋 로그를 통해 확인할 수 있습니다 )
구글 광고 레이아웃 제거 커밋 로그

마무리

이로서 블로그가 조금(?) 더 깔끔해졌어요!
해당 스크립트들을 그냥 막 삭제하지 않고 주석으로 처리하는 이유는 여러가지가 있겠지만, 저로서는 반응형 동작이 원활히 이루어지지 않게 되거나 여러 페이지 구성 요소들이 깨지는것을 막기 위해서가 가장 큰 이유였네요.
실제로 right-side.html 의 스크립트를 잘못 날리고 주석 처리 했다가 자바스크립트가 깨져서 페이지가 동작을 안 하던 상황이… ㅠㅁㅠ
특히나 로컬에서 bundle exec jekyll serve 로 개발 호스팅 하면 자바스크립트가 안 깨지던게 깃헙에 올려서 페이지 빌드 시키면 깨지고 에러나고… 더 골치였습니당 ,_,)

자바스크립트나 CSS 가 깨지는 부분은 각각의 블로그 탬플릿에 따라 다를 수 있어서 조금은 실험이 필요한 부분도 있는것 같습니다.
제가 프론트쪽 지식이 부족해서 헤메는것도… 물론 있을거구요 ㅎㅎ..

모쪼록 이 포스팅이 개인 jekyll 블로그를 예쁘게 커스텀하는데 도움이 되었길 바랍니다