Puppeteer로 웹 스크래핑하기: 단계별 가이드

스크롤할 때 콘텐츠를 불러오거나, 가격을 로그인 뒤에 숨기거나, 거의 매주 레이아웃이 바뀌는 웹사이트에서 데이터를 가져오려 해본 적이 있다면 그 고생이 얼마나 큰지 잘 아실 거예요. 이제 정적인 스크래퍼만으로는 더 이상 충분하지 않아요. 실제로 미국 투자 자문가의 이 대체 데이터 확보를 위해 웹 스크래핑에 의존하고 있고, 미국 소매업체의 는 경쟁사 가격 모니터링을 자동화하고 있어요. 그런데 핵심은 이겁니다. 그런 데이터의 상당수는 자바스크립트로 로드되고 사용자 상호작용 뒤에 숨겨진 동적 사이트에 있다는 점이에요. 바로 이런 상황에서 헤드리스 브라우저 자동화, 그리고 Puppeteer 같은 도구가 빛을 발합니다.

오랫동안 자동화와 AI 도구를 만들어 온 사람으로서, 그리고 세일즈와 운영팀을 위해 적지 않은 웹사이트를 스크래핑해 온 사람으로서, 저는 Puppeteer가 기존 스크래퍼가 놓치는 데이터를 얼마나 잘 끌어내는지 직접 봐왔어요. 하지만 비즈니스 사용자에게는 코딩 부담이 큰 장벽이 될 수 있다는 점도 잘 알고 있어요. 그래서 이 가이드에서는 Puppeteer 스크래퍼가 정확히 무엇인지, 웹 스크래핑에 어떻게 사용하는지, 그리고 처럼 더 간단한 AI 기반 노코드 웹 스크래퍼가 더 적합할 때는 언제인지까지 차근차근 설명해드릴게요.

Puppeteer 스크래퍼란? 간단한 개요

먼저 기본부터 살펴볼게요. 는 Google이 만든 오픈소스 Node.js 라이브러리로, 자바스크립트를 사용해 헤드리스 Chrome 또는 Chromium 브라우저를 제어할 수 있게 해줘요. 쉽게 말해, 웹페이지를 열고, 버튼을 클릭하고, 폼을 입력하고, 스크롤하고, 무엇보다 데이터를 추출하는 작업을 화면에 아무것도 띄우지 않고 수행하는 로봇을 갖는 것과 같아요.

Puppeteer가 특별한 이유는 무엇일까요?

• 동적 콘텐츠를 렌더링할 수 있어요. 즉, 실제 사용자처럼 자바스크립트가 로드될 때까지 기다립니다.
• 사용자 행동을 시뮬레이션할 수 있어요. 클릭, 입력, 스크롤은 물론 팝업 처리까지 가능해요.
• 전자상거래 목록, 소셜 피드, 대시보드처럼 상호작용 후에만 데이터가 나타나는 사이트를 스크래핑하기에 딱 좋아요.

다른 도구와 비교하면 어떨까요?

• Selenium: 브라우저 자동화의 원조예요. 다양한 브라우저와 언어를 지원하지만, 더 무겁고 다소 옛 방식에 가까워요. 크로스브라우저 테스트에는 훌륭하지만, Chrome/Node.js 프로젝트에서는 Puppeteer가 더 민첩해요.
• Thunderbit: 제가 가장 흥미를 느끼는 부분이에요. Thunderbit는 브라우저 안에서 작동하는 노코드 AI 기반 웹 스크래퍼예요. 스크립트를 작성하는 대신 “AI 필드 추천”만 클릭하면 AI가 어떤 데이터를 추출할지 알아서 판단해줘요. 코딩 없이 결과를 얻고 싶은 비즈니스 사용자에게 정말 잘 맞아요(이건 뒤에서 더 자세히 다룰게요).

한마디로 정리하면: Puppeteer = 코딩할 수 있다면 최대한의 제어. Thunderbit = 코딩하고 싶지 않다면 최대한의 편의성.

비즈니스 사용자에게 Puppeteer 웹 스크래핑이 중요한 이유

현실적으로 말해볼게요. 웹 스크래핑은 더 이상 해커나 데이터 과학자만의 일이 아니에요. 세일즈, 운영, 마케팅, 심지어 부동산 팀까지 웹 데이터를 활용해 한발 앞서가고 있어요. 그리고 중요한 비즈니스 정보가 동적 사이트 뒤에 숨겨져 있는 경우가 많기 때문에, Puppeteer는 이를 열어주는 핵심 열쇠가 되곤 해요.

실제 활용 사례를 보면:

그리고 이것도 빼놓을 수 없죠. 은 업무 시간의 4분의 1을 데이터 수집 같은 반복 작업에 쓰고 있어요. 웹 스크래핑으로 이를 자동화하는 건 있으면 좋은 수준이 아니라 경쟁 우위예요.

시작하기: Puppeteer 스크래퍼 설정하기

이제 본격적으로 해볼 준비 되셨나요? 자바스크립트를 조금 다룰 수 있다는 전제하에, 10분 안에 Puppeteer를 실행하는 방법을 알려드릴게요.

1. Node.js 설치하기
Puppeteer는 Node.js에서 실행돼요. 에서 최신 LTS 버전을 다운로드하세요.

2. 새 프로젝트 폴더 만들기
터미널을 열고 아래를 실행하세요:

1mkdir puppeteer-scraper-demo
2cd puppeteer-scraper-demo
3npm init -y

3. Puppeteer 설치하기

1npm install puppeteer

그러면 호환되는 Chromium 버전도 함께 다운로드돼요(약 100MB 정도예요).

4. 첫 번째 스크립트 만들기
scrape.js라는 파일을 만드세요:

1const puppeteer = require('puppeteer');
2(async () => {
3  const browser = await puppeteer.launch();
4  const page = await browser.newPage();
5  await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
6  const title = await page.title();
7  console.log('페이지 제목:', title);
8  await browser.close();
9})();

아래 명령으로 실행하세요:

1node scrape.js

“페이지 제목: Example Domain”이 보이면 축하해요. Chrome 자동화를 이미 성공하신 거예요!

첫 번째 Puppeteer 웹 스크래핑 스크립트 만들기

이제 실전으로 가볼게요. 예를 들어 에서 명언을 스크래핑하고 싶다고 해보죠(스크래퍼용 데모 사이트예요).

1단계: 페이지로 이동하기

1await page.goto('http://quotes.toscrape.com', { waitUntil: 'networkidle0' });

2단계: 데이터 추출하기

1const quotes = await page.evaluate(() => {
2  return Array.from(document.querySelectorAll('.quote')).map(node => ({
3    text: node.querySelector('.text')?.innerText.trim(),
4    author: node.querySelector('.author')?.innerText.trim(),
5    tags: Array.from(node.querySelectorAll('.tag')).map(tag => tag.innerText.trim())
6  }));
7});
8console.log(quotes);

3단계: 페이지네이션 처리하기

1let hasNext = true;
2let allQuotes = [];
3while (hasNext) {
4  // 위와 같이 명언 추출
5  const quotes = await page.evaluate(/* ... */);
6  allQuotes.push(...quotes);
7  const nextButton = await page.$('li.next > a');
8  if (nextButton) {
9    await Promise.all([
10      page.click('li.next > a'),
11      page.waitForNavigation({ waitUntil: 'networkidle0' })
12    ]);
13  } else {
14    hasNext = false;
15  }
16}

4단계: JSON으로 저장하기

1const fs = require('fs');
2fs.writeFileSync('quotes.json', JSON.stringify(allQuotes, null, 2));

이렇게 하면 탐색, 추출, 페이지 이동, 저장까지 수행하는 기본 Puppeteer 스크래퍼가 완성돼요.

고급 Puppeteer 스크래퍼 기법: 동적 콘텐츠 다루기

실제 웹사이트는 정적인 목록처럼 단순하지 않은 경우가 많아요. 까다로운 부분을 다루는 방법을 소개할게요.

1. 동적 요소가 로드될 때까지 기다리기

1await page.waitForSelector('.product-list-item');

이렇게 하면 가져오려는 콘텐츠가 준비된 뒤에 추출을 시작할 수 있어요.

2. 사용자 행동 시뮬레이션하기

• 버튼 클릭: await page.click('#load-more');
• 필드에 입력: await page.type('#search', 'laptop');
• 무한 스크롤 처리:

  1let previousHeight = await page.evaluate('document.body.scrollHeight');
  2while (true) {
  3  await page.evaluate('window.scrollTo(0, document.body.scrollHeight)');
  4  await page.waitForTimeout(1500);
  5  const newHeight = await page.evaluate('document.body.scrollHeight');
  6  if (newHeight === previousHeight) break;
  7  previousHeight = newHeight;
  8}

3. 로그인 처리하기

1await page.goto('https://exampleshop.com/login');
2await page.type('#login-username', 'myusername');
3await page.type('#login-password', 'mypassword');
4await page.click('#login-button');
5await page.waitForNavigation({ waitUntil: 'networkidle0' });

4. AJAX로 불러오는 데이터 다루기 때로는 데이터가 DOM에 있지 않고 API 호출로 가져와지기도 해요. 네트워크 응답을 가로채려면 아래처럼 하면 돼요:

1page.on('response', async response => {
2  if (response.url().includes('/api/products')) {
3    const data = await response.json();
4    // 데이터 처리
5  }
6});

실제 사례: 이커머스 사이트에서 상품 데이터 스크래핑하기

이제 모든 걸 합쳐볼게요. 로그인한 뒤 데모용 이커머스 사이트에서 상품명, 가격, 이미지를 스크래핑한다고 상상해보세요.

1const puppeteer = require('puppeteer');
2const fs = require('fs');
3(async () => {
4  const browser = await puppeteer.launch({ headless: true });
5  const page = await browser.newPage();
6  // 1단계: 로그인
7  await page.goto('https://exampleshop.com/login');
8  await page.type('#login-username', 'myusername');
9  await page.type('#login-password', 'mypassword');
10  await page.click('#login-button');
11  await page.waitForNavigation({ waitUntil: 'networkidle0' });
12  // 2단계: 카테고리 페이지로 이동
13  await page.goto('https://exampleshop.com/category/laptops', { waitUntil: 'networkidle0' });
14  // 3단계: 상품 추출
15  const products = await page.evaluate(() => {
16    return Array.from(document.querySelectorAll('.product-item')).map(item => ({
17      name: item.querySelector('.product-title')?.innerText.trim() || '',
18      price: item.querySelector('.product-price')?.innerText.trim() || '',
19      image: item.querySelector('img.product-image')?.src || ''
20    }));
21  });
22  // 4단계: JSON으로 저장
23  fs.writeFileSync('products.json', JSON.stringify(products, null, 2));
24  await browser.close();
25})();

이 스크립트는 로그인하고, 이동하고, 스크래핑하고, 저장까지 전부 자동으로 해줘요. 더 고급 기능이 필요하다면 페이지네이션 루프를 추가하거나, 각 상품 페이지를 눌러 더 자세한 정보까지 가져올 수도 있어요.

Thunderbit: AI로 Puppeteer 스크래퍼를 더 쉽게 만들기

여기까지 읽고 나서 “좋긴 한데, 새 데이터셋이 필요할 때마다 코드를 쓰고 싶진 않은데?”라고 생각하셨다면, 그건 아주 자연스러운 반응이에요. 바로 그래서 를 만들었어요.

Thunderbit가 다른 점은 무엇일까요?

• 코딩이 필요 없어요: 을 설치하고, 스크래핑할 페이지를 연 뒤 “AI 필드 추천”을 클릭하면 돼요.
• AI 기반 필드 감지: Thunderbit가 페이지를 읽고 “상품명”, “가격”, “이미지” 같은 추출할 최적의 열을 제안해줘요.
• 동적 콘텐츠 처리: 무한 스크롤, 팝업, 하위 페이지도 문제없어요. Thunderbit의 AI가 페이지네이션을 따라가거나 상품 상세 페이지까지 방문해 데이터를 더 풍부하게 만들어줘요.
• 즉시 내보내기: 한 번의 클릭으로 데이터를 Excel, Google Sheets, Notion, Airtable로 바로 보낼 수 있어요. 내보내기 추가 요금도 없어요.
• 인기 사이트용 템플릿: Amazon, Zillow, LinkedIn을 스크래핑하고 싶으신가요? Thunderbit에는 바로 쓸 수 있는 템플릿이 있어서 별도 설정이 필요 없어요.
• 클라우드 또는 브라우저 스크래핑: 대규모 작업의 경우, Thunderbit는 클라우드에서 한 번에 최대 50개 페이지를 스크래핑할 수 있어요.

저는 사용자가 “이 데이터를 얻고 싶다”에서 “여기 제 스프레드시트예요”로 바뀌는 과정을 5분도 안 돼 보는 경우를 여러 번 봤어요. 그리고 가장 좋은 점은, 웹사이트가 바뀔 때마다 스크립트가 깨질까 걱정할 필요가 없다는 거예요. Thunderbit의 AI가 그때그때 적응하니까요.

Puppeteer vs. Thunderbit: 적합한 웹 스크래핑 도구 고르기

그렇다면 어떤 도구를 써야 할까요? 팀 관점에서 이렇게 정리할 수 있어요.

결론적으로:

• Puppeteer를 사용하세요. 완전한 제어가 필요하고, 코딩 인력이 있거나, 스크래핑을 더 큰 앱에 통합해야 한다면요.
• Thunderbit를 사용하세요. 빠른 결과가 필요하거나, 코딩을 원하지 않거나, 비기술 팀원도 쉽게 쓰게 하고 싶다면요.

솔직히 말하면, 저는 팀들이 두 도구를 함께 쓰는 경우를 많이 봤어요. Thunderbit는 빠른 성과와 프로토타입에, Puppeteer는 깊은 통합이나 특수한 예외 처리에 유용하죠.

단계별 체크리스트: 성공적인 Puppeteer 웹 스크래핑 프로젝트 진행하기

제가 자주 쓰는, 매끄러운 Puppeteer 스크래핑 프로젝트 체크리스트를 공유할게요:

1. 목표를 정의하세요: 어떤 데이터가 필요하나요? 어디에 있나요?
2. 사이트를 분석하세요: 동적인가요? 로그인이 필요한가요? 봇 차단 장치가 있나요?
3. 환경을 설정하세요: Node.js, Puppeteer, 그리고 필요한 보조 라이브러리를 준비하세요.
4. 개념 증명부터 작성하세요: 한 페이지부터 시작해서 셀렉터를 정확히 맞추세요.
5. 동적 콘텐츠를 처리하세요: 필요에 따라 waitForSelector, 클릭/스크롤 시뮬레이션을 사용하세요.
6. 페이지네이션이나 반복문을 추가하세요: 한 페이지만이 아니라 전체 페이지를 스크래핑하세요.
7. 차단 방지 전략을 적용하세요: 지연 시간을 무작위로 주고, 실제 사용자 에이전트를 설정하고, 필요하면 프록시를 사용하세요.
8. 데이터를 내보내고 검증하세요: JSON/CSV로 저장하고, 누락 없이 수집됐는지 확인하세요.
9. 최적화하고 오류를 처리하세요: try/catch를 추가하고, 진행 상황을 기록하고, 누락된 데이터도 자연스럽게 처리하세요.
10. 모니터링하고 유지보수하세요: 사이트는 바뀌므로 스크립트를 업데이트할 준비를 해두세요.

문제 해결 팁:

• 셀렉터가 null을 반환하면 HTML을 다시 확인하고, 대기 로직을 사용하세요.
• 차단되면 속도를 늦추고, IP를 바꾸거나, 스텔스 플러그인을 사용하세요.
• 스크립트가 충돌하면 메모리 누수나 처리되지 않은 예외가 있는지 확인하세요.

결론 및 핵심 정리

웹 스크래핑은 이제 데이터 기반 팀에게 꼭 필요한 역량이 되었어요. Puppeteer는 JavaScript가 많은 동적 사이트에서도 데이터를 추출할 수 있는 강력한 도구예요. 다만 어느 정도 코딩 실력과 지속적인 유지보수는 필요해요. 반면, 코딩 없이 빠르게 데이터를 얻고 싶은 비즈니스 사용자에게는 Thunderbit가 빠르고 유연하며 생각보다 강력한 AI 기반 대안이에요.

제가 추천하는 방식은 이렇습니다:

• 기술 역량이 있고 깊은 커스터마이징이 필요하다면 Puppeteer로 시작하세요.
• 속도와 단순함, 낮은 유지보수를 원한다면 를 써보세요(부터 시작하면 좋아요).
• 대부분의 팀에게는 두 도구를 함께 쓰는 방식이 웹 데이터 요구의 99%를 충족해줄 거예요.

이런 가이드를 더 보고 싶으신가요? 튜토리얼, 비교 글, 그리고 최신 AI 기반 웹 스크래핑 소식은 에서 확인해보세요.

자주 묻는 질문

1. Puppeteer 스크래퍼란 무엇이고 웹 스크래핑에 왜 쓰이나요?
Puppeteer는 자바스크립트로 헤드리스 Chrome 브라우저를 제어할 수 있게 해주는 Node.js 라이브러리예요. 동적 콘텐츠를 불러오고, 사용자 행동을 시뮬레이션하고, 기존 스크래퍼가 처리하기 어려운 사이트에서도 데이터를 추출할 수 있어서 웹 스크래핑에 사용돼요.

2. Puppeteer는 Selenium과 Thunderbit와 어떻게 다른가요?
Selenium은 여러 브라우저와 언어를 지원하지만 더 무거워요. Puppeteer는 Chrome/Node.js에 맞게 최적화되어 있고 많은 스크래핑 작업에서 더 빠르죠. 반면 Thunderbit는 노코드 AI 도구라서 비기술 사용자도 몇 번의 클릭만으로 데이터를 스크래핑할 수 있어요.

3. Puppeteer 웹 스크래핑의 주요 비즈니스 이점은 무엇인가요?
데이터 수집을 자동화하면 시간을 절약하고, 오류를 줄이고, 세일즈·마케팅·운영 전반에 실시간 인사이트를 제공할 수 있어요. 활용 사례는 리드 생성부터 가격 모니터링, 시장 조사까지 다양해요.

4. Puppeteer 스크래핑의 가장 큰 어려움은 무엇인가요?
가장 큰 어려움은 동적 콘텐츠 처리, 봇 차단 회피, 웹사이트 변경 시 스크립트 유지보수예요. 기다리기, 상호작용 시뮬레이션, 오류 처리를 위해 코드를 작성해야 해요.

5. Puppeteer 대신 Thunderbit를 언제 사용해야 하나요?
코딩을 건너뛰고 싶거나, 빠른 결과가 필요하거나, 비기술 팀원도 사용할 수 있게 하고 싶다면 Thunderbit를 사용하세요. 일반적인 스크래핑 작업, 빠르게 끝내야 하는 프로젝트, 또는 Excel이나 Google Sheets로 최소한의 번거로움으로 데이터를 내보내고 싶을 때 이상적이에요.

더 똑똑하게 스크래핑하는 방법을 직접 써보고 싶으신가요? 하거나 에서 더 많은 가이드를 확인해보세요. 즐거운 스크래핑 되세요!

더 알아보기