만약 Claude를 사용해서 웹 스크래퍼를 만들고 있다면, Playwright 코드를 또 800줄 쓰게 하기 전에 이 컨텍스트를 먼저 넣어주세요.
놀라실 겁니다... 페이지가 실제로 렌더링되는 것을 건드리지 않고도 얼마나 많은 데이터를 추출할 수 있는지에 대해서요.
탐색해 볼 만한 몇 가지 방법:
네트워크 요청 (network requests)
devtools → network → fetch/XHR를 사용하세요.
검색을 실행하거나, 필터를 변경하거나, 페이지를 넘겨보세요. 응답(responses)들을 검사해 보세요. 종종 스크래핑하려는 기록들이 이미 구조화된 JSON 형태로 도착하고 있습니다.- HAR 파일을 내보내서 Claude에 제공하세요.
하이드레이션 페이로드 (hydration payloads)
- 초기 HTML에서
__NEXT_DATA__, Nuxt 페이로드 또는 React Server Component 데이터를 검사해 보세요.
일부 프레임워크는 페이지 데이터를 문서 내부에 직접 임베드합니다. 브라우저 자동화(browser automation)를 시도하기 전에 Claude가 이것을 먼저 검사하게 하세요.
JS 번들 (JS bundles)
- 흥미로운 요청을 찾아 →
initiator를 확인하고 → 관련 스크립트를 보기 좋게 출력하세요.
Claude에게 프론트엔드가 어떻게 검색을 구성하고, 페이지네이션을 처리하며, 응답을 변환하는지 추적하게 하세요.
소스 맵 (source maps)
- 공개적으로 노출된
.js.map 파일에 포함된 sourcesContent는 원본 프론트엔드 소스의 읽기 가능한 부분을 재구성할 수 있습니다.
API 클라이언트, 함수 이름, 필드 매핑, 변환 로직, 때로는 개발자 주석까지도요.
- 최소화(minification) ≠ 암호화(encryption)입니다.
HAR 차이점 비교 (HAR diffing)
- 네트워크 트래픽을 캡처하고, 페이지에서 단 하나의 것만 변경한 후 다시 캡처하세요.
Claude에게 두 파일을 모두 제공하고 그 차이점을 분리해내도록 하세요.
산업 필터를 바꿨나요? 어떤 매개변수가 이동했나요? 다음 페이지를 클릭했나요? 커서가 어떻게 되었나요?
WebSockets
devtools → network → WS → messages를 확인하세요.
실시간 가격, 재고 및 대시보드는 개별 HTTP 요청보다는 지속적인 연결(persistent connections)을 통해 구조화된 정보를 받는 경우가 있습니다.- 샘플 메시지를 캡처하여 Claude가 그 구조를 매핑하도록 하세요.
요청 체인 (request chains)
- 실제 데이터 응답이 오기 전에 무슨 일이 일어나는지 추적하세요.
더 이른 요청들이 메타데이터를 반환하거나, 상태를 설정하거나, 후속 호출에 사용되는 페이지네이션 커서(pagination cursors)를 공급할 수 있습니다.
- Claude가 의존성(dependencies)을 매핑하도록 하세요.
응답 변환 (response transformations)
raw 서버 응답을 페이지에 표시되는 내용과 비교하세요.
프론트엔드 코드는 렌더링 전에 필드를 필터링, 병합, 이름 변경하거나 폐기할 수 있습니다. 때때로 원본 응답은 UI가 표시하는 것보다 더 많은 정보를 포함합니다.
자동화에 실제로 무엇이 필요한지 결정하기 전에 사이트가 데이터를 어떻게 제공하는지 이해하세요.
