벨로그(Velog) 광고, 이제 안녕! 클린 벨로그 크롬 확장 프로그램 출시

벨로그(Velog) 최신 피드에 넘쳐나는 스팸 광고(Spam Ads)를 차단하기 위해 개발된 크롬 확장 프로그램

스팸 필터링(Spam Filtering), 검색 정렬, 북마크, 미리보기 기능 제공하며, 사용자 경험(User Experience) 개선에 초점

키워드, 정규식, 반복도 분석을 활용한 3단계 필터링으로 변형 스팸까지 감지하며, 제로 폭 공백(Zero-Width Space) 회피 기법 무력화

Velog GraphQL API를 활용하여 검색 기능 강화, 캐싱(Caching) 기술로 빠른 정렬 전환 지원

스팸 필터링(Spam Filtering) 기술 상세

본 확장 프로그램은 3단계 스팸 필터링(Spam Filtering)을 통해 다양한 형태의 스팸 게시글을 차단한다.

키워드 기반 필터링: 출장, 도박 등 차단 키워드(Block Keywords)를 정의하여 매칭

정규식 패턴 매칭: 키워드 변형을 위한 정규 표현식(Regular Expression) 패턴 적용

반복도 분석: 동일 내용의 반복 게시글을 감지하여 스팸성(Spammy) 판단

특히, 제로 폭 공백(Zero-Width Space)을 활용한 스팸 회피 기법에 대응하기 위해, 유니코드(Unicode) 기반의 정규식 패턴을 사용한다.

Velog GraphQL API 활용

확장 프로그램은 벨로그(Velog)의 GraphQL API(GraphQL API)를 활용하여 검색 기능과 북마크 기능을 구현한다.

검색 기능: GraphQL 쿼리(GraphQL Query)를 통해 화면에 보이지 않는 과거 게시물까지 심층 탐색(Deep Fetch) 가능

북마크 기능: 포스트 ID(Post ID)를 기반으로 북마크를 저장하고, 팝업에서 목록 확인

API 활용의 장점: REST API(REST API) 대비 유연한 데이터 요청 및 최적화된 응답(Optimized Response)

GraphQL API를 통해 데이터 로딩 속도(Data Loading Speed) 개선 및 불필요한 데이터 전송 감소를 기대할 수 있다.

크롬 확장 프로그램(Chrome Extension) 아키텍처

본 확장 프로그램은 Chrome Extension Manifest V3(Manifest V3)를 기반으로 하며, Vanilla JS(Vanilla JS)로 개발되었다.

Manifest V3: 보안 강화(Security Enhancement) 및 성능 개선(Performance Improvement)

Vanilla JS: 빌드 도구 없이 동작하여 개발 편의성(Development Convenience) 증대

chrome.storage API: 사용자 설정(User Settings) 및 북마크 데이터(Bookmark Data) 저장

확장 프로그램은 백그라운드 스크립트(Background Script), 콘텐츠 스크립트(Content Script), 팝업 페이지(Popup Page)로 구성되어 있으며, 각 스크립트는 API 호출(API Calls) 및 DOM 조작(DOM Manipulation)을 수행한다.