Claude Code로 SPA 크롤링하기

개요

• SPA는 보통 동적으로 로딩되는 사이트가 많기 때문에 크롤링이 힘듬.
• 그래서 Playwright MCP를 사용하여 사람이 보는 것처럼 읽어서 크롤링 하는 방법을 생각해냄.

클로드 설정

• playwright MCP 모든 권한, 파일 생성/수정/삭제, 폴더 생성/수정/삭제 등을 미리 허용
• playwright MCP는 실제로 창을 띄우지 않고 헤드리스모드로 돌아가도록 설정
• 가져온 데이터는 markdown으로 저장하도록 설정(메뉴 구조에 맞게 폴더와 파일을 생성하고 서로 링크를 걸도록 설정)
• 크롤링 전문 서브 에이전트를 생성 (수집 - 비교 검증 - 수정 - 재수집 - 완료 과정을 반복 하도록 설정)

기본 동작 과정

1. 수집해올 범위 지정 (자동 or 수동)
2. 한페이지씩 수집
3. 수집한 내용 마크다운 작성
4. 마크다운과 원본 사이트 비교 검증 -> 이상 있을 시 2부터 다시 시작
5. 내용에 문제 없으면 다음 페이지 진행
6. 전체 내용 크롤링 완료 후 관련 내용 서로 링크로 연결

토큰 절약

• playwright MCP는 스크린샷만 찍어서 저장
• opencv로 이미지 전처리(OCR을 위해)
• tesseract로 OCR 처리하여 텍스트 추출
• 추출한 텍스트를 마크다운으로 작성
• 이후 기본 동작과 같게

사용 후기

• 위 설정으로 성공적으로 네이버 검색광고 api 사이트를 크롤링해서 프로젝트 내부에서 참고용 파일로 사용하고 있다.
• 아무리 잘 설정해도 누락되는 내용이 있어, 전체 과정을 2~3번 정도 반복하였음.