10분만 해보세요! 동적 웹 페이지 크롤링 (Selenium)

Date:

Share post:

동적 웹 페이지 크롤링과 정적 웹 페이지 크롤링의 차이가 무엇일까요?
이번 포스팅에서는 동적 웹 페이지의 데이터를 크롤링 하는 방법에 대해 알아보겠습니다.

크몽 사이트를 크롤링해 보았다.

이전 포스팅에서 정적 웹 페이지(데이터베이스를 거치지 않고 누가 접속해도 변함없이 동일한 페이지를 보여주는 웹 사이트)를 크롤링 하는 방법에 대해 알아보았습니다.

전자책을 판매하고 있는 판매자로서, 크몽 사이트에서 전자책 판매 주제, 판매가, 판매량 등의 데이터를 수집해 시장조사를 하고, 그 결과를 가공하여 전자책으로 판매하는 것이 목표입니다.

먼저, 데이터를 수집할 사이트에 접속해보겠습니다. (데이터 수집 대상 웹 페이지 https://kmong.com/category/1901)

현재 (6월 2일 오후 7시 43분 기준) Kmong에 투잡·재테크 전자책에 들어가면 아래와 같은 화면을 볼 수 있습니다.
(고정된 화면이 아니기 때문에 사람들마다 다를 수 있습니다.

동적 웹 페이지 크롤링 하기 (Selenium) - 크몽 사이트
동적 웹 페이지 크롤링 하기 (Selenium) – 크몽 사이트 화면 확인

이 페이지를 기존 방식으로 크롤링 해보았습니다. 겉으로 보기에는 데이터가 잘 들어온거 같습니다. 하지만, Ctrl + F로 전자책 이름 혹은 가격을 검색해도 해당하는 데이터가 없습니다.

정적 웹 페이지 크롤링 방식으로 크몽 사이트 크롤링 시도
정적 웹 페이지 크롤링 방식으로 크몽 사이트 크롤링 시도

동적 웹 페이지 크롤링 하기 (Selenium)

우리가 보는 대다수의 웹 페이지는 “동적 웹 페이지” 입니다.
동적 웹 페이지는 정해진 페이지가 아니라 사용자에 따라, 혹은 저장된 데이터에 따라서 다르게 보여지는 페이지를 의미합니다.

위에서 이야기한 https://kmong.com/category/1901 크몽 페이지에서 F5를 누르면 상품 배치가 계속 바뀌는 것을 볼 수 있습니다. 이렇게 동적인 웹 페이지인 경우에는 이전에 쓰던 방식에 한 단계를 더 거쳐야 제대로 된 데이터를 얻을 수 있습니다. 그 단계가 바로 “Selenium” 라이브러리와 Chrome Driver를 이용하는 방식입니다.

“Chrome Driver”는 우리가 사용하는 크롬 브라우저를 제어하기 위한 드라이버 입니다. Selenium의 Webdriver에 크롬 드라이버를 연결하면 동적 웹 페이지를 크롤링 할 수 있는 소스코드를 얻을 수 있습니다.

Chrome Driver는 Chrome 브라우저의 버전과 일치해야만 작동합니다.
Chrome 브라우저의 버전은 주소창에 chrome://version/ 을 입력하면 알 수 있습니다.

먼저, 크롬 브라우저의 버전을 먼저 살펴보겠습니다.

image 5
현재 제 크롬 브라우저의 버전은 102.0.5005 입니다

이제 현재 사용 중인 Chrome 브라우저 버전에 맞는 Chrome Driver를 찾아야 합니다.
아래 이미지와 같이 “Chrome Driver 버전” 으로 검색 후 3번 째 사이트에서 다운로드 받을 수 있었습니다.

Chrome Driver 다운로드 사이트 검색하기
Chrome Driver 다운로드 사이트 검색하기

아래에 ChromeDriver 102.0.5005.61을 클릭합니다. 저는 맨 뒷자리가 63 이지만, 실행에 문제는 없었습니다.

image 6
ChromeDriver 다운로드 페이지로 이동하기

아래처럼 다운로드 받을 수 있는 파일들이 나옵니다. OS에 따라 맞는 파일을 다운로드 받으면 됩니다.
저는 윈도우를 사용하고 있기 때문에 “chromedriver_win32.zip”을 다운로드 받았습니다.

image 8
Chromedriver 윈도우 버전 다운로드 받기

다운로드 받은 파일의 압축을 풀어줍니다. 압축을 해제하면 “chromedriver.exe” 파일 1개를 볼 수 있습니다.
파일을 선택하고 마우스 우측을 클릭 후 “속성”을 눌러주세요. 그리고 “위치”를 확인합니다.

image 9
ChromeDriver 경로 확인하기

이제 Selenium 라이브러리 사용 준비가 끝났습니다. 다시 주피터 노트북으로 돌아옵니다.
1번과 2번 라인을 작성 후 실행하면 아래와 같은 Chrome 창이 별도로 열리게 됩니다.

image 11
selenium의 webdriver로 chromedriver 실행시키기

이제 준비가 되었습니다. 아래 코드를 참고하여 차례대로 작성합니다. 그리고 첫 페이지에 보이는 “여행중에도 하루 2시간 ~” 제목을 찾아보겠습니다. 정상적으로 잘 찾아집니다. 이런 방식으로 동적 웹 페이지의 데이터를 확보할 수 있습니다.

image 15
동적 웹 페이지 크롤링 결과

간단하게 알아본 동적 웹 페이지 크롤링 방법이었습니다.
하지만 이 방식으로는 페이지 하나하나 모두 입력해서 손으로 수작업 하는 것과 크게 다를 것 같지 않습니다. 수 십 페이지를 자동으로 크롤링 하는 방식을 찾아봐야 할 것 같습니다.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

관련 블로그 글

HTML의 Form태그를 PHP에서 활용하는 방법

안녕하세요! 연쇄창업가 최대표입니다. 워드프레스의 웹 빌더 플러그인 사용을 넘어, 직접 제작단계를 가기 위해 PHP를 연습하고 있는데, 가장 먼저 HTML의...

워드프레스 프로그래밍 학습하기 (Fastcomet FTP를 이용해 PHPstorm에 1분 만에 연결하기)

안녕하세요! 연쇄창업가 최대표입니다.오랜만에 프로그래밍 관련 포스팅을 하네요. 올해 워드프레스를 처음 배우면서, 프로그래밍은 하지 않고, 웹 빌더 플러그인을 통해 홈페이지를...

프런트엔드 개발자가 하는 일

우리가 보고 있는 홈페이지는 여러 기술들이 들어가 있다. 홈페이지에 글자, 그림, 버튼 등을 넣고 보여주는 기술, 회원가입을 하거나...

개발자가 되고 싶다면 반드시 먼저 알아야 할 것

최근 컴퓨터 공학과가 아닌 문과생들도 "개발자"라는 직업에 관심을 가지고 프로그래밍 공부를 하는 경우가 많다. 좋은 직장으로의 취업은 어려운데,...