Ch.2 JavaScript 라이브러리 15선
Puppeteer — 브라우저 자동화 + PDF
핵심 개념
Puppeteer
헤드리스 Chrome을 자동화하는 Node.js 라이브러리
핵심 내용
Puppeteer는 크롬 브라우저를 코드로 조종하는 라이브러리입니다
한 줄 요약: 사람이 브라우저에서 하는 모든 행동을 JavaScript 코드로 자동화하는 도구. 실생활 비유: 내 대신 컴퓨터를 조작해주는 '로봇 비서'라고 생각하세요. 웹사이트 접속, 버튼 클릭, 스크린샷 촬영, PDF 저장까지 — 사람 손 없이 코드가 크롬을 직접 움직입니다.
왜 'Puppeteer'일까? Puppet은 '꼭두각시', Puppeteer는 '꼭두각시를 조종하는 사람'입니다. 크롬 브라우저가 꼭두각시고, 여러분의 코드가 조종사인 셈이죠.
반복적인 브라우저 작업을 자동으로 처리합니다
수동 작업: 매일 같은 웹사이트에 접속 → 로그인 → 데이터 확인 → 스크린샷 저장. 10개 페이지를 캡처하려면 30분 이상 소요.
Puppeteer 자동화: 코드 한 번 실행하면 10개 페이지를 순서대로 접속, 스크린샷 + PDF 저장까지 자동 완료. 매일 예약 실행도 가능.
npm 한 줄이면 크롬까지 자동 설치됩니다
npm install puppeteer참고: puppeteer를 설치하면 Chromium 브라우저가 자동으로 함께 다운로드됩니다. 별도로 크롬을 설치할 필요가 없어요.
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// 웹페이지 접속
await page.goto('https://example.com');
// 스크린샷 저장
await page.screenshot({ path: 'screenshot.png' });
console.log('스크린샷 저장 완료!');
await browser.close();
})();실행 결과: `node capture.js` 실행하면 보이지 않는 크롬이 열리고, example.com에 접속한 뒤 screenshot.png 파일이 생성됩니다. 눈에 보이지 않아도 실제 브라우저가 동작하는 것입니다(Headless 모드).
AI에게 이렇게 요청하세요
좋은 프롬프트 예시 "Puppeteer로 URL 접속 → 로그인 폼에 아이디/비밀번호 입력 → 로그인 버튼 클릭 → 대시보드 페이지 스크린샷 저장 + 전체 페이지 PDF 저장 자동화 코드를 만들어줘."
프롬프트 변형 • "여러 URL 목록을 순서대로 돌면서 각각 스크린샷 찍어줘" • "페이지 로딩이 완전히 끝날 때까지 기다린 후 캡처해줘" • "특정 CSS 셀렉터 요소만 잘라서 스크린샷 찍어줘"
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// 로그인 페이지 접속
await page.goto('https://example.com/login');
// 폼 입력
await page.type('#username', 'myuser');
await page.type('#password', 'mypass');
await page.click('#login-btn');
// 페이지 이동 대기
await page.waitForNavigation();
// 대시보드 스크린샷
await page.screenshot({ path: 'dashboard.png' });
await browser.close();
})();웹페이지 PDF 리포트 자동화 프로젝트
const puppeteer = require('puppeteer');
async function generateReport(url, outputName) {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// 뷰포트 설정 (A4 비율)
await page.setViewport({ width: 1200, height: 800 });
// 페이지 접속 & 로딩 완료 대기
await page.goto(url, { waitUntil: 'networkidle0' });
// 스크린샷 저장
await page.screenshot({
path: `${outputName}.png`,
fullPage: true,
});
// PDF 저장
await page.pdf({
path: `${outputName}.pdf`,
format: 'A4',
printBackground: true,
margin: { top: '20mm', bottom: '20mm' },
});
console.log(`${outputName} 리포트 생성 완료!`);
await browser.close();
}
// 여러 페이지 리포트 생성
const pages = [
{ url: 'https://example.com/sales', name: 'sales-report' },
{ url: 'https://example.com/users', name: 'user-report' },
];
pages.forEach(p => generateReport(p.url, p.name));실행 방법: `node report.js` 실행하면 각 URL에 접속하여 전체 페이지 스크린샷(PNG)과 A4 크기 PDF를 자동 생성합니다. `waitUntil: 'networkidle0'`은 모든 네트워크 요청이 끝날 때까지 기다린다는 뜻입니다.
Puppeteer의 헤드리스 모드란?
핵심 용어
Puppeteer
헤드리스 Chrome을 자동화하는 Node.js 라이브러리
스크린샷 자동화
웹페이지를 PNG/JPEG로 캡처. 모니터링, 보고서 첨부에 활용
PDF 생성
웹페이지를 깔끔한 PDF 문서로 변환. 인보이스, 리포트 자동 생성
로그인 자동화
아이디/비밀번호 입력 → 로그인 → 대시보드 데이터 수집
E2E 테스트
웹 앱의 회원가입 → 로그인 → 기능 사용 흐름을 자동으로 검증
핵심 정리
- 1Puppeteer는 크롬 브라우저를 코드로 조종하는 Node.js 라이브러리
- 2page.goto()로 접속, page.screenshot()으로 캡처, page.pdf()로 PDF 생성
- 3page.type()과 page.click()으로 폼 입력/클릭 자동화 가능
- 4AI 프롬프트에 '접속할 URL + 수행할 동작 + 저장 형식'을 명시하면 정확한 자동화 코드 생성
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작