- 이 블로그는 광고 차단 기능이 감지되지 않을 때, 방문자에게 uBlock Origin 같은 신뢰할 수 있는 광고 차단기를 설치하도록 권장함
- 이 권장 메시지는 사용자 경험을 방해하지 않도록 설계되었고, 한 번 닫으면 다시 나타나지 않음
- 구현 방식은 nativeads.js 스크립트와 광고 관련 클래스명이 잔뜩 붙은 <div>를 활용해, 광고 차단기가 요소나 네트워크 요청을 막으면 메시지가 표시되지 않도록 설계됨
- 메시지는 한 번 닫으면 쿠키로 기억, CSS로 화면 한쪽에만 작게 뜨며 콘텐츠를 가리지 않고, JavaScript 비활성 브라우저에는 표시되지 않음
- DNS 차단은 탐지할 방법이 없어, 작성자는 대신 비침해적·간단히 닫을 수 있는 안내창으로 구현했다고 밝힘
광고 차단 권장 메시지의 필요성
- 인터넷 광고는 사용자의 시간을 낭비시키고, 광고 산업은 인터넷 환경 전반에 부정적 영향을 미침
- 사이트 수익이 매우 낮아지므로, 많은 웹사이트가 광고로 도배된 저품질 페이지로 전락함
- 창작자를 돕고 싶다면 광고 시청이 아닌 직접 후원(1달러라도 효과적) 이 훨씬 효과적임
광고 차단 권장 메시지의 설계 목적
- 대부분의 사용자가 광고를 인터넷 경험의 일부로 인식함에 따라, 저자는 사이트에 직접 메시지를 표시함
- "No adblocker detected. Consider using an extension like uBlock Origin to save time and bandwidth. Click here to close."라는 메시지가 페이지 우측 하단에 소규모로 노출됨
- 콘텐츠를 가리지 않으며, 메시지를 닫으면 더는 표시되지 않음
- 창이 작은 경우 메시지가 표시되지 않음
- 특정 확장 프로그램(uBlock Origin)만을 언급하는 이유는, 사용자가 광고에서 광고 차단기를 접하는 일이 많고, 상업적 광고 차단기의 위험성 및 사기성 때문임
- 광고로 홍보되는 광고 차단기는 결국 사용자를 통해 수익을 창출함
구현 방법 및 기술적 사항
-
HTML에 광고 차단 메시지를 위한 div 영역이 존재하며, 다양한 광고 관련 클래스명 포함
- 메시지 추가는 /nativeads.js라는 자바스크립트 파일이 담당함
- 쿠키 기반으로 메시지의 1회성 노출을 보장함
- "Click here to close." 클릭 시 div 숨김 및 쿠키 갱신 처리
-
CSS를 통해 메시지의 시각적 위치와 스타일링을 지정함
- 충분한 화면 공간이 있을 때만 우측 하단에 고정 노출
- 광고 차단기가 해당 div 요소나 nativeads.js 파일을 차단(삭제 혹은 요청 차단) 할 경우 메시지 자체가 출력되지 않음
- 다양한 광고 관련 클래스명 통해 대다수 광고 차단기가 div를 제거하도록 유도
- 특히 네트워크 차단 위주(adblock lite 등) 의 확장 프로그램도 script network 요청 차단 시 메시지가 사라짐
-
DNS 기반 광고 차단까지는 탐지할 수 없는 한계가 있음
- 자바스크립트를 지원하지 않는 브라우저에서는 애드블로커가 필요 없으므로 메시지도 표시하지 않음
- CSS 미적용 상태에서도 메시지는 기능상 동작함(비스타일 노출)