원하는 데이터를 긁어오는 크롤링의 핵심, 태그와 속성
크롤링 핵심, 태그와 속성 이해하기
크롤링에서 가장 중요한 것은 HTML 태그와 그 속성을 이해하는 겁니다. 태그와 속성을 쉽게 이해하려면 우리 주변의 주소 체계와 집 구조, 방을 생각하면 됩니다. 비유하면 다음과 같습니다.
URL은 주소와 같습니다.
HTML은 건물의 설계도와 같습니다.
태그는 방의 종류에 해당합니다. (거실, 침실, 주방 등)
속성은 방에 붙인 이름표에 해당합니다. (첫째 아들 방, 첫째 딸 방, 손님용 침실 등)
비유 자체는 별로 어렵지 않을 겁니다. 그럼 실제 사이트를 살펴보면서 이 비유를 다시 되짚어가며 이해하겠습니다.
웹사이트에서 검사 도구로 태그와 속성 눈으로 찾아보기
01 크롤링 학습에 적합하면서도 구조가 간단한 다음 사이트에 접속해봅시다. 여러분이 주소를 입력해서 사이트에 접속한 것 자체가 집에 찾아간 겁니다.
quotes.toscrape.com
02 집에 들어가서 우리가 원하는 정보를 찾으려면 무엇부터 해야 할까요? 바로 설계도를 먼저 보는 겁니다. 설계도에 해당하는 HTML도 마찬가지입니다. [F12]를 눌러 개발자 도구를 열고 [Elements] 탭을 누르면 여러분이 보는 웹사이트의 설계도인 HTML을 볼 수 있습니다.
이제 우리가 할 일은 설계도 안에서 화면의 원하는 요소를 찾는 겁니다. 현실의 설계도에는 거실, 안방과 같은 것들이 있습니다. 만약 거기에 이름을 붙여두었다면 ‘첫째 딸 방’ 같은 이름이 붙어 있겠죠? 거실은 모든 집에 다 있습니다. 하지만 첫째 딸 방과 같은 이름은 가족 구성원에 따라 다르죠. HTML도 비슷합니다. div, span과 같은 태그는 거실, 안방과 같은 방 구조 명칭과 같고, 첫째 딸 방과 같은 이름은 속성으로
와 같이 이름을 붙입니다.
03 화면에서 원하는 구성 요소에 마우스 커서를 올리고 마우스 오른쪽 클릭을 한 다음 ➊ [검사]를 눌러보세요. 그러면 여러분이 선택한 요소의 위치를 개발자 도구의 ➋ [Elements] 탭에서 확인할 수 있습니다. 저는 아인슈타인의 명언을 [검사]로 찾아봤습니다.
05 요소를 크게 확대해서 볼까요? 아인슈타인의 명언은 이런 태그와 속성으로 이름이 지어져 있는 곳에 들어 있네요.
태그 이름은 span이고, 속성은 class와 itemprop이 있는데 각 값을 “text”라고 해두었습니다. 쉽게 말해 span이라는 방에 이름을 2개 붙여둔 겁니다. 이때 태그는 열린 태그와 닫힌 태그가 한쌍입니다. 그리고 이것들이 겹쳐져 HTML 문서의 구조를 만듭니다. 중첩된 태그 가장 안쪽에는 데이터가 들어 있죠. 그리고 속성은 열린 태그 안에 들어 있는 속성 이름 = “값”과 같은 형태를 띕니다. 속성은 보통 태그의 의미를 더하는 역할을 합니다. 다음 그림을 보면 쉽게 이해가 될 겁니다.
열린 태그 을 보면 id=“gold_price”라는 속성이 들어 있습니다. span은 큰 의미는 없지만 텍스트를 묶어 두는 역할을 합니다. 여기에 id=“gold_price”라는 속성을 더해 묶은 텍스트의 의미를 더했습니다. HTML 문서는 이런 방식으로 구성됩니다.
06 중첩된 태그를 펼쳐서 살펴보겠습니다. 왼쪽에 보이는 [▶] 버튼을 눌러서 펼치면 그 방안에 들어 있는 구조를 볼 수 있습니다. 실제로 명언이 들어 있습니다.
이렇게 웹사이트에는 HTML로 만든 설계도가 있고, 우리가 원하는 데이터를 태그와 속성이라는 방에 잘 넣어둔다는 걸 알았습니다. 그럼 이제 이것을 가져오는 방법만 알아보면 됩니다!
내가 원하는 데이터는 어떻게 가져올 수 있을까?
이제 데이터가 있는 위치를 설명할 방법이 필요해지는 순간입니다. 눈으로 데이터가 어디에 있는지는 확인했지만 이것을 어떻게 설명할 수 있을까요? 아마 현실이라면 이렇게 이야기할 수 있을 겁니다.
```white
서울시 송파구 올림픽로 111의 아파트 101동 101호의 첫째 딸 방에 있는 서랍 속에 쪽지가 있어!
```
이렇게 이야기하면 누구나 쪽지를 찾을 수 있겠죠. 웹사이트에서 데이터의 위치를 이야기하는 것도 마찬가지입니다. 이렇게 이야기합니다.
```white
“www.quotetoscraple.com의 body > div > div:nth-child(2) > div.col-md-8 > div:nth-child(1) > span.text에 아인슈타인의 명언이 있어!”
```
좀 암호같긴 합니다. 하지만 의미를 따져보면 이해가 되는 말입니다. body > div와 같은 태그 사이에 있는 >는 ‘그 안에 있는’이라는 표현입니다. 그래서 결국은 우리가 말하는 주소 체계와 비슷합니다. 하지만 이런 암호같은 데이터의 위치를 우리가 직접 쓸 수는 없습니다. 하지만 한방에 이 데이터의 위치를 만드는 방법이 있습니다. 그 방법을 함께 실습하며 알아봅시다.
데이터의 위치를 한방에 알아오는 방법
01 [Elements] 탭에서 찾은 데이터에 마우스 오른쪽 클릭을 하고 [Copy] 메뉴를 보면 데이터의 위치를 복사할 수 있는 다양한 메뉴가 있습니다. 여기서 사용한 방법은 [Copy Selector]입니다. 데이터의 위치를 표현하는 방법은 아주 많은데 저는 이 책에서는 [Copy Selector]만 사용합니다.
02 [Copy Selector]를 누르면 여러분이 알고 싶은 데이터의 위치를 클립보드에 복사해줍니다. 텍스트 편집기에 붙여넣어 확인해보세요.
에이전트에게 명언 데이터 가져오라고 하기
이제 남은 일은 이 데이터의 주소를 이용해서 값을 가져오라고 하는 겁니다. 바로 해봅시다.
01 커서에서 새 폴더를 만들어 연 뒤 에이전트 채팅 창을 열고 다음과 같이 부탁합니다. 앞에서 배운 그대로 부탁하면 됩니다.
[나] : www.quotetoscraple.com에서 body > div > div:nth-child(2) > div.col-md-8 > div:nth-child(1) > span.text 위치에 있는 텍스트를 추출한 다음 txt 파일로 만들어 저장해줘.
[AI] : 웹사이트에서 텍스트를 추출하기 위해 브라우저 도구를 사용하겠습니다. 먼저 사용 가능한 브라우저 도구들을 확인하겠습니다.
...생략...
완료했습니다!
quotes.toscrape.com에서 지정한 CSS 선택자 위치의 첫 번째 명언 텍스트를 추출했습니다:
> "The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking."
이 텍스트를 quote.txt 파일로 워크스페이스에 저장했습니다.
결과를 보면 명언이 저장된 텍스트 파일이 만들어졌습니다. 이처럼 여러분이 원하는 데이터의 위치를 알려주면서 데이터를 가져오라고 하면 크롤링을 할 수 있습니다. 이런 지시를 수백 개를 자동화하면 많은 데이터를 크롤링할 수 있겠죠?
기본적인 크롤링 방법은 알았습니다. 이제 남은 일은 연습입니다. 아, 그 전에 크롤링을 하기 전에 여러분이 꼭 알아야 할 내용을 이야기하겠습니다. 바로 크롤링할 때 주의해야 할 점들입니다.
크롤링, 막 해도 되는 것일까?
크롤링에 관심이 있어 여러 커뮤니티를 찾아보면 종종 ‘크롤링을 하고 싶어요’, ‘크롤링은 어떻게 하나요?’와 같은 질문을 자주 볼 수 있습니다. 실제로 크롤링은 잘 활용하면 업무 효율을 크게 높여줍니다.
하지만 크롤링하려는 데이터는 누군가의 자산이라는 점을 항상 생각해야 합니다. 예를 들어 여러분이 공들여 만든 데이터로 웹사이트를 만들어서 서비스를 하는데, 누군가 무단으로 데이터를 크롤링해서 그것으로 장사를 한다면 얼마나 속상할까요? 그래서 학습 목적이 아닌 크롤링은 대부분 문제가 될 소지가 있습니다. 물론 학습 용도라 하더라도, 크롤링은 행위 자체가 사람이 아닌 봇이 서버에 계속 요청을 보내는 행위로 해당 사이트에 부하를 줄 수 있습니다. 즉 크롤링은 유용하지만 데이터를 소유하는 사람에게 피해를 주지 않도록 책임감 있게 사용해야 하는 도구라는 점을 반드시 기억하기 바랍니다.
<1:1 코칭!> 엄밀히 말하면 여러분이 하고 싶은 건 크롤링이 아닙니다
여러분이 정말 하고 싶은 게 크롤링일까요? 아닙니다. 크롤링은 엄밀히 말해서 사이트를 이동하며 탐색하는 행위를 말합니다. 데이터를 긁어서 수집하는 행위를 스크래이핑Scraping이라고 해야 맞습니다. 예를 들어 특정 주식 사이트의 오늘의 주식 데이터를 긁어오는 행위는 크롤링이 아니라 스크래이핑입니다. 하지만 대부분의 사람들이 두 개념을 구분하지 않고 데이터를 수집하는 행위에 크롤링이라는 단어를 사용하기 때문에 이 책에서도 편의상 크롤링이라는 표현을 사용하겠습니다.
[마무리 요약]
웹사이트는 HTML이라는 설계도로 이루어져 있습니다.
개발자 도구의 요소 선택 기능을 활용해 원하는 데이터가 담긴 태그와 속성을 찾아낼 수 있습니다.
크롤링은 서버에 지속적인 요청을 보내는 행위이므로 사이트에 부하를 줄 수 있습니다. 따라서 학습 목적이라 하더라도 서버에 무리를 주지 않도록 주의하고, 데이터 소유권과 관련된 법적, 도덕적 책임을 항상 인지해야 합니다.