다음이 야심 차게 준비한 view AD는 다음 뷰와 연계한 광고 서비스로 오늘 막 시작해서 그런지 아주 따끈따끈하다. 어쨌든 광고이기에 블로그에 노출시켜야 하지만 광고 컨텐츠가 (지금까지 봐서는) 다음 뷰에 등록된 블로그 기사들이기에 그리 큰 위화감이 없다.

많은 사람들이 지적하듯 view AD에는 아주 큰 단점이 하나 있다. 바로 광고의 위치 및 스타일 지정이 자유롭지 못한 것. 광고를 활성화 시켜 놓으면 무조건 본문 우측에 광고가 위치하는데 아래와 같은 문제가 발생한다.

이거 어쩔거야? 본문이 낑겼잖아!!


모든 포스트가 글로 시작하지만은 않는다. 종종 사진과 함께 시작하는 경우가 있는데, 특히 사진을 본문 좌측이나 우측으로 배치한 경우 위와 같은 문제가 발생한다. 그러나 아쉽게도 view AD는 스킨 치환자 형식으로 제공되지 않기 때문에 위치를 마음대로 이동시킬 수 없고, 스타일도 마음대로 바꿀 수 없다.

그런데 과연 마음대로 이동시킬 수 없을까? 스타일도 못 바꾸나?

아니다. 간단한 자바 스크립트로 광고의 위치와 스타일을 바꿀 수 있다. 물론 다음 측에서 권장하는 건 아니다. 하지만 그들이 압사당한 포스트를 보면 눈물을 주륵주륵 흘리며 '내 그 마음 이해하리다' 하지 않을까?

코드는 굉장히 간단하다. 광고가 출력되었으면 하는 자리에 플레이스홀더(placeholder)를 하나 두고, 광고가 출력된 후 플레이스홀더를 광고로 대체하면 된다. 이 때 광고를 가리키는 태그를 찾아야 하는데, 약간의 꼼수를 써야 한다. view AD는 DIV 태그로 둘러싸여 있고, 본문 제일 처음에 등장한다. 따라서 본문을 둘러싼 태그로부터 첫 번째 DIV 태그를 찾으면 된다. (보다 정확하게 하고 싶으면 DIV 리스트로부터 하나씩 꺼내와 class 값을 비교하면 된다)

<!-- 플레이스홀더 -->
<div>
	<div id="my-daumAd-placeholder"></div>
	<div style="clear:both;"></div>
</div>

<!-- 본문 -->
<div id="my-article" class="article">본문 치환자</div> 

<!-- 광고 위치 재설정 -->
<script type="text/javascript">
	var adElement = document.getElementById('my-ads');
	var articleElement = document.getElementById('my-article');
	var daumAdElement = articleElement.getElementsByTagName('div').item(0);
	var daumAdPlaceholderElement = document.getElementById('my-daumAd-placeholder'); 

	daumAdElement.style.margin = '5px';

	adElement.replaceChild(daumAdElement, daumAdPlaceholderElement);
</script>

많은 블로거들이 view AD의 배치 문제를 지적하고 있고, 이 서비스를 티스토리뿐만 아니라 다른 블로그 서비스로 확장하기 위해서는 위젯 형태로 배포되어야 하기 때문에 오늘 지적한 이 문제는 시간이 지나면 자연스럽게 해결될 것이다. 하지만 지금 당장 압사당한 포스트를 구하기 위해서는 조금은 거칠지만 자바 스크립트를 쓰는 수 밖에 없을 듯 하다. 어차피 티스토리 플러그인으로 제공할거면 스킨 치환자 형식으로도 제공하면 좋잖아?

  1. Hare 2010.06.01 14:06 ADDRESS | MODIFY/DELETE | REPLY

    저도 위치때문에 올렸다 바로 내려버렸어요. 당분간 지켜보다 다시 걸든지 하려구요.

    • semix2 2010.06.01 14:10 ADDRESS | MODIFY/DELETE

      어제 밤에 블로그 쓰다가 view AD가 보여서 냉큼 설정했는데 깝짝 놀랬습니다; 본문이 낑겼다니까요... ㅋㅋㅋㅋ 아- 이거 화가 났어야 할 대목인데 그게 왜 그리도 웃긴지 말이요;; ㅋㅋㅋㅋㅋㅋ

      바로 소스 분석해서 위치 바꿔버렸습니다. 안그래도 어제 구글 애드센스를 달아서 본문 상단에 공간이 생겼는데 거기로 옮겨 버렸어요. ^^

      워낙 말이 많아서 다음 측에서 금방 고쳐주지 않을까 기대해 봅니다. 즐거운 하루 되세요-

    • K. Martin 2010.06.07 15:31 ADDRESS | MODIFY/DELETE

      저역시 그랬답니다.

  2. 돌이아빠 2010.06.01 14:23 ADDRESS | MODIFY/DELETE | REPLY

    일단 게시는 하고 있지만, 조금 더 상태를 지켜보고나서 내릴까 고민중입니다.

    • semix2 2010.06.01 14:51 ADDRESS | MODIFY/DELETE

      돌이아빠님 지적대로 한 달 내내 광고 걸어놓고 수익이 발생하지 않는 문제가 발목을 잡네요. 추첨이라는 당근이 있기는 하지만 그리 매력적이지는 않은 듯 합니다. 블로거 순위를 매긴다면 상위 1%에 해당하는 파워블로거가 독식하진 않을까 싶기도 하구요; 저도 좀 지켜볼 생각입니다. ^^

  3. 닥터귀염 2010.06.01 14:46 ADDRESS | MODIFY/DELETE | REPLY

    설명이 너무 어려워서, 적용을 할 수 가 없네요.....

    좀더 예졔를 덧 붙여 주시면 감사하겠습니다.ㅠㅠ

    • semix2 2010.06.01 14:59 ADDRESS | MODIFY/DELETE

      안녕하세요, 닥터귀염님! 아이디가 참 매력적입니다. ^^ 설명이 어렵다니 죄송합니다; 블로그 스킨과 자바스크립트에 대한 약간의 이해가 필요하다보니 조금 어렵게 보인 것 같아요.

      관리자 모드에서 스킨 HTML/CSS 편집으로 들어가시면 skin.html 을 볼 수 있습니다. 이게 스킨인데요, 여기서 본문이 입력되는 부분을 찾아야 합니다. 를 찾으세요. 이게 본문입니다.

      본문 바로 앞에 <div...> 이 있을텐데요, div 바로 뒤에 한 칸 띄우고 id="my-article" 을 입력하세요. 본문의 바로 뒤에는 </div> 가 있습니다. 그 뒤에 '광고 위치 재설정' 블록을 복사해 붙이세요.

      마지막으로 광고가 위치할 부분을 결정해야 합니다. 보통 본문 위쪽에 광고를 삽입하므로, 아까 찾은 본문의 <div ...> 앞에다 '플레이스홀더' 부분을 복사해 붙이세요. 지금 복사해 붙인 블록이 어디냐에 따라 view AD 광고의 위치가 결정됩니다.

      이제 끝났습니다. 제가 만든 스크립트는 미리보기로는 제대로 보이지 않습니다. 편집 화면 아래에 있는 저장 버튼을 클릭해서 스킨을 저장하고 블로그로 돌아와서 확인해보세요.

      조금 어렵지만 몇 번의 시행착오를 거치면 충분히 할 수 있을거라 생각합니다. 힘 내세요! 파이팅-

  4. Adios 2010.06.01 15:11 ADDRESS | MODIFY/DELETE | REPLY

    그나저나 혜택이 있기나 있을런지 궁금해집니다 ㅎㅎ

    • semix2 2010.06.01 16:22 ADDRESS | MODIFY/DELETE

      저도 그 부분이 걱정입니다. 생각보다 많은 영역을 차지하고 있어요;; 조금 지켜보고 내릴지 말지 결정하려구요. ^^ 아디오스님 블로그는 분위기가 참 따뜻하네요- 천천히 둘러보겠습니다. ㅎㅎ 좋은 하루 되세요-

  5. 하늘빠 2010.06.01 19:33 ADDRESS | MODIFY/DELETE | REPLY

    저도 달았다가 바로 뗐습니다. ㅠ

    • semix2 2010.06.02 13:09 ADDRESS | MODIFY/DELETE

      안녕하세요~ 하늘아빠님! 저는 처음 달았을 때 때마침 최근 글 왼쪽에 이미지가 있어서 너무 난감했답니다; 그날 우연히도 애드센스를 본문 상단에 달았는데요, 어떻게든 저 위치에 끼워넣으면 되겠다 싶어서 이렇게 했답니다. ^^ 전 좀 두고 보려구요.

      많은 분들이 달았다가 다시 내리는 것 같습니다. 일단 300위 안에 드는 것 자체가 우리네 영세 블로거들에겐 무모한 도전이라;; ㅋㅋ (저만 그런가요?? ㅠㅠ)

  6. 류 진 2010.06.01 21:54 ADDRESS | MODIFY/DELETE | REPLY

    개인적으로 구글에서 용돈을 자주 주는편이라...,
    써보시고 괜찮으면 후기 올려주세요. 한번 달아보게...^^

    • semix2 2010.06.02 13:11 ADDRESS | MODIFY/DELETE

      부럽고 또 부럽습니다. 흥! (ㅋㅋ 장난이에요) 구글로의 수입 이전에 제 블로그가 꽤 비인기 블로그라서 하루 방문객이 너무 적어요; 광고 수입을 기대하기 참 힘든 상황입니다. ㅋ

      근데 재밌는 사실은, 광고를 다 없애버리니까 블로그가 너무 허전해 보이는 거에요; 디자인 측면이라던가, 좀 있어 보이고 싶다던가 하는 마음으로 광고 달아놨습니다. (그래놓고 수입을 기대하는 건 어쩔 수 없는 우리네 현실? ^^)

  7. 재아 2010.06.01 23:56 ADDRESS | MODIFY/DELETE | REPLY

    저는 달면서 ;; 배열을 다시 했습니다.

    대부분 그렇게 하신듯 하더군요

    말씀하신대로 치환자 방식이면 참 편할텐데요///

    • semix2 2010.06.02 13:12 ADDRESS | MODIFY/DELETE

      맞아요! 본문이 압사당하는 걸 누가 원하냐구요!! 크릉크릉- 치환자 방식으로 지원되면 꽤 괜찮을 것 같습니다. 뭐, 나름의 수익 사업인데 티스토리만 적용하기엔 좀 아쉬울 것 같고, 다른 블로그 서비스로 확장하다보면 자연스럽게 치환자나 위젯 형식이 될 것 같습니다. 조금 지켜볼까요?

  8. marielim 2010.06.02 00:07 ADDRESS | MODIFY/DELETE | REPLY

    구글 으음~ 구글은 안달아봤는데 +_+
    얼마나 써보면 될까요?
    전 처음 달아봐서;


    다소 귀찮아서; 못 옮기겠어여. ㅋ

    • semix2 2010.06.02 13:16 ADDRESS | MODIFY/DELETE

      안녕하세요, 마리님! 반갑습니다. 잠깐 블로그 다녀왔는데 아이 사진만 보고 실수할 뻔 했어요;;;

      우리네 청춘 블로거들은 광고를 달고 많은 수익을 바라지만, 현실은 시궁창! 으앙! 제 경우엔 수입 따윈 없답니다. ㅋㅋㅋㅋ 그냥 있어보이고, 한 달에 만원만이라도 들어오면 책이 한 권이라 그 정도 기대해 보고 있어요. (하지만 구글 애드센스로 4년간 수익이 4천원 정도에 이르고 있습니다. ㅋㅋㅋㅋ 광고 달았다가 내렸다가 자주 번복한 것도 문제이긴 합니다만;; )

  9. 나울었쪄 2010.06.03 00:36 ADDRESS | MODIFY/DELETE | REPLY

    큭 제 이미지만 앞사당하고 제 글만 뒤죽박죽 되는줄 알았더니..
    2번 연속 달았다 내렸다 했네요 ㅠ
    구글 상단에 두개인데 하나 내리고 해봤는데
    구글 옆으로 안올라가네요..
    방법 설명해주신거 같은데 용어를 하나도 모르겠네요..
    무식한게 죄죠 뭐 ㅠㅠ

    • semix2 2010.06.03 01:43 ADDRESS | MODIFY/DELETE

      저도 글이 압사당하는 바람에 몇 번 내렸다가 다시 올렸습니다. ^^ 제 설명이 많은 분께 도움이 못 되고 있네요; ㅠㅠ 자바스크립트도 등장하고 그래서 좀 어려운 것 같습니다.

      상단에 구글 광고가 두 개인 경우 일단 우측 광고를 지우고 그 자리에 <div id="my-daumAd-placeholder"></div> 를 삽입하세요. 그리고 본문에 들어간 곳, 즉 <div>[샾샾_article_rep_desc_샾샾]</div> 이 부분을 <div id="my-article" class="article">[샾샾_article_rep_desc_샾샾]</div> 이렇게 바꾸세요.

      그리고 그 아래에 <script... /> 코드를 복사해 붙여 넣으세요. 그리고 한 번 확인해 보시기 바랍니다.

      스킨이 워낙 다양한 형태이다보니 이렇게 부분적으로 설명을 드릴 수 밖에 없네요. 무식이 죄라니요;; 그렇지 않습니다. 시행착오 몇 번 하고나면 잘 될 겁니다. 저도 꽤 여러 번 스킨 날려먹었거든요. ^^ 화이팅입니다!!

  10. 버드나무그늘 2010.06.03 01:05 ADDRESS | MODIFY/DELETE | REPLY

    에드센스 옆으로 올리면서 구글 광고 하나를 다른 걸로 바꿨더랬죠.. 저야 뭐 수익이랑 관계없는 블로그지만, 다른 분들은 위치 고정으로 많이들 신경쓰이시겠어요.. 글 잘 읽었습니다.

    • semix2 2010.06.03 01:46 ADDRESS | MODIFY/DELETE

      어서오세요- 버드나무그늘님! 지난 번 알려주신 정보 정말 감사드립니다. ^^ 저 역시 수익이랑 관계가 없어서;; 이 참에 담배값이라도 좀 벌 수 있었으면 좋겠다 싶어서 광고에 관심을 갖기 시작했습니다.

      위치 문제는 심각하지요;; 본문을 비집고 들어오다니!! 글자가 낑겨서 헉헉거리는 모습을 보고 얼마나 안타까웠는지 모릅니다. 저뿐만 아니라 많은 분들께서 이 문제를 지적하시더라구요. 그리고 저와 다른 방법들도 많이 나오고 있습니다. ㅎㅎ

      어제 투표는 잘 하셨나요? 표가 8개나 되다 보니 뭔가 큰 일을 하고 온 것 같아 굉장히 뿌듯한 하루였답니다. 날씨 더운데 더위 조심하시고 즐거운 하루 되세요!!

  11. 나울었쪄 2010.06.03 01:17 ADDRESS | MODIFY/DELETE | REPLY

    semix2 님
    하나 여쭤봐도 될까요 ?
    카테고리바 안에 구글광고를 달았는데요
    카테고리는 정 중앙에 있는데 광고는 벽에 바짝 붙어 있네요..
    광고를 중앙으로 오게 어떻게 하나요?

    • semix2 2010.06.03 01:55 ADDRESS | MODIFY/DELETE

      음 혹시 카테고리 치환자 바로 아래에 구글 광고 코드를 삽입하셨나요? 카테고리를 둘러싼 DIV 태그 밑에 새로운 DIV 태그를 만들어서 구글 광고 코드를 감싸주어야 할 것 같습니다.

      <s_sidebar_element><div>...<div>카테고리치환자</div><div>구글 광고 코드</div></div></s_sidebar_element> 이런 모습이 되도록 고쳐 보시면 될 것 같아요.

      카테고리바 부분의 스킨 코드가 어떻게 되어있는지 알려주시면 답해 드리기가 좀 더 쉬울 것 같습니다. 일단 한 번 도전!! 해 보시고 잘 안되시면 또 댓글 남겨주세요. 성공하셔도 알려주시구요~ ^^

  12. 나울었쪄 2010.06.03 09:05 ADDRESS | MODIFY/DELETE | REPLY

    <!-- 카테고리 모듈 -->
    <div class="boxTopR"><div class="boxTop-left"></div><div class="boxTop-mid"></div><div class="boxTop-right"></div></div>
    <div class="boxMidR">
    <div id="category">
    <h3 class="stitle">카테고리</h3>

    </div>
    </div>
    <div class="boxBtmR"><div class="boxBtm-left"></div><div class="boxBtm-mid"></div><div class="boxBtm-right"></div></div>
    </s_sidebar_element>
    <s_sidebar_element>
    <!-- 공지사항 모듈 -->

    이거가 카테고리 코드인데요 샾샾 밑에다가 코드 붙여났어요 카테고리 밑에 샾샾이 있엇는데 ..글쓰니까 안보이는..카테고리 밑에 샾샾 샾샾 밑에 광고코드요 ㅠ

    • semix2 2010.06.03 13:29 ADDRESS | MODIFY/DELETE

      이렇게 한 번 해보세요. 샾샾 카테고리 바로 밑에 광고 코드를 삽입하지 말고 샾샾 바로 아래에 있는 </div> 아래에 <div>광고 코드</div> 이렇게 넣어보세요. 그래도 문제가 되면 <div style="text-align:center;">광고 코드</div> 이렇게 해 보세요. HTML 태그와 스타일시트에 대한 이해가 조금 필요해서 어렵게 느껴지겠지만, 이것 저것 건드려보고 검색도 해보고 하다보면 잘 될거라 생각합니다. ^^ 힘 내세욥!!! 아뵤오-

  13. 나울었쪄 2010.06.03 11:18 ADDRESS | MODIFY/DELETE | REPLY

    혼자 도배해서 죄송합니다
    블로거 초보라 너무 장벽이 많네요 ㅠㅠ
    어제 하루 방문자 첨으로 100명 넘었는데요
    느닷없이 관심이 글 공개 발행 이거 차이가 궁금해서 막 바꿔봤는데
    그 순간 방문자가 딱 끊긴거 같아요..
    그리고 또 창 맨 밑에 눈깔 모양 느면서 쿠기제한 이라고 나오던데
    그거 뜨면서도 방문자 끊긴거 같거든요
    이거 두개가 연관이 있나요?
    아니면 선거떄문에 그런지 ..ㅠㅠ

    • semix2 2010.06.03 13:38 ADDRESS | MODIFY/DELETE

      괜찮습니다. ^^ 저도 아는 범위 내에서 최대한 도와드릴게요. 일단 블로그와 선거는 전혀 관계가 없어요; 쿠키 제한은 익스플로러에서만 나타나는 것 같습니다. 제 블로그도 익스플로러로 보니 눈 마크가 생기네요. 제한된 사이트 어쩌고 하는 메시지가 보입니다.

      공개와 발행의 차이는, 우선 공개는 말 그대로 누구나 글을 볼 수 있게 한다는 겁니다. 비공개로 하시면 본인이 로그인 했을 때만 보여지구요. 발행은 쉽게 말해 자신의 글을 다른 사이트에 알리는 겁니다. 티스토리의 경우 티스토리 메타 블로그(http://tistory.com)와 다음 뷰(http://v.daum.net)로 글을 보낼 수 있어요. 일종의 광고입니다. ^^

      발행 하실 때에는 조금 신경 쓰셔야 합니다. 많은 사람들이 볼 수 있기 때문에 혹시나 개인 정보를 노출하지는 않았는지, 잘못된 정보를 소개하는 건 아닌지 꼼꼼히 살펴보세요.

      블로그 스킨, 메타 블로그 등에 대한 설명은 검색하시면 많이 볼 수 있습니다. 천천히 시간 내셔서 찾아보다 보면 금새 적응하실 수 있을거에요. 너무 조급해하지 마세요~

  14. 나울었쪄 2010.06.03 14:57 ADDRESS | MODIFY/DELETE | REPLY

    우와와 카테고리 성공 했어요
    <div style="text-align:center;">광고 코드</div>
    요걸로 하니깐 바로 되네요 semix2 님 정말 감사합니다 ^^
    상단 구글 하나 없애고 가르쳐주신대로 했더니 세로로 구글이 두개가 나오던데요 ㅎ;; 차근 차근 해봐야 할거 같아요 친절하게 알려주셔서 정말 감사합니다 짱짱!!!

    • semix2 2010.06.03 15:05 ADDRESS | MODIFY/DELETE

      오오- 축하드립니다! 이제 얼른 추천 버튼을 누르세요! ㅋㅋㅋㅋ 농담입니다. 나머지 하나도 잘 해결됐으면 좋겠어요. 고생하신만큼 많이 배우셨기를 바랍니다. 처음엔 어렵고 짜증나지만 시간이 지나면 원하는대로 스킨을 주무를 수 있을거에요! 언제나 화이팅입니다- 기분 좋은 하루 되세욥!!

  15. 나울었쪄 2010.06.03 22:21 ADDRESS | MODIFY/DELETE | REPLY

    (누를 추천은 다 눌럿어요 ㅋ)
    흑 ㅠㅠ 물어볼때가 친절하신 semix2님 밖에 없어서 ..
    마이센스 사용하시나요?
    몇시간 안에 몇번으로 제한해야 하나요..?
    만약 24시간 내에 4번 으로 제한하면 이게 한사람만 해당하는 건가요
    아님 모든 방문자들이 해당하는건가요..?
    모든 사람들이 24시간에 4번으로 제한하면 돈이 안벌리잔아여..??
    그리고 자기 아이피 반드시 입력하는건가요?
    마지막으로 ㅠ
    상단 구글광고하고 뷰에드 안되서 스킨에서 구글 완젼 삭제하구요
    걍 글마다 수정 누르고 구글 코드 하나씩만 넣었더니 되더라구요
    근데 글마다 일일이 다 그래야 하니깐 노가다가..ㅠ
    이래도 문제 없죠?

    • semix2 2010.06.03 22:32 ADDRESS | MODIFY/DELETE

      마이센스...?? 구글 애드센스와 다른 건가요? 음, 일단 애드센스는 한 사람이 줄기차게 클릭하면 꽝 납니다. 클릭 할 때 클릭한 사용자의 정보가 구글에 전송되나봐요. 그래서 두 번 이상 누르면 구글이 눈치 챕니다. ^^ 시간 제한은 모르겠어요. 전 거의 신경 안 쓰고 있답니다.

      모든 사람들이 24시간 내에 광고 한 번만 클릭해도 수억 벌지요;; 문제는 모든 사람이 클릭을 하는 게 아니라 아주 일부의 사람들이 한 번 클릭할까 말까 한다는 겁니다.

      글 마다 광고 직접 삽입하셔도 됩니다. 단지 그게 불편해서 스킨에 광고를 추가하는거니까요. ^^ 문제 없을 겁니다. 너무 걱정 마세요. ㅎㅎ

      추..추천 눌러주신 건 정말 감사합니다!! ㅋㄷ

  16. 나울었쪄 2010.06.03 22:52 ADDRESS | MODIFY/DELETE | REPLY

    마이센스 부정클릭 방지 시스템 사용 안하시는구나..
    설정중에 시간하고 번이 있는데 기준치를 몰라서 여쭤 봤었어요
    사용 안하시는 분도 많구나..(또갈등이..)
    본인이 실수 하는거 외에 악의적으로 부정클릭하는 사람들이 있대서
    해봤어요
    자꾸 도배 죄송해요 ㅠ

    • semix2 2010.06.04 01:11 ADDRESS | MODIFY/DELETE

      아, 그런 게 있었군요! 전 별로 신경을 안 쓰는 편이라;; 몰랐습니다. 좋은 거 하나 배웠네요. ^^

      도배 신경 쓰지 마세요. 전 댓글이 이렇게 풍성한 걸 좋아한답니다. 이 글에 사람들이 어떻게 반응했고, 이 글을 쓰는 동안 어떤 생각을 나누었는지 남잖아요. 전 정말 좋습니다. 유후-

  17. サクリファイス 2010.07.23 01:32 ADDRESS | MODIFY/DELETE | REPLY

    뭐...뭔가 잘 모르겠다는...

    • semix2 2010.07.29 08:32 ADDRESS | MODIFY/DELETE

      HTML과 자바스크립트에 대한 이해가 좀 필요합니다. 막연히 따라하기는 조금 어렵죠? (나름 쉽게 설명하려고 노력한 흔적이 여기저기 잘 찾아보면 있습니다... ㅠㅠ)

CATEGORIES