이거 모르면 크롤링 못한다! 웹 크롤링의 기본, XPath 알아보기 - 기본편

XPath는 웹 크롤링의 기초로서, XML 문서의 특정 요소 또는 속성에 접근하는 강력한 도구입니다. 이 포스팅에서는 XPath의 기본 문법과 활용 예제를 다룹니다.

0. XPath란?

XPath는 'XML Path Language'의 줄임말로, XML 문서의 특정 요소 또는 속성에 접근하기 위한 경로를 지정하는 언어입니다.
XPath는 주로 웹 크롤링 작업에서 사용되는데, 우선 XPath의 기본 문법에 대해 알아보겠습니다.
 

1. Xpath의 기본 문법

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hashscraper</title> </head> <body> <div id="container"> <div class="title"> <p class="content1">let's start crawling!</p> <p class="content2">crawling is fun!</p> </div> </div> </body> </html>
 
 

2. HTML 코드

다음은 간단한 HTML 코드입니다.
HTML 코드는 요소(element)와 속성(attribute)으로 이루어져 있으며, 각 요소와 속성들은 계층 관계를 이루고 있습니다.
XPath는 XML 문서를 트리 구조로 표현하며 최상위 노드부터 최하위 노드까지 모든 노드들과 속성, 데이터를 추출할 수 있는 경로를 나타내줍니다.
(*여기서 노드는 요소, 속성, 텍스트 내용과 같은 XML 문서의 각 부분을 의미합니다.)
 
위의 코드에서 title 요소에 접근하기 위한 경로를 가져와봅시다.
title 요소는 트리 구조상의 순서로 보면 html 요소 → head 요소 → title 요소 순으로 이루어져있습니다.
따라서 title 요소의 XPath를 나타내면 다음과 같습니다.
/html/head/title
또한, XPath에서는 class와 같이 요소를 결부하는 속성을 “@”로 표현합니다. @를 사용하여 위의 코드에서 첫번째 p 요소의 XPath를 나타내면 다음과 같습니다.
/html/body/div/div/p[@class='content1']
 
 

3. Xpath의 두 가지 표현법

XPath는 두가지 방식으로 나타낼 수 있는데, 절대 경로상대 경로로 나타낼 수 있습니다.

3.1. Xpath : 절대 경로

절대 경로는 위에서 사용한 방식과 동일하며, 가장 상위의 루트 노드에서부터 요소를 선택하는 방식입니다.
html/body/div/div/p[@class='content1']

3.2. Xpath : 상대 경로

상대 경로는 ‘//’를 사용하여 중간 노드 path를 생략하고 지정된 노드에서부터 순서대로 탐색을 진행합니다. 위의 절대 경로를 상대 경로로 나타내면 다음과 같습니다.
//p[@class='content1']
 
 

4. 그 외의 표현 문법

이 외에도 XPath에서는 경로를 나타내기 위해 다양한 문법을 사용하고 있습니다.

4.1. contains

: 해당 값을 포함하는 경우를 가져옵니다.
#'aa'를 포함하는 class명을 가진 div 요소를 선택 //div[contains(@class, "aa")]

4.2. last

: path에 해당되는 노드 중 마지막 노드를 가져옵니다.
//div[@class="aa")/span[last()]

4.3. and

: 두 조건을 모두 만족하는 노드를 가져옵니다.
#class명에 'aa'와 'bb'를 포함하는 img 요소를 선택 //img[contains(@class, "aa") and contains(@class, "bb")]

4.4. or

: 두 조건 중 하나 이상을 만족하는 노드를 가져옵니다.
#class명에 'aa' 또는 'bb'를 포함하는 img 요소를 선택 //img[contains(@class, "aa") or contains(@class, "bb")]

4.5. not

: 해당 조건을 만족하지 않는 노드를 가져옵니다.
#class명에 'aa'를 포함하고 'bb'를 포함하지 않는 img 요소를 선택 //img[contains(@class, "aa") and not(contains(@class, "bb")
 
 

5. 예제 실습

지금까지 XPath의 기본 문법을 살펴보았습니다. 이제 웹 사이트에서 내가 원하는 부분의 xpath를 가져와볼까요?
 

5.1. 개발자 도구 열기

notion image
먼저 원하는 웹 사이트를 열어준 뒤, 마우스 왼쪽을 클릭하고 ‘검사’를 눌러주면 chrome 개발자도구가 열리는 것을 볼 수 있습니다.
 
 

5.2. 내가 원하는 태그 확인하기

notion image
개발자도구에서 좌측 상단의 마우스 표시를 눌러줍니다. 그리고 마우스를 웹 사이트의 가져오고 싶은 부분에 가져다대면 아래와 같이 나옵니다.
notion image
마우스를 가져다댄 곳을 클릭하면 개발자도구에서 실제 html 코드에서 내가 원하는 부분의 태그를 보여줍니다.
notion image
 
 

5.3. Xpath 복사하기

notion image
해당 부분을 Copy > Copy XPath 한 후 복사한 내용을 붙여넣기 해보면 내가 원하는 부분의 XPath를 가져올 수 있습니다!
다음과 같이 내가 원하는 부분의 XPath가 정상적으로 이동한 것을 확인할 수 있습니다.
//*[@id="home"]/div/div/div[1]/h1
그렇다면 이렇게 가져온 XPath는 크롤링에 어떻게 사용될까요? 크롤링 코드의 일부를 가져와보았습니다.
get_browser.goto "<https://www.hashscraper.com>" x = get_browser.element(xpath: "//*[@id='home']/div/div/div[1]/h1").text
 

5.4. 작동 확인

다음과 같이 XPath를 이용하여 내가 원하는 요소를 가져와서 x에 저장하였고, x를 프린트해보면 다음과 같이 내가 원했던 텍스트가 나오는 것을 볼 수 있습니다.
 
 

6. 결론 : 제대로된 크롤링하려면 Xpath부터 공부하자

지금까지 크롤링의 기초, XPath에 대해 알아보았습니다. 크롤링을 통해 내가 원하는 데이터를 수집하기 위해서는 해당 데이터가 어떤 경로를 통해 나타내어질 수 있는지 알아야하며, 이는 XPath를 통해 간단히 표현할 수 있습니다. XPath 공부를 시작으로, 크롤링을 시작하시는 것을 추천드립니다!
 

이 글도 함께 읽어보세요: