분석하는 마케터

크롤링을 처음 시작할 때 무턱대고 예시 코드만 보고 시작했다가 다른 사이트에서 크롤링을 시도하게 되면 자꾸 오류만 나고 헤매었던 경험, 크롤링 초보라면 낯설지 않을겁니다.

HTML 기초 필수 지식을 익히신다면, 크롤링 예시 코드가 왜 그렇게 구성되어있나!! 하는 것들을 좀 더 잘 익히실 수 있을 겁니다.
실제로 크롤링을 활용해보고 싶은 초보 크롤러분들께 필요한 HTML 기초 필수 지식을 담았습니다.

 

웹페이지에서 데이터 찾기

지난 포스팅에서 언급한 바와 같이 데이터 수집(크롤링)은

1. 우리가 원하는 내용을 감싸고있는 태그를 찾아
2. 태그가 가지고 있는 데이터를 찾는 것입니다.

그러면 이제 웹페이지의 HTML 문서를 확인하여 문서에서 우리가 원하는 데이터를 찾기 위해, 데이터를 감싸고 있는 대그를 찾는 방법을 알아보겠습니다.

아래의 '카페 메뉴판' 파일을 다운로드 후 실행시키면 제가 지난 포스팅에서 예시로 보여드렸던 카페 메뉴판 웹페이지로 이동합니다. (바이러스가 절대 없음을 보장합니다!! 안심하시고 다운받으셔도 됩니다!)

 

menu.html

0.00MB

 

 

크롬에서 웹 페이지의 HTML 구조를 보려면, 키보드에서 F12버튼을 눌러 개발자 도구를 실행한 후 Elements 탭(또는 요소 탭)에서 확인하면 됩니다.

 

위에서 보았던 카페 메뉴판 페이지의 HTML 문서가 나오는 것을 확인할 수 있습니다.

 

위의 사이트에서 우리가 만약 '에이드 메뉴의 가격들을 수집하고 싶다'면 방법은 쉽습니다.

HTML문서가 짧기 때문에 바로 에이드 메뉴의 가격들을 확인할 수 있습니다.

 

 

그러나 일반 웹페이지의 경우는 어떨까요?

네이버 쇼핑에서 '휴대폰'을 검색한 결과 중 가장 상단에 노출되는 제품명을 찾고싶다고 가정해 보겠습니다.

(해당 페이지로 링크)

 

F12를 눌러 개발자 도구를 킨 후 HTML 문서를 확인합니다.

 

HTML문서에 대한 엄청난 스크롤의 압박... 심지어 문서에서 접힌 부분을 다 편 것도 아닙니다. (반도 안 폈습니다.)

 

엄청나게 긴 길이의 HTML 문서가 등장하는데요, 여기서 가장 첫 번째 제품의 제품명을 찾는 것은 말 그대로 사막에서 바늘 찾기일 겁니다.

다행히도 개발자 도구에는 우리가 원하는 데이터를 빨리 찾을 수 있도록 하는 기능을 제공하고 있습니다.

 

개발자 도구의 좌측 위에 우리를 구원해 줄 버튼이 있습니다.

 

 

바로 개발자 도구의 왼쪽 위에 보이는 이 버튼입니다.

저 버튼을 클릭하고 우리의 목표인 첫 번째 상품의 상품명을 클릭해줍니다.

 

이제 HTML 문서에서, 우리가 클릭한 부분이 연한 회색으로 하이라이팅 되어 나타납니다.

 

 

혹은, 웹사이트에서 원하는 데이터를 우클릭한 후, 검사를 클릭해도 우리가 원하는 바를 쉽게 확인할 수 있습니다.

선택된 부분을 보면, <a> </a>로 감싸진 부분에서 우리가 목표한 첫 번째 상품의 상품명 데이터를 확인할 수 있습니다.

 

 

 

 

해당 태그를 우클릭 후 복사(Copy) > selector 복사(Copy selector)를 통해 해당 HTML 문서에서 우리가 찾고자 하는 데이터를 지정할 수 있습니다.

 

#next > div > div.style_container1YjHN > div.style_inner__18zZX > div.style_content_wrap__1PzEo 
> div.style_content__2T20F > ul > div > div:nth-child(1) > li > div > div.basicList_info_area__17Xyo > div.basicList_title__3P9Q7 > a

↑ 도대체 뭔지 모르겠는 이상한 알파벳들과 숫자들만 가득한 이것을 selector라고 합니다.

 

---

앞의 두 포스팅에서는 HTML이란 무엇인지, 웹사이트의 HTML 문서를 확인하는 방식에 대해 알아보았습니다.

Selector와 크롤링에서 Selector가 어떻게 쓰이는지에 대해서는 다음 포스팅에서 더욱 자세하게 다루도록 하겠습니다.