Puppeteerスクレイパーによるウェブスクレイピング徹底ガイド

もし、스크롤할 때마다 콘텐츠가 로딩되는 웹사이트나, 로그인하지 않으면 가격이 안 보이는 페이지, 자주 레이아웃이 바뀌는 사이트에서 데이터를 뽑아보려고 한 적이 있다면 그 고생이 얼마나 심한지 잘 알 거야. 기존의 정적인 웹 스크래퍼로는 이제는 도저히 감당이 안 돼. 실제로 이 대체 데이터를 모으는 데 웹 스크래핑을 쓰고 있고, 가 경쟁사 가격을 자동으로 모니터링하고 있어. 하지만 이런 데이터 대부분은 JavaScript로 동적으로 보여지거나, 유저 액션 뒤에 숨어 있지. 여기서 활약하는 게 바로 헤드리스 브라우저 자동화, 그리고 Puppeteer 같은 툴이야.

나는 오랫동안 업무 자동화랑 AI 툴 개발을 해왔고(영업이나 오퍼레이션 팀을 위해 웹 스크래핑도 많이 해봤지), Puppeteer가 기존 웹 스크래퍼로는 못 뽑는 데이터까지도 잘 가져온다는 걸 몸소 느꼈어. 하지만 코딩의 번거로움이 비즈니스 유저에겐 큰 장벽이 된다는 것도 뼈저리게 느꼈지. 그래서 이번 글에서는 Puppeteer 웹 스크래퍼가 뭔지, 웹 스크래핑에서 어떻게 쓰는지, 그리고 더 간편한 대안——예를 들면 AI 탑재 노코드 ——도 같이 소개할게.

Puppeteer 웹 스크래퍼란? 한눈에 개념 잡기

일단 기본부터. 는 Google이 만든 오픈소스 Node.js 라이브러리로, JavaScript로 헤드리스 Chrome이나 Chromium 브라우저를 자유자재로 조작할 수 있어. 쉽게 말하면, 화면을 띄우지 않고 웹페이지를 열고, 버튼을 클릭하고, 폼 입력이나 스크롤, 데이터 추출까지 자동으로 해주는 ‘로봇’ 같은 존재지.

Puppeteer의 강점은?

• 동적 콘텐츠 렌더링이 가능해. JavaScript로 표시되는 내용도 실제 유저처럼 뽑아낼 수 있어.
• 유저 액션 재현: 클릭, 입력, 스크롤, 팝업 대응 등도 자유롭게 할 수 있지.
• 데이터가 조작 후에 나타나는 쇼핑몰, SNS, 대시보드 같은 곳에서 웹 스크래핑할 때 딱이야.

다른 툴과의 차이점은?

• Selenium: 브라우저 자동화의 원조. 여러 언어, 여러 브라우저 지원하지만 좀 무겁고 올드해. 크로스 브라우저 테스트엔 좋지만, Chrome/Node.js 환경에선 Puppeteer가 훨씬 가볍고 빨라.
• Thunderbit: 여기 주목! Thunderbit는 노코드, AI 탑재 웹 스크래퍼로, 브라우저에서 바로 돌아가. 스크립트 대신 ‘AI로 필드 제안’ 버튼만 누르면 AI가 추출 항목을 자동으로 잡아줘. 코드 몰라도 결과를 바로 얻을 수 있어서 비즈니스 유저에게 딱이야(자세한 건 아래에서 설명할게).

정리하면, **Puppeteer=최대 자유도(코딩 가능한 사람용), Thunderbit=최대 간편함(코드 없이 쓰고 싶은 사람용)**이야.

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

이제 웹 스크래핑은 해커나 데이터 사이언티스트만의 영역이 아니야. 영업, 오퍼레이션, 마케팅, 부동산 등 다양한 팀이 웹 데이터를 활용해 경쟁력을 높이고 있어. 특히 중요한 정보가 동적 사이트 깊숙이 숨어 있을 때, Puppeteer가 그 ‘열쇠’가 되는 경우가 많지.

실제 활용 예시 몇 가지를 볼게:

또한, 이 주당 1/4을 수작업 데이터 수집 등에 쓰고 있다는 조사도 있어. 웹 스크래핑 자동화는 이제 ‘있으면 좋은 것’이 아니라 ‘경쟁력의 핵심’이야.

Puppeteer 웹 스크래퍼 시작하기: 셋업 방법

바로 시작해보자. JavaScript 조금만 익숙하면 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

이러면 크로미움(약 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('Page title:', title);
8  await browser.close();
9})();

실행은:

1node scrape.js

‘Page title: Example Domain’이 뜨면 크롬 자동 조작 성공!

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 스크래퍼 테크닉

실제 사이트는 훨씬 복잡한 경우가 많아. 이런 팁이 유용해:

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가 페이지를 분석해서 ‘상품명’, ‘가격’, ‘이미지’ 등 최적의 컬럼을 자동 제안.
• 동적 콘텐츠도 OK: 무한 스크롤, 팝업, 서브페이지도 AI가 자동 처리. 페이지 넘기기, 상세 페이지 순회도 걱정 없어.
• 즉시 내보내기: Excel, Google 스프레드시트, Notion, Airtable 등으로 원클릭 내보내기. 추가 요금도 없어.
• 인기 사이트용 템플릿: Amazon, Zillow, LinkedIn 등 주요 사이트는 템플릿으로 바로 사용 가능.
• 클라우드/브라우저 모두 지원: 대량 데이터도 클라우드에서 최대 50페이지 동시 스크래핑 가능.

‘이 데이터가 필요해!’라고 생각한 뒤 5분 안에 스프레드시트로 만들 수 있는 유저도 많아. 게다가 사이트 구조가 바뀌어도 AI가 자동 대응해서, 스크립트 수정 걱정도 끝.

Puppeteer vs. Thunderbit: 내게 맞는 웹 스크래핑 툴 고르기

뭘 써야 할까? 팀별로 정리해보면:

정리:

• Puppeteer는 세밀한 제어나 시스템 연동이 필요하고 개발 리소스가 있을 때 최적.
• Thunderbit는 속도, 간편함, 비개발자 업무 자동화에 강추.

실제로 많은 팀이 둘 다 병행해서 써. Thunderbit로 빠르게 프로토타입이나 일상 업무 자동화, Puppeteer로 대규모·특수 작업 대응, 이런 식으로 말이야.

체크리스트: Puppeteer 웹 스크래핑 성공 10단계

Puppeteer로 프로젝트를 매끄럽게 진행하려면 내가 항상 쓰는 체크리스트가 있어:

1. 목적 명확히: 어떤 데이터가 필요하고, 어디에 있는지?
2. 사이트 분석: 동적 사이트인지? 로그인 필요한지? 봇 차단 있는지?
3. 환경 구축: Node.js, Puppeteer, 필요한 라이브러리 준비
4. PoC 만들기: 일단 한 페이지에서 동작 확인, 셀렉터 정확도 높이기
5. 동적 콘텐츠 대응: waitForSelector, 클릭, 스크롤 적극 활용
6. 페이지 넘기기/루프 추가: 전체 페이지 빠짐없이 수집
7. 차단 대응: 딜레이 랜덤화, User-Agent 설정, 필요하면 프록시 사용
8. 데이터 내보내기/검증: JSON/CSV 저장, 누락 체크
9. 최적화/에러 핸들링: try/catch, 진행 로그, 결측치 대응
10. 모니터링/유지보수: 사이트 변경 대비, 스크립트 업데이트 체계 마련

트러블슈팅 팁:

• 셀렉터가 null이면 HTML 구조나 대기 처리를 다시 확인
• 차단 당하면 속도 늦추고, IP 바꾸고, 스텔스 플러그인도 고려
• 스크립트가 죽으면 메모리 누수, 예외 처리 다시 점검

마무리 & 핵심 포인트

웹 스크래핑은 데이터 기반 팀에 필수 스킬이 됐어. Puppeteer라면 동적·JavaScript 기반 사이트에서도 데이터를 자유롭게 뽑을 수 있지만, 코딩과 유지보수의 번거로움은 피할 수 없어. 반면, Thunderbit는 AI 탑재 노코드라 누구나 바로 쓸 수 있는 유연한 대안이야.

추천 활용법:

• 기술력 있고, 세밀한 커스터마이즈가 필요하면 Puppeteer
• 속도·간편함·유지보수 중시라면 (부터 시작 추천)
• 많은 팀이 둘 다 병행해서 거의 모든 웹 데이터 니즈를 커버하고 있어

더 자세한 가이드와 최신 정보는 에서 확인할 수 있어.

자주 묻는 질문(FAQ)

1. Puppeteer 웹 스크래퍼란? 왜 웹 스크래핑에 쓰이나요?
Puppeteer는 Node.js용 라이브러리로, JavaScript로 헤드리스 Chrome 브라우저를 조작할 수 있어. 동적 콘텐츠 추출이나 유저 액션 재현이 가능해서 기존 스크래퍼로는 힘든 사이트에서도 데이터 추출이 가능해.

2. Puppeteer, Selenium, Thunderbit의 차이는?
Selenium은 여러 브라우저, 여러 언어 지원하지만 좀 무거워. Puppeteer는 Chrome/Node.js에 특화돼서 가볍고 빠른 게 장점. Thunderbit는 노코드, AI 탑재라 비개발자도 몇 번 클릭만으로 데이터 추출 가능.

3. Puppeteer 웹 스크래핑의 주요 비즈니스 이점은?
데이터 수집 자동화로 업무 시간 절감, 실수 방지, 실시간 분석이 가능해. 리드 확보, 가격 조사, 시장 분석 등 다양한 용도에 쓸 수 있어.

4. Puppeteer 스크래핑의 주요 과제는?
동적 콘텐츠 대응, 봇 차단 우회, 사이트 변경 시 스크립트 유지보수가 주된 과제야. 대기나 액션 자동화, 에러 처리 등 코딩이 필요하지.

5. Thunderbit는 언제 추천하나요?
코딩 없이 빠른 결과가 필요하거나, 비개발자 팀에도 쓰게 하고 싶을 때 딱이야. 표준적인 스크래핑이나 데이터 Excel/Google Sheets 내보내기도 간단해.

더 똑똑한 스크래핑을 경험하고 싶다면 나 가이드도 꼭 참고해봐. 해피 스크래핑!

더 알고 싶다면