웹 스크래핑에 적합한 선택기 선택하기: CSS 또는 XPath

스크래핑, 차이점, 2월-01-20225분 읽기

웹 스크래핑에 사용할 올바른 선택기가 무엇인지 알고 계신가요? 웹 스크래핑은 최근 10년 동안 인터넷에서 데이터를 추출하는 데 널리 사용되어 왔습니다. 기업이 데이터를 수집하고 분석하여 더 나은 비즈니스 의사 결정을 내리는 데 도움이 됩니다. 자동화된 기술 덕분에 웹 스크래핑은 그 어느 때보다 쉬워졌습니다.

그러나 어떤 도구나 프레임워크를 선택하든 스크래퍼가 데이터를 정중하게 스크랩할 수 있도록 중요한 결정을 내려야 합니다. 바로 이 글에서 배우게 될 XPath 또는 CSS 선택기를 사용하여 웹 요소를 추출할지 여부입니다.

몇 가지 기존 사례를 통해 자세히 살펴보겠습니다.

XPath 선택기란 무엇인가요?

XPath는 XML 경로 언어의 약자입니다. 그러나 웹 스크래핑과 마찬가지로 XML 문서 또는 HTML에서 태그 또는 태그 그룹을 선택하기 위해 비-XML 구문을 사용합니다. XPath를 사용하면 전체 HTML 트리를 거치지 않고 HTML 또는 XML 요소에 직접 액세스하는 표현식을 작성할 수 있습니다.

XPath를 사용하여 요소에 액세스하는 방법을 이해하기 위해 HTML 코드를 통해 더 자세히 살펴보겠습니다. 이미 기본적인 HTML을 알고 있다고 가정합니다.

<!doctype html>
<html xmlns=”http://www.w3.org/1999/xhtml” lang="en" xml:lang="en">
<head>
    <meta charset="utf-8">
    <title>Awesome Products at your Fingertips</title>
</head>

<body>
    <h1>Description of product features</h1>
    <p>These products are great. So let's just look at the features !</p>
    <ul id="product-list" class=”basic-list”>
	   <li>Item 1</li>
	   <li>Item 2</li>
	   <li>Item 3</li>
	</ul>
</body>
</html>

원하는 편집기에 위의 코드를 입력하고 products.html로 저장할 수 있습니다. 그런 다음 브라우저에서 볼 수 있습니다(이 예제에서는 구글 크롬을 사용하므로 구글 크롬을 사용하는 것이 좋습니다).

브라우저가 이 코드를 실행하면 HTML을 구문 분석하고 요소의 트리 표현을 생성합니다. 이를 다음 형식의 DOM(문서 객체 모델 )이라고 합니다:

주어진 링크에서 DOM에 대한 자세한 내용을 읽을 수 있습니다. 이제 여기서는 전체 트리를 거치지 않고 각 요소로 바로 이동하는 방법에 대한 XPath에 초점을 맞추겠습니다. 그럼 Xpath의 기본 용어부터 살펴보겠습니다.

노드란 무엇인가요?

XPath에서 가장 기본적인 요소는 노드입니다. 노드는 방금 DOM 트리에서 본 개별 요소입니다. 이 글을 진행하면서 노드가 태그 요소, 속성, 할당된 문자열 값 등으로 구성되어 있다는 것을 더 자세히 알게 될 것입니다. 각 XML 또는 HTML 페이지에는 7개가 있으며, 각 노드 유형을 자세히 살펴보겠습니다.

Element node – These are the major tags in an HTML document. For instance, in our example, the elements nodes are <title>,<meta>,<body>,<h1>,<p>,<ul>,and <li>.

Attribute node – You can provide elements nodes with properties to give them unique names or apply CSS styles. In this example, we have provided the <ul> element with attributes “id” and “class”. More on ids and classes later.

Atomic values – these are the values that are inside the node elements. Over here, the atomic values are the text inside the <title>, <h1>,<p> and each of the three <li> elements.

위의 세 가지가 가장 중요하지만, 정보 제공을 위해 다음 네 가지도 알아두는 것이 중요합니다.

Namespace: Since XPath also deals with XML documents, it is a standard that specifies how you can use elements and attributes. It is identified by URI (Uniform Resource Identifier). For the latest HTML 5 version, you can set the namespace like this: <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>.

주석: 주석: 컴파일러나 구문 분석기가 처리하지 않는 HTML 또는 XML 문서의 주석 부분입니다.

Process instruction: As with the case of HTML documents, they are the nodes that link external files such as CSS and JavaScript files. For example, the<link> node to include CSS files and the <src> node to include JavaScript files.

Root node: As you guessed it right, this is the topmost element of an HTML document: the <html> node.

노드 간의 관계는 무엇인가요?

Parent: These are the root elements of the DOM tree that are precisely one level up. Each element has exactly one parent. According to our example, the parent of <li> element is <ul>.
Children: Children nodes are exactly one level down in the DOM tree. As per our example <h1>,<p> and <ul> elements are children of the <body> element.
Siblings: These are the elements that share the same parent. In our example, both the <li> elements are siblings of the <ul> parent. Also <h1>,<p> and <ul> are siblngs as they belong to the same parent <body>.
Descendants: Any elements that are one level down are descendants. For instance, the <title> element is a descendant of the <head> element.
Ancestor: Any element level up in the DOM tree is called an ancestor. In our example <li> element’s ancestors are <ul>,<body> and <html>.

HTML 요소의 XPath는 어떻게 찾나요?

이를 수행하는 방법에는 두 가지가 있습니다. 먼저 데모 또는 예제를 코딩해 보겠습니다. 위에서 언급했듯이 로컬 디스크에 저장하고 브라우저에서 볼 수 있는 준비가 되었기를 바랍니다.

페이지가 로드되면 항목 1 위에 마우스를 올려놓고 마우스 오른쪽 버튼을 클릭합니다. 그런 다음 아래 스크린샷과 같이 표시되는 메뉴 항목에서 검사를 선택합니다:

Then you would be able to find the full XPath by clicking on the <li> element in the console and selecting “copy” from the drop-down menu, and then specifying “Copy full XPath as shown below:

그런 다음 텍스트 파일이나 다른 곳에 붙여넣으면 됩니다:

/html/body/ul/li[1]

이를 절대 경로라고 합니다. 이 경로를 어떻게 도출했는지 아래에서 설명하겠습니다.

1단계 => li[1] //여기서 1은 첫 번째 li 요소를 나타냅니다.

Step 2 => /li[1]

Step 3 => ul/li[1]

Step 4 => /ul/li[1]
 
Step 5 => body/ul/li[1]

Step 6 => /body/ul/li[1]

Step 7 => html/body/ul/li[1]

Step 8 => /html/body/ul/li[1]

절대 경로

With this method, you need to work your way backward, starting from the target element all the way back to the root element. You add a forward slash before the element you have just added as you write each element. So let’s look at how you could work out the XPath for the first <li> element manually:

위의 방법이 길어 보이지만 전체 XPath를 구축하는 방법을 이해하는 데 도움이 될 것입니다. 이제 상대적인 방법으로 넘어가겠습니다.

상대 경로

//*[@id="product-list"]/li[1]

As you can see, it is pretty short, and the path is relative to the parent <ul> element. Since the <li> element does not have an id attribute, its relative path is relative to the <ul> element.

상대 경로와 절대 경로의 차이점

중요한 차이점은 전체 XPath는 가독성이 떨어지고 유지 관리가 어렵다는 점입니다. 또 다른 명백한 문제는 루트 요소에서 시작하는 요소에 변경 사항이 있는 경우 절대 XPath가 유효하지 않다는 것입니다. 따라서 상대 XPath를 사용하는 것이 좋습니다.

하지만 이에 대해 자세히 설명하기 전에 먼저 장점과 단점을 살펴보겠습니다.

XPATH의 장점과 단점

장점

XPath를 사용하면 포함 함수를 사용하여 일치할 가능성이 있는 항목을 찾을 수 있으므로 요소의 이름을 모르더라도 걱정할 필요가 없습니다. 따라서 스크랩할 항목을 쿼리할 때 DOM 위로 올라갈 수 있습니다.

CSS의 또 다른 중요한 장점은 구 버전의 인터넷 익스플로러와 같은 오래된 레거시 브라우저에서도 작동한다는 점입니다.

단점

위에서 배운 것처럼 가장 큰 단점은 경로의 요소를 변경할 때 깨지기 쉽다는 것입니다. 아래에서 확인할 수 있는 CSS 선택기와 비교하면 이해하기 어려울 수 있습니다.

또한 XPath에서 요소를 검색할 때 CSS보다 성능이 상당히 느립니다.

CSS 선택기란 무엇인가요?

이미 아시다시피 CSS는 웹 페이지에서 HTML 요소의 스타일을 지정하는 데 주로 사용되는 캐스케이딩 스타일 시트의 약자입니다. 이러한 스타일에는 글꼴, 배경 이미지 및 색상에 색상 적용, 요소 정렬 및 위치 지정, 단락 사이의 공백 늘리기/줄이기 등이 포함됩니다.

HTML 요소에 스타일을 설정하려면 CSS 선택기를 통해 스타일을 지정해야 합니다. 다음 섹션의 마크업으로 시작하는 간단한 예제부터 시작해 보겠습니다.

CSS 선택기는 어떻게 생성되나요?

<h1 id="main-heading" class="header-styles" name="h1name">What are CSS Selectors?</h1>

위 요소에 대한 CSS 선택기는 다음과 같습니다:

<h1>-selects by the element name <h1>
#메인 제목 - #요소의 ID를 지정합니다.
.header-styles - 점은 클래스 이름을 나타냅니다.
[name="h1name"] - 대괄호 안에 속성을 지정할 수 있습니다.

이 둘을 결합할 수도 있습니다:

h1.header-styles - 이CSS 선택기는 header-styles 클래스가 있는 h1 요소를 선택합니다.

고급 선택기

연산자는 자녀를 선택하는 데 사용됩니다. 반대로 + 연산자는 첫 번째 형제를 선택하고 ~ 연산자는 모든 형제를 선택하는 데 사용됩니다. 몇 가지 예는 다음과 같습니다:

ul#product-list > li – selects <li> elements which are children of <ul> with id of product-list.
ul#product-list li – selects <li> elements which are descendent of <ul> with id of product-list.
ul#product-list + li – selects first <li> element after <ul> with id of product-list.
ul#product-list ~ li – Selects all <li> elements after the <ul> with id of product-list.

CSS 선택기 사용의 장단점

장점

뷰티풀 수프에서 지원하지 않는 XPath와 달리 CSS 선택기는 가장 효과적인 스크래핑 라이브러리와 함께 지원됩니다. 또한 XPath와 달리 CSS 선택기는 학습 및 유지 관리가 더 쉽습니다. Internet Explorer 버전 8 이하의 레거시 브라우저를 제외한 거의 모든 브라우저에서 지원합니다. 하지만 요즘에는 이러한 브라우저를 사용하는 사람이 거의 없습니다.

단점

이전 버전의 Internet Explorer를 제외하더라도 다른 브라우저에서 렌더링되는 방식에 불일치가 있을 수 있습니다.

CSS 버전이 다양하기 때문에 개발자와 초보자 모두에게 혼란을 줄 수 있습니다.

오늘날 웹 기술에서 또 다른 중요한 요소는 CSS의 보안입니다.

CSS 선택기와 XPath의 차이점은 무엇인가요?

XPath와 CSS의 명백한 차이점은 XPath가 양방향이라는 점입니다. 즉, DOM 트리에서 양방향으로 이동할 수 있습니다. 그러나 단방향 흐름으로 알려진 CSS를 사용하면 부모 노드에서 자식 노드로만 이동할 수 있습니다.

이전 섹션에서 설명한 것처럼 XPath는 유지 관리가 어렵고 효과적인 가독성을 위한 좋은 후보가 아닙니다. 반면에 XPath는 레거시 브라우저에서 작동할 수 있지만 렌더링 방식은 브라우저마다 다릅니다.

따라서 이 점에서는 CSS가 우위에 있습니다.

둘 중 어떤 것을 선택해야 하나요?

CSS는 부모에서 자식으로만 이동할 수 있는 반면, XPATH는 DOM 트리를 가로지르는 것과 같은 특정 영역에서만 이동할 수 있기 때문입니다. 속도에 관한 한 CSS가 우위에 있습니다.

그러나 웹 스크래핑에 있어 XPath와 CSS의 속도 차이는 크게 중요하지 않습니다. 웹 스크래핑의 네트워크 지연 시간 등 고려해야 할 다른 요소들이 있습니다.

뷰티풀 수프는 XPath를 지원하지 않으므로 CSS가 가장 먼저 선택될 것입니다.

결론

웹 스크래핑 프로젝트에 어떤 선택기를 사용해야 하는지에 대한 정확한 정답은 없습니다. 이 글에서 살펴보았듯이 특정 상황에서는 XPath가 우위에 있는 반면, 다른 상황에서는 CSS가 두드러집니다.

따라서 트래버스, 브라우저 지원 및 앞서 설명한 몇 가지 기술적 기능과 같은 특정 핵심 사항을 고려해야 합니다. 배운 내용을 연습해 보시고 더 많은 글을 기대해 주시기 바랍니다.

작성자: ProxyScrape