Ghost Cursor 웹 스크래핑: 인간과 유사한 자동화 가이드

이 가이드에서는 고스트 커서에 대해 알아봅니다. 튜토리얼을 완료할 때쯤이면 다음 질문에 답할 수 있게 될 것입니다.

Ghost Cursor란 무엇인가요?
Ghost Cursor는 어떤 도구와 호환되나요?
Ghost Cursor는 어떻게 사용하나요?
차단 해제 도구(프록시, 원격 브라우저 등)와 호환되나요?
고스트 커서는 언제 적합한 선택인가요?

고스트 커서란 무엇이며 왜 신경 써야 할까요?

Ghost Cursor는 Puppeteer용 플러그인입니다. 마우스 커서를 제어하고 더 인간적인 움직임으로 페이지 상호작용을 할 수 있게 해줍니다.

Puppeteer로 버튼을 클릭하면 커서가 즉시 버튼으로 이동하여 클릭합니다. 이는 매우 기계적입니다. 빠르고 효율적이지만, 웹 스크래핑 시 차단되는 주요 원인 중 하나입니다.

Ghost Cursor를 사용하면 페이지 상의 두 지점 사이에 무한한 점들을 가진 곡선을 생성합니다. 커서는 현재 위치에서 대상 요소까지 이 곡선을 따라 이동합니다. 이 곡선은 훨씬 더 인간적인 움직임을 보여줍니다.

시작하기

코딩을 시작하기 전에, 여러분이 자바스크립트에 대한 기본적인 이해를 갖추고 있다고 가정합니다. 먼저, 새 프로젝트 폴더를 생성하고 자바스크립트 프로젝트를 초기화해야 합니다.

아래 명령어는 새 폴더를 생성하고 프로젝트 디렉터리로 이동합니다.

mkdir your-ghost-cursor-project
cd your-ghost-cursor-project

npm init을 사용해 이 새 폴더를 NodeJS 프로젝트로 변환할 수 있습니다. 튜토리얼이므로 --y 플래그를 사용합니다. 라이선스 결정과 같은 프롬프트 설정이 필요하지 않습니다.

npm init --y

이제 종속성을 설치합니다. 아주 간단합니다 — 단 두 개뿐입니다.

npm install ghost-cursor puppeteer

기본 Ghost Cursor 사용법

아래 스크립트에서는 Ghost Cursor의 기본 사용법을 보여줍니다. 먼저 헤드풀 브라우저를 실행합니다. 필수 사항은 아니지만 Ghost Cursor의 동작을 직접 확인할 수 있습니다.

새 페이지를 생성한 후 installMouseHelper()에 전달합니다. 이렇게 하면 렌더링된 페이지 내에서 커서가 움직이는 모습을 볼 수 있습니다. 그런 다음 커서 객체를 생성합니다. 커서는 책의 위치를 파악한 후 클릭합니다.

마지막으로, 브라우저를 닫고 프로그램을 종료하기 전에 제품 페이지의 스크린샷을 찍습니다.

const puppeteer = require('puppeteer');
const { createCursor, installMouseHelper } = require('ghost-cursor');

// 이 함수는 런타임을 담당합니다
async function run() {

    // 헤드풀 브라우저를 실행하여 고스트 커서의 동작을 관찰합니다
    const browser = await puppeteer.launch({
        headless: false,
    });

    const page = await browser.newPage();

    // 커서가 움직이는 모습을 볼 수 있게 합니다
    await installMouseHelper(page);

    // 실제 커서 객체를 생성합니다
    const cursor = createCursor(page);    

    await page.goto("https://books.toscrape.com");

    //제품 포드 내 링크 찾기
    const book = await cursor.getElement("article[class='product_pod'] a");

    //위치 (x,y) 좌표 획득
    const location = cursor.getLocation(book);

    //좌표로 이동
    await cursor.moveTo(location);

    //책 클릭
    await cursor.click(book);

    //제품 페이지 스크린샷 촬영
    await page.screenshot({path: "book.png"});

    await browser.close();
}

run().catch(console.error);

Ghost Cursor의 사용 가능한 메서드

Ghost Cursor의 실제 동작을 확인했으니, 이제 개별 메서드들의 기능을 살펴보겠습니다. 각각은 스크래핑 도구 상자에 추가할 새로운 조각입니다.

`installMouseHelper()`

렌더링된 브라우저 내에서 마우스 움직임을 추적하기 위해 installMouseHelper()를 사용했습니다. 이 메서드는 커서가 작동하는 모습을 관찰할 수 있게 해줍니다. 커서 사용에 필수적인 기능은 아니며, 실행하려면 헤드풀 브라우저가 필요합니다. 유용한 도구라기보다는 새로운 디버깅 도구라고 할 수 있습니다.

// 유령 커서 동작 관찰을 위한 헤드리스 브라우저 실행
const browser = await puppeteer.launch({
    headless: false,
});

const page = await browser.newPage();

// 커서 이동 관찰 기능 활성화
await installMouseHelper(page);

`getElement()`

getElement() 는 Puppeteer의 page.$() 와 거의 동일하게 작동합니다. 실제로 일반 Puppeteer 요소를 다른 메서드에 전달했을 때 커서가 버그가 발생했지만 계속 작동했습니다. 페이지에서 요소를 찾을 때는 cursor.getElement()를 사용하는 것이 가장 좋습니다.

//제품 포드 내 링크 찾기
const book = await cursor.getElement("article[class='product_pod'] a");

`getLocation()`

요소를 찾은 후에는 종종 그 위치를 가져와야 합니다. 이 메서드를 사용하면 최소한의 코드로 페이지 내 모든 요소의 (x,y) 좌표를 가져올 수 있습니다.

// 위치 (x,y) 좌표 가져오기
const location = cursor.getLocation(book);

`move()`

move() 는 매우 편리한 메서드입니다. 선택자 객체나 페이지 요소를 move() 에 직접 전달하면 커서가 그 위치로 이동합니다 — 마치 사람이 하는 것처럼 자연스럽게.

//책으로 바로 이동
await cursor.move(book);

//책을 클릭
await cursor.click(book);

`moveTo()`

moveTo는 좌표를 커서에 직접 전달할 수 있게 해줍니다. 책으로 이동하는 대신 getLocation() 을 사용하고 그 출력을 moveTo()로 커서에 전달합니다.

//좌표로 이동
await cursor.moveTo(location);

//책 클릭
await cursor.click(book);

`scrollIntoView()`

때로는 커서를 객체 위로 직접 이동시키고 싶지 않을 수 있습니다. 단순히 페이지를 스크롤해야 할 수도 있습니다. scrollIntoView() 를 사용하면 선택자나 페이지 요소를 전달하고 해당 요소가 뷰포트 내에 표시될 때까지 스크롤할 수 있습니다.

//책이 뷰포트에 들어올 때까지 스크롤
await cursor.scrollIntoView(book);

//책 클릭
await cursor.click(book);

`scrollTo()`

scrollTo() 역시 매우 편리한 기능입니다. 상단(top), 하단(bottom), 좌측(left), 우측(right)을 전달할 수 있습니다. 자연스러운 언어로 스크롤 동작을 제어하세요. 인공지능(AI)은 필요 없습니다!

//페이지 상단으로 스크롤
await cursor.scrollTo('top');

//책 클릭
await cursor.click(book);

`scroll()`

scroll() 은 아마도 가장 기본적인 스크롤 동작일 것입니다. scroll()을 사용하면 (x,y) 좌표를 전달합니다 — getLocation() 기억하시나요? 그러면 커서가 뷰포트 내에 들어올 때까지 스크롤합니다.

//좌표로 이동
await cursor.scroll(location);

//책 클릭
await cursor.click(book);

고스트 커서의 일반적인 한계점

CAPTCHA: Ghost Cursor는 사용자를 더 인간처럼 보이게 할 수 있지만, 결국 스크래퍼를 제어하는 것은 여전히 사용자 본인입니다. 자세한 내용은 Top 10 CAPTCHA Solvers를 참고하세요.
퍼피티어: 고스트 커서는 공식적으로 퍼피티어만 지원합니다. 셀레니움이나 플레이라이트 같은 다른 헤드리스 브라우저에 비해 퍼피티어는 기능과 유지보수 측면에서 상당히 제한적입니다.
로컬 전용: Ghost Cursor는 로컬에서 실행되어야 합니다. 이는 차단 해제 옵션을 크게 제한합니다. Scraping Browser를 사용하면 자동화된 프록시 관리 및 CAPTCHA 해결 기능과 함께 원격 헤드리스 브라우저를 실행할 수 있습니다. 원격 브라우징을 지원하지 않기 때문에 Ghost Cursor는 사용 가능한 최고의 도구를 완전히 활용할 수 없습니다.

프록시 통합

Scraping Browser는 지원하지 않지만, Puppeteer는 로컬 프록시와 통합됩니다. Puppeteer는 기본 프록시 URL, 사용자 이름 및 비밀번호를 사용하는 표준 프록시 인증 방식을 따릅니다.

아래 코드는 모든 Puppeteer/Ghost Cursor 런타임에 맞게 조정할 수 있는 기본 스크립트를 제공합니다. 사용자 이름, 영역 이름 및 비밀번호를 반드시 본인 계정 정보로 교체하세요!

const puppeteer = require('puppeteer');
const { createCursor } = require('ghost-cursor');

async function run() {
    const browser = await puppeteer.launch({
        headless: false,

        args: [
            '--proxy-server=http://brd.superproxy.io:33335',
            '--ignore-certificate-errors'
        ]

    });

    const page = await browser.newPage();

    const cursor = createCursor(page);

    await page.authenticate({
        username: "brd-customer-<your-username>-zone-<your-zone-name>",
        password: "<your-password>"
    });

    await page.goto("https://ipinfo.io");

    await cursor.click("a[href='/what-is-my-ip']");


    await page.screenshot({path: "ipinfo.png"});


    await browser.close();
}

run().catch(console.error);

앞서 언급했듯이, Puppeteer와 Ghost Cursor를 사용하면 Scraping Browser 자체의 장점을 완전히 활용할 수 없습니다. 아래 분석은 위 스크레이퍼를 사용한 단일 실행의 비용을 보여줍니다. 비용은 정말 놀랍습니다.