자유글 파이어폭스에서 Adblock Plus 를 이용하여 광고 차단하기

파이어폭스에서 유용한 부가기능인 Adblock Plus 와 Firebug 를 이용하여 불필요한 광고나 객체등을 차단하는 것을 해보겠습니다.
이미지들은 클릭하면 크게 볼 수 있습니다.

먼저 네이버 첫화면 입니다. 모든 광고가 보이고 있습니다. 엄청 잡다하고 복잡합니다.
여기에서 먼저 오른쪽 상품 광고가 보이는 부분을 차단해보겠습니다.
우선 파이어폭스의 오른쪽 아래에 보면 작은 벌레모양 아이콘이 보입니다. 그 아이콘을 클릭하여 Firebug 창을 활성화 합니다.




Firebug 창이 웹페이지 아래쪽에 보이는데 왼쪽의 벌레모양 옆에 마우스 모양 버튼을 누르고 웹페이지에서 마우스를 움직이면 마우스가 움직이는 부분의 객체가 푸른색 사각형으로 보입니다. 원하는 객체가 선택되었다면 마우스를 클릭하여 고정합니다. 그러면 아래쪽에 선택된 객체에 해당하는 HTML 코드를 볼 수 있습니다. 뿐만 아니라 적용되고 있는 CSS 도 함께 볼수 있습니다. 오른쪽 상품광고는 DIV 객체인데 ID 가 shopping 이군요.
Firebug 를 이용하면 그외에 상세한 정보와 디버깅을 할 수 있어서 웹피이지를 만들 때 아주 편리합니다.


HTML 코드 부분에 마우스를 가져가면 위쪽 웹페이지가 푸른색으로 변하면서 확인할 수도 있습니다.

이제 Adblock Plus 버튼 옆에 있는 작은 삼각형을 클릭하여 "설정" 을 선택합니다.
 


설정 화면이 나오면 "필터추가"를 클릭하고 www.naver.com#div(id=shopping) 라고 입력합니다. 이것은 www.naver.com 에 있는 div 객체중에서 id 가 shopping 인 객체를 필터링한다는 의미입니다. 만약 www.naver.com 을 빼고 #div(id=shopping) 만 한다면 방문하는 모든 웹페이지에서 id 가 shopping 인 div 객체를 필터링 하게 됩니다.

확인하고 네이버를 리로드 해보면....


오른쪽 광고가 사라졌습니다.

마찬가지로 상단에 있는 AD 캐스트와 플래시 광고 나오는 부분을 차단해보겠습니다.

상단의 Qook 광고 나오는 부분을 택했을때 [div class="content"] 에 광고가 위치해 있는 것을 알 수 있습니다. 하지만  Firebug 에서 보이는 태그를 잘 살펴보면 [div id="ad_top"] 이라는 div 객체안에 포함된 것임을 알 수 있습니다. [div id="ad_top"] 라는 부분의 태그에 마우스를 가져가면 위쪽 웹페이지에서 해당 부분이 푸른색으로 표시가 되어서 쉽게 알 수 있습니다.

이제 Adblock plus 에서 필터를 추가해 줍니다. www.naver.com#div(id=ad_top) 라고 했지만 www.naver.com#div(class=content) 라고 해도 됩니다.



광고부분이 사라졌습니다.


이런식으로 해서 제가 보는 네이버 화면은 이렇게 되었습니다. 광고뿐 아니라 잘 안쓰는 것들은 그냥 휑~   하지만 저는 아주 만족합니다.


조금 어렵고 번거롭다고 느끼셨을 지도 모르겠네요. 사실 더 간단하고 빠른 방법이 있습니다. 하지만 Firebug 를 잠깐 소개하고자 하는 생각도 있어서 이렇게 써봤습니다. Firebug 를 이용하는 것도 그렇게 어려운 것은 아닙니다. 또 만들어진 웹페이지의 코드를 보면서 좀 아이디어도 얻을 수 있구요~

담에는 좀더 간단하고 빠르게 차단하는 방법을 쓰겠습니다.