Ch.2 JavaScript 라이브러리 15선

Puppeteer — 브라우저 자동화 + PDF

lightbulb

핵심 개념

Puppeteer

헤드리스 Chrome을 자동화하는 Node.js 라이브러리


article

핵심 내용

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의 헤드리스 모드란?

key

핵심 용어

🤖

Puppeteer

헤드리스 Chrome을 자동화하는 Node.js 라이브러리

스크린샷 자동화

웹페이지를 PNG/JPEG로 캡처. 모니터링, 보고서 첨부에 활용

PDF 생성

웹페이지를 깔끔한 PDF 문서로 변환. 인보이스, 리포트 자동 생성

로그인 자동화

아이디/비밀번호 입력 → 로그인 → 대시보드 데이터 수집

E2E 테스트

웹 앱의 회원가입 → 로그인 → 기능 사용 흐름을 자동으로 검증

check_circle

핵심 정리

  • 1Puppeteer는 크롬 브라우저를 코드로 조종하는 Node.js 라이브러리
  • 2page.goto()로 접속, page.screenshot()으로 캡처, page.pdf()로 PDF 생성
  • 3page.type()과 page.click()으로 폼 입력/클릭 자동화 가능
  • 4AI 프롬프트에 '접속할 URL + 수행할 동작 + 저장 형식'을 명시하면 정확한 자동화 코드 생성

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작