Python Django 카카오톡 학식봇 만들기(1) - 동적 웹페이지 크롤링 방법이 정적 웹페이지와 다른 이유

이전 시리즈 : 카카오 i 오픈빌더 챗봇 만들기

파이썬 장고로 카카오 i 오픈빌더 챗봇 만들기 (1) - 가상환경 설정, Django 프로젝트와 앱 만들기

 

 

안녕하십니까?

이 시리즈는 카카오 i 오픈빌더로 학식 봇을 만드는 과정을 다룹니다. 이 포스팅은 그 중 HTML 페이지 구조 분석을 먼저 합니다. 여기서 다루는 정적 페이지가 아닌 동적 페이지임을 염두에 두시길 바랍니다. 정적 페이지의 경우 이 글보다 더 쉬운 방법으로 접근이 가능합니다.

 

---

 

저는 저희 학교 학식 웹페이지를 크롤링해 보겠습니다.

 

 

신코바로 개강이 미뤄져 새학기 학식이 없는 상황입니다. 식단을 나타내는 테이블에 가로로는 요일과 날짜가 적혀 있으며 학식이 업로드되었을 때는 그 아래로 각 날짜의 학식과 교직원식이 나타납니다. 지금은 아무것도 없기 때문에 '-' 표시로 채워져 있습니다.

한 번 페이지 소스를 열어 보겠습니다. 파이어폭스 Ctrl+U나 크롬 F12 등으로 페이지 소스를 봅니다. 저는 일단 파이어폭스 브라우저로 페이지 소스를 보겠습니다. 일단 테이블의 위치를 모르니 '월요일'로 한 번 테이블 위치를 찾아보겠습니다.

 

 

그런데 웬일인지 '월요일'로 검색했는데 아무것도 나오지 않네요. 어떻게 된 걸까요?

정적 웹페이지에서는 정직하게 3월 2일 월요일로 표시되어 있으면 페이지 소스에서도 3월 2일이라고 나와 있습니다. 하지만 동적 웹페이지에서는 이렇게 브라우저 자체 엔진으로 스크립트를 처리하지 않으면 스크립트만 나오고 결과물은 나오지 않습니다. 이런 동적 페이지를 분석할 때는 어떻게 해야 할까요?

구글 크롬 브라우저가 이 때 도움이 됩니다. 개발자 도구를 사용하면 소스 코드 어느 부분에 커서를 가져가면 파랗게 나오거나 주황색으로 해당 코드의 영역이 나타나거든요. 그러면 크롬 브라우저에서 개발자 도구를 열어 다시 보겠습니다. F12를 눌러 소스 코드를 봅시다.

 

<div class="table-responsive">에 커서를 가져가니 우리가 찾는 테이블이 보입니다. 파이어폭스에서 열어본 소스코드에서 확인해보면, 이 코드가 있긴 하지만 div 안의 table 안이 완전히 비어 있습니다. 반면 여기서는 우리가 보는대로 월요일과 3월 2일 등의 데이터를 확인할 수 있습니다. 이것이 브라우저 내장 자바스크립트 엔진이 스크립트를 처리했느냐 안 했느냐의 차이입니다.

그러면 이런 동적 웹페이지를 크롤링하려면 어떻게 해야 할까요? 정적 웹페이지에서는 beautifulsoup4만으로 웹크롤링이 가능했지만 동적 웹페이지는 beautifulsoup4만으로는 부족합니다. 결국 스크립트를 처리할 브라우저 자바스크립트 엔진이 필요하다는 의미입니다.

방법은 크게 두 가지가 있습니다. scrapy 를 설치하는 방법이나 selenium 을 사용하는 방법입니다. 저는 scrapy 대신 selenium 을 택했기 때문에 scrapy 를 사용하시는 분께는 도움이 안 될 것 같습니다. selenium 을 사용해서 웹크롤링을 하려면 웹 드라이버를 설치하고 python 코드에 임포트하면 됩니다. 사실 selenium 설치하는 목적이 그게 전부입니다.

여담으로 제가 처음 학식알리미를 시작하던 2018년 여름은 나름 호시절(?)이라 정적 웹페이지 구성이었고 그래서 selenium 없이 beautifulsoup4 만으로 잘 해낼 수 있었습니다. 하지만 2019년 초에 웹사이트 개편이 되면서 전부 동적 페이지로 바뀌어서 새로 만들 수밖에 없게 됐습니다.

 

그렇다면 동적 웹페이지 크롤링을 어떻게 해야 할까요? selenium 설치야 뭐 그냥 한다 치고 CLI 환경에서 어떻게 웹 드라이버를 설치할 수 있을까요? 다음 포스팅에서 selenium 설치, 웹 드라이버 설치 등 본격적인 웹 크롤링 준비를 해보고 간단히 저희 학교 학식 페이지를 크롤링해보는 실습을 할 것입니다.

읽어주셔서 감사합니다. ^^

 

 

다음 글 보기

카카오톡 학식봇 만들기(2) - Amazon EC2에 firefox 웹드라이버 설치, 동적 웹페이지 크롤링하기