오픈클로로 시작하는 크롤링 웹 사이트 요약과 크롤링
웹 사이트 요약하기
가장 기본적인 활용법입니다. 뉴스 기사의 URL을 오픈클로에게 전달하고 요약을 부탁합니다.
01 요약하고 싶은 뉴스 기사의 URL을 복사합니다. 더 간단한 방법은 뉴스 사이트의 메인 페이지 주소를 통째로 알려주는 것이죠.
[나]
웹 패치를 사용해서 https://news.naver.com 페이지의 내용을 요약해줘.
[/나]
[오픈클로]
[/오픈클로]
결과를 보면 네이버 뉴스 메인 페이지의 내용을 요약해줍니다. 이게 전부입니다. 오픈클로에게 URL만 주면 알아서 페이지를 읽고 요약합니다. 무료이고 설정도 필요 없습니다.
02 개발 문서, API 명세서, 위키 페이지도 web_fetch로 읽을 수 있습니다. 긴 문서를 통째로 읽어서 요약해주니 문서 읽기가 훨씬 편합니다.
[나]
웹 패치를 사용해서 https://docs.openclaw.ai/tools/browser 이 문서 핵심만 정리해줘.
[/나]
[오픈클로]
[/오픈클로]
잘 하는 것 같습니다. 다만 web_fetch는 만능은 아닙니다. web_fetch로 가져올 수 없는 웹사이트도 많거든요.
03 이를테면 오픈클로에게 네이버 부동산 사이트 내용을 알려달라고 하면 이렇게 대답할 겁니다.
[나]
네이버 부동산 사이트의 내용을 웹 패치로 가져와봐.
[/나]
[오픈클로]
[/오픈클로]
결과를 보면 어쨌든 내용을 가져오지 못한다고 합니다. 왜 그럴까요? 이건 오픈클로의 무능함 때문이 아닙니다. 그보다는 웹사이트의 구조 때문입니다. 사실 웹사이트는 2가지 방식으로 정보를 보여줍니다. 하나는 정적인 방식, 다른 하나는 동적인 방식입니다.
예전에는 대부분의 웹사이트가 서버에서 완성된 상태로 브라우저에 도착했습니다. 이것이 정적인 방식입니다. 정적인 방식으로 정보를 보여주는 웹사이트는 web_fetch로 정보를 가져올 수 있습니다.
하지만 현대의 웹사이트는 동적인 방식으로 동작합니다. 예를 들어 네이버 부동산 웹사이트는 빈 틀을 먼저 정적으로 불러온 다음 자바스크립트라는 언어가 그 다음에 실행되면서 실제 부동산 매물 데이터를 불러옵니다. 그런데 web_fetch는 정적으로 불러온 빈 화면만 볼 수 있습니다. 다시 말해 web_fetch는 자바스크립트로 불러들인 데이터를 볼 수 없습니다. 그래서 데이터가 없다고 하는 것입니다.
서버에서 웹페이지를 완성해서 브라우저로 보내는 방식을 서버 사이드 렌더링, 브라우저에서 자바스크립트를 실행해 내용을 채우는 방식을 클라이언트 사이드 렌더링이라고 부릅니다. SPA는 거의 다 클라이언트 사이드 렌더링을 사용합니다.
이런 사이트를 크롤링하려면 오픈클로가 실제 브라우저를 조작해서 데이터가 뜰 때까지 기다리게 만드는 방법이 필요합니다. 바로 그 방법이 다음에 배울 크롬 확장 프로그램입니다. 계속해서 가봅시다.
크롬 브라우저 연결하기
web_fetch의 한계를 넘으려면 AI가 브라우저를 직접 조작할 수 있어야 합니다. 오픈클로 초기 버전에서는 크롬 확장 프로그램인 릴레이(Relay)를 통해 웹브라우저를 제어했습니다. 이후 업데이트에서 릴레이 방식이 제거되고, 현재는 Chrome DevTools의 자동 연결 기능을 통해 사용자의 크롬 브라우저를 직접 제어하는 방식으로 변경되었습니다. MCP의 자세한 정보가 궁금하다면 다음 링크를 확인하세요. 실습에서 사용한 MCP 구성 항목도 이곳에서 복사할 수 있습니다.
developer.chrome.com/blog/chrome-devtools-mcp
01 먼저 크롬 브라우저에서 원격 디버깅을 켜야 합니다. 크롬 주소창에 다음 주소를 입력하세요.
```
chrome://inspect/#remote-debugging
```
02 페이지가 열리면 [원격 디버깅 사용 설정] 토글을 켭니다.
03 오픈클로 설정에 MCP 서버 정보를 추가해야 합니다. 오픈클로 설정 파일은 ~/.openclaw/
openclaw.json입니다. 이 경로에 Chrome DevTools MCP 서버의 정보를 넣어달라고 요청하
세요. 물론 텍스트 편집기에서 직접 입력해도 됩니다.
.
04 설정을 마쳤으면 오픈클로를 재시작합니다. 재시작하면 MCP가 새 설정으로 로드됩니다.
05 연결이 잘 됐는지 확인해봅시다. 오픈클로에게 ‘열린 브라우저 탭 목록 보여줘’라고 보내보세
요. 원격 디버깅을 허용하시겠습니까? 라는 팝업창이 뜨면 [허용]을 눌러주세요.
06 크롬에서 열어둔 탭들이 그대로 보이면 연결 성공입니다. 이제 브라우저 연결이 끝났습니다. 이제 본격적으로 브라우저 자동화를 이용해 필요한 정보를 수집하겠습니다.
쿠팡에서 생수 가격 찾기
익스텐션이 연결된 상태에서 실제로 브라우저를 제어해보겠습니다.
01 실습을 시작하기 전에 [미친 활용 06] 크롬 브라우저 연결하기를 참고하여 크롬 브라우저를 실행해보고 확장 프로그램 배지가 [ON]인지 확인하세요. 확인 후에는 텔레그램을 열어 오픈클로에게 다음과 같이 지시합니다.
[나]
쿠팡에 들어가서 생수를 검색하고, 제일 위에 나오는 상품 3개 이름과 가격을 알려줘.
[/나]
02 그러면 오픈클로에서 다음과 같은 답변이 옵니다.
오픈클로는 실제로는 이런 일을 합니다.
크롬에서 쿠팡 사이트를 열고 검색창의 위치를 찾아서 ‘생수’를 검색합니다.
검색 결과 페이지에서 상품 목록을 읽고 상위 3개 상품의 이름과 가격을 정리해서 알려줍니다.
다시 말해 진짜로 브라우저를 켠 다음 상품 목록이 뜰 때까지 기다렸다가 상품명을 가져오는 거죠. 이렇게 동적 페이지는 브라우저 자동화를 통해 진행하면 됩니다.
