lazy load되는 컨텐츠 안정성있게 크롤링하기

상황 및 문제

프로젝트에 사용할 데이터를 확보하기 위해서 디올 공식 홈페이지에 있는 상품을 크롤링했다.

디올은 스크롤 다운할 때마다 동적으로 지연 로딩되는 방식으로 구현되어있다.

이에 따라 디올 홈페이지의 최하단까지 스크롤 다운하고, 원하는 요소를 모두 가져오는 방식으로 크롤링을 진행하였다.

 

하지만 매번 프로그램을 실행할 때마다 가져오는 로딩된 요소의 수가 불안정했다.

예를 들어 정상적으로 로딩된 요소는 다음과 같이 구성되어있다.

<div class="lazyload-wrapper "><div class="DS-Card MuiBox-root mui-style-11cdi2h" ...

 

하지만 로딩되지 않은 요소를 살펴보니 다음과 같았다.

<div class="lazyload-wrapper "><div class="lazyload-placeholder"></div></div>

 

해결 시도 1

lazy loading되는 요소를 충분히 기다리기 위해서 스크롤다운 할 때마다 기다리는 시간을 추가하고, 최하단까지 내려갔을 때도 Time Wait을 걸었다.

await page.wait_for_timeout(3000)

 

하지만 아무리 시간을 길게 걸어도, 문제는 해결되지 않았다.

 

결과

결국에는 스크롤 다운할 때마다 div 태그의 클래스 이름이 lazyload-placeholder인 요소가 있으면 처음으로 돌아가서 다시 스크롤 다운하는 방법으로 해결했다.

 

만약 playwright을 사용한다면 다음과 같은 코드를 사용할 수 있다.

async def scroll_to_bottom(page):
    previous_height = await page.evaluate('document.body.scrollHeight')

    while True:
        # 스크롤을 가장 아래로 내림
        await page.evaluate('window.scrollTo(0, document.body.scrollHeight)')
        # 스크롤 후 페이지 로드 대기 (네트워크 요청 등)
        await page.wait_for_timeout(1000)

        # 현재 높이를 다시 가져옴
        new_height = await page.evaluate('document.body.scrollHeight')

        # lazyload-placeholder가 있는지 확인
        placeholders = await page.query_selector_all("div.lazyload-placeholder")

        if placeholders:
            print("lazyload-placeholder가 감지되었습니다. 위로 스크롤합니다.")
            await page.evaluate('window.scrollTo(0, 0)')
            await page.wait_for_timeout(1000)

            # 다시 최하단으로 스크롤
            await page.evaluate('window.scrollTo(0, document.body.scrollHeight)')
            await page.wait_for_timeout(1000)
        else:
            print("모든 콘텐츠가 로드되었습니다.")
            break

        # 더 이상 스크롤할 수 없으면 종료
        if new_height == previous_height:
            break

        previous_height = new_height

 

느낀점

솔직히 이 해결 방법이 좋은 방향이라고 단정 지을 수는 없지만, 일단 더 찾아봐도 더 나은 방법을 찾아볼 수는 없었다.

후에 나의 실력이 더 늘어나면 보다 넓은 시야로 바라볼 수 있기를 바래본다.