티스토리 skeleton 반응형 스킨에서 구글 애드센스 본문 상단에 2개 배치하기

반응형

티스토리 skeleton 반응형 스킨에서 구글 애드센스 본문 상단에 2개를 배치해봅시다.


이번에 Skeleton 반응형 스킨으로 디자인을 바꾸면서 구글 애드센스의 코드도 함께 바뀌었습니다. 애드센스 자체의 코드가 바뀐건 아니고, 애드센스 주변을 구성하는 틀 자체가 바뀌었다고 해야겠군요. Skeleton 스킨은 반응형 스킨이기 때문에, 일반적으로 티스토리에 애드센스 광고를 넣듯이 고정형 애드센스를 배치해버리면 모바일이나 해상도가 낮은 기기에서도 크기가 줄어들지 않은 광고가 나타납니다. 마크쿼리님이 제공해주시는 스킨을 사용하시는 티스토리 블로거분들을 몇 곳 방문해 보았는데, 실제로 고정형 애드센스를 넣어둔 분도 계시더군요. 지금 당장은 큰 문제가 없는 것처럼 보입니다만, 모바일 화면에서 사이즈가 큰 광고가 표시될 경우애드센스 정책 위반에 해당하기 때문에 주의를 해야합니다.
 






이번 글은 PC화면처럼 사이즈가 큰 화면에서 가장 인기가 높은 사이즈의 구글 애드센스인 300*250 을 기준으로 포스팅합니다. 기존에 사용하시는 구글 애드센스 광고 그대로 사용하시면 될 것 같습니다. 모바일과 관련된 애드센스 배치 및 삽입 방법은 내용이 좀 있는 관계로 다음 포스팅에서 다룰 예정입니다.

Note

티스토리 자체에서 제공하는 모바일용 애드센스 플러그인은 더 이상 사용하지 않습니다. 별도의 모바일 스킨 또한 필요없습니다. 현재의 스킨 그대로 모바일로 가져감으로써 사용자에게 어떤 기기에서든 동일한 경험을 줍니다(반응형). 단, 구글 애드센스의 크기와 구조는 줄어든 화면의 크기만큼 줄어들어야 하기 때문에 모바일용 비동기식 구글 광고를 사용할 예정입니다. 아직 BETA라고 나와있습니다만 현재로선 이 방법이 최선입니다.


구글 애드센스를 삽입할 위치 찾기


가장 먼저 구글 애드센스를 삽입할 위치를 찾아야 합니다. 지금 찾고자하는 위치는 본문 최상단입니다. 제목 바로 아래, 본문 시작보다는 위쪽에 구글 애드센스 광고를 넣으려고 하는 것입니다. 가장 많은 유저가 사용하고 있는 공간이기도 하며, 오랜기간동안 그 효과가 거의 증명되다시피 한 위치이기도 합니다.

이 위치는 티스토리의 본문 시작 치환자를 검색하는 것만으로 쉽게 찾을 수 있습니다.

중요!

티스토리에서 본문 시작을 뜻하는 치환자는 [샵샵_article_rep_desc_샵샵] 입니다.HTML 수정 창에서 검색(Control + f)을 활용하여 애드센스 코드 삽입 위치를 쉽게 찾으세요.

티스토리에서는 본문에 치환자를 표시할 수 없기 때문에 위의 치환자에서 '샵'을 #으로 변경해주어야 검색이 됩니다. 즉, 샵샵이면 ##이 됩니다.

치환자 관련하여 샵이고 뭐고 헷갈리시는 분들을 위해 텍스트 파일을 준비했으니, 텍스트 파일을 다운로드하여 치환자를 복사 할 수도 있습니다.

티스토리 본문 시작 치환자 TXT Download


구글 애드센스를 삽입하기

바로 윗칸에 넣는 것이 추후 관리하기 편하더군요. 일반적인 티스토리 스킨에서는 구글 애드센스를 가로로 2개 정렬하여 배치하는 과정에서 `<table>` 태그 등을 이용하는 것으로 알고 있는데요. 이번 스킨에서는 구조화가 잘 된 Spec이 따로 있으며, HTML5에 어울리는 방법으로 적용할 수 있습니다.

이제 구글 애드센스를 배치해주면 됩니다. 소스코드는 아래와 같습니다.




간편하게 소스코드 TXT를 다운로드 하세요.

구글 애드센스 가로 2개 배치 소스코드(Skeleton Skin) Download


해당 소스코드에 자신만의 구글 애드센스 코드를 넣은 다음 아까 찾은 위치에 넣어주면 됩니다. Skeleton 스킨에서는 반응형과 관련된 사이즈 크기가 4개로 구분되어 있습니다. visible-lg, visible-md, visible-sm, visible-xs 가 그것인데요. 제 해석으로 이 단어들은 라지, 미듐, 스몰, X스몰을 뜻하는 것 같습니다. 따라서 위에 적어둔 소스코드는 lg, md 사이즈, 그러니까 대부분 PC화면 사이즈에서 출력되는 소스코드입니다. 따라서 해당 소스코드를 삽입한 다음 모바일 등으로 접속했을 때 광고표시가 나오지 않으면 정상이 되겠습니다.

div class="col-sm-6" 부분은 레퍼런스를 참고하여 구조를 만들었습니다. 레퍼런스 및 커뮤니티의 답변에 의하면 col-sm은 12까지 있다고 합니다. 본문을 좀 살펴보니 사이드바를 제외한 크기는 col-sm-9 인 듯 합니다. 이렇게 하는게 맞는지는 모르겠습니다만, 최대한 WIDE 풀사이즈 화면에 대응하기 위해 구글 애드센스 1개당 col-sm-6을 넣어두었습니다.

본문 텍스트와 광고, 제목과 광고에 약간의 여백을 주기 위해 margin이 들어가 있으며, 좌우 여백은 필요없습니다.




동기식과 비동기식 구글 애드센스


저도 이번에 새롭게 개편하면서 알게 된 사실인데, 구글 애드센스의 코드 유형이 동기식과 비동기식으로 구분이 되어 있더군요. 과거에는 그냥 동기식만 있었던 것 같은데... 아무튼 비동기식 코드는 모바일에서 사용할 예정이며, PC화면의 구글 애드센스는 동기식으로 코드를 얻었습니다.



배치가 완료되었고 정상적으로 광고가 2개 출력되면 완벽합니다. 해당 소스코드는 모바일 같은 작은크기의 해상도에서는 광고가 나타나지 않도록 되어 있습니다. 브라우저 크기를 줄였다 늘렸다 해가며 잘 동작하는지 체크해보시기 바랍니다.



사진 - Tax Credits

반응형

댓글(51)

  • 이전 댓글 더보기
  • 2013.12.12 11:16 신고

    애드센스 하시는 분들에게 너무 좋은 정보가 되겟군요^^

  • 2013.12.12 11:35

    저도 애드센스에 관심을 가져봐야겠습니다. ^^

  • 2013.12.12 11:53 신고

    애드센스 배치 방법 잘 보고 갑니다~
    즐거운 하루 보내세요^^

  • 2013.12.12 12:08 신고

    플로그인이 아니면 모바일 상단에 큰 배너를 달아도 되는 거죠?
    클릭율의 차이가 배너 사이즈에 따라서 굉장히 다르더라구요.
    매번 다는 것이 귀찮아서 그렇지 수익은 참 좋은데 말이예요. 쩝.

    • 2013.12.12 12:28 신고

      제가 방금 모바일로 접속해보니 플러그인으로 사용중이시군요.
      상단에 300*250 같은 큰 광고를 넣을 경우 모바일 기기의 크기에 따라 콘텐츠의 거의 대부분이 가려질 수 있어, 무효클릭 요소가 있기 때문에 구글 애드센스 프로그램 정책 위반에 해당될 소지가 있습니다.

      관련될 글을 현재 작성중이며, 내일 포스팅 될 예정입니다.^^

  • 2013.12.12 12:25 신고

    알찬 정보 잘 알아 갑니다.

    ^^-^^

  • 2013.12.12 15:38 신고

    유익한 정보 알려주셔서 너무 감사합니다^^

  • 2013.12.12 16:19 신고

    정말 한번 손대면 장난아니네요.ㅎ
    대단하십니다.ㅎ

  • 2013.12.12 19:30 신고

    반응형웹도 애드센스도.. ㅎㅎ 제가 경험해본 직접 경험해본 영역은 아니네요.

  • 2013.12.13 09:11 신고

    헐~ 하다보니 막히네요.
    동료에게 물어봐야겠어요. ㅋㅋㅋ.
    역쉬 쉬운것은 없어요. 도전 도전 도전....

  • 2013.12.19 17:48 신고

    정말 많이 배우고 갑니다.
    오늘 하루 종일 씨름중인데, 이 블로그 아니었으면 큰일 날뻔했어요.^^

  • 2013.12.20 14:07 신고

    님처럼 하단에 글 끝나자마자 어떻게 넣나요?

  • 2013.12.27 13:28 신고

    메모장으로 열었더니 글자들이 제대로 나오지 않습니다.
    어떻게 해야 하나요?

    • 2013.12.27 14:02 신고

      음... 어떤 소스코드인가요?

    • 2013.12.27 14:11 신고

      소스코드를 기존 하이라이트에서 Pastie로 변경해서 적용시켜두었습니다. 복사하시고자 한다면 소스코드 아래쪽 우측에 있는 RAW버튼을 클릭하시어 복사하시면 됩니다.

  • 2013.12.30 01:40 신고

    하단에는 직접 입력 하신다고요?ㅠ

    글 쓸때마다 입력해야하는건가요?

    • 2014.01.01 21:17 신고

      네. 글 하단에 넣기 위해서는 직접 입력하는 수 밖에 없는 상황입니다. 본문 하단이 아니라 약간 더 아래쪽에... 그러니까 본문이 끝나고 여러가지가 배치된 다음에 출력하고자 한다면 HTML을 수정하면 되며, 저처럼 본문 하단에 넣으려면 티스토리 글쓰기의 '서식'을 이용하면 원 클릭으로 적용할 수 있습니다.

  • 2014.01.01 19:10

    비밀댓글입니다

    • 2014.01.01 21:22 신고

      저 역시 이번 스킨을 적용할 때 상당히 고려하고 고민했었던 부분인데요.

      먼저 IE7,8,9 는 반응형 웹을 제대로 동작시키지 못합니다. 실제로 작동해보시면, 구글 광고 뿐만 아니라 상단 메뉴바라던지 카테고리 라던지 사이드바 등 몇가지 반응형 동작이 원할하지 않을 것으로 추측됩니다.

      해당 스킨의 레퍼런스에는 원래 자바스크립트를 통해 강제로 동작시키도록 해주는 responds.js 라는 파일이 있다고 합니다. 그러나 티스토리에서는 동작하기 않기 때문에, 궁극적으로 완전체의 반응형 웹이 구현되질 않는 상황입니다.

      Skeleton에는 ie.css라는 스타일시트가 있는데, 사실 이 스타일시트가 있다하여도 100% IE 9버전 이하에서 동작을 장담할 수 없는 것으로 테스트되었습니다. 결국 이번 스킨의 가장 핵심 스타일시트라고 할 수 있는 boostrap.css 의 visible-... 의 명령이 먹히질 않거나 아예 무시되는 것 같습니다.

      그래서 운영자가 선택해야 할 사항은 2가지 정도던데요.
      1. IE 에 맞춘 반응형이 아닌 다른 스킨의 사용.
      2. 반응형 웹을 유지하면서 IE는 포기하는 대신 모바일은 취하는 형태.

      저는 후자로 선택해서 IE9버전 이하는 무시하고 그냥 사용중입니다.^^

  • 2014.01.02 00:54

    비밀댓글입니다

  • 2014.01.29 16:54 신고

    안녕하세요. 블로그가 남들과 같은 스켈레톤 스킨을 썼는데 컨텐츠면에서 상당히 인상깊어서 한참을 둘러보았습니다. 저는 스켈레톤 스킨 정보 찾다가 들어오게 되었는데요, 한가지 질문이 있어서 댓글을 남깁니다. 사이드바 두께하고 본문두께조정 하는 방법이 궁금합니다. 코드를 전혀 모르는 사람이라..이런 기본적인것도 모르겠네요 ㅠ

    • 2014.01.29 19:12 신고

      관심가져 주셔서 감사드립니다.^^

      사이드바 너비와 본문 너비를 말씀하시는거 같네요. 가로 사이즈.
      스켈레톤 스킨의 전체 가로 폭은 col-sm-12로 설정되어 있습니다. 그 다음 본문이 9, 사이드바가 3으로 기본 설정되어 있습니다. 모든 값은 전체 크기인 12안에서 움직여야하고요. 따라서 사이드바를 넓게 만들 경우 본문 너비가 그만큼 줄어들어야하는 점에 주의하시고,

      HTML 소스코드에서,
      <div class="col-sm-9 skeleton-content"><!-- site layout : content column --> 부분이 본문이며,
      <div class="col-sm-3"><!-- site layout : widget column --> 사이드바 코드입니다.

      관련 링크 http://markquery.com/community/faq_tistory/352 참고하세요.^^

    • 2014.01.29 19:14 신고

      숫자값만 조정해주시면 됩니다. 쉽죠? 반응형 스킨이기 때문에 직접적인 사이즈(width=300px 형태)를 지정할 순 없습니다.

      숫자가 늘어나면 사이즈가 넓어지며,
      숫자가 줄어들면 사이즈가 줄어듭니다.

      관련내용 정리하여 별도로 포스팅할 수 잇도록 준비해보겠습니다.

    • 2014.02.04 12:03 신고

      와우 감사합니다 ~!!

  • 2014.02.15 03:34

    비밀댓글입니다

    • 2014.02.15 20:30 신고

      포스트 하단에 애드센스를 넣으려면 구글애드센스 코드를 본문에 직접 넣어주어야 합니다. 해당 박스는 위지윅 에디터의 글상자 이며, 애드센스는 소스코드 삽입 후 중앙정렬 해주시면 됩니다.^^

  • 2014.03.22 18:28 신고

    익스 7,8버전에서는 보이지않는게 안타깝네요 ㅠㅠ

  • 2014.05.13 17:53

    비밀댓글입니다

  • 2015.02.26 02:36 신고

    저는 다른 반응형 스킨을 쓰고있는데요, 말씀하신 <table> 로 상단 광고 두개를 쓰고있다가 모바일에서 위반된다는것을 알고 부리나케 바꾸는 도중 게시된 코드로 했더니 좌우로 광고 두개가 아니라 상하로 두개가 출력되네요. 그래서 아직 수정은 하지 않았습니다. 어떻게 하면되는지 알려 주실 수 있으신가요?

    • 2015.02.26 04:02 신고

      현재 애드센스를 반응형이 아닌 코드를 쓰시는 것 같습니다. 애드센스도 많이 변경이 있었는데, 반응형 코드를 넣어보세요.

Designed by JB FACTORY