스크롤할 때마다 새 콘텐츠가 붙고, 가격은 로그인 뒤에 숨고, 레이아웃은 몇 주마다 바뀌는 사이트. 여기서 데이터를 빼내려다 손든 적 있다면 무슨 얘긴지 바로 아실 거예요. 정적 스크래퍼만으로는 이제 안 돼요. 실제로 미국 투자 자문사의 67% 이상이 이미 대체 데이터 확보에 웹 스크래핑을 쓰고, 미국 소매업체의 81%는 경쟁사 가격 모니터링을 자동화하고 있어요. 문제는 이런 데이터 상당수가 JavaScript로 로드되고 사용자 동작 뒤에 숨은 동적 사이트에 있다는 점이에요. 바로 이 지점에서 헤드리스 브라우저 자동화, 그리고 Puppeteer 같은 도구가 필요해지죠.
오랫동안 자동화·AI 도구를 만들고 영업·운영팀을 위해 적잖은 사이트를 긁어온 사람으로서, Puppeteer는 일반 스크래퍼가 놓치는 데이터를 정말 많이 열어줘요. 다만 비즈니스 사용자에게는 코딩이 큰 걸림돌이 되기도 하죠. 그래서 이 글에서는 Puppeteer 스크래퍼가 정확히 뭔지, 웹 스크래핑에 어떻게 쓰는지, 그리고 Thunderbit 같은 더 간단한 AI 노코드 스크래퍼를 언제 고르면 좋은지까지 풀어볼게요.
Puppeteer 스크래퍼란? 간단한 개요
기본부터 짚어볼게요. Puppeteer는 Google이 만든 오픈소스 Node.js 라이브러리로, JavaScript로 헤드리스 Chrome이나 Chromium 브라우저를 제어하게 해줘요. 쉽게 말하면, 화면에는 아무것도 안 띄운 채 웹페이지를 열고 버튼을 누르고 폼을 채우고 스크롤하고 데이터까지 가져오는 로봇을 하나 두는 셈이에요.
Puppeteer가 특별한 이유는?
- 동적 콘텐츠를 렌더링해요. 실제 사용자처럼 JavaScript 로딩을 기다려요.
- 사용자 동작을 흉내내요. 클릭, 입력, 스크롤, 팝업 처리까지 돼요.
- 이커머스 목록, 소셜 피드, 대시보드처럼 상호작용 뒤에야 데이터가 나타나는 사이트에 아주 잘 맞아요.
다른 도구와 비교하면?
- Selenium: 브라우저 자동화의 원조예요. 여러 브라우저와 언어를 지원하지만 좀 무겁고 옛날 방식에 가까워요. 크로스 브라우저 테스트엔 좋지만, Chrome/Node.js 프로젝트라면 Puppeteer가 더 날렵해요.
- Thunderbit: 제가 제일 기대하는 부분이에요. 브라우저 안에서 돌아가는 AI 노코드 웹 스크래퍼인데, 스크립트를 직접 짜는 대신 "AI 필드 추천"만 누르면 무엇을 뽑을지 AI가 알아서 판단해줘요. 코딩 없이 결과만 원하는 비즈니스 사용자에게 딱이에요(뒤에서 더 자세히 다룰게요).
한 줄로 정리하면 이래요. Puppeteer = 최대한의 제어력(코딩이 가능하다면). Thunderbit = 최대한의 편의성(코딩하기 싫다면).
비즈니스 사용자에게 Puppeteer 웹 스크래핑이 중요한 이유
데이터 스크래핑이란 무엇이며 2026년에 어떻게 할까 Get Started Free
현실적으로 얘기해볼게요. 웹 스크래핑은 이제 해커나 데이터 과학자만의 일이 아니에요. 영업, 운영, 마케팅, 심지어 부동산 팀까지 웹 데이터로 경쟁 우위를 만들어요. 그리고 중요한 비즈니스 정보가 동적 사이트 뒤에 갇혀 있는 경우가 많아서, Puppeteer가 그 문을 여는 핵심 열쇠가 되곤 해요.
실제 활용 사례를 보면 이래요.
| 활용 사례 | 혜택을 보는 팀 | 영향 / 투자수익률(ROI) |
|---|---|---|
| 리드 생성 | 영업, 사업개발 | 잠재 고객 리스트 구축을 자동화하고, 담당자당 주 8시간 이상 절약(사례 연구) |
| 가격 모니터링 | 이커머스, 제품 운영 | 경쟁사 가격을 실시간 추적하고, 한 대기업은 연간 380만 달러를 절감(출처) |
| 시장 조사 | 마케팅, 전략, 재무 | 투자 자문사의 67%가 웹 스크래핑 데이터를 사용하며, 일부 사례에서는 최대 890% ROI 달성(출처) |
| 부동산 데이터 통합 | 중개인, 분석가 | 50개 이상의 매물 페이지를 몇 시간 대신 몇 분 만에 스크래핑(출처) |
| 컴플라이언스 추적 | 운영, 법무 | 모니터링을 자동화해 한 보험사는 5천만 달러의 벌금을 피함(출처) |
이것도 빼놓을 수 없죠. 근로자의 40% 이상이 주간 업무의 4분의 1을 데이터 수집 같은 반복 작업에 써요. 이걸 웹 스크래핑으로 자동화하는 건 있으면 좋은 옵션이 아니라 경쟁력 그 자체예요.
시작하기: Puppeteer 스크래퍼 설정하기
이제 직접 해볼까요? JavaScript를 조금 다룰 줄 안다는 전제로, 10분 안에 Puppeteer를 띄우는 방법을 알려드릴게요.
1. Node.js 설치하기
Puppeteer는 Node.js에서 돌아가요. nodejs.org에서 최신 LTS 버전을 받으세요.
2. 새 프로젝트 폴더 만들기
터미널을 열고 다음을 실행하세요:
mkdir puppeteer-scraper-demo
cd puppeteer-scraper-demo
npm init -y
3. Puppeteer 설치하기
npm install puppeteer
이때 호환되는 Chromium 버전도 함께 받아져요(약 100MB).
4. 첫 스크립트 만들기
scrape.js라는 파일을 만드세요:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
const title = await page.title();
console.log('페이지 제목:', title);
await browser.close();
})();
이렇게 실행하세요:
node scrape.js
"페이지 제목: Example Domain"이 뜨면 성공이에요. 방금 Chrome 자동화를 해낸 거예요!
첫 번째 Puppeteer 웹 스크래핑 스크립트 만들기
이제 실전으로 가볼게요. 예를 들어 quotes.toscrape.com에서 명언을 긁고 싶다고 해봅시다(스크래퍼 연습용 데모 사이트예요).
1단계: 페이지로 이동하기
await page.goto('http://quotes.toscrape.com', { waitUntil: 'networkidle0' });
2단계: 데이터 추출하기
const quotes = await page.evaluate(() => {
return Array.from(document.querySelectorAll('.quote')).map(node => ({
text: node.querySelector('.text')?.innerText.trim(),
author: node.querySelector('.author')?.innerText.trim(),
tags: Array.from(node.querySelectorAll('.tag')).map(tag => tag.innerText.trim())
}));
});
console.log(quotes);
3단계: 페이지네이션 처리하기
let hasNext = true;
let allQuotes = [];
while (hasNext) {
// 위와 같이 명언 추출
const quotes = await page.evaluate(/* ... */);
allQuotes.push(...quotes);
const nextButton = await page.$('li.next > a');
if (nextButton) {
await Promise.all([
page.click('li.next > a'),
page.waitForNavigation({ waitUntil: 'networkidle0' })
]);
} else {
hasNext = false;
}
}
4단계: JSON으로 저장하기
const fs = require('fs');
fs.writeFileSync('quotes.json', JSON.stringify(allQuotes, null, 2));
이제 기본적인 Puppeteer 스크래퍼가 페이지를 옮겨다니고, 데이터를 뽑고, 페이지네이션을 따라가고, 저장까지 다 해냈어요.
고급 Puppeteer 스크래퍼 기법: 동적 콘텐츠 처리하기
실제 사이트는 정적 목록처럼 단순하지 않은 경우가 많아요. 이런 까다로운 요소를 어떻게 다루는지 살펴볼게요.
1. 동적 요소를 기다리기
await page.waitForSelector('.product-list-item');
이렇게 하면 원하는 콘텐츠가 로드된 뒤에 데이터를 가져올 수 있어요.
2. 사용자 동작 시뮬레이션하기
- 버튼 클릭:
await page.click('#load-more'); - 필드에 입력:
await page.type('#search', 'laptop'); - 무한 스크롤 처리:
// 참고: page.waitForTimeout은 Puppeteer v22에서 제거되었습니다. 대신 일반 promise를 사용하세요. const sleep = (ms) => new Promise(r => setTimeout(r, ms)); let previousHeight = await page.evaluate('document.body.scrollHeight'); while (true) { await page.evaluate('window.scrollTo(0, document.body.scrollHeight)'); await sleep(1500); const newHeight = await page.evaluate('document.body.scrollHeight'); if (newHeight === previousHeight) break; previousHeight = newHeight; }
**3. 로그인 처리하기**
```javascript
await page.goto('https://exampleshop.com/login');
await page.type('#login-username', 'myusername');
await page.type('#login-password', 'mypassword');
await page.click('#login-button');
await page.waitForNavigation({ waitUntil: 'networkidle0' });
4. AJAX로 로드된 데이터 처리하기 데이터가 DOM에 없고 API 호출로 들어오는 경우도 있어요. 이럴 땐 네트워크 응답을 가로채면 돼요:
page.on('response', async response => {
if (response.url().includes('/api/products')) {
const data = await response.json();
// 데이터 처리
}
});
실제 예시: 이커머스 사이트에서 제품 데이터 스크래핑하기
이제 전부 한 번에 적용해볼게요. 로그인 후 데모 이커머스 사이트에서 제품명, 가격, 이미지를 긁는다고 상상해봅시다.
const puppeteer = require('puppeteer');
const fs = require('fs');
(async () => {
const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();
// 1단계: 로그인
await page.goto('https://exampleshop.com/login');
await page.type('#login-username', 'myusername');
await page.type('#login-password', 'mypassword');
await page.click('#login-button');
await page.waitForNavigation({ waitUntil: 'networkidle0' });
// 2단계: 카테고리 페이지로 이동
await page.goto('https://exampleshop.com/category/laptops', { waitUntil: 'networkidle0' });
// 3단계: 제품 추출
const products = await page.evaluate(() => {
return Array.from(document.querySelectorAll('.product-item')).map(item => ({
name: item.querySelector('.product-title')?.innerText.trim() || '',
price: item.querySelector('.product-price')?.innerText.trim() || '',
image: item.querySelector('img.product-image')?.src || ''
}));
});
// 4단계: JSON으로 저장
fs.writeFileSync('products.json', JSON.stringify(products, null, 2));
await browser.close();
})();
이 스크립트는 로그인하고, 이동하고, 긁고, 저장까지 전부 자동으로 처리해줘요. 더 고급으로 가려면 페이지네이션 루프를 붙이거나 각 제품 페이지를 눌러 더 자세한 정보까지 가져올 수 있어요.
Thunderbit: AI로 Puppeteer 스크래퍼를 더 간단하게
Thunderbit Chrome 확장 프로그램 사용해 보기 AI로 어떤 웹사이트든 단 2번의 클릭으로 스크래핑하세요. Get Started Free
여기까지 읽고 "좋긴 한데, 새 데이터셋이 필요할 때마다 코드를 짜고 싶진 않다"라고 생각하셨다면, 아주 자연스러운 반응이에요. 바로 그 이유로 Thunderbit를 만들었어요.
Thunderbit가 다른 이유는?
- 코드가 필요 없어요: Thunderbit Chrome 확장을 설치하고, 긁을 페이지를 연 뒤 "AI 필드 추천"만 누르면 돼요.
- AI 기반 필드 감지: 페이지를 읽고 "제품명", "가격", "이미지" 같은 뽑기 좋은 열을 추천해줘요.
- 동적 콘텐츠 처리: 무한 스크롤, 팝업, 하위 페이지도 문제없어요. Thunderbit의 AI가 페이지네이션을 따라가고, 필요하면 각 제품 상세 페이지까지 들어가 데이터를 풍부하게 만들어줘요.
- 즉시 내보내기: Excel, Google Sheets, Notion, Airtable로 데이터를 한 번에 보낼 수 있어요. 내보내기에 추가 요금도 없어요.
- 인기 사이트용 템플릿: Amazon, Zillow, LinkedIn을 긁어야 하나요? 바로 쓸 수 있는 템플릿이 있어 설정이 필요 없어요.
- 클라우드 또는 브라우저 스크래핑: 대규모 작업이라면 클라우드에서 한 번에 최대 50페이지까지 긁을 수 있어요.
사용자가 "이 데이터만 얻으면 좋겠다"에서 "벌써 스프레드시트가 준비됐어요"로 바뀌는 데 5분도 안 걸리는 걸 자주 봐요. 제일 좋은 점은요? 사이트가 바뀔 때마다 스크립트가 깨질까 조마조마할 필요가 없다는 거예요. Thunderbit의 AI가 그때그때 적응해주니까요.
Thunderbit AI 웹 스크래퍼를 무료로 사용해 보기
Puppeteer vs. Thunderbit: 올바른 웹 스크래핑 도구 고르기
그래서 뭘 써야 할까요? 팀 관점에서 이렇게 정리할 수 있어요.
| 요인 | Puppeteer(코드 기반) | Thunderbit(노코드, AI) |
|---|---|---|
| 사용 편의성 | JavaScript와 DOM 지식이 필요함 | 클릭만 하면 됨, AI가 필드를 추천함 |
| 설정 속도 | 복잡한 작업은 몇 시간에서 며칠까지 걸릴 수 있음 | 몇 분이면 충분—설치하고 바로 사용 |
| 제어력/유연성 | 최고 수준: 어떤 맞춤 로직이든 스크립트로 구현하고 다른 코드와 통합 가능 | 일반적인 경우에는 충분히 강력하지만, 아주 복잡한 워크플로에는 덜 적합 |
| 동적 콘텐츠 처리 | 대기, 클릭, 스크롤을 직접 스크립팅해야 함 | 내장된 AI가 동적 콘텐츠, 페이지네이션, 하위 페이지를 자동으로 처리 |
| 유지보수 | 스크립트는 직접 관리해야 하며, 사이트가 바뀌면 업데이트가 필요함 | AI가 레이아웃 변경에 적응해 사용자 유지보수 부담이 적음 |
| 데이터 내보내기 | 내보내기 로직을 직접 작성해야 함 | Excel, Sheets, Notion, Airtable, CSV, JSON으로 한 번에 내보내기 |
| 최적의 대상 | 개발자, 고도로 맞춤화된 작업, 대규모 스크래핑 | 비즈니스 사용자, 빠른 프로젝트, 비기술팀 |
| 비용 | 무료(시간과 인프라 비용은 제외) | 무료 플랜 제공, 크레딧 기반 유료 플랜(자세한 내용은 Thunderbit 요금제 참고) |
정리하면 이래요.
- Puppeteer를 쓰세요: 완전한 제어가 필요하거나, 코딩 리소스가 있거나, 스크래핑을 더 큰 앱에 통합해야 할 때요.
- Thunderbit를 쓰세요: 빠르게 결과를 얻고 싶거나, 코딩을 안 하고 싶거나, 비기술 팀원도 쓸 수 있게 하고 싶을 때요.
솔직히 두 가지를 함께 쓰는 팀도 많이 봤어요. Thunderbit는 빠른 성과와 프로토타입에, Puppeteer는 깊은 통합이나 예외 사례에 쓰는 식이죠.
단계별 체크리스트: 성공적인 Puppeteer 웹 스크래핑 프로젝트 운영하기
매끄러운 Puppeteer 스크래핑 프로젝트를 위한 제 기본 체크리스트는 이래요.
- 목표 정의하기: 어떤 데이터가 필요한가요? 어디에 있나요?
- 사이트 분석하기: 동적인가요? 로그인이 필요한가요? 봇 차단이 있나요?
- 환경 설정하기: Node.js, Puppeteer, 그리고 필요한 보조 라이브러리.
- 개념 검증용 프로토타입 짜기: 한 페이지부터 시작해 셀렉터를 정확히 잡으세요.
- 동적 콘텐츠 처리하기:
waitForSelector를 쓰고, 필요하면 클릭/스크롤을 흉내내세요. - 페이지네이션 또는 반복 로직 추가하기: 한 페이지가 아니라 전체 페이지를 긁으세요.
- 차단 방지 전략 구현하기: 지연 시간을 랜덤화하고, 실제 User-Agent를 설정하고, 필요하면 프록시를 쓰세요.
- 데이터 내보내기 및 검증하기: JSON/CSV로 저장하고, 누락이 없는지 확인하세요.
- 최적화 및 오류 처리하기: try/catch를 넣고, 진행 상황을 기록하고, 누락 데이터를 자연스럽게 처리하세요.
- 모니터링 및 유지보수하기: 사이트는 바뀌어요. 스크립트를 업데이트할 준비를 해두세요.
문제 해결 팁:
- 셀렉터가 null을 반환하면 HTML을 다시 확인하고 대기 로직을 쓰세요.
- 차단당하면 속도를 낮추고, IP를 바꾸거나, 스텔스 플러그인을 쓰세요.
- 스크립트가 충돌하면 메모리 누수나 처리되지 않은 예외를 확인하세요.
결론 및 핵심 요점
웹 스크래핑은 이제 데이터 중심 팀에게 꼭 필요한 역량이에요. Puppeteer는 가장 동적이고 JavaScript가 잔뜩 쓰인 사이트에서도 데이터를 뽑는 강력한 도구지만, 어느 정도의 코딩 실력과 꾸준한 유지보수가 필요하죠. 반면 코드를 건너뛰고 바로 데이터로 가고 싶은 비즈니스 사용자에겐 Thunderbit가 빠르고 유연하며 생각보다 강력한 AI 노코드 대안을 줘요.
제가 추천하는 방법은 이래요.
- 기술 역량이 있고 세밀한 커스터마이징이 필요하다면 Puppeteer로 시작하세요.
- 속도와 단순함, 적은 유지보수를 원한다면 Thunderbit를 써보세요(무료 Chrome 확장부터 시작하면 좋아요).
- 대부분의 팀은 두 도구를 함께 쓰면 웹 데이터 요구의 99%를 커버할 수 있어요.
이런 가이드를 더 보고 싶다면, 튜토리얼·비교 글·최신 AI 웹 스크래핑 소식이 있는 Thunderbit 블로그를 확인해 보세요.
Thunderbit AI 웹 스크래퍼 사용해 보기 Get Started Free
자주 묻는 질문
1. Puppeteer 스크래퍼란 무엇이며 웹 스크래핑에 왜 쓰이나요?
Puppeteer는 JavaScript로 헤드리스 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로 간단히 내보내고 싶을 때 특히 잘 맞아요.
더 똑똑하게 스크래핑하고 싶다면 Thunderbit를 다운로드하거나 Thunderbit 블로그에서 더 많은 가이드를 확인해 보세요. 즐거운 스크래핑 되세요!
더 알아보기
