[Python] 반응형 웹사이트 크롤링 예제 (웹툰, 쇼핑몰)

비동기 통신으로 설계된 페이지 크롤링 (웹툰, 쇼핑몰)

요즘은 반응형(responsive) 웹사이트가 많아지고, 다수의 상품이 진열되는 쇼핑몰 사이트의 경우, 특히 모바일의 경우 페이지 구조를 빠르게 로딩한 후 콘텐츠(상품 이미지 등)를 비동기식으로 채워 넣는 경우가 많습니다.

Selenium이란?

• 셀레니움 = 반복 작업을 자동화하는 툴입니다.
• 사람이 일반적으로 웹 브라우저를 이용하여 할 수 있는 행동들을 코드로 작성하면 selenium이 이 코드를 웹 브라우저에 전달하여 실행시킵니다.
• 참고 :
  • Selenium official docs : https://www.selenium.dev/documentation/
  • https://github.com/SeleniumHQ/seleniumhq.github.io/tree/trunk

셀레니움, 웹드라이버 설치

• 셀레니움 설치 : $ pip install selenium
• webdriver 설치 : https://chromedriver.chromium.org/downloads
  • 본인 컴퓨터 웹 브라우저의 버전에 맞는 것으로 설치 필요
  • 맥북 M1 칩의 경우 'arm'이 들어간 것으로 다운로드
  • 설치 후, m1 mac webdriver 해제 필요할 경우 터미널에 입력 : xattr -d com.apple.quarantine /path/to/chromedriver

코드 작성 방법

url = ' ' # url은 뺐습니다.
service = webdriver.chrome.service.Service('../chromedriver')  # 윈도우는 ../chromedriver.exe
# 웹드라이버 경로, 파일명 지정
driver = webdriver.Chrome(service=service)

driver.get(url)  # url 요청 받아서 응답 받은 데이터 (HTML 문서)
sleep(5)  # 비동기로 데이터가 그려질 시간을 기다리기 위해 일시정지!
soup = BeautifulSoup(driver.page_source, 'html.parser')  # 지금 그려진 페이지 parsing 

# 크롤링 코드




driver.close()

여기까지가 크롤링을 위한 틀이라고 생각할 수 있습니다. close 해주기 전에 원하는 크롤링 실행 코드를 적어주면 됩니다.

 

사실 저는 이 코드를 연습할 때 처음에는 중간에 일시정지를 왜 하는지에 대해 이해가 안 갔습니다. 그런데 비동기 통신으로 웹페이지의 콘텐츠가 그려지고 있다고 생각하니 쉽게 이해할 수 있었습니다.

 

쇼핑몰 데이터 크롤링 코드

실습에서 데이터 크롤링을 했던 것을 사용해서 온라인 쇼핑몰의 베스트 항목들을 크롤링할 수 있을까?
이 생각으로 한 번 시도해 봤습니다.
저는 평소 자주 사용하는 쇼핑몰의 베스트 페이지로 들어갔습니다. 크롬에서 cmd+opt+i를 눌러 개발자 도구로 확인해 보니 가능할 것 같아서 해보니..! 아래 사진과 같이 <span> 태그로 찾을 수 있겠더라고요!

개발자 도구 (cmd+opt+I)

(개발자 도구 상단 왼쪽에 화살표 모양 버튼을 클릭하고 웹페이지의 요소를 클릭하면 해당 요소의 태그를 찾을 수 있습니다. 저는 하나씩 클릭해보면서 어떤 항목을 어떤 클래스로 지정해 놓았는지 확인해서 아래의 코드에서 'soup.find(해당 태그)' 함수를 사용했습니다.)

 

저는 위의 틀로 만들었던 코드에 아래 코드를 추가해서 순위, 제품명, 가격 3가지 항목을 크롤링할 수 있었습니다.

item_list = soup.select('.box_listwrap')
items = soup.find_all('div', class_='list_conts_wrap')

for item in items:
    product = item.find('p', class_='text').text
    rank = item.find('span', class_='num').text
    price = item.find('em', class_='num').text

    print(f'{rank} 순위 : {product}, {price} KRW')

이렇게 코드를 추가하고 실행(Run)시키면 파이썬 실행창에 아래와 같은 결과를 얻을 수 있습니다: 

크롤링 실행 결과

 

요즘 나오는 가격 비교 플랫폼들도 이런 방법으로 크롤링해서 정보를 얻어 오는 것인지 궁금해지네요! 물론 저도 다른 목적 없이 공부만 하기 위한 것이었어서 문제가 되진 않을 것 같지만 법적으로 문제가 될 수 있으니 항상 주의하며 해야 하는 크롤링 끝!