브라우저 기반
데이터 탐색

Session 2 / 8

Chrome DevTools · Elements · Network · Console · 데이터 위치 찾기

박수현 · aSSIST University · 2026

🎨 이미지 프롬프트(배경): "A modern browser window with developer tools open, showing network requests and DOM tree, glowing teal and purple highlights, clean editorial illustration, 16:9, no text"

이번 시간을 마치면

개념적으로

• ✅ DevTools (개발자 도구) 5대 패널의 역할을 구분한다
• ✅ Elements 탭에서 DOM (브라우저가 그린 HTML 트리) 구조를 빠르게 탐색한다
• ✅ Network 탭에서 JSON API (서버와 데이터를 주고받는 비공개 통로) 트래픽을 식별한다
• ✅ Console 에서 선택자 (CSS·XPath 로 요소를 가리키는 표현) 를 실시간 검증한다
• ✅ Application 에서 쿠키 (브라우저가 저장하는 세션 정보) · 로컬스토리지 (브라우저 영구 저장소) 를 읽는다

실습으로

• ✅ books.toscrape 에서 선택자 5종을 직접 발굴
• ✅ 네이버 금융 JSON 트래픽 사냥 라이브 데모
• ✅ Copy as cURL → Python 변환
• ✅ 동적 vs 정적 사이트 현장 판별 3건

📖 도서 매핑: Ch.3 §3 + 보강

DevTools 우선 학습 — 코드 작성 전 페이지 분석

DevTools 5대 패널

📌 Ctrl+Shift+C 는 「요소 선택기」 단축키 (Elements 패널 단축키가 아니라 마우스로 페이지의 요소를 클릭해 즉시 점프하는 모드)

🎯 사용 빈도

스크래퍼 입장 8:2 비율 — Network + Elements 가 80%, 나머지가 20%.

Elements
실시간 DOM 트리

"마우스로 페이지를 가리키면 코드가 점프한다"

키워드: 요소 선택기 · Computed · 검사 · 편집

F12 가 열린 books.toscrape

요소 선택기 — 화면 클릭으로 HTML 위치 추적

DOM 부모–자식 체인 분석 — 책 카드 1개 사례

article.product_pod         ← 카드 단위
├ div.image_container
│ └ a > img.thumbnail        ← 썸네일
├ p.star-rating .Three        ← 별점 (클래스로!)
├ h3
│ └ a [title="..."]           ← 책 제목
├ div.product_price
│ ├ p.price_color             ← £가격
│ └ p.instock.availability    ← 재고

우클릭 Copy — 6개 항목

요소 위에서 우클릭 → Copy 하면 즉시 쓸 수 있는 6가지.

📌 outerHTML = 요소 자체 + 안쪽 모두 / innerHTML = 요소 안쪽만. Chrome 의 "Copy element" 는 outerHTML 과 같은 결과.

⚠️ Copy selector 가 너무 길면 부서지기 쉽다. 사람이 짧게 다듬어 쓰기.

$$ 와 $ — 콘솔의 단축 함수

$$("article.product_pod").length
// → 20

$("article.product_pod h3 a").innerText
// → "A Light in the ..."

$$(".price_color").length        // → 20
$0.outerHTML                     // → 방금 클릭한 요소
copy($$("a").length)             // → 클립보드로

🎯 작업 흐름

1) Elements 에서 선택 → 2) 콘솔에서 $0 으로 받아 검증 → 3) BS4 코드로 옮김

미니 실습 — books.toscrape 선택자 발굴

실습 과제

F12 → Elements + Console 만 사용.
5개 데이터의 선택자를 종이에 적어 가져오세요.

📌 정답은 다음 슬라이드 — 먼저 시도!

선택자 발굴 결과 — 검증 + 정답

$$("article.product_pod").length
// → 20

$$("article.product_pod h3 a")
  .map(a => a.title)
// → ["A Light in the ...", ...]

$$(".price_color")
  .map(p => p.innerText)
// → ["£51.77", "£53.74", ...]

$("li.next a").href
// → ".../page-2.html"

🎯 회차 3 미리보기

이 5개 선택자가 그대로 BeautifulSoup select() 인자로 들어갑니다.

Network
JSON API 추적

"동적 페이지의 실제 데이터는 여기 어딘가에 있다"

키워드: XHR/Fetch · 필터 · Headers · Preview · Copy as cURL

XHR = XMLHttpRequest, JS 가 만든 비동기 데이터 요청 / AJAX = 페이지 새로고침 없이 서버와 통신하는 방식 (XHR 또는 fetch 사용)

Network 탭 트래픽 캡처 — 4단계 절차

동적 페이지의 Network 패턴 — XHR / Fetch 신호

🔑 보이는 한 화면 뒤에 여러 개의 JSON API가 숨어 있을 수 있다.

Network 요청 행 6열 — Status / Type / Size 등

클릭하면 펼쳐지는 5개 서브 탭

• Headers — 요청·응답 헤더 전체
• Payload — POST 바디 (JSON / form)
• Preview — 응답 미리보기 (JSON 트리뷰)
• Response — 응답 raw
• Cookies — 쿠키 정보

JSON 응답 식별 4신호 — XHR·Content-Type·미리보기·크기

Preview 트리 (이상적):
data ▾
  items ▾ (length: 20)
    [0] ▾
      name: "갤럭시 S24"
      price: 1390000
      stock: 12
    [1] ▾ ...

🎯 Preview 가 JSON 트리 = 빙고. 다음 슬라이드의 Copy as cURL 로 바로 추출 가능.

요청 통째 복사 → Python 한 줄 변환

curl 'https://finance.naver.com/item/main.naver?code=005930' \
  -H 'User-Agent: Mozilla/5.0 ... Chrome/120.0' \
  -H 'Accept: text/html,application/xhtml+xml' \
  -H 'Cookie: NID_AUT=...; NID_SES=...' \
  -H 'Referer: https://finance.naver.com/'

# curlconverter 가 만들어주는 코드 (예시)
import requests
headers = {
    "User-Agent": "Mozilla/5.0 ... Chrome/120.0",
    "Accept": "text/html,application/xhtml+xml",
    "Referer": "https://finance.naver.com/",
}
r = requests.get("https://finance.naver.com/item/main.naver?code=005930", headers=headers)
print(r.text[:500])

⚠️ 위 URL 은 형식 예시. 실제로는 본인이 F12 Network 에서 캡처한 실제 엔드포인트를 그대로 복사해서 사용 (도메인/경로가 시기마다 바뀜).

🎯 회차 6 의 로그인 분석에 이 기법 필수.

Headers 탭 4개 섹션

General           — URL · Method · Status · Remote Address
Response Headers  — 서버가 보낸 헤더
Request Headers   — 브라우저가 보낸 헤더
Query/Form Params — 파싱된 파라미터

스크래퍼가 챙겨야 할 헤더 — TOP 5

📌 응답 헤더의 Content-Type: application/json 은 JSON 임을 확정 짓는 도장.

JSON 구조를 트리로 보기

r = requests.get(url, headers=headers)
data = r.json()

for item in data["items"]:
    print(item["name"], item["price"])

🎯 회차 5 미리보기

Preview 트리 → 코드 → DataFrame → 1초에 100건 수집.

라이브 데모 — 숨은 JSON API 추적

데모 사이트

https://finance.naver.com/item/main.nhn?code=005930 (삼성전자)

시연 순서

1. F12 → Network → Fetch/XHR
2. 페이지 새로고침 → 발생하는 요청 캡처
3. 큰 Size 의 JSON 응답 클릭
4. Preview 에서 시세 트리 확인
5. Copy as cURL → curlconverter 변환
6. Python 으로 시세 데이터 한 줄로 가져오기

결과

• 셀레니움 없이 → 100건 데이터 1초
• HTML 파싱 없이 → 깨끗한 dict 리스트

⚠️ 시연 후 도덕적 주의 — 회차 4·7 윤리 파트 예고.

Application
쿠키와 저장소

로그인의 비밀이 여기에 있다

키워드: Cookies · LocalStorage · SessionStorage · IndexedDB

Application → Storage → Cookies

📖 도서 참조: Ch.5 §3 — "세션과 쿠키, 그리고 그들의 사회생활"

LocalStorage / SessionStorage — 클라이언트 저장소

// 모든 키
Object.keys(localStorage)

// 특정 값
localStorage.getItem("auth_token")

// 전체 덤프
JSON.stringify(localStorage)

⚠️ 일부 사이트는 인증 토큰을 LocalStorage에 저장. 쿠키와 별개로 챙겨야 함.

처음 보는 사이트
현장 판별법

어떤 도구로 갈 것인가 — 시간을 아끼는 결정 트리

정·동적 페이지 판별 결정 트리 — 4단계

각 단계에서 「아니오」 면 ↓ 다음 단계로

🔑 우선순위

JSON API > requests + BS4 > Selenium — 위에서부터 시도, 안 되면 한 단계 내려가기.

"원본 HTML" vs "지금 화면의 DOM"

판별 명제

원하는 데이터가 Ctrl+U 에 있다 → 정적 → requests 가능
Ctrl+U 엔 없는데 F12 엔 있다 → 동적 → JS 실행 필요

다음 사이트들을 판별하세요

채점 기준

• 정적 = Ctrl+U 에 데이터 보임
• API 동적 = Ctrl+U 에 없지만 XHR 에 JSON
• 렌더 동적 = 둘 다 없고 JS 가 만듦

답 예 (참고)

• books.toscrape → 정적 (requests OK)
• 네이버 금융 → API 동적 + 일부 정적 (Copy as cURL)
• 네이버 뉴스 → 혼합 (메인은 정적, 댓글은 API)

Sources & Performance
고급 패널

자주 쓰진 않지만 알면 빛나는 도구

Sources 탭의 4가지 활용

🎯 활용 사례: "이 사이트가 어떤 API 호출하는지" 빠르게 파악할 때 api, fetch 단어 전역 검색.

Sources / Performance — 알아두면 좋은 두 패널

📌 두 패널은 부가 정보. 주력은 Network + Elements.

DevTools
마무리

오늘 학습한 F12 5대 패널은 이후 실습에서 반복적으로 활용됩니다.

오늘의 정리 7가지

1. F12 5대 패널 — Elements / Console / Network / Sources / Application
2. 요소 선택기 (Ctrl+Shift+C) → 마우스로 페이지 → HTML 점프
3. Copy selector + 콘솔 $$() 로 선택자 검증
4. Network → Fetch/XHR = JSON API 추적의 핵심
5. Copy as cURL → Python requests 변환
6. Application → Cookies = 로그인 우회의 열쇠
7. Ctrl+U vs F12 = 정적/동적 5분 판별

"코드는 다음 회차. 오늘은 눈 을 만들었다."