취미에서 전문가로
브라우저 제어 vs HTTP 요청 이해하기
크롤링 1강 · 개념편
학습 목표
이 강을 다 들으면
1
크롤링이란 무엇을 하는 일인가?
2
"브라우저 띄우기" vs "요청만 보내기" — 무엇이 다른가?
3
내 프로그램엔 둘 중 무엇을 써야 하나?
1. 크롤링이란?
사람의 일을 프로그램이 대신
🙍 사람
주소 입력
↓
페이지 보기
↓
복사 → 엑셀
🤖 프로그램
페이지 요청
↓
데이터 수신
↓
추출 → 저장
💡
"페이지를 가져온다"의 구현은 두 갈래로 나뉩니다 — 오늘의 핵심.
2. 원리 이해
웹페이지가 뜨기까지
1
요청 — 브라우저가 서버에 "페이지 주세요"
2
응답 — 서버가 HTML·JS를 돌려줌 HTTP 요청 영역
3
실행 — 브라우저가 JS를 그려 화면 완성 브라우저 제어 영역
💡
데이터가 ②에 다 있는지, ③에서야 채워지는지가 방식 선택을 가릅니다.
3. 방식 ① 브라우저 제어
진짜 브라우저를 자동 조작
진짜 크롬 실행
↓
클릭 / 입력 / 스크롤
↓
화면 데이터 읽기
Selenium
Playwright
Puppeteer
비유
"사람처럼 움직이는 로봇 팔"
방식 ① 브라우저 제어
장점과 단점
👍 장점
- JS로 채워지는 데이터도 다 보임
- 로그인·클릭 등 복잡한 상호작용
- 보이는 대로 가져와 직관적
👎 단점
- 느리다
- 무겁다 (CPU·메모리)
- 대량 수집에 불리
4. 방식 ② HTTP 요청
요청만 직접 보내기
서버에 요청 전송
↓
응답(HTML/JSON) 수신
↓
데이터 추출
requests
httpx
fetch / axios
비유
"편지만 보내 답장 받기"
방식 ② HTTP 요청
장점과 단점
👍 장점
- 매우 빠르다
- 가볍다 (자원 소모 적음)
- 대량 수집에 유리
👎 단점
- JS로 채워지는 데이터는 안 보일 수 있음
- 어떤 요청인지 분석 필요
- 복잡한 로그인은 까다로움
5. 한눈에 비교
두 방식 비교
| 항목 |
브라우저 제어 |
HTTP 요청 |
| 속도 | 느림 🐢 | 빠름 🐇 |
| 자원 | 무거움 | 가벼움 |
| JS 데이터 | 다 보임 ✅ | 안 보일 수 ⚠️ |
| 상호작용 | 강함 | 약함 |
| 대량 수집 | 불리 | 유리 |
| 난이도 | 직관적 | 분석 필요 |
또 하나의 결정적 차이
수집을 넘어, 실제 '행동'까지
🚶 브라우저 제어
실제로 페이지를 엶 → JS 실행 →
조회수·이벤트 발생 가능
☎️ HTTP 요청
데이터만 받음 → JS 실행 안 함 →
조회수 안 오름
💡
🚶 가게 문을 실제로 열고 들어가기(방문자 +1) vs ☎️ 전화로 정보만 묻기(방문자 아님)
단, 사이트마다 집계 방식이 다르고 플랫폼의 봇 탐지로 무효 처리될 수 있음 — 원리상의 차이를 설명한 것.
6. 선택 기준
언제 무엇을?
데이터가 처음 응답에 다 있나?
아니오 (JS로 채워짐)
↓
로그인·클릭 많나?
실전 요령
실무의 3단계 판단
1
소스 보기 (Ctrl+U) — 데이터가 그냥 보이면 바로 긁기 HTTP 요청
2
네트워크 탭에서 API 추적 — CSR이면 Fetch/XHR에서 JSON 주는 API를 찾아 Copy as cURL (대부분 여기서 해결) HTTP 요청
3
브라우저 제어 — 인증 토큰·동적 서명·봇 탐지로 ②가 막히면 그제서야 브라우저 제어
💡
초보: CSR 보면 곧장 브라우저 자동화(느림·무거움) vs 실무: ①→②→③ 순서로(대부분 ②에서 끝, 빠름·가벼움)
여기서 잠깐!
SSR vs CSR — 코드로 보기
🟢 SSR · 서버가 완성해서 보냄
<!-- 서버가 보낸 HTML -->
<ul>
<li>게시글 1</li>
<li>게시글 2</li>
</ul>
→ 소스보기(Ctrl+U)에 데이터 보임 → HTTP 요청 OK
🟡 CSR · 브라우저가 JS로 채움
<!-- 서버가 보낸 HTML -->
<div id="root"></div>
<script src="app.js"></script>
// app.js 가 나중에
fetch('/api/posts')
.then(r => r.json())
.then(render)
→ 소스보기엔 빈 껍데기 → API 추적 or 브라우저 제어
💡
Ctrl+U 해서 데이터가 보이면 SSR, 빈 div만 있으면 CSR
②가 막힐 때 — 브라우저 제어로
API 직접 호출을 막는 4가지 장벽
🔑 인증 토큰 / 쿠키
API가 로그인 세션·토큰을 요구
→ 토큰을 먼저 발급받아야 함
✍️ 동적 서명(Signature)
JS가 실시간 생성한 해시·타임스탬프가 요청에 붙음
→ 그 생성 로직을 풀어내야 함 (난이도↑)
🛡️ 봇 탐지
Cloudflare · User-Agent · 헤더 · TLS 검사
→ 사람이 아닌 걸 들켜 차단
📋 헤더 까다로움
특정 헤더(Referer 등) 없으면 거부
→ 정확히 맞춰줘야 함
🤖
이 벽이 강하면 → 브라우저 제어로 '사람처럼' 접근하는 게 현실적
7. 요약
핵심 한 줄 정리
| 포인트 | 한 줄 정리 |
|---|
| 두 갈래 | 브라우저 제어 vs HTTP 요청 |
| 브라우저 제어 | 사람처럼 조작 · 느리지만 다 보임 |
| HTTP 요청 | 요청만 전송 · 빠르지만 분석 필요 |
| 실무 태도 | 먼저 HTTP, 안 되면 브라우저 |
🎬 NEXT
다음 강 예고
2강 — 직접 손으로 해보기
실제 사이트에서 두 방식의 차이를 눈으로 확인