액션 스크립트로 상품 이미지 정보 추출하기

오늘도 웹 사이트에서 제품 정보를 수집하느라 몇 시간을 보내셨나요? 일잘러들은 모두 알고 있다는 웹 스크래핑 툴 리스틀리로 간편하게 웹 데이터를 수집해보세요!

웹 사이트에서 일부 정보를 의도적으로 숨겨 놓는 경우, 혹은 이미지 정보 추출이 불가능할 때, 리스틀리의 액션 스크립트 서비스를 활용해 해결하는 방법에 대해 말씀드리려고 해요. 오늘의 예제 웹 사이트는 스페인 가죽 명품 브랜드인 로에베 (Loewe) 입니다.

로에베 웹 사이트에서는 리스틀리 전체 (LISTLY WHOLE) 버튼을 클릭해 웹 사이트 데이터를 추출하고자 할 경우, 아래와 같이 제품 이미지가 정상적으로 나타나지 않습니다. 이와 같이 기본적인 리스틀리 기능으로 데이터 추출이 어려운 경우, 리스틀리 팀에서는 액션 스크립트 서비스를 제공하고 있어요.

해결 방법은 굉장히 간단합니다. 데이터 보드로 이동해 설정 (ADD SETTING) 버튼을 클릭한 뒤, 액션 스크립트 (ACTION SCRIPT) 창에 첨부된 액션 스크립트를 복사해 붙여넣어주면 됩니다.

listly_action_end = false;


let sleep = (t) => {
   return new Promise(resolve=>setTimeout(resolve,t));
}
       

async function custom_action() {

    // CUSTOM_ACTION - START
    // Replace the Thumbnail Blob src with link src
    thumbnail_elements = document.querySelectorAll("#js-image-container > div.swiper-container.js-pdp-images-swiper > div.swiper-wrapper > div > picture");
    

    for (let te of thumbnail_elements) {
        img_element = te.querySelector("img");
        link_element = te.querySelector("link");
        
        if (img_element == null || link_element == null) {
            break
        } else {
            img_element.src = link_element.href;
        }

        await sleep(200);

    }
    
        
    // CUSTOM_ACTION - END
    
}



async function process() {

    console.log("process function started");
    
    await custom_action();

    console.log("process function finished");

    listly_action_end = true;
}


process();

데이터 재추출 (REFRESH) 버튼을 클릭해 데이터를 다시 추출해주면, 정상적으로 이미지 정보를 추출하실 수 있어요. 참고로 이미지 정보를 엑셀로 다운받을 경우, 이미지가 아니라 이미지에 접근할 수 있는 주소가 추출됩니다. 이미지를 바로 다운받아 엑셀로 정리하고 싶으시다면, 이미지 다운로드 프로그램을 이용해주세요!

https://www.freedownloadmanager.org/ (해당 프로그램은 리스틀리 자사 서비스가 아닙니다.)

잠깐! 각각의 웹 사이트는 서로 다른 웹 구조를 가지고 있기 때문에, 리스틀리 팀에서 문제를 파악하고 해결하기까지 며칠이 소요될 수도 있습니다. 그렇기 때문에 리스틀리 도움말 과 블로그에서 웹 스크래핑 팁과 다양한 고객 사례를 제공하고 있으니, 먼저 확인해보시는 것을 추천드려요. 그래도 해결되지 않는 사례는 언제든지 리스틀리 팀으로 문의해주세요!