파이썬으로 업무 자동화까지 <9> BeautifulSoup 01

코딩 초보의 정리글입니다. 0편 부터 보세요.

requests로 페이지 소스를 출력하는 것까지 해봤다. 그 다음엔? 그 답은 스스로에게 있다. 그 페이지에서 무엇을 확인하려고 했을테니 그것을 찾아가면 된다.

우리가 샘플로 삼은 페이지는 네이버 PC화면 뉴스 메인이다. 헤드라인 뉴스 영역에 어떤 기사가 있는지 확인하는 것을 목표로 해보자.

HTML, CSS

여기서부터는 HTML과 CSS를 알면 편하다. 알면 알수록 편하다. 하지만 이걸 설명하는 건 주제를 벗어나기 때문에 적진 않는다. 다만, 아래 설명을 몰라도 코드 자체는 따라할 수는 있도록 크롬 브라우저를 오가며 진행하려고 한다. 하지만 아예 모른다면 어려울 것이다.

다시 크롬으로

앞서 해봤던 두 가지를 다시 해보자. 개발자 모드를 열고, 페이지 소스 보기도 하자. 우선 페이지 소스 보기 탭으로 넘어가자. Ctrl+F를 누르고, 헤드라인 영역 제목인 헤드라인 뉴스를 찾아보자.

해당 타이틀 아래로 기사 리스트를 보면, 왼쪽 섬네일 기사 영역과 오른쪽 리스트 기사 영역의 기사 리스트가 보인다.

개발자 모드 창으로 돌아가서 헤드라인 뉴스 제목 하나를 골라잡아 우클릭하고 검사를 눌러보자. 그러면 Elements 탭에서 해당 기사가 있는 위치로 자동으로 찾아 들어간다. 페이지 소스에서 확인 태그와 클래스 등의 속성과 일치하는 것을 볼 수 있다. 앞서 말했듯 어떤 페이지는 전자와 후자가 다를 수 있다. 특히 최신 라이브러리를 써서 만든 홈페이지일 수록 다를 수 있다. 네이버의 경우 그렇진 않은데, 다른 페이지로 진행할 때는 확인해보는 게 좋다.

BeautifulSoup

파이썬에는 html 페이지를 탐색할 수 있는 모듈이 있을 것이다. 다만 써본 적은 없다. requests와 마찬가지로 같은 일을 더 잘 하는 패키지가 있다.

터미널에서 파이썬 가상환경을 설치한 상황에서 pip install bs4를 입력해 설치한다.

코드로 돌아가서 맨 위 상단에 from bs4 import BeautifulSoup을 입력한다. VS Code에서는 import 뒤에서 B만 쳐도 자동완성을 제안하니 대소문자 때문에 오타를 내지 말자.

requests와 import 구문이 좀 차이가 나는데, "bs4라는 라이브러리에서 BeautifulSoup이라는 모듈을 로딩해달라"는 뜻이다.

여기까지 하고 우클릭해서 인터랙티브 윈도에서 실행하자. print 함수는 빼고 실행해도 된다.

인터랙티브 윈도 하단에 커맨드 입력이 된다. 거기서 하나씩 해보자. 실행은 엔터가 아니라 Shift+Enter다.

soup = BeautifulSoup(r.text, 'html.parser')

앞선 r.text는 페이지 소스를 하나의 문자열로 저장해 돌려준다. BeautifulSoup은 이 문자열을 다시 HTML 구조로 인식해 다룰 수 있게 만들어준다.

해당 입력결과에는 Paste code into file 아이콘이 있다. 누르면 우리 스크립트 파일에 해당 코드가 붙여넣어진다. 그런데 꼭 인터랙티브 윈도에서 입력할 필요는 없다. 스크립트에 추가하고 Shift+Enter를 누르면 반대로 해당 줄만 인터랙티브 윈도에서 실행된다. 각자 편한 방법으로 하자.

객체

객체에 대해 조금만 더 알아보자. 직접 객체를 코딩해보면 이해가 더 쉽긴 하다. 위 코드에서 soup는 하나의 BeautifulSoup 객체다. BeautifulSoup은 웹페이지나 RSS Feed 같은 문서를 탐색할 수 있는 함수나 속성을 모두 갖추고 있다. 그걸 class라고 부른다. BeautifulSoup 자체는 아무런 내용을 가지고 있지 않지만, 우리가 requests로 얻은 소스를 인자로 넣어 실행하면, soup라는 변수에 이 소스를 탐색할 수 있는 다양한 방법을 제공하는 객체를 돌려준다.

우리는 네이버 뉴스 메인 페이지에서 헤드라인 뉴스에 있는 기사들만 가져오려고 한다. 앞서 HTML을 모르면 힘들것이라고 했다. 좀 더 구체적으로 알아야하는 부분을 살펴보면

1. HTML는 태그로 열고 닫히는 구조다.

2. 각 태그는 속성이 붙을 수 있다.

3. 같은 영역에 있는 태그는 동일 구조와 속성으로 반복되는 경우가 많다.

4. 속성 중 id는 고유값으로 취급하고, class는 반복된다.

는 알고 있어야 한다.

BeautifulSoup안에서 탐색하는 방법은 크게 두 가지다. Xpath를 이용하는 방법과, css selector를 이용하는 방법이다. Xpath는 써보긴 했지만 특별한 장점을 잘 모르겠다. css selector의 경우에는 HTML 문서에 대한 스타일 시트를 작성할 때와 동일하므로 보다 친숙해서 두 번째 방법을 자주 쓴다.

Xpath와 css selector에 대해 아는 건 간단하다. 헤드라인 뉴스에서 오른쪽 제목 기사 첫번째 제목을 우클릭하고 검사를 클릭하자. 오른쪽 개발자 모드 창에서 해당 제목이 있는 영역으로 이동하는데, 다시 거기서 우클릭하고 Copy-copy selector를 선택하면 클립보드에 css selector가 복사된다(xpath도 있다.)

#today_main_news > div.hdline_news > ul > li:nth-child(1) > div.hdline_article_tit > a

복사한 selector다. 이걸 말로 풀면 "today_main_news라는 아이디 속성을 갖는 태그 안에 hdline_news 클래스를 갖는 div 태그 안에 ul 태그 안에 첫번째 li 태그 안쪽에 hdline_article_tit 클래스를 가진 div 태그 안에 a 태그"를 가르킨다.

무척 어려워 보일 수 있겠지만, 실제 HTML을 보면서 저 순서대로 따라가다보면 이해할 수 있을 것이다. 다만 저 셀렉터는 우리가 클릭한 '첫번째 기사'만을 가르키다. 일단 해보자.

article = soup.select('#today_main_news > div.hdline_news > ul > li:nth-child(1) > div.hdline_article_tit > a')

위 코드까지 인터택티브 윈도에서 실행하자. 그리고 커맨드에서 article을 입력하고 실행해보면

[<a class="lnk_hdline_article nclicks('mai.text1', '880000F2_000000000000000003062756', 'airsGParam', '0', 'news_qm_v2.0', 'j48nPNUqw6giJsQb')" href="/main/read.nhn?mode=LSD&amp;mid=shm&amp;sid1=101&amp;oid=025&amp;aid=0003062756"> 킥보드 사고 64%가 운전 미숙…"내년 4월부터 면허 없으면 못 타" </a>]

이 나온다.

꽤 길어졌으니 다음 편으로.