[R 크롤링] 2. 웹페이지의 html 소스코드 보는 법

도구 R로 하는 크롤링

2. 웹페이지의 html 소스코드 보는 법

 

 

 

교보문고의 베스트셀러 순위 중 1위를 크롤링으로 가져오고 싶다고 해봅시다. 먼저 교보문고 홈페이지에 들어갑시다. 메뉴에 보시면 '베스트' 라는 버튼이 있습니다. 이 버튼을 클릭하면 분야종합베스트 화면으로 이동합니다. 

 

 

김미경의 리부트가 현재 1위입니다. 

 

 

우리가 가져오고 싶은 것은 '김미경의 리부트'라는 글자입니다. 우리가 인터넷에서 보고 있는 모든 글자들은 html 이라는 언어로 되어 있습니다. 나중에 크롤링을 통해 가져올 정보도 html 코드에서 가져오는 것입니다. 어떤 웹페이지의 화면을 구성하는 html 코드를 확인하는 방법은 두가지가 있습니다. 오늘 그 방법을 알아볼 것입니다. 

 

먼저 첫번째 방법입니다. 우클릭을 하고 페이지 소스보기를 클릭합니다. html 소스코드가 새 탭에 출력될 것입니다. Ctrl+F를 누르고 '김미경의 리부트'를 클릭하면 아래와 같이 html 소스코드 형태로 입력되어 있는 것을 확인할 수 있습니다. (여러분이 이 글을 읽으실 때는 다른 책이 1위를 하고 있을 확률이 높은데, 해당 책으로 검색하시면 됩니다.)

 

 

 

새로 열리 탭의 위쪽에 보시면 URL 을 알 수 있습니다. 이 URL에 접근하여 화면을 구성하고 있는 html 소스코드를 가져올 수 있습니다. 웹페이지 화면에 나타나는 정보는 위와 같은 html 소스 코드 형태로 가져옵니다. 이후에는 html 소스 코드의 '형식'을 이용하여 우리가 원하는 정보를 추출해야 합니다. 

 

이번에는 html 소스코드를 확인하는 두번째 방법을 설명드리겠습니다. 다시 교보문고 '종합 주간 베스트' 화면으로 가서 우클릭을 하고 '검사'를 클릭합니다. 새 탭이 생기지 않고, 오른쪽에(혹은 아래 쪽에) 창이 하나 열립니다. 이 창을 구글개발자도구라고 합니다. 창의 위치를 바꾸는 방법은 오른쪽위에 x 표시 왼쪽에 있는 점세개를 클릭하고 Dock side 에서 원하는 위치를 선택해주면 됩니다. 

 

 

Elements 탭이 기본으로 선택되어 있고, html 코드가 보입니다. 

 

 

첫번째 방법의 소스코드와 다른 점은 html 의 구조를 한눈에 볼 수 있다는 것입니다. 아주 유용한 기능이 하나 있는데요. Elements 탭에서 왼쪽으로 두칸을 가면 화면에 마우스커서가 올라가있는 버튼이 있습니다. 이 버튼을 한번 클릭하고, 화면에 원하는 부분을 클릭하면, 그 부분이 html 코드 상에서 어느 부분에 있는지를 알려줍니다. 

 

 

웹크롤링은 웹페이지를 구성하는 HTML 코드에서 우리가 원하는 텍스트를 가져오는 것입니다. 웹크롤링의 절차는 아래와 같습니다. 

 

1) 어떤 정보를 가져올지 정합니다. 

2) 크롬개발자도구를 이용하여 우리가 가져오기 원하는 정보에 접근합니다.  

3) html 코드의 구조를 이용하여 원하는 정보를 어떤 로직으로 가져올지 정합니다. 

4) R을 이용하여 해당 URL 에 있는 html 코드를 전부 불러옵니다. 

5) 3에서 정한 로직을 이용하여 html 코드에서 원하는 정보만 추출합니다. 

 

다음시간에 위 절차를 실제로 적용해봅시다.