XPath 대 CSS 선택기: 어떤 것을 선택해야 할까?

이 XPath 대 CSS 선택기 가이드에서 다음을 배우게 됩니다:

• XPath 표현식이 무엇인지, 어떻게 작동하는지, 그리고 장단점은 무엇인지.
• – CSS 선택자의 정의, 작동 방식, 장단점.
• 성능, 단순성, 사용 사례 측면에서 XPath 표현식과 CSS 선택기의 비교.

자, 시작해 볼까요!

XPath: 종합 분석

XPath 대 CSS 선택기 가이드를 시작하며 비교의 첫 번째 요소인 XPath에 대해 자세히 알아보겠습니다.

정의

XPath( XML Path Language의 약자) 는 DOM을 탐색하고 쿼리하기 위한 쿼리 언어입니다. 특히 XML/HTML 문서에서 정보를 찾아 추출하는 강력한 방법을 제공합니다.

XPath는 파일 시스템과 유사한 구문을 가지며, XML/HTML 트리에서 노드를 찾는 데 표현식을 사용합니다. XPath 표현식은 문서의 계층 구조 내에서 특정 요소와 속성으로 가는 경로를 정의합니다.

구문

XPath 구문의 주요 구성 요소는 다음과 같습니다:

• /: 루트 노드에서 시작하여 노드를 선택합니다.
• //: 현재 노드에서 선택 조건에 부합하는 문서 내 모든 노드를 위치와 상관없이 선택합니다.
• .: 현재 노드를 선택합니다.
• ..: 현재 노드의 부모 노드를 선택합니다.
• @: 노드 속성을 선택합니다.
• element: 특정 태그(예: div)를 기준으로 노드를 선택합니다.
• [조건]: 지정된 조건(예: [@type="submit"])에 따라 노드를 선택합니다.
• function(): 표현식에 특정 XPath 함수를 적용합니다(예: text() 는 선택된 노드의 텍스트 콘텐츠를 반환합니다).

XPath 구문을 더 잘 이해하기 위한 몇 가지 예시는 다음과 같습니다:

• //a: 문서 내 모든 <a> 요소를 선택합니다.
• //ul/li: <ul> 요소의 자식인 모든 <li> 요소를 선택합니다.
• //ul/..: <ul> 요소의 모든 부모 노드를 선택합니다.
• //ul/li[@category='fiction']: category 속성이 'fiction'인 <ul> 태그 아래의 모든 <li> 요소를 선택합니다 .
• //title[@lang='en']: 문서 내 어디에서든 lang 속성이 ' en’인 모든 <title> 요소를 선택합니다.
• //title/text(): 문서 내 모든 <title> 요소의 텍스트 콘텐츠를 가져옵니다.
• //div[contains(@class, 'post')]/following-sibling::div[1]: 'post' 클래스를 가진 각 <div> 요소의 첫 번째 형제 < div> 요소를 선택합니다 .

XPath 표현식은 여러 함수와 조건을 결합하기 위해 부울 연산자와 산술 연산자도 지원합니다.

장점

• 높은 다용도성: XML 및 HTML 구조를 모두 탐색할 수 있어 요소, 속성, 텍스트 노드를 정밀하게 타겟팅할 수 있습니다. 또한 DOM의 전방 및 후방 탐색과 부모 및 형제 노드 선택을 모두 지원합니다.
• 다양한 함수 및 연산자: XML/HTML 문서 내 데이터를 조작하고 비교하기 위한 풍부한 내장 함수(예: contains(), concat(), count() 등) 및 연산자 (예: +, or, and 등)를 제공합니다.
• 절대 경로 및 상대 경로 지원: XPath 표현식은 문서의 루트(절대 경로) 또는 특정 요소(상대 경로)로부터 원하는 노드까지의 경로를 설명합니다.
• 텍스트 노드 선택 지원: 텍스트 노드를 직접 선택할 수 있어 추가 처리나 파싱 없이도 XML/HTML 문서에서 텍스트 콘텐츠를 추출할 수 있습니다.
• 플랫폼 독립성: 특정 프로그래밍 언어나 플랫폼에 구애받지 않으며, 다양한 환경, 라이브러리, 브라우저 및 운영 체제를 지원합니다.

단점

• 복잡하고 긴 구문: XPath 구문은 특히 초보자에게 어려울 수 있습니다. DOM에 깊게 중첩된 특정 노드까지의 경로를 작성하려면 일부 함수와 연산자를 포함하는 긴 표현식이 필요할 수 있습니다. 이로 인해 XPath 표현식은 오류 발생 가능성이 높고 디버깅이 어려울 수 있습니다.
• 제한된 지원 및 인기도: 모든 HTML 파싱 라이브러리가 XPath를 지원하는 것은 아닙니다. 웹 개발자들 사이에서 CSS 선택자가 훨씬 더 널리 사용되며, 라이브러리들도 주로 CSS 선택자에 초점을 맞추기 때문입니다. 또한 HtmlAgilityPack과 같은 대부분의 XPath 기반 라이브러리는 여전히 1999년에 출시된 XPath 1.0에 의존하고 있습니다. 현재 버전은 2017년에 출시된 XPath 3.1입니다. C#으로 웹 스크래핑 전문가가 되려면 HtmlAgilityPack 가이드를 읽어보세요.

팁과 요령

Chrome에서는 브라우저 내에서 직접 XPath 표현식을 테스트하고 가져올 수 있습니다.

웹페이지에서 특정 요소를 선택하고 싶다고 가정해 보세요. Chrome에서 해당 페이지를 방문한 후, 관심 있는 노드를 마우스 오른쪽 버튼으로 클릭하고 “검사:”를 선택하세요.

특정 DOM 요소를 마우스 오른쪽 버튼으로 클릭하고 “복사 > XPath 복사”를 선택하면 해당 요소에 대한 XPath 표현식을 얻을 수 있습니다. 위 예시에서는 다음과 같은 결과를 얻게 됩니다:

//*[@id="site-content"]/section[1]/div/div/div[1]/div[4]/a[1]

참고: 이는 효과적인 XPath 선택 전략을 구성하는 방법을 파악하는 데 유용합니다. 동시에 자동 생성된 XPath 표현식은 지나치게 길고 구현 중심적인 경향이 있습니다. 따라서 실제 운영 환경에서는 이를 신뢰할 수 없습니다.

이제 페이지에서 XPath 표현식을 테스트해야 합니다. Chrome에서는 두 가지 방법으로 테스트할 수 있습니다.

첫째, XPath 표현식을 개발자 도구(DevTools)의 “요소” 섹션 검색창에 붙여넣습니다( CTRL/Command + F로 활성화 가능).

둘째, 콘솔에서 특수 함수 $x()로 호출합니다:

CSS 선택자: 심층 검토

XPath 대 CSS 선택기 비교의 두 번째 요소인 CSS 선택기를 살펴보며 이 글을 계속해 보세요.

정의

CSS 선택기는 웹페이지 내 HTML 요소를 선택할 수 있게 합니다. CSS의 일부로, 웹페이지의 HTML 요소를 대상으로 사용됩니다. 마찬가지로 헤드리스 브라우저 도구와 HTML 파싱 라이브러리도 DOM에서 노드를 선택하는 방법으로 이를 지원합니다.

CSS 선택기는 ID, 클래스, 속성 및 문서 트리 내 위치를 기반으로 단일 요소 또는 요소 그룹을 대상으로 할 수 있습니다. CSS 선택기는 웹 페이지에 스타일과 서식을 적용하는 데 중요한 역할을 하는 동시에 웹 스크래핑에도 유용한 도구입니다.

구문

CSS 선택자의 구문을 설명하는 가장 좋은 방법은 몇 가지 예시를 통해 보여주는 것입니다:

• 요소 선택자: 태그 이름을 기반으로 요소를 타겟팅합니다. 예를 들어, p는 DOM 내 모든 <p> 요소를 선택합니다.
• 클래스 선택자: 특정 클래스 속성을 가진 요소를 대상으로 합니다. 예를 들어, .highlight는 class="highlight <other_classes>" HTML 속성을 가진 모든 요소를 선택합니다.
• ID 선택자: ID 속성을 가진 특정 요소를 대상으로 합니다. 예를 들어, #navbar는 id="navbar" 속성을 가진 요소를 선택합니다.
• 속성 선택자: 속성을 기반으로 요소를 타겟팅합니다. 예를 들어, input[type="text"]는 type="text" 속성을 가진 모든 <input> 요소를 선택합니다.
• 하위 선택자: 다른 요소의 하위 요소를 대상으로 합니다. 예를 들어, div a는 <div> 요소의 하위 요소인 모든 <a> 요소를 선택합니다.
• 자식 선택자: 다른 요소의 직접 자식인 요소를 대상으로 합니다. 예를 들어, ul > li는 <ul> 요소의 직접 자식인 모든 <li> 요소를 선택합니다.
• 인접 형제 선택자: 지정된 형제 요소가 바로 앞에 있는 요소를 대상으로 합니다. 예를 들어, h2 + p는 <h2> 요소의 바로 뒤에 오는 <p> 요소를 선택합니다.

각 브라우저마다 CSS 표준 구현 방식이 다르다는 점을 유의하십시오. 특정 CSS 연산자나 구문의 호환성 정보는 caniuse.com 같은 사이트에서 확인하세요.

장점

• 뛰어난 성능: 대부분의 브라우저는 전용 CSS 선택기 엔진을 갖추고 있어 높은 성능을 보장합니다. 이 엔진은 주로 스타일링에 사용되지만, 브라우저 자동화 도구를 통해 페이지에서 CSS 선택기를 사용할 때도 유용합니다.
• 빠른 학습: 직관적인 구문 덕분에 CSS 선택자를 숙달하는 데 걸리는 시간이 매우 짧습니다. 초보자도 쉽게 익힐 수 있습니다.
• 간편하고 널리 알려진 구문: 복잡한 연산자나 함수를 포함하지 않는 간결한 구문을 가집니다. 또한 대부분의 웹 개발자가 사용법을 알고 있어 스타일링 외에도 다양한 용도로 활용할 수 있습니다.
• 뛰어난 유지보수성: CSS 선택기는 읽기 쉽고 업데이트하기 쉽게 설계되어 코드 유지보수를 단순화합니다.
• 전반적인 호환성: 최신 웹 브라우저와 최고의 웹 스크래핑 도구가 이를 지원합니다. 이는 환경별 해결책 없이도 다양한 플랫폼, 기기 및 사용 사례에서 일관된 노드 선택을 보장합니다.

단점

• 고급 함수 및 연산자 미지원: XPath와 달리 CSS 선택기는 상당히 직관적이며 다양한 함수나 연산자를 제공하지 않습니다. 예를 들어 텍스트 노드 선택이나 DOM에서 데이터 추출이 불가능합니다.
• 상향 DOM 트리 탐색 미지원: 루트 노드에서 시작하여 하향으로만 DOM 내 요소를 검색할 수 있습니다.

팁과 요령

XPath의 경우와 마찬가지로, Chrome은 페이지에서 직접 CSS 선택자를 테스트하고 생성할 수 있습니다.

특정 노드를 대상으로 하는 CSS 선택자를 작성하려는 경우를 가정해 보겠습니다. Chrome에서 대상 페이지를 방문한 후 관심 있는 요소를 마우스 오른쪽 버튼으로 클릭하고 “검사”를 선택하세요:

특정 DOM 요소를 마우스 오른쪽 버튼으로 클릭하고 “복사 > 선택자 복사”를 선택하면 해당 요소에 대한 전체 CSS 선택자를 얻을 수 있습니다. 위 예시에서는 다음과 같은 결과를 받게 됩니다:

#site-content > section.cta.bg-dark.pt-7.pt-md-8.pt-lg-9.pt-xl-10.pb-6.pb-xl-7.text-center > div > div > div.cta_btns.d-flex.flex-wrap.g-2.justify-content-center.justify-content-md-center > a

보시다시피 너무 길고 구현 방식에 따라 달라집니다. 아이디어를 얻는 데는 유용하지만, 이 함수로 생성된 CSS 선택자를 실제 운영 환경에서 사용하지 마십시오.

웹페이지에서 CSS 선택자를 테스트해야 한다고 가정해 보겠습니다. Chrome에서는 이를 수행하는 몇 가지 방법이 있습니다.

첫 번째 방법은 아래와 같이 검색창에 CSS 선택자를 붙여넣는 것입니다. 검색창은 CTRL/Command + F 단축키로 활성화할 수 있습니다:

두 번째 방법은 콘솔에서 다음과 같은 특수 함수를 사용하여 테스트하는 것입니다:

• $(): 지정된 CSS 선택자로 단일 요소를 선택합니다.
• $$(): 일치하는 모든 요소를 선택합니다.

다음 예시처럼 사용하세요:

동등하게 JavaScript의 querySelector() 및 querySelectorAll() 함수를 사용할 수 있습니다:

XPath 대 CSS 선택자: 직접 비교

이제 XPath와 CSS 선택기가 무엇인지 알았으니, XPath 대 CSS 선택기 분석을 살펴볼 준비가 되었습니다.

한눈에 비교해 보려면 아래 요약표를 확인하세요:

단순성

XPath 구문은 일반적으로 CSS 선택자에 비해 훨씬 복잡해 보입니다. 경로 기반 쿼리 언어와 유사한 구문으로, 익숙하지 않은 개발자에게는 학습 곡선이 가파릅니다. 그러나 XPath는 요소 선택과 탐색에 대한 정밀한 제어를 제공합니다.

DOM 요소 선택에 있어 CSS 선택기는 일반적으로 더 간단하고 직관적입니다. 태그 이름, 클래스, ID와 같은 익숙한 패턴을 사용하므로 초보자도 쉽게 이해하고 사용할 수 있습니다. CSS 선택기는 웹 개발에서 널리 채택되어 구문이 매우 친숙합니다.

속도

벤치마크에서 보듯이, 브라우저의 DOM 트리에 적용된 XPath 표현식은 CSS 선택자보다 느린 경향이 있습니다. 그 이유는 XPath 엔진이 일반적으로 CSS 선택자 엔진보다 더 복잡한 탐색 작업을 수행해야 하기 때문입니다. 또한 대부분의 최신 브라우저는 고도로 최적화된 CSS 선택자 엔진을 갖추고 있어 HTML 요소를 효율적으로 선택할 수 있습니다. HTML 파싱 라이브러리의 경우 성능 차이는 기본 구현에 따라 달라집니다.

사용 사례

XPath는 XSLT를 사용한 XML 문서 쿼리 및 탐색이나 간단한 데이터 추출에 탁월합니다. 특히 부모 노드를 대상으로 하는 경우와 같은 특정 스크래핑 시나리오에서 고급 기능이 유용할 수 있습니다. CSS 선택자는 주로 HTML 문서 스타일링과 현대적인 웹 스크래핑 스크립트에서 노드 선택에 사용됩니다.

결론

XPath와 CSS 선택기 중 선택? 본 가이드에서 XPath와 CSS 선택기가 모두 DOM 요소 선택에 효과적인 방법임을 확인했습니다. XPath는 XML 문서에 더 중점을 두고 고급 기능을 제공하는 반면, CSS 선택기는 HTML 페이지에서 탁월하게 작동하며 더 단순합니다.

웹 스크래핑에서 XPath 표현식과 CSS 선택자를 사용할 때 진정한 문제는 봇 방지 기술에 차단되는 것입니다. 어떤 노드 선택 전략을 채택하든, 이러한 시스템은 자동화된 스크래핑 스크립트를 탐지하고 차단할 수 있습니다. 다행히 Bright Data는 여러분을 위한 몇 가지 최상급 솔루션을 제공합니다:

• 웹 스크레이퍼 API: 수십 개의 인기 도메인에서 구조화된 웹 데이터에 프로그래밍 방식으로 접근할 수 있는 사용하기 쉬운 API입니다.
• 스크래핑 브라우저: CAPTCHA 처리, 브라우저 지문 인식 방지, 자동 재시도 등을 처리하면서 자바스크립트 렌더링 기능을 제공하는 클라우드 기반 제어 가능 브라우저입니다. Playwright 및 Puppeteer와 같은 가장 인기 있는 자동화 브라우저 라이브러리와 통합됩니다.
• 웹 언락커: 모든 페이지의 원시 HTML을 원활하게 반환하여 모든 스크래핑 방지 조치를 우회하는 언락킹 API입니다.

웹 스크래핑 자체는 다루고 싶지 않지만 온라인 데이터에는 여전히 관심이 있으신가요? 바로 사용 가능한 데이터셋을 살펴보세요!