웹크롤링 톺아보기!

🕸 프론트엔드 개발자도 알아야 할 웹 크롤링의 모든 것

안녕하세요! 오늘은 프론트엔드 개발자라면 한 번쯤 궁금해했을 웹 크롤링(Web Crawling)에 대해 깊이 있고 실용적인 이야기를 풀어보려고 합니다.

'어...? 웹 크롤링은 백엔드나 데이터 사이언티스트들이나 하는 거 아니야?'라고 생각하셨다면, 오늘 글이 꽤 새로운 시야를 열어드릴 수 있을지도 몰라요. 저 역시 그렇게 생각했다가, 프로젝트에서 의외로 필요한 순간이 찾아왔고, 그때 정말 많은 걸 배웠거든요.

---

📌 웹 크롤링이 뭐길래?

먼저 용어 정리부터 하고 가죠.

• 웹 크롤링(Web Crawling): 웹 페이지를 자동으로 방문하고, 그 안의 정보를 추출하는 작업입니다.
• 웹 스크래핑(Web Scraping): 크롤링을 통해 가져온 HTML에서 실제로 원하는 데이터를 파싱하는 작업입니다.

즉, 크롤링은 데이터를 가져오는 행위이고, 스크래핑은 그 데이터에서 정보를 추출하는 과정이에요. 둘은 종종 혼용되지만 역할이 조금 다르죠.

---

💡 왜 프론트엔드가 웹 크롤링을 알아야 할까?

이 질문이 제일 중요하죠.

• 🔍 SEO 테스트용 메타데이터 확인: SSR된 HTML에 잘 박혔는지 확인하고 싶을 때.
• 📊 외부 데이터 기반 UI 테스트: 오픈 API가 없거나 제한적일 때, 비공식적으로 데이터를 확보해야 할 때.
• 🧪 디자인 QA나 UI 변화 추적: 특정 페이지 구조가 바뀌었는지 모니터링할 때.
• 🧵 퍼블리싱 자동화: 컨텐츠를 가져와 UI에 자동 반영하거나 비교할 때.

개발자로서 도구는 많을수록 좋습니다. 크롤링은 생각보다 유용한 도구예요.

---

🔧 웹 크롤링 도구 총정리 (프론트엔드 관점)

1. axios + cheerio 조합 (Node 기반, 가볍고 빠름)

npm install axios cheerio

import axios from "axios";
import * as cheerio from "cheerio";

const crawl = async () => {
  const { data } = await axios.get("https://example.com");
  const $ = cheerio.load(data);

  const title = $("title").text();
  const headlines = $("h1").map((_, el) => $(el).text()).get();

  console.log("Title:", title);
  console.log("Headlines:", headlines);
};

crawl();

💡 cheerio는 jQuery 문법 그대로 사용할 수 있어서, 프론트 개발자에게 특히 익숙합니다.

---

2. puppeteer (헤드리스 브라우저, 렌더링 기반 데이터도 가능)

SPA처럼 JavaScript로 그려지는 웹사이트도 잘 처리하려면 얘가 필요해요.

npm install puppeteer

import puppeteer from "puppeteer";

const crawl = async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto("https://example.com", { waitUntil: "networkidle2" });

  const data = await page.evaluate(() => {
    return {
      title: document.title,
      h1: Array.from(document.querySelectorAll("h1")).map(el => el.innerText),
    };
  });

  console.log(data);
  await browser.close();
};

crawl();

🧠 참고: puppeteer-core는 Chrome 없이 사용 가능하고, playwright는 멀티 브라우저를 지원합니다.

---

3. playwright (puppeteer보다 고도화됨)

• 멀티 브라우저 (Chromium, Firefox, WebKit)

• 모바일 에뮬레이션 지원

• 테스트 자동화와의 궁합도 굿

npm install playwright

import { chromium } from "playwright";

const crawl = async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto("https://example.com");

  const content = await page.innerText("h1");
  console.log(content);

  await browser.close();
};

crawl();

---

🧱 데이터 파싱 팁

크롤링의 절반은 HTML을 어떻게 해석하느냐에 달려 있어요.

• cheerio는 jQuery 스타일이라 직관적이지만, JS 렌더링된 내용은 안 보일 수 있어요.

• puppeteer나 playwright는 렌더링된 DOM까지 접근 가능하니 복잡한 페이지에 유리합니다.

• setTimeout, waitForSelector, networkidle2 같은 타이밍 제어가 핵심입니다.

---

⚖️ 웹 크롤링의 윤리와 법적 고려

크롤링은 윤리적이고 합법적인 선을 지켜야 합니다.

다음은 꼭 고려해 주세요.

• robots.txt 파일 확인하기 (크롤링 허용 여부 명시됨)

• API가 있으면 그걸 먼저 쓰기

• 트래픽 폭탄 주의 (interval 두고 요청하기)

• 로그인 기반 정보, 개인정보는 절대 수집하지 않기

• 상업적 목적은 특히 주의

---

🧪 실전 예제: 특정 블로그 글 제목 긁어오기

import axios from "axios";
import * as cheerio from "cheerio";

const crawlBlogTitles = async () => {
  const { data } = await axios.get("https://velog.io/@username");
  const $ = cheerio.load(data);
  const titles = $(".sc-bxivhb").map((_, el) => $(el).text()).get();
  console.log(titles);
};

🧵 클라이언트에서 직접 크롤링은 보안, CORS, 성능 문제 때문에 백엔드나 서버리스 함수로 우회하는 게 좋습니다.

---

🎯 프론트엔드에 맞춘 활용 아이디어

• UI 테스트용 목업 데이터 확보 (API 없음 → HTML 크롤링 → JSON 가공)

• 뉴스 키워드 트렌드 분석

• 크롤링 → 데이터베이스 저장 → 프론트에서 차트로 시각화

• 정적 사이트 SEO 테스트 자동화

• 블로그 자동 요약기 만들기

---

📚 추천 자료 & 레퍼런스

• 공식 puppeteer 문서

• playwright docs

• cheerio docs

• robots.txt validator

---

마무리하며…

사실 프론트엔드라고 해서 웹의 ‘보는 쪽’에만 국한되면, 점점 수동적인 개발자가 되기 쉬운 것 같아요.

웹이라는 공간에 존재하는 데이터를 스스로 수집하고 활용할 수 있는 힘을 갖추는 건, 우리가 만드는 UI를 더 주체적으로 만들어 줍니다.

크롤링은 어렵지 않지만, 알고 나면 확실히 개발자의 무기가 하나 늘어난 느낌이에요.

혹시 비슷한 주제로 관심 있으신 분이 있다면, 데이터 시각화나 자동화도 함께 공부해보시길 추천드립니다!