CSS 선택자
CSS 선택자는 웹 개발자가 스타일시트에 작성하는 것과 같은 구문을 사용하므로 프런트엔드 경험이 있다면 직관적으로 느껴집니다. 태그 이름, 클래스, ID, 속성, 다른 요소와의 관계를 기준으로 요소를 선택합니다. 예를 들어div.product-card h2는 product-card 클래스가 있는 div 안의 모든 h2 요소를 선택합니다. CSS 선택자는 일반적으로 더 짧고 읽기 쉬우며 브라우저에서 더 빠르게 평가됩니다. 단순한 추출 작업 대부분에서 더 나은 기본 선택입니다.
XPath
XPath는 더 강력하지만 더 장황합니다. HTML 문서를 트리로 취급하고 모든 방향으로 탐색할 수 있습니다. 부모에서 자식으로 내려갈 뿐 아니라 부모로 올라가고, 형제 요소로 옆으로 이동하고, 문서 전체를 가로지를 수 있습니다. 특히 XPath는 텍스트 콘텐츠를 기준으로 요소를 선택할 수 있습니다. 예를 들어//a[contains(text(), "Next Page")]와 같은 선택은 CSS 선택자로 할 수 없습니다. 따라서 레이블로 버튼을 찾거나 표시된 내용을 기준으로 표 셀을 찾는 작업에는 XPath가 꼭 필요합니다. XPath는 조건, 함수, 복잡한 조건자도 지원하여 특수한 페이지 구조를 더욱 유연하게 표현할 수 있습니다.
어떤 방식을 선택해야 하나요?
둘 사이의 절충점은 단순성과 유연성입니다. CSS는 대부분의 일반적인 사례를 더 깔끔하게 처리합니다. HTML 구조가 복잡하거나, 텍스트 기반 매칭이 필요하거나, 원하는 요소를 직접적인 부모가 아니라 형제 또는 조상과의 관계로만 식별할 수 있을 때는 XPath를 사용하세요.안정적인 선택자 작성
어떤 언어를 사용하든 안정성은 다음과 같은 몇 가지 원칙에 달려 있습니다.- 자동 생성된 클래스 이름을 피하세요. React, Vue, Angular 같은 프레임워크는 빌드할 때마다 바뀌는 클래스 이름을 생성하는 경우가 많습니다.
.css-1a2b3c와 같은 이름은 언제든 문제를 일으킬 수 있습니다. - 의미 있는 속성을 우선하세요.
id,data-*,role,aria-label은 스타일 지정 외의 의미도 가지므로 변경될 가능성이 작습니다.[data-product-id]를 기준으로 하는 선택자는 스타일시트가 다시 작성되어도 유지되지만.flex-row__inner--lg를 기준으로 하는 선택자는 그렇지 않습니다. - 선택자를 짧게 유지하세요. 부모-자식 관계의 연결이 길수록 중간 레이아웃 변경으로 전체 연결이 깨질 가능성이 커집니다.
- 위치 기반 선택자를 피하세요.
nth-child와/html/body/div[3]/div[2]/ul/li[1]같은 절대 XPath 경로는 요소가 DOM의 정확한 위치에 계속 있다고 가정하지만 실제로 그런 경우는 거의 없습니다. - 가장 가까운 안정적인 기준점에 연결하세요. 문서 루트에서부터 탐색하지 말고 의미 있고 안정적인 식별자가 있는 가장 가까운 요소를 찾은 다음 이를 기준으로 선택하세요.
Shadow DOM의 과제
선택자와 관련해 새롭게 부상하는 장애물 중 하나는 Shadow DOM입니다. Shadow DOM은 닫힌 경계 안에 DOM의 한 구역을 캡슐화하는 웹 컴포넌트 기능입니다. 표준 XPath와 CSS 선택자는 shadow root 안으로 들어갈 수 없으므로 웹 컴포넌트 내부 요소가 기존 스크래핑 방식에는 보이지 않습니다. 모듈형 UI를 위해 웹 컴포넌트를 채택하는 사이트가 늘면서 이는 실질적인 문제가 되고 있습니다. 스크래퍼에는 컴포넌트의 외부 골격만 보이고 그 안에서 렌더링된 콘텐츠는 보이지 않을 수 있습니다. 해결하려면 shadow root를 통과할 수 있는 도구가 필요합니다. Playwright는 표준 선택자에>> 구문을 추가해 이를 지원하고, Octoparse는 같은 기능을 하는 사용자 지정 구문으로 XPath를 확장합니다. 따라서 생성된 선택자는 일반 DOM 하위 트리를 지정하듯 shadow root 안까지 접근할 수 있습니다.
Octoparse의 선택자 처리 방식
Octoparse는 주로 XPath를 사용하여 요소를 지정하며 이는 의도적인 선택입니다. XPath의 트리 탐색 모델은 비개발자가 페이지 구조를 바라보는 방식과 자연스럽게 맞아떨어집니다. “이 상품 카드 안의 가격”은 CSS 선택자 연결보다 XPath 표현식으로 더 직접적으로 옮길 수 있습니다. 따라서 개발자가 아니더라도 무언가 바뀌었을 때 선택자를 쉽게 검토하고 조정할 수 있습니다. 더 중요한 점은 사용자가 요소를 클릭할 때 Octoparse가 단순히 작동하는 XPath를 아무 것이나 생성하지 않는다는 것입니다. Octoparse는 지능형 속성 우선순위 알고리즘을 적용합니다. 시스템은 의미적 안정성을 기준으로 사용 가능한 속성을 평가합니다.id, data-*, role 같은 의미 있는 식별자를 변경되기 쉬운 클래스 이름이나 취약한 위치 인덱스보다 우선합니다. 자동 생성된 XPath는 사소한 사이트 변경에도 유지되도록 설계되었습니다. 두 번째 섹션 안의 세 번째 div를 가리키는 경로가 아니라 안정적인 data-product-id 속성에 연결된 선택자는 레이아웃 재배치나 스타일시트 업데이트에도 깨지지 않습니다.
이 알고리즘은 Octoparse 10.1.0에서 처음부터 다시 구축되어 자동 생성 선택자의 정확도를 최고 수준으로 끌어올렸습니다. 대부분의 페이지에서 생성기가 첫 번째 클릭만으로 정확하고 안정적인 XPath를 생성하므로 사용자가 선택자를 직접 수정하는 시간이 줄어듭니다.
웹 컴포넌트로 구축된 페이지의 경우 같은 생성기가 Octoparse의 Shadow DOM용 사용자 지정 XPath 확장 기능을 사용하는 선택자를 생성합니다. 따라서 다른 선택자 문법으로 전환할 필요 없이 일반 DOM 요소와 같은 방식으로 shadow root 안의 요소를 지정할 수 있습니다.
Octoparse는 새로운 생성기에 두 가지 AI 기능을 추가합니다.
- 더 넓은 페이지 맥락을 평가하여 더욱 안정적인 선택자를 생성하는 AI 지원 XPath 생성
- 깨진 선택자를 감지하고 변경된 페이지 구조를 바탕으로 다시 만드는 AI 기반 자동 복구(출시 예정). 이동하거나 이름이 바뀐 “다음” 컨트롤 같은 페이지 넘기기 선택자와 레이아웃 안에서 위치가 달라진 값 같은 필드 선택자를 모두 복구하여 원래라면 중단될 작업을 계속 실행합니다.