쿠키 배너 자동 처리 방법 (Puppeteer 활용)
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 웹 스크린샷 자동화에 관심 있는 개발자
- Puppeteer를 사용하는 자동화 프로젝트 담당자
- 난이도: 중급 (Puppeteer 기본 지식 필요)
핵심 요약
@cliqz/adblocker-puppeteer패키지 사용으로 쿠키 배너 자동 차단 가능- AutoConsent 라이브러리와 결합하여 복잡한 동의 대화상자 처리 가능
- 커스텀 CSS 선택자 + 버튼 텍스트 조합으로 최대한 많은 배너 유형 대응
섹션별 세부 요약
1. 패키지 설치 및 기본 설정
npm install puppeteer설치 필수@cliqz/adblocker-puppeteer와@duckduckgo/autoconsent의존성 추가PuppeteerBlocker클래스를 통해 필터 리스트 적용 가능
2. adblocker 기반 배너 처리
PuppeteerBlocker.fromLists()메서드로 공유 필터 리스트 불러오기enableBlockingInPage(page)호출로 페이지 내 모든 배너 차단fetchAPI를 통해 최신 필터 리스트 동기화
3. AutoConsent 추가 적용
page.evaluateOnNewDocument()로 AutoConsent 스크립트 주입autoconsent.script를 통해 동의 대화상자 자동 클릭 처리- 복잡한 UI 요소(예: 모달, 팝업)에 대한 처리 강화
4. 커스텀 핸들러 구현
- CSS 선택자 목록(
.cookie-banner,#gdpr등)을 통해 다양한 배너 타입 탐지 - 버튼 텍스트 배열(
"Accept All","Got it"등)로 클릭 대상 자동 식별 page.evaluate()로 직접 DOM 조작하여 배너 숨기기
5. 최적화 팁 및 고려사항
page.waitForLoadState('networkidle')호출로 페이지 완전 로드 대기- 다중 전략 병행(필터 리스트 + AutoConsent + 커스텀 핸들러) 권장
- 테스트 대상 웹사이트별로 선택자 및 버튼 텍스트 매핑 필요
- 에러 핸들링을 반드시 포함하여 자동화 중단 방지
6. 대체 솔루션 추천
- CaptureKit Screenshot API 사용 시:
curl "https://api.capturekit.com/v1/screenshot"명령어로 바로 사용 가능- 내장된 쿠키 배너 처리 기능 제공
- 브라우저 인스턴스 관리 필요 없음
결론
PuppeteerBlocker+AutoConsent조합이 가장 효과적- 커스텀 핸들러는 특수한 배너 유형 대응에 유리
- CaptureKit API를 사용하면 브라우저 자동화 복잡성 제거 가능
- 모든 접근법에서 테스트 및 선택자 정기 업데이트 필수