[추천]웹 스크레이퍼 Web Scraper (Chrome Extension 크롬 확장프로그램, Site parsing tool)

 

스크래핑(Web Scraping, 웹 크롤링) 시작하기

“웹 스크래핑(크롤링)이라고 하는 작업은 정형화된 일이 아니고, 페이지 마다 다르기 때문에 먼저 수집하려는 페이지를 분석해야 합니다. 어떤 규칙을 통해 짜여있는지 그리고 원하는 정보는 어떻게 구성되어 있는지를 분석하는 것에서 부터 시작하게 됩니다.” ( 출처 : Web Scraping(웹 크롤링) 시작하기 )

 

사이트 구조 파악 도구

Q. 이 사이트는 무엇으로 만들었지 ? 에 관한 답을 제시하는 저희의 다른 게시글이 장기적으로는 스크래핑하고자 하는 사이트의 구조를 이해하는데 많이 도움을 줄 것이라고 생각합니다. 저는 개인적으로 wappalyzer(와플 라이저)를 많이 이용하고 있습니다. 

[추천]홈페이지 빌더(웹사이트 빌더, 쇼핑몰 빌더) 분석 사이트들(도구들) / 사이트 벤치마킹 사이트들(도구들) : Q. 이 사이트는 무엇으로 만들었지 ?

 

Web Scraper

개요

처음엔 정말 생소한데, 따라하다보면 신기하게 정말 됩니다. Chrome을 사용하고 익숙해지면 사용하기 쉽고 간단합니다.

장점이자 단점은 크롬에서만 가능하다는 것인데, PC에 설치하여 구동하는 것에 비교하면 다른 파싱 프로글램들이 이것은 큰 장점입니다. 

Web Scraper는 웹 페이지에서 데이터를 추출하기 위해 제작 된 크롬 브라우저 확장 프로그램입이며 훌륭한 무료 웹 스크래퍼입니다.  https://chrome.google.com/webstore/detail/web-scraper/jnhgnonknehpejjnehehllkliplmbmhn?hl=ko

이 확장 기능을 사용하면 웹 사이트를 여행하는 방법과 추출해야 할 내용을 계획(사이트 맵. 여기서말하는 사이트맵은 추출한 데이타의 구조 정도라고 할 수 있습니다. )으로 생성 할 수 있습니다. 이러한 계획(사이트 맵)을 사용하여 Web Scraper는 그에 따라 사이트를 탐색하고 모든 데이터를 추출합니다. 스크랩 한 데이터는 나중에 CSV로 내보낼 수 있습니다.

특징 : 1. 다수의 페이지를 한번 스크랩하기가 가능합니다. 2. 스크랩 한 데이터는 로컬 저장소에 저장됩니다. 3. 다양한 데이터 선택 가능 4. 동적 페이지 (JavaScript + AJAX)에서 데이터 추출 가능 5. 스크랩 한 데이터 찾아보기 6. 스크랩 한 데이터를 CSV로 내보내기 7. 사이트 맵 가져 오기, 내보내기  8. 크롬 브라우저에만 사용 가능합니다.

Web Scraper cover


 

 

한계 및 단점

1. 크롬 브라워저에서만 가능합니다. 

2. 파이썬, import.io 등과 같은 자동화된 스크래핑 언어나 도구들에 비해 내장된 자동화 기능은 거의 없습니다. 

3. 스크래핑할 사이트에 부담을 주지 않게 2000 ms = 20 초마다 새로운 웹브라이저를 열어 스크래핑을 하도록 되어있는데 저처럼 컴퓨터의 브라우저창을 여는데 시간이 걸리는 경우, 스크래핑이 잘 안되는 경우가 있습니다.

브라우저를 빨리 열수 있도록 다른 브라우저, 창, 탭은 닫고 작업해 주세요.

4. 수동으로 크롤링하는 것 외에 자동으로 정해진 시간에 크롤링하여 드롭박스에 저장하고자 하는 경우, 클라우드 서비스를 이용하세요. ( 다시 한번 말씀드립니다. 무료버전의 브라우저 익스텐션(확장프로그램)만 사용하셔도 훌륭합니다. ) 

Web Scraper 클라우드 및 요금제

 

 

 

포럼

포럼( https://forum.webscraper.io/c/how-to ) 중 How to( https://forum.webscraper.io/c/how-to )

토론하고 질문을하거나 버그를 제출할 수 있는 공간인데, 저와 같은 초심자에게 학습장으로 활용할 수 있습니다. 

기술서에 없는 내용은 이 링크를 활용하세요. pagination 이 궁금하면 구글에서 “web scraper Pagination”검색하면 이 포럼들중에서 찾아주므로 구글이 편리할 수도 있습니다.

 

설치( Installation )

Chrome 스토어 에서 확장 프로그램을 설치할 수 있습니다 . ( 크롬 브라우저에서만 사용가능한 확장 프로그램입니다. 인터넷 익스플로어, 파이어폭스 등에서는 사용할 수 없습니다. )

https://chrome.google.com/webstore/detail/web-scraper/jnhgnonknehpejjnehehllkliplmbmhn 에서 download 받을 수 있습니다. 

Web Scraper 설치

 

웹 스크레이퍼 열기( Open Web Scraper )

Web Scraper는 Chrome 개발자 도구에 통합되어 있습니다. 크롬에서 F12 또는 [Tool] -> [Developer Tools(개발자 도구)]를 선택하시면 (web scraper 크롬확장프로그램을 설치한 경우,) Web Scraper 탭을 찾으실 수 있습니다..

Open Web Scraper-개발자도구열기

확장프로그램의 구성

[Sitemaps]

기존에 만들어놓은 사이트맵들이 보여집니다. 선택하시면 사이트맵을 편집할 수 있습니다. 

Web Scraper sitemap

[Selelctor graph]

Selelctor graph

 

사이트 스크랩하기( Scraping a site )

Scraping a site

긁을 사이트를여십시오.

F12 또는 [Tool] -> [Developer Tools(개발자 도구)] -> [Web Scraper]를 차례대로 선택해주세요. 

Sitemap 만들기

[Create new sitemap] -> [Creat Sitemap]

Open Web Scraper-creat new sitemap

Sitemap name 을 영어로 적당히 만들어주시고 시작할 URL을 입력해줍니다. 다음에는 [Create Sitemap]하여 생성한 sitemap 을 저장해줍니다. 

Open Web Scraper-creat new sitemap_1

사이트 맵을 만들 때 가장 먼저해야 할 일은 시작 URL을 지정하는 것입니다. 스크래핑이 시작될 URL입니다. 스크래핑이 여러 위치에서 시작해야하는 경우 여러 시작 URL을 지정할 수도 있습니다. 예를 들어 여러 검색 결과를 긁어 내려면 각 검색 결과에 대해 별도의 시작 URL을 만들 수 있습니다.

범위가 있는 여러 개의 URL 지정

사이트에서 페이지 URL에 번호 매기기 규칙이 있는 경우 사이트를 탐색 할 Link selectors(링크 선택기) 를 만드는 것보다 범위 시작 URL을 만드는 것이 훨씬 간단합니다 . 범위 URL을 지정하려면 start url의 숫자 부분을 범위 정의 -로 바꿉니다 [1-100]. 사이트에서 url에 제로 패딩을 사용하는 경우 범위 정의에 0을 추가합니다 [001-100]. 일부 URL을 건너 뛰려면 다음과 같이 증분을 지정할 수도 있습니다 [0-100:10].

다음과 같은 http://example.com/page/[1-3]링크에서 범위 URL을 사용하십시오 .

  • http://example.com/page/1
  • http://example.com/page/2
  • http://example.com/page/3

범위 URL을 http://example.com/page/[001-100] 다음과 같은 링크에 대해 이와 같이 제로 패딩과 함께 사용하십시오 .

  • http://example.com/page/001
  • http://example.com/page/002
  • http://example.com/page/003

다음과 같은 http://example.com/page/[0-100:10]링크의 경우 이와 같이 증분 URL을 사용하십시오 .

  • http://example.com/page/0
  • http://example.com/page/10
  • http://example.com/page/20

www.i-help.kr의 아이사랑(행복)단말기 관련 게시글을 가져오려고 합니다. 이 게시글들의 URL 은 아래와 같습니다. 규칙이 없어 상단의 범위 지정은 어렵습니다. 

http://www.i-help.kr/ab-4154279-14&category_1=D

http://www.i-help.kr/ab-4154279-331&category_1=D

http://www.i-help.kr/ab-4154279-326&category_1=D

 

선택자 만들기

사이트 맵 을 생성 한 후에는 선택기를 추가 할 수 있습니다. 선택기의 패널에서  새 선택기를 추가, 수정하고 선택 트리를 탐색 할 수 있습니다. 선택기는 트리 유형 구조로 추가 될 수 있습니다. 웹 스크래퍼는 선택기를 트리 구조에서 순서대로 실행합니다. 예를 들어 뉴스 사이트가 있고 첫 번째 페이지에서 링크를 사용할 수있는 모든 기사를 다 쳤으면 합니다. 이미지 1에서 이 예제 사이트를 볼 수 있습니다.

그림 1 : 뉴스 사이트
그림 1 : 뉴스 사이트

 
[Add new selector] click하여 선택자(selector)를 추가할 수 있습니다.

Open Web Scraper-creat new sitemap_2-add selector

이 사이트를 긁으려면 첫 번째 페이지의 모든 기사 링크를 추출 하는 링크 선택기 를 만들 수 있습니다 . 그런 다음 자식 선택기로 링크 선택기 가 링크를 찾은 기사 페이지에서 기사를 추출 할 Text 선택기 를 추가 할 수 있습니다 . 아래 이미지 는 뉴스 사이트에 사이트  을 구축 하는 방법을 보여줍니다 .

그림 2 : 뉴스 사이트 사이트 맵
그림 2 : 뉴스 사이트 사이트 맵

선택기를 만들 때 요소 미리보기 및 데이터 미리보기 기능을 사용하여 올바른 데이터로 올바른 요소를 선택했는지 확인하십시오.
선택기 트리 작성에 대한 자세한 내용은 선택기 문서를 참조하십시오. 핵심 셀렉터에 대해 최소한의 지식을 가지고 있어야합니다.

선택자 트리 검사

사이트 맵에 대한 선택기를 작성한 후에 는 선택기 그래프 패널에서 선택기의 트리 구조를 검사 할 수 있습니다. 아래 이미지는 예제 선택기 그래프를 보여줍니다.

그림 3 : 뉴스 사이트 선택자 그래프
그림 3 : 뉴스 사이트 선택자 그래프

 

사이트 긁기

사이트 맵에 대한 선택기를 작성한 후 스크래핑을 시작할 수 있습니다. 긁힌 패널 열기 및 긁기 시작. 스크래퍼가 페이지를로드하고 데이터를 추출하는 새로운 팝업 창이 열립니다. 스크래핑이 완료되면 팝업 창이 닫히고 팝업 메시지가 나타납니다. 찾아보기 패널 을 열어 스크랩 한 데이터를보고 CSV로 데이터 내보내기 패널 을 열어서 내보낼 수 있습니다.

 

Type 을 HTML로 하고 게시글 전체를 scrapping해보았습니다. 컨텐츠는 기본적으로 text, 이미지, 동영상으로 구성되어 있습니다. text, 이미지, 동영상 별로 scrapping할 수 있다면 이미지 문제도 해결할 수 있지 않을까요 ? 동영상의 경우에는 유튜브 URL, 네이버 동영상 URL로 구현되므로 링크정도로 연결하면 별 문제 없을 것 같습니다. 

Data Preview 하니 소스코드를 잘 가져온 것을 확인할 수 있습니다. 선택자(Selector)를 선택하고는 Data Preview로 data를 잘 가져오는지 중간중간 확인하시면서 작업하시면 scrap이 잘 되고 있는지 즉시 확인하며 작업할 수 있습니다. 

Open Web Scraper-selector-Type 을 HTML로 하고 게시글 전체를 scrapping해보았습니다

[Scraper] -> [Export data as CSV]하여 scrapping 한 data를 CSV로 내보내기하여 줍니다. 

 

Open Web Scraper-10-scraper-export cvs

아래와 같이 CSV 파일이 잘 생성되었습니다. 

Open Web Scraper-11-csv 화면 캡처

이 excel 자료를 워드프레스 게시글에 수동으로 올려보니(content 복사하여 비주얼에 붙여넣기하니) 잘 붙습니다. 한계는 역시 이미지, 이미지가 깨져서 나옵니다.  워드프레스의 이미지(미디어) 저장 경로와 scraping을 해온 이미지의 이미지 경로가 달라서 일 것입니다. 

 

Selectors

 

이미지 선택기( Image selector )

이미지 선택기는 이미지의 src속성 (URL)을 추출 할 수 있습니다 .

노트! 이미지 선택기의 CSS 선택기를 선택하면 사이트 내의 모든 이미지가 맨 위로 이동합니다. 이 기능이 사이트 레이아웃을 어떻게 든 부러 뜨리면 버그로 신고하십시오.

구성 옵션

  • selector – 이미지 요소의 CSS 선택자
  • 여러 개의 여러 레코드가 추출 중입니다. 일반적으로 이미지 선택기를 확인하지 않아야합니다.
  • 이미지 다운로드 – 제거됨. 이전에는 이미지를 다운로드하는 데 사용되었습니다. 대신 이미지 다운로드 스크립트를 사용하십시오.

사용 사례

텍스트 선택기 사용 사례를 참조하십시오 .

이미지 다운 로더 스크립트

이미지 다운 로더 스크립트는 이미지 셀렉터가 csv 파일에서 긁어 이미지 URL을 찾아 다운로드합니다. 이미지의 이름은로 바뀝니다 <web-scraper-oder>-<selector-name>.ext.

Windows 사용

  1. 여기에서 Python 3.x를 다운로드하여 설치하십시오 : https://www.python.org/downloads/
  2. 여기에서 이미지 다운로더 스크립트를 다운로드하십시오 : https://github.com/webscraperio/image-downloader
  3. 대상 사이트를 긁어서 CSV 형식으로 데이터를 내 보냅니다.
  4. 맨 위에 CSV 파일을 끌어다 놓습니다. image-downloader.py

Image selector

Image selector can extract src attribute (URL) of an image.

Note! When selecting CSS selector for image selector all the images within the site are moved to the top. If this feature somehow breaks sites layout please report it as a bug.

Configuration options

  • selector – CSS selector for the image element.
  • multiple – multiple records are being extracted. Usually should not be checked for Image selector.
  • download image – Removed. Previously was used to download images. Use image download script instead.

Use cases

See Text selector use cases.

Image downloader script

Image downloader script finds image urls scraped by Image Selector in a csv file and downloads them. Images are renamed to <web-scraper-oder>-<selector-name>.ext.

Windows usage

  1. Download and install python 3.x from here: https://www.python.org/downloads/
  2. Download image downloader script from here: https://github.com/webscraperio/image-downloader
  3. Scrape the target site and export data in CSV format
  4. Drag and drop the CSV file on top of the image-downloader.py

Fig. 1: windows image download
Fig. 1: windows image download

 

Pagination(링크로 연결된 다수의 페이지를 한꺼번에 스크래핑하기)

 

시작페이지를 “범위가 있는 여러 개의 URL 지정”하여 Pagination 하기

다른 pagination 없이도 스크래핑을 할 웹페이지에 시작페이지를 “범위가 있는 여러 개의 URL 지정”하여 설정하면 쉽게 링크로 연결된 하위 컨텐츠를 불러들여 스크래핑할 수 있습니다. 
저의 경우, 스크래핑할 게시글 중 3개를 살펴보니 아래와 같았습니다.  
http://www.i-help.kr/ab-4154279-41&category_1=A
http://www.i-help.kr/ab-4154279-398&category_1=A
http://www.i-help.kr/ab-4154279-397&category_1=A
이경우, http://www.i-help.kr/ab-4154279-**&category_1=A 는 공통이므로 ** 부분에 시작되는 숫자오 끝나는 숫자 http://www.i-help.kr/ab-4154279-[1-500]&category_1=A와 같이 표시해주면 됩니다. 
이 방법은 웹크롤링에 시간이 많이 지연되어도 설정한 범위의 끝까지 스크래핑을 완성한다는 것입니다. 

 
pagination에 사용하는 selector(선택기)에는 link 선택기와 element click 선택기가 있습니다.

상품, 게시글등이 많은 경우, 웹페이지 하단에 아래와 같이 표시됩니다. 이 경우, link 선택기를 선택하시고 [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] 중 [1][2][3] 과 같이 서너개를 선택하시면 [10]까지 모두 선택이 되는데, 이때  Multiple 을 선택하세요. (A 방법) 

[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] 
다른 방법은  을 선택하시어 증가시키면서 Link 선택기를 이용하시는 방법이 있습니다.(B 방법)  큰 카테고리가 [10]이하이면 B방법을 이용하세요. 
참조 : 관련 문서는 When and how to use link selector for a pagination and when element click selector? 가 있으나 영문 설명이 어렸습니다. 

 

Multiple records

Extract multiple records fro

 

 

CSS selector

 

CSV 파일을 Import any XML or CSV File to WordPress 플러그인을 사용하여 게시글로 올리기

이 CSV 파일을 Import any XML or CSV File to WordPress 플러그인을 사용하여 게시글로 올리는데 성공하였습니다. Import any XML or CSV File to WordPress 플러그인은 구글 피드 규칙(Rules)도 있고, CSV의 필드값을 치환자/함수로 특정할 수 있는 훌륭한 기능이 있어 가능했습니다. 게시글을 대량으로 옮기기의 90%는 완성한 것 같습니다. 

한글이 깨지는 고질적인 문제는 구글 스프레드시트에 옮겼다가 이것을 excel로 download하여 사용하면 해결됩니다.

Export WordPress data to XML/CSV 플러그인 / Import any XML or CSV File to WordPress 플러그인