브라우저 확장 프로그램을 활용하면 웹 페이지에서 보고 싶지 않은 부분을 직접 제거할 수 있습니다. 방해 요소와 불필요한 콘텐츠를 걷어내면 인터넷에서 정보를 소비할 때 집중력과 생산성을 유지하는 데 큰 도움이 됩니다.
이런 기능을 제공하는 확장 프로그램은 여러 가지가 있지만, 이 글에서는 많은 사용자가 이미 설치하고 있는 uBlock Origin을 중심으로 설명합니다. 아직 설치하지 않았다면 강력히 추천합니다.
uBlock Origin이란?
uBlock Origin은 모든 주요 브라우저에서 사용할 수 있는 무료 오픈소스 광고 차단기입니다. 또한 커스텀 요소를 제거할 수 있는 '요소 선택기(element picker)' 도구를 내장하고 있으며, 이 글에서 바로 이 기능을 활용합니다.
CSS 선택자나 XPath에 대한 지식이 있으면 따라가기 수월하지만 필수 사항은 아닙니다. uBlock Origin은 기술 지식 없이도 시각적으로 요소를 선택할 수 있는 도구를 제공합니다. 다만 선택자를 직접 작성하는 편이 일반적으로 더 안정적입니다.
요소 차단이 유용한 이유
인터넷에서 우리는 끊임없이 정보를 소비하지만, 그중 상당 부분은 사실 우리와 관련 없는 내용입니다.
자주 방문하는 웹사이트가 있다면, 애초에 필요 없다는 것을 알고 있는 정보를 걸러내어 소비하지 않는 것만으로도 생산성이 크게 향상될 수 있습니다.
- 활동 피드나 소셜 미디어 피드에서 특정 유형의 이벤트 제거
- 원치 않는 행동을 요구하는 팝업 제거
- YouTube나 소셜 미디어에서 특정 작성자의 게시물 제거
- 주의를 빼앗는 방해 요소나 동적 요소 제거
HTML 요소 필터링 방법
요소를 필터링하려면 브라우저 툴바의 uBlock Origin 아이콘을 클릭한 후, 스포이드 모양의 '요소 선택기' 버튼을 누릅니다.
먼저 제거하고 싶은 콘텐츠를 선택합니다. 선택이 완벽하지 않아도 괜찮습니다. 어디까지나 시작점일 뿐입니다.
화면 우측 하단에 패널이 나타나면 "Pick" 버튼과 슬라이더를 활용한 시각적 도구를 사용하거나, 선택자(selector)를 직접 지정할 수 있습니다.
빨간색으로 강조된 콘텐츠가 "Create" 버튼을 눌렀을 때 제거되는 대상입니다. 이렇게 적용한 변경 사항은 페이지를 새로 고침하거나 나중에 다시 방문해도 유지됩니다.
CSS 선택자
CSS 선택자만으로도 대부분의 요소를 손쉽게 제거할 수 있습니다. 페이지의 정적 콘텐츠를 제거할 때 특히 유용합니다.
##div.news div.release, div.news div.push)
##.p-client__banners)XPath
XPath는 보통 다음 두 가지 경우에 사용합니다.
- 요소의 값을 조건으로 확인해야 할 때
- 자식 요소의 속성을 기준으로 요소를 선택해야 할 때
이는 동적 콘텐츠나 사용자 생성 콘텐츠를 제거할 때 유용합니다. 요소 자체가 아니라 그 안의 내용이 조건과 일치할 때만 전체 요소를 제거하고 싶은 경우에 해당합니다.
##:xpath(//a[./div/div/p/object/a = "DevilBro"]))
필터 문제 해결
웹사이트는 유지보수나 업데이트 등 다양한 이유로 언제든 구조가 변경되므로, 작성한 선택자도 언제든 깨질 수 있습니다.
하지만 이 때문에 원하는 작업을 포기할 필요는 없습니다. 요소를 제거할 때 이 점만 염두에 두면 됩니다.
선택자는 실제로 제거하려는 대상에 한정되도록 작성하되, 페이지의 다른 요소를 잘못 선택하지 않을 만큼 충분히 엄격하게 유지하는 것이 좋습니다.
또한 클라이언트 측 수정을 달가워하지 않는 웹사이트도 있습니다. 이런 사이트들은 HTML 속성 값을 임의로 변경하거나 난독화하여 수정을 방해하려 합니다.
이런 경우에는 CSS 속성 선택자를 지정하거나, XPath로 속성 값을 부분 매칭하는 것이 효과적입니다.
##div[class^="nowPlayingColumn"])필터 삭제 방법
더 이상 차단하고 싶지 않거나 웹사이트 구조가 바뀐 경우, 설정에서 기존 필터를 삭제한 후 새 필터를 만들면 됩니다.
커스텀 필터를 삭제하는 순서는 다음과 같습니다.
- uBlock Origin 설정으로 이동합니다.
- "My filters" 탭을 선택합니다.
- 삭제하려는 필터가 담긴 줄을 지웁니다.
- 상단의 "Apply changes"를 클릭합니다.
- 해당 페이지를 새로 고침합니다.
그 외 유용한 브라우저 확장 프로그램
웹사이트에서 특정 유형의 콘텐츠를 제거하는 데 활용할 수 있는 확장 프로그램은 이 외에도 있습니다.
Highlight or Hide Search Engine Results
HOHSER(Highlight or Hide Search Engine Results)는 DuckDuckGo와 Google을 포함한 모든 주요 검색 엔진을 지원합니다.
도메인 블랙리스트 기능은 검색 엔진의 기본 사용자 설정으로 제공되어야 한다고 생각하지만, 그날이 오기 전까지는 이 확장 프로그램으로 마음에 들지 않는 도메인의 검색 결과를 숨길 수 있습니다.
- 재업로드되었거나 의심스러운 다운로드 링크를 제공하는 웹사이트
- 가짜 쿠폰 사이트 같은 검색엔진 최적화(SEO) 스팸
- EU 사용자를 차단하는 웹사이트
I don't care about cookies
I don't care about cookies는 대부분의 웹사이트에서 쿠키 경고가 뜨지 않도록 처리해 주는 확장 프로그램입니다.
쿠키 메시지를 숨기려 시도하며, 꼭 필요한 경우에만 쿠키를 수락합니다.
바람직하지 않은 쿠키가 저장되는 것을 막으려면 uBlock Origin이나 Privacy Badger 같은 확장 프로그램과 함께 사용하는 것이 좋습니다.
또는 이 확장 프로그램의 필터 목록을 uBlock Origin에 추가할 수도 있습니다. 다만 이 경우 쿠키 메시지 필터와 광고 차단 필터가 하나로 묶이게 되며, uBlock Origin을 비활성화한 웹사이트에서는 계속 쿠키 메시지가 표시됩니다.
커스텀 필터 목록을 uBlock Origin에 추가하는 방법:
- uBlock Origin 설정으로 이동합니다.
- "Filter lists" 탭을 선택합니다.
- 하단의 "Custom" 섹션으로 스크롤합니다.
- "Import..."를 선택합니다.
https://www.i-dont-care-about-cookies.eu/abp/를 입력합니다.- 페이지 상단의 "Apply changes"를 클릭합니다.
마무리
여러분이 열어 보는 페이지에서 상당량의 콘텐츠를 차단해야 하는 상황에 놓이지 않았으면 좋겠습니다.
하지만 그런 필요성을 느낀다면, 이 글이 인터넷 서핑을 조금이라도 더 견딜 만하게 만드는 데 도움이 되기를 바랍니다.