[심술] 티스토리 모바에 멋대로 붙는 광고/실시간이슈 꼴배기 싫다.

제 블로그는 방문자가 엄청나게 많은것도 아니었고, 공부하고 일하면서 프로그램관련 자료들의
기록하고, 쓸만한게 만들어지면 올려서 공유하고 하는게 주 목적이었습니다.

그런고로 별로 광고는 없었지요.
별로 라고 이야기한건, 얼마전까지는 페이팔 후원링크를 걸어두기도 했었고
맨 윗글에만 하나 표시된다고 하는 티스토리에서 제공하는 애드어쩌고 하는 배너도 하나 걸어뒀기 때문입니다.

 그러다가 그냥 너도나도 광고광고 하길래 한번 붙여볼까... 해서 찾아봤는데 
아무래도 pc의 웹상에서 큼직큼직한 광고들이 붙어있는건 좀 꼴배기싫어보이고 해서,

원래 붙여뒀던 배너는 없에버리고, 애드센스(www.google.com/adsense)의 줄광고 하나를 붙였습니다.
아래 쪽에 지난포스팅 목록 밑에 쥐꼬리 만하게 붙어있죵 ? :D

...하다가 자주 오셨던분은 보셨을지 모르겠는데 가끔 제가 지하철이나 그런데서 아이폰으로 포스팅을 한적이 있습니다. 

본 포스팅 내용으로 인해 발생하는 어떠한 문제에 대해서도 제가 책임지지 않습니다.

티스토리 측에서 문제 제기시에 본 포스팅은 삭제하겠으나,  
모바일웹에 포함되어 있는 '사전에 안내받은바 없는' 광고에 대해 광고 노출여부를 '설정할 수 없는 이유와'
해당 광고에 대해서 어떠한 약관이 적용되며 , 다음측이 '아담' 광고로 노출수와 클릭률, 클릭 ip등에 대한 정보를 수집하고 있는 근거는 무엇인지,
어떤식으로 동의 받아서 수집하고 있는지, 혹은 수집하지 않는다고 하면 
해당 광고는 무료 서비스 하고 있는 '공익'성의 광고로 다음측이 어떠한 수익도 취하지 않는지... 확실히 설명한 뒤에 문제 제기해주시기 바랍니다.

현재 포스팅은 제가 오늘 17시~ 20시 까지(중간에 저녁먹고 후배와 커피마신시간 포함) 작업하며 작성한 실시간 포스팅이라 글이 어수선 하고 정리가 되어있지 않습니다.
주말중에 시간나면 정리해서 다시 올려드리겠습니다.

다 읽으실것 없이 포스팅 마지막 부분만 보셔도 됩니다. ^^ 

 아무튼 그러다가 뭔가 이상한 광고가 눈에 띕니다 ?
오~ 자동으로 붙어서 나한테 돈주려나~ 하고 좀 찾아보니 그건 아닌듯....

내 블로그에 있는 남에 광고라니... 그럼 이돈은 누가 벌지 ??? 
뭔가 갑자기 짜증이 확~!!!

어차피 다 붙어있는거면 때버리고 내걸로 붙여야 겠어요. 

멋대로 나오는 광고 제거하기

 
중간에 보이는 "매직키친 매이크업"  다음 adam 광고

근데 요놈 설정에서 뺄수도 없네요. 
우선 도전해봅시다.

 본 포스팅은 실시간으로 진행됩니다.  (11월 25일 15시 40분 부터~ )
만약 성공한다면, 모바일에서 현재 포스팅을 보실때에는 아래쪽 광고가 없어야 합니다.  
제대로 된다면 따라하기 쉽게 다시 정리해서 올려드리고, 실패하면 그냥 실패인겝니다.  _ _

( 본문 중간중간의 광고는 제가 넣은거니 없어지지 않습니다 ^____^ ;;;;   )

 
우선 광고 부터 해보아요,  뒤져봤습니다. 광고가 나오는곳의 
div id는  "daumAd" 입니다.


... 5분뒤 계속.
 

두가지 정도 가능해보입니다.
 
1. 자바스크립트로 해당 div 속성 변경
2. 스타일 시트 중첩으로 속성 변경

우선 간단해보이는 2번 부터.

### html
<style>
    #daumAD{ display:none; }
</style> 

오 짧다.  하지만 실패. 
다시 해봅니다... !important 붙여봤지만 여전히 실패~ 하지만 괜찮아요! 

### html
<style>
    #daumAD{ height:500px; display:none !important;}
</style> 

바뀌기는 바뀌는건지 좀 봐야겠습니다. height:500px 을 추가해봅니다.
차이가 없네요, 넓이를 줄여볼까요 ? width:30px; 도 추가해봤습니다.
하지만 반응이 없습니다!!! 어찌된일일까!!!!!

....

오타가 있었습니다. ;;  눈치 빠른분은 보셨는지 모르겠지만 #daumAD 라고 쳤네요 ;;;

위에건 다 잊어버리세요~~ 정리합니다.

티스토리 모바일에서 다음 광고 숨기기
 
<style>#daumAd{display:none !important;}</style> 
 

위 한줄로 끝입니다.

기왕 하는김에 아래있는 실시간 이슈도 없애버릴까요? 좋아서 붙인건 아니니까 필요할때 다시 꺼내고 우선 없애봅시다.

멋대로 나오는 실시간 이슈 제거하기

저놈의 div id는 "searchRankArea" 입니다. 
이번에는 세가지 정도 가능해보입니다.

1. 광고와 마찬가지로 스타일시트 속성변경하여 감추기
2. 자바스크립트 사용하여 스타일 변경
3. 자바스크립트 사용하여 닫힌채로 나오게 하기

3번은 무슨소린고 하니, 모바일에서 접속해보면 이게 무조건 펼쳐진채로 시작합니다.
하지만 "닫기" 버튼이 제공되고 있습니다. 닫아놓고 보면 썩 눈에 거슬릴정도는
공짜로 마음껏 쓸수있는 공간을 제공받았으니 이정도는 그냥 둬볼까... 싶기도 하기때문에 "닫힌"상태로 보이게 하면 어떨까 하고 생각해봤습니다.

우선 1번 부터 고~
광고랑 마찬가지로, 

### html
<style>
    #searchRankArea{
             display:none !important;
     }
</style>

요렇게 시작해봅니다.

Clear. 그럼 닫힌채로 나오는건 어떻게 해야할려나요... 우선 뒤져보아요~

... 열고닫는 부분을 찾긴 찾았는데, 아래쪽에 쳐박혀 있어서 손을 좀 봐야할것 같습니다. 그런고로 우선은 그냥 안나오게 하는걸로 두겠습니다.



아래쪽 광고 + 실시간 이슈 없애기 최종.

### html
<style>
       #daumAd{display:none !important;}
       #searchRankArea{display:none !important;}
</style> 

저자리가 명당이라 저리 했다면 바꿔버립시다. 같은 자리에 구글 애드센스 모바일 광고 넣기

어째선지... 아래로 들어가지지 않네요 ;; 

구글링대로 해보아도 어째서인지
요지부동. 이건 좀더 찾아봐야 할것 같습니다.



----   밥 먹고 왔습니다 다시 이어갑니다 ------

다른분들은 아래 다른분 블로그의 방법으로 잘 되는것 같은데 왜 전 안될까요 ;;
제 블로그 제목 그대로 "나만 모르나봅니다" ㅠㅠ

어쨌든 긴~~~ 글이었지만 여기까지 읽으셨으면 아마 
실시간 이슈와 아담 광고를 제거하는것 까지는  OK. 입니다.

지금 또 헤매고 있는건 아담 자리에 구글 광고를 넣는거고, 혹시나 이 긴글을 보고 계신분이 계시면
같은걸 하고 싶으실 거라고 생각하고, 일은 안하고 계속 해볼렵니다... -_-;;;

우선 40여분 삽질 한 결과물 부터 봅시당~

사진 보시면, 중간쯤에 있는게 제 구글모바일 광고이고, 아래 쪽의 우유 광고는 멋대로 붙어있는 티스토리 광고입니다.  
원하는것은, 중간의 구글 광고가 아래 우유광고 자리로 들어가는 거였지요~? 

대충 이런 모양새로 아래로 가고, 이제 다시 원래 광고(티스토리 멋대로 붙여놓은 아담 광고)를 안보이게 해야합니다. 
지금 현재시간(21:00)에 이 글을 모바일에서 보시면 위 스크린샷대로 나오고 있습니다.

조금더 손봐야겠습니다.  


# 우선 위 모양대로 만드는데 자바 스크립트의 힘을 빌려야했습니다.

지금 까지 돌아가는 모양새를 요약해보면...

블로그 접속 -> 모바일 페이지 이동 ->  
   html위에서 파싱(컨텐츠로딩 후에 메뉴-아담-이슈-메뉴-바닥글 순으로) 

요렇게 되겠죠 ? 모바일 페이지중 저희가 접근할수 있는 부분은 "컨텐츠" 뿐입니다.
아담 광고와 실시간이슈를 제거할때에 '스타일시트 중첩' 하기 위해 컨텐츠 중간에 <style>을 !important 하게 미리 재정의 해두었습니다. '미리' 라는건 아직 ('daumAd'라는 div가 생성되기 전) 입니다.

그리고 이제 다시 기존 '아담'의 자리에 자기 광고를 넣으려고 해봤으나, 컨텐츠 영역뿐이 건드리 못하는 상태로는 'daumAd'라는 div에 뭔가를 넣을수가 없습니다.  
(다시 한번, 저희가 작성하는 컨텐츠가 로딩되는 시점에 daumAd라는 div는 읽혀지기 전입니다.  
광고를 없애는게 목적이니까는, html, 자바스크립트 등의 이야기는 자세히 다루지 않겠습니다.)

아무튼 그런저런 이유로 스타일 시트 중첩에서 자바스크립트로 방향을 변경했습니다.

이제 해야할 순서를 다시 정리해보면 ,

적당한 자리에 구글 광고영역 생성(div / id는 gAd로 하겠습니다)
폼 로딩 완료될때까지 기다렸다가 자바스크립트 호출 

- 자바스크립트
   :  기존 아담 광고("daumAd"라는 div)를 만들어둔 구글광고("gAd"로 만든 div)로 변경

우선 구글 광고를 id가 있는 div로 감싸서 넣어야합니다.
대충 이런 모양일까요 ?

### html
<div id="gAd">
    샬라샬라 구글에서 준 코드
</div> 

아, 그전에 없애뒀던 아담 광고는 다시 나오게 해두었습니다.
<style> 에서 #daumAd ... { ... } 부분은 삭제!

그럼 이제 자바스크립트를 폼이 로딩될때까지 기다렸다 실행하면 OK!!!
기다렸다가 실행하는건 위에말한대로, "daumAd"라는 div가 생성될때까지 기다리기 위해서입니다.

### html
<script>
    window.onload = function(){ ... }
</script> 

요런 모양새입니다.
애초에 티스토리 모바일 웹이 jquery로 로딩후에 뭔가 하는것 같아서 좀 불안하지만 
별로 문제는 생기지 않았습니다. 적어도 지금상황에서는 그렇습니다( ?? ) 

위 자바스크립트가 해야할일은 gAd를 daumAd의 자리에 쑤셔넣는것뿐입니다.

### html
<script>
   window.onload = function(){
        var dAdBox = document.getElementById("daumAd");
        var gAdBox = document.getElementById("gAd");
       
        dAdBox.appendChild(gAdBox);
</script> 

위 코드를 넣으면 아래 사진처럼 구글광고가 아담 광고 아래로 위치하게 됩니다.

그럼 이제 구글 광고를 위로 올리고, 다음 광고를 없애면 클리어~!


--- 이어서 

방법이 또 몇가지 있을것 같습니다. 잠깐 해보느라 또 쉬었네요 ^^; 
현재 시간... (21:50) .... 이 포스팅 언제 끝이 날런지... -_-;;

생각 했던 방법은 위에서 했던데로, daumAd안에 구글광고를 낑겨넣고, 
구글광고(gAd)의 position을 relative로 변경해서 위로 땡기고 z-index변경해서 다음 광고 위에 덮어버릴려는 계획이었습니다.

좀 더 쉽게 이야기하면 그냥 구글광고로 다음 광고 위에 올려서 덮어놓으려 했다. 입니다.

 이 방법대로 방금 한번 해봤는데 제대로 가려지긴합니다. 하지만 
아래에 다음 광고가 그대로 있다는게 영 신경쓰이네요 ~~~~ 이런거 싫어요~~ 그쵸그쵸 ?
신경쓰이잖아요. ~

그런고로 다시.... 

페이지 로딩 끝난후에 <body> 를 통채로 가지고 와서
body 에 gAd(구글광고) div를 추가합니다.
아마도 body의 가장 아래에, 그리고 컨텐츠영역 바깥에 추가될거라고 생각해요.

그리고 gAd와 daumAd의 위치를 바꿉니다. 

위에서 다시 보이게 해두었는데 그러면 자리 바꾸고 어차피 다시 없애야하니까,
다시 <style> 부분에서 daumAd를 가려두겠습니다. 

위에 말한대로 한뒤에 모바일의 표시는 이렇게 됩니다.

위 모양대로 변경하는 마무리 정리된 코드는  아래입니다.
구글광고가 아래쪽의 로그인 메뉴와 너무 붙으니까 안이뻐서
gAd 영역에 하단 마진을 약간 넣었습니다.

### html
<!-- Google 광고 넣기  -->
<div id="gAd" style="margin-bottom:3px;">
      애드센스 코드를 넣으세요.
</div>


<!-- 스타일 시트 중첩으로 실시간 이슈 / 다음광고 제거 -->
<style>
   #daumAd{ display:none !important; }
   #searchRankArea{ display:none !important; }
</style>


<!-- 구글 광고와 다음광고 자리 변경 -->

<script>
window.onload = function(){
   var dAdBox = document.getElementById("daumAd");
   var gAdBox = document.getElementById("gAd");
   var wrap = document.getElementById("daumWrap");
   
   wrap.appendChild(gAdBox);
   wrap.insertBefore(gAdBox, dAdBox);
}
</script>

위 코드로 끝~ 최종 결과는 아래 사진입니다.

처음에 원했던 모양이네요. 좋아요 이제 만족합니다.

실시간 이슈를 닫힘 상태로 나오게 하는건 내일 다시 해야겠습니다.
일은 하나도 안하고 이거만 하고 있었네요 ;;


**** pc 용 레이아웃이 깨집니다. 긴급 추가... 모바일 체크해서 모바일에서만 해야겠습니다... -_-;;; 
다른 곳때문이었네요... ;;;



---- 추가합니다 -----
 기왕 뒤집은 김에 변경했습니다. 티스토리에서 알아서 모바일기기 체크해서 모바일 웹으로 넘겨주니, 중복 체크할 필요는 없을것 같고,  모바일 페이지가 http://아이디.티스토리.컴/m/... 이렇게 m이 붙어있습니다.
그래서 그냥 현재 URL에 /m/이 있으면 모바일, 없으면 pc입니다.

pc일땐 구글모바일광고가 나오지도 않고, 다음 아담도 애초에 나오지 않습니다. 그러니 의미없는 div 변경할필요가 없습니다. 위 소스중에 자바스크립트 부분만 아래로 변경합니다.

### js
<script>
   window.onload = function(){
      var dAdBox = document.getElementById("daumAd");
      var gAdBox = document.getElementById("gAd");
      var wrap = document.getElementById("daumWrap");

      var s = location.href;
      var urlCheck = new RegExp("/m/");

      if(!s.match(urlCheck)){
         gAdBox.style.display="none";
         return;
      } else {
         wrap.appendChild(gAdBox);
         wrap.insertBefore(gAdBox, dAdBox);
      }
}
</script> 

다시 한번 말씀드립니다. 문제 생길시 책임지지 않습니다.



티스토리도 다음도... 이러지 맙시다.
광고로 수익을 창출하겠다는건 반대하지 않아요,
설치도 안해도 되고, 서버 관리도 필요없고 용량도 걱정없이 마음껏 쓸수있는 좋은 공간을
제공해주는 티스토리에 감사하고 , 이런 광고 정도에 불만가질 이유는 없습니다.
하지만 가장 위에 적은것처럼, 
최소한, 언제부터, 어떤 이유로, 또 어떤 방식으로 광고를 포함하겠다는지 동의를 구하고 진행했어야 맞지 않을까요...

참고 자료
  ajaxpatterns.org - On-Demand Javascript