인터넷에 고양이 검색해서 결과물로 나온 이미지를 내려받자

1. 고양이짤 수집하기
160717

2. 스크래핑이란?
• 웹 사이트에서 정보를 추출하는 행위
• 검색엔진이 이를 이용해서 사용자에게 정보를 보여줌

3. 웹 동작 방식
Server
Client
Request
- url
- header
- data
Response
- HTML
- Resource(img, css, js)
HTML 렌더링

4. 목표
수집
수집

5. 방법
• Python으로 scraper 프로그램 작성
• 동작 순서
1. Google 검색창에 검색어 입력
2. Image Result 페이지의 HTML 문서를 Download
3. DOM 구조 분석
4. Scrapy로 img의 href를 가져오고, file system을 이용해서 다운로드

6. 손으로 해보기
• 검색

7. 손으로 해보기
• 결과 url 분석

8. 손으로 해보기
• https://www.google.co.kr/?gws_rd=ssl#q=cat
• 위에서 q 값만 바꿔서 request 해주면 그에 맞는 response를 받
음

9. 손으로 해보기
• 이제 cat 검색 결과에 따른 이미지 페이지의 url을 보자

10. 손으로 해보기
• https://www.google.co.kr/search?q=cat&biw=1920&bih=947&s
ource=lnms&tbm=isch&sa=X&ved=0ahUKEwip_KeozerNAhWKnp
QKHaIpAU4Q_AUIBigB
• 이미지 페이지에서도 똑같이 q 값에 따라 결과물이 나온다.

11. 손으로 해보기
• 이제 이미지 페이지의 DOM 구조를 파악해보자
• 많은 브라우저가 개발자 도구를 지원한다.
• 나는 여기서 Chrome의 개발자 도구를 이용해서 파악하였다.

12. 손으로 해보기
1. 클릭
2. 클릭
3. <img> 태그의 src 확
인

13. 손으로 해보기
• DOM 구조
<div class=“rg_di rg_el ivg-I”>
<a class=“rg_l” href=“…”>
<img class=“rg_i” src=“…” name=“…”>
<div class=“_aOd rg_ilm>
<div class=“rg_ilmbg>
<span class=“rg_ilmn>

14. 손으로 해보기
• <a>
• <a jsaction="fire.ivg_o;mouseover:str.hmov;mouseout:str.hmou"
class="rg_l" style="width: 222px; height: 179px; left: 0px;"
href="/imgres?imgurl=https%3A%2F%2Fi.ytimg.com%2Fvi%2FtntOCGkgt
98%2Fmaxresdefau…biw=1920&amp;ved=0ahUKEwjCzN-
ezurNAhVBp5QKHRyECrkQMwgfKAMwAw&amp;iact=mrc&amp;uact=8"
wrc_done="true">
• A 태그의 class는 rg_l이고 href값을 가지고 있다.

15. 손으로 해보기
• <img>
• <img data-sz="f" name="sKYUQsX9cMoQ0M:" class="rg_i" alt="cat에 대
한 이미지 검색결과" jsaction="load:str.tbn"
onload="google.aft&amp;&amp;google.aft(this)"
src="data:image/jpeg;base64,/9j…rF1JEAempDF1JEAZJJJYB//2Q=="
style="width: 239px; height: 179px; margin-left: -17px; margin-right:
0px; margin-top: 0px;">
• img 엘리먼트의 class는 rg_i이고 src값을 가지고 있다.

16. • 여기까지 문제점
• A 태그의 href를 주소창에 입력하면 아무것도 나오지 않음
• Img 태그의 src를 주소창에 입력하면 상당히 작은 이미지만 보임
• 이렇게 
• 고화질 이미지 저장을 위해서는 다른 방법이 필요
손으로 해보기

17. 손으로 해보기
• 이미지 썸네일(?)을 클릭하면 더 큰 이미지를 볼 수 있음
1. 클릭

18. 손으로 해보기
• 큰 이미지의 url를 분석하자.
• https://www.google.co.kr/search?q=cat&biw=1920&bih=947&sourc
nms&tbm=isch&sa=X&ved=0ahUKEwip_KeozerNAhWKnpQKHaIpAU
AUIBigB#imgrc=sKYUQsX9cMoQ0M%3A
• 진한 부분까지는 구글의 이미지 페이지 url과 동일하다.
• 청록색 부분이 새로운 부분이다.
• #imgrc : ID 이름인것 같다.
• sKYUQsX9cMoQ0M : <img> 태그의 name 값과 동일하다.
• %3A : 모르겠다. 빼고 url에 입력하면 다시 생김
• 결론 :: #imgrc=“여기에 name값 넣어주면 됨＂

19. 손으로 해보기
• 동작 순서 재정리
1. 검색어 입력 (ex: cat)
2. 구글로 검색
3. 결과 중에서 img 파일이 있는 페이지의 url 저장
4. url#imgrc=name 으로 request
5. 큰 이미지 페이지 response
6. DOM 구조 분석
7. Scrapy로 img의 src를 가져오고, file system을 이용해서 다운로드

20. 손으로 해보기
1. 클릭
2. 클릭
3. <img> 태그의 src 값
확인

21. 손으로 해보기
• DOM 구조
<div class="irc_c">
<div class="irc_t">
<div class="irc_pgb">
<div class="progress-bar-thumb">
<div class="irc_mic">
<div class="irc_pb">
<a class="irc_pbl">
<span class="irc_pbi">
<div class="irc_mimg irc_hic">
<a class="irc_mil">
<img class="irc_mi" src="여기에 img url 있음">
Path :: .irc_c .irc_t .irc_mic .irc_mimg .irc_mil .irc_mi

22. 실전
• DOM 구조 파악을 했으니 python으로 프로그램을 작성해보자.
• 귀찮으니 c9.io에서 Django workspace를 생성해서 여기다 작업
• 사용 패키지 ( 없으면 설치할 것 )
• Scrapy
• BeautifulSoup
• Requests
• Random
• Urllib

23. BeautifulSoup
• HTML이나 XML파일에서 데이터를 추출하는 Python 언어용 라이브러리
• HTML이나 XML파일을 개발자가 원하는 파서로 파싱해서 개발자가 언하는
결과를 뽑아낼 수 있도록 도와준다.
• 얘는 데이터에 특화
• Scrapy는 크롤링에 특화

24. HTML 문서 다운로드
• 일단 url로 검색이 제대로 되는지 확인을 위해 HTML 문서를 저장
해봄

25. 이미지 name 추출
• img_name = sel.css(‘.rg_di rg_l rg_i::attr(name)’).extract()
• Name을 가져오지 못함
• Requests로 긁어온 문서에는 name 값이 존재하지 않음

26. 다시 확인
다운받은
HTML
목표
아까와는 다른 DOM 구
조

27. 삽질 원인
• TED는 DOM 구조를 숨기지 않음
• 당연히 구글도 그럴거라 생각
• 의심하지 않았기 때문에 시간 낭비를 하게됨

28. 저장
• HTML 문서가 가지고 있는 DOM 구조
• #ires > table > tbody > tr:nth-child(1) > td:nth-child(1) > a > img
<img src=“여기 값 추
출”>

29. 폴더에 저장
• 웹에서 파일을 다운로드 하는데 urllib 라는 모듈을 쓴다.
• urllib 가지고 2가지 방법으로 다운로드 할 수 있다.
1. urllib.urlretrieve(fileUrl, fileName)
2. urllib.urlopen(fileUrl) 이걸 읽어다가 write 하면됨
• 여기서 1번을 이용하기로 함

30. 코드

31. 결과
img폴
더
*.py
열어본 이미
지

32. 결과

33. 결과

34. 결과
ㅜㅜ 야옹아 표정이 왜그러니

35. 문제
• 구글에서는 원래 Search API를 제공해 왔었으나 11년도 부터는
지원X
• FYI "The Google Image Search API has been officially
deprecated as of May 26, 2011. It will continue to work as per
our deprecation policy, but the number of requests you may
make per day may be limited. We encourage you to use the
Custom Search API, which now supports image search." so don't
use it for anything important as it probably won't be around
much longer.
• Custom Search API사용을 권함

36. ???

37. Custom Search API

38. Custom Search API

39. Custom Search API

40. Bing에 검색
• Search
• “http://www.bing.com/images/search?q=“ + input + “&FORM=HDRSC2”
• 위 url을 이용해서 HTML 긁어온 후 DOM 구조 분석
• Script에 따라서 DOM 구조가 바뀌기 때문에 크롤링하는 입장에서 긁은 후 분석 해야함

41. Bing.html
다운받은 HTML
목표 고양이
들

42. Bing.html
1. 클릭
2. 클릭 3. <img> 태그의 href값
확인
4. 엘리먼트 DOM
구조

43. Bing.html
row 당 4
개
row 7개

44. Bing.html
• DOM 구조
<div class=“content">
<div class=“row">
<div class=“item">
<a class=“thumb“ href=“이미지”>
<div class=“item">
<div class=“item”>
<div class=“item”>
Path :: .content .row .item .thumb
…

45. 코드

46. 동작은 되는데 많이 느리다
• sudo pip install gevent
• gevent.pool.map을 이용해서 동시성 작업으로 시간 단축!
• 근데 안됨
• gevent 문서봐도 잘 모르겠음

47. 결과
img폴
더
*.py
큰 이미지

48. 결론
• 구글이나 네이버에서는 웹 페이지를 다운 받으면 DOM 구조가
바뀜
• 내부적으로 script 코드가 원인인거 같음
• 내가 웹 프로그래밍에 대해 아는게 1도 없다는걸 느낌

49. 웹 크롤링 이슈
• 웹 데이터 저작권
• 사이트의 크롤링 정책

50. 저작권
• 저작권법 허용
 단순 링크 – 사이트 대표 주소를 링크
 직접 링크 – 특정 게시물을 링크
• 저작권법 위반
 프레임 링크 – 저작물의 일부를 홈페이지에 표시
 임베드 링크 – 저작물 전체를 홈페이지에 표시

51. 로봇 배제 표준
• url/robots.txt
• 웹 사이트에 로봇이 접근하는 것을
방지하기 위한 규약

52. 끝