Stage4 - 진짜 웹페이지에서 데이터 선택하기

이번 스테이지에서는 지난 스테이지에서 배운 선택자를 활용하여 진짜 웹페이지(네이버TV TOP 100: https://tv.naver.com/r)에서 1 ~ 100위까지 영상의 제목/채널명/재생 수/좋아요 수를 선택해봅시다.

네이버TV TOP 100 페이지

네이버TV 소스코드 뜯어보기

네이버TV에서 원하는 데이터를 수집하기 위해서는 먼저 소스코드를 뜯어볼 수 있어야합니다. 첫번째 스테이지에서 배웠던 것처럼 크롬브라우저에서 웹페이지 위의 빈 공간을 마우스 오른쪽 클릭하고 "페이지 소스보기"를 선택하면 네이버TV의 소스코드를 확인할 수 있습니다.

하지만 페이지 소스 보기 를 통해서 확인할 수 있는 HTML소스코드는 원하는 데이터를 찾기에는 너무 복잡하고 어렵습니다. 이 부분을 개선하기 위해서 구글 크롬브라우저는 개발자들을 위하여 페이지의 각 요소에 해당하는 소스코드를 쉽게 확인할 수 있는 개발자 모드를 제공하고 있습니다.

개발자 모드는 검사(Inspect)창이라고 부르고, 소스코드보기와 마찬가지로 웹페이지의 빈 공간을 마우스 오른쪽 클릭한 후 검사 버튼을 선택하면 브라우저의 오른 쪽에 페이지 소스 보기 를 선택했을 때와 비슷한 창을 확인할 수 있습니다.

검사창의 Elements 탭에서는 HTML소스를 확인할 수 있습니다. (이 때 확인할 수 있는 HTML 소스코드는 소스 코드 보기에서 확인할 수 있는 소스코드와는 조금 다릅니다. 이 부분은 6주차에 다시 한 번 다루도록 하겠습니다.)

그림1. 검사창의 소스코드 위에 커서를 올리면 해당하는 코드(태그)에 해당하는 부분이 파란 음영처리가 된다.
그림2. 검사창의 소스코드에서 ▸모양을 누르면 해당 태그의 자식들을 확인할 수 있다.

검사창을 활용하면 위와 같이 HTML 소스코드(태그)에 해당하는 웹페이지의 부분을 쉽게 확인할 수 있습니다. 예를 들어 그림 2. 에서 <div class='top_main'>에 해당하는 소스코드 위에 마우스 커서를 올리면 왼쪽 창에서 파란색으로 음영표시되는 부분이 바로 해당하는 소스코드에 해당하는 부분입니다. *tip)파란색으로 음영표시된 부분 위쪽 대화상자의 div.top_main은 해당 태그의 선택자입니다.

그리고 <div class='top_main'>의 좌측 ▸버튼을 누르면 <div class='top_main'>의 자식(직접 포함하고 있는 태그)들이 모두 표시되게 됩니다.

검사창의 기능을 이용하면, 소스코드 상에서 내가 원하는 데이터의 위치/선택자를 쉽게 찾아낼 수 있습니다.

네이버TV 인기영상 선택자 찾아내기(1 - 3위 영상)

네이버TV 인기영상 페이지는 1-3위 영상과 4-100위 영상이 분리되어 있다.

본격적으로 데이터 수집을 위한 선택자 찾기를 시작해 봅시다. 먼저 네이버TV의 인기 TOP100 영상은 1-3위 영상과 4-100위 영상이 구분되어 있습니다. (1-3위 영상의 디자인이 비슷하고, 4-100위 영상의 디자인이 비슷한 것을 통해 알 수 있습니다.)

1 - 3위 영상에 대한 제목/채널명/재생 수/좋아요 수에 대한 데이터를 선택할 수 있는 선택자는 함께 찾아보고, 4 - 100위 영상에 대한 제목/채널명/재생 수/좋아요 수에 대한 데이터를 선택할 수 있는 선택자는 스스로 찾아봅시다.

선택자 찾기: 영상 제목, 채널명, 재생 수, 좋아요

가장 먼저 영상제목을 데이터를 포함하고 있는 선택자를 찾아봅시다. 앞으로 원하는 선택자를 찾으려면 아래의 과정을 반복합니다.

  1. 내가 찾고 싶은 데이터가 웹페이지의 어디에 있는지 확인합니다.

  2. 검사(Inspect)창을 켜고 내가 원하는 데이터를 포함하고 있는 코드를 찾습니다.

  3. 해당하는 코드를 선택하는 선택자를 확인합니다.

  4. 검색을 통해 적절한 선택자를 골랐는지 확인합니다.

1. 내가 찾고싶은 데이터가 웹페이지의 어디에 있는지 확인합니다.

웹데이터 수집을 위하여 가장 먼저 해야하는 일은 내가 찾고 싶은 데이터가 웹페이지의 어디에 있는지 확인하는 것입니다. 웹페이지에서 데이터를 수집하는 것은 말 그대로 웹페이지 위에 있는 데이터를 수집하는 것이기 때문에 원하는 데이터가 웹페이지의 어느부분에 있는지 확인하는 것이 매우 중요합니다.

웹페이지 위에 4가지 데이터를 확인할 수 있다.

위와 같이 수집하고자하는 데이터의 정확한 위치를 먼저 확인합니다.

2. 검사(Inspect)창을 켜고 원하는 데이터를 포함하고 있는 코드를 찾습니다.

<body> 태그를 선택하는 경우
<div class='top_main'> 태그를 선택하는 경우
<div class='inner'> 태그를 선택하는 경우

위에서 연습한 것처럼 검사창을 활용하면 각 코드가 나타내는 웹페이지의 위치를 쉽게 확인할 수 있습니다. HTML 소스코드의 상하관계를 생각하며 원하는 데이터만을 선택하는 태그를 찾을 때까지 조금씩 범위를 좁혀갑니다.

3. 해당하는 코드를 선택하는 선택자를 확인합니다.

제목: dt.title strong.tit 채널명: dd.chn > a 재생 수: span.hit 좋아요 수: span.like

선택자는 위와 다를 수 있습니다. 원하는 어떤 방법이던 원하는 데이터를 선택할 수 있으면 됩니다. ex) 제목은 dt.title만 사용해도 선택할 수 있습니다.

그런데, 네이버 TV TOP100과 같이 한페이지에서 반복되는 여러가지 데이터를 수집할 때는 컨테이너를 함께 수집하여야합니다.

컨테이너는 수집하려는 한 단위의 데이터가 들어있는 주머니라고 생각하시면 됩니다. 컨테이너가 없는 경우 수집한 데이터들끼리 연결할 수 없는 경우가 발생하기 때문에 꼭 컨테이너를 찾아줘야합니다. 컨테이너에 대해서는 3주차에 다시 한 번 다루도록 하겠습니다.

컨테이너가 없는 경우 발생할 수 있는 문제

100개 영상에 대한 데이터를 수집했는데 3번 영상의 채널명 데이터가 빠져있는 경우, 수집한 데이터의 제목/채널명/재생 수/좋아요 수를 정상적으로 연결할 수 없다. (데이터수집 결과: 제목 100, 채널명 99, 재생 수 100, 좋아요 수 100)

컨테이너를 통해 데이터를 수집한 경우, 컨테이너를 기준으로 수집한 데이터를 연결할 수 있다.

1 - 3위 영상의 컨테이너(제목, 채널명, 재생수, 좋아요수 포함)의 선택자는 div.inner이다.

컨테이너를 포함한 데이터의 선택자

컨테이너: div.inner 제목: div.innerdt.title strong.tit 채널명: div.innerdd.chn > a 재생 수: div.innerspan.hit 좋아요 수: div.innerspan.like

4. 검색을 통해 적절한 선택자를 골랐는지 확인합니다.

선택자를 찾은 후에는 선택자가 정확히 내가 원하는 데이터만을 선택하고 있는지 확인해야 합니다. 1 - 3위 영상에 대한 데이터를 수집하여야하는데 선택자를 잘못 선택한 경우, 너무 많은 데이터가 선택되거나(필요없는 데이터를 선택하는 경우) 너무 적은 데이터가 선택(필요한 데이터를 선택하지 못하는 경우)될 수 있습니다.

검사창에서 element부분이 활성화된 상태에서 검색할 수 있습니다.
컨테이너(div.inner)를 검색하면 내가 원하는 3가지 영상만 선택됩니다.

검사창의 검색기능을 활용하면 손쉽게 선택자에 대한 검증을 할 수 있습니다. element부분이 활성화된 상태에서 검색창을 켜면(ctrl + 'F' / command + 'F') 선택자를 검색할 수 있습니다. 위에서 찾은 5가지 선택자가 모두 3개씩 검색되지 않았다면 원하는 데이터를 선택하는 선택자를 찾지 못한 것입니다.

꾸준한 연습이 필요합니다.

적절한 선택자를 찾는 것이 데이터 수집과정에서 가장 중요합니다. 웹페이지 안에서 원하는 데이터의 위치를 정확히 찾을 수 있어야 코딩을 통해서 데이터수집기를 만들어낼 수 있습니다. 평소에 자주 사용하는 홈페이지가 있다면 검사창을 열고 홈페이지의 구조를 이해하는 연습을 하는 것도 좋습니다!!