[6기 부산 정희록] Beautiful Soup #3

이번 포스트를 마지막으로 Beautiful Soup 에 대한 내용을 마무리 짓도록 하겠습니다.

 저번시간에는 간단하게 프리미엄 아울렛 행사이벤트 사진을 가져오는 것으로 간단하게 Beautiful Soup의 유용성에 대해 보여드렸습니다. Beautiful Soup와 Mechanize 파이썬 라이브러리를 이용하여 웹 페이지를 탐색, 탐색한 페이지를 얻어와서 태그의 속성을 이용하여 파싱을 한 후 원하는 처리를 쉽게 할 수 있습니다.

 이번시간에도 계속하여 특정 페이지의 원하는 사진이나 글을 얻어오는 방법을 보여드리겠습니다.

 먼저 나이x, 아디x스, 라x스테, 등의 메이커를 판매하는 신발 멀티샵의 신상들 이미지를 가져와보겠습니다.




 실제 모 홈페이지의 사진을 그대로 캡쳐해왔습니다. 여기에서 저희가 원하는 신발 신상품들의 이미지만 그대로 들고와 보겠습니다. 신발의 이미지를 들고오기 위에서는 신발의 그림이 있는 img 태그를 한번 분석해야 되는데요.. 개발자 도구를 통해 신발 이미지가 들어있는 img 태그를 한번 분석해 보겠습니다.


 크게 구조가 div-ul-li-a-img 순으로 되어 있습니다. <div>를 이용해서 컨텐츠들을 네모블럭칸에 잘 정렬시켜 주고 있으며, <ul>, <li>를 이용해서 테이블을 구조적으로 표현하고 있으며 <li> 태그 안의 링크를 위한 <a >태그안의 우리가 원하는 그림파일인 <img>태그가 들어있는 형식으로 구성되어 있습니다. 이미지 태그만 따로 빼서 분석을 해보면...


 img 태그안에 크게 width, height, alt, src 속성들이 있습니다. width, height는 따로 설명이 필요없이 다들 아시는 내용일테고, src 속성은 실제 이미지링크의 주소입니다. alt속성은 이미지를 대체할 설명이 들어가는 부분입니다.

 참고로 alt속성은 대부분의 웹 개발자가 간과하기 쉬운 부분인데 반드시 작성하는것을 추천드립니다. 우리나라같은 IT강국은 상관없겠지만 인터넷의 속도가 느려서 렌더링할때 오래걸린다던가... 시각장애인을 위한 텍스트전용 웹 브라우저나... 혹시 그림의 링크가 죽었을때 텍스트로 대신 표현해 주는 역할을 합니다... 이정도만으로도 alt 속성을 쓸 이유는 충분하지만 가장 큰 alt 속성의 역할은 바로 "수많은 검색 엔진은 그림에 대한 정보를 alt 속성을 읽어서 얻는다" 일 것입니다.

 다시 본론으로 들어가자면 img의 width 속성과 height 속성이 동일한것을 볼 수 있습니다. 우리가 원하는 이미지들이 동일한 속성값을 가지고 있으므로 Beautiful Soup를 이용하여 쉽게 파싱이 가능합니다.

간단하게 아래와 같이 스크립트를 짜보았습니다.


 앞서 Beautiful Soup #2 에서 설명드린 부분은 중복이라서 생략을 하고... 바뀐부분과 새로 추가된 부분 위주로 설명을 드리겠습니다. 먼저 Browser의 각종 handle을 set하는 부분이 있는데 당장 지금은 필요없지만 여러분들이 응용을 하기 위해선 각종 handle 값을 설정해야만 하는 경우가 있습니다. 순서대로 설명드리면...

cj = mechanize.LWPCookieJar()
br.set_cookiejar(cj)  
 이 부분은 혹시 로그인 정보를 유지해야될 필요가 있을때 쿠키를 이용해서 로그인 정보를 유지하게 해주는 방법입니다.

br.set_handle_equiv(True)
 이 옵션은 META HTTP-EQUIV 태그를 받는다는 속성입니다. 예를들면
<meta http-equiv="Refresh" content="60"> //이 속성이 있는 페이지라면 60초마다 새로고침이 되며..
<meta http-equiv="Pragma" content="no-cache"> //캐쉬가 되지 않게 바꾸는 헤더정보...
<meta http-equiv="Page-Enter" content="revealtrans(duration=1, transition=12)"> //페이지 들어갈때 효과!!

등등의 HTTP-EQUIV 태그를 처리할지 정해주는 옵션입니다. 이런 태그의 속성을 무시할려면 False로 처리해주면 됩니다.

br.set_handle_redirect(True)
 이 옵션은 대부분 감이 오시겠지만 특정 페이지에서 어떤 페이지로 바로 redirect를 시키는 코드가 있다면 redirect를 수행하는 속성입니다.

br.set_handle_referer(True)
 브라우저의 옵션이 referer속성을 가지게 합니다. 정확하게 말하자면 HTTP_REFERER 값을 가지면서 사이트를 탐색하게 합니다. 사이트에서 HTTP_REFERER 속성이 없다면 이는 불법침입이나 봇으로 의심할 우려가 있어서 제한을 걸어놓는 속성인데, HTTP_REFERER 속성은 이 사이트는 어디링크를 통해 왔는지 혹은 사이트내의 어디서 redirect로 넘어왔는지를 가지고 있는 변수입니다.

위와같은 handle을 셋팅하고 나서 스크립트를 실행하면 다음과 같이 img 태그들이 출력됩니다.


 <alt>속성과 <height>, <src>속성들이 보입니다. 단순히 이 출력값들을 파일에 저장해서 img 태그만 html파일로 만들면 하나의 웹페이지가 될 수 있습니다. 물론 링크가 걸려있지 않아 아무런 작동도 안하겠지만 한눈에 신상품을 볼 수 있는 화면이 나타나게 됩니다. 웹페이지로 만든 결과를 보면 아래와 같습니다.
 
 
 위에서 태그를 분석할때 <img>태그 바로 위에 <a> 태그가 있는 걸 알 수 있습니다. <a> 태그를 통해 이미지를 클릭했을 경우 다른 페이지로 redirect 하게 만들 수 있습니다. 실제로 지금은 <img> 태그 자체를 출력했지만 <img> 태그의 부모를 출력했을 경우 <a > 태그를 출력 할 수 있습니다.

Lst = soup.find_all('img', {"width" : "150"})
for lst in Lst:
    print repr(lst.parent)

이런식으로 <img> 태그가 들어있는 원소의 parent 를 출력하게 되면 아래와 같이 출력이 됩니다.

<a href="/v3/category/detail.php?goods_no=621833&amp;goods_sub=0&amp;wh=nw&amp;cd=001&amp;ar=list" onfocus="this.blur();"><img alt="뉴발란스 M990BG3 샌드 (NEW BALANCE M990BG3 SAND)" height="150" src="http://xxxx/20130201/621833/621833_a_150.jpg" width="150"/></a>
<a href="/v3/category/detail.php?goods_no=542679&amp;goods_sub=0&amp;wh=nw&amp;cd=001&amp;ar=list" onfocus="this.blur();"><img alt="뉴발란스 M990BK3 블랙 스카치 (NEW BALANCE M 990 BK3)" height="150" src="http://xxxx/goods_img1/20120619/542679/542679_a_150.jpg" width="150"/></a>
<a href="/v3/category/detail.php?goods_no=521423&amp;goods_sub=0&amp;wh=nw&amp;cd=001&amp;ar=list" onfocus="this.blur();"><img alt="뉴발란스 M990GL3 그레이(NEW BALANCE M 990 GL3)" height="150" src="http://xxxx/goods_img1/20120504/521423/521423_a_150.jpg" width="150"/></a>
<a href="/v3/category/detail.php?goods_no=575632&amp;goods_sub=0&amp;wh=nw&amp;cd=001&amp;ar=list" onfocus="this.blur();"><img alt="뉴발란스 M990NV3 네이비 (NEW BALANCE M 990 NV3)" height="150" src="http://xxxx/goods_img1/20120918/575632/575632_a_150.jpg" width="150"/></a>
<a href="/v3/category/detail.php?goods_no=555752&amp;goods_sub=0&amp;wh=nw&amp;cd=001&amp;ar=list" onfocus="this.blur();"><img alt="뉴발란스 W990BK3 검흰 스카치 (NEW BALANCE W 990 BK3 BLK/WHT)" height="150" src="http://xxxx/goods_img1/20120723/555752/555752_a_150.jpg" width="150"/></a>
<a href="/v3/category/detail.php?goods_no=521425&amp;goods_sub=0&amp;wh=nw&amp;cd=001&amp;ar=list" onfocus="this.blur();"><img alt="뉴발란스 W990GL3 그레이(NEW BALANCE W 990 GL3)" height="150" src="http://xxxx/goods_img1/20120504/521425/521425_a_150.jpg" width="150"/></a>

 실제로 저작권등의 이유로 상용화 프로그램을 만들순 없겠지만 Beautiful Soup를 활용하여 자신이 만든 홈페이지나 블로그를 효율적으로 관리할수 있으며, 자신만 사용할 수 있는 프로그램을 충분히 쉽게 만들 수 있습니다.^^

이상으로 Beautiful Soup의 포스트는 여기까지 하고 다음시간부터는 Python Image Library 인 PIL에 대해 포스팅을 하도록 하겠습니다.