클로드 코드는 curl 로 HTML 을 읽을 수는 있지만 렌더된 화면은 못 봅니다. 자바스크립트로 그리는 페이지, 모바일 레이아웃, 로그인 뒤 화면이 전부 사각지대입니다.
크롬 앱이 없어도 됩니다. npx -y playwright screenshot 한 줄이면 캡처가 나옵니다. 브라우저는 처음 한 번 받고(554MB), 캡처 한 장에 2.7~3.6초 걸립니다.
로그인이 필요한 화면은 Playwright 로 못 엽니다. 쿠키가 없어서 마케팅 랜딩만 보입니다. 이때는 aside 로 내가 이미 로그인해 둔 브라우저를 그대로 씁니다.
애드센스 거절 원인을 찾을 때 저는 검색 페이지가 크롤러에게 본문 2자짜리 빈 페이지라는 걸 뒤늦게 알았습니다. 자바스크립트가 그리는 페이지라 HTML 만 봐서는 멀쩡해 보였습니다. 모바일에서 커버가 잘려 있던 것도 몇 주 동안 몰랐습니다. 노트북 화면만 봤기 때문입니다.
둘 다 원인이 같습니다. 에이전트가 화면을 못 봤습니다. 그래서 클로드 코드에 브라우저를 붙였습니다. 방법은 세 가지고, 고르는 기준은 두 개뿐입니다.
curl 로는 왜 부족할까
curl 은 서버가 처음 내려주는 HTML 만 가져옵니다. 요즘 웹의 상당 부분은 그 뒤에 자바스크립트가 그립니다.
| 확인하려는 것 | curl |
브라우저 |
|---|---|---|
| 메타 태그 · JSON-LD | ○ | ○ |
| JS 가 그리는 본문 | ✕ | ○ |
| 모바일 레이아웃 | ✕ | ○ |
| 요소가 화면 밖으로 넘쳤는지 | ✕ | ○ |
| 로그인 뒤 화면 | ✕ | 조건부 |
제 사이트의 /find/ 가 정확히 첫 번째 함정이었습니다. HTML 에는 검색창 마크업이 있으니 문제없어 보이는데, 실제로 렌더된 본문은 2자였습니다.
방법 ① Playwright CLI — 설치 없이 한 줄
가장 간단합니다. 크롬 앱을 깔 필요도 없고, 프로젝트에 패키지를 추가할 필요도 없습니다.
npx -y playwright screenshot \
--viewport-size=390,844 --full-page \
https://example.com/ mobile.pngnpx 에 -y 는 필수입니다. 없으면 설치 확인 프롬프트에서 멈춰버립니다.
처음 실행하면 브라우저를 내려받습니다. 실제로 재봤습니다.
| 항목 | 실측값 |
|---|---|
| Playwright | 1.62.0 |
| Chromium | Chrome for Testing 151.0.7922.34 |
| chromium | 356MB |
| chromium-headless-shell | 196MB |
| 총 설치 용량 | 554MB |
| 캡처 1장 소요 | 2.7~3.6초 |
캡처 말고도 쓸 게 있습니다.
npx -y playwright pdf <url> out.pdf # PDF 로 저장
npx -y playwright open <url> # 창 띄워서 직접 보기
npx -y playwright codegen <url> # 클릭하면 코드로 받아쓰기
npx -y playwright mcp # MCP 서버로 붙이기넘침을 숫자로 잡는 요령
--full-page 로 찍은 PNG 의 가로 픽셀이 지정한 뷰포트보다 크면 그만큼 화면 밖으로 넘친 것입니다. 가로 스크롤바가 생기는 문제를 눈이 아니라 숫자로 잡을 수 있습니다.
$ npx -y playwright screenshot --viewport-size=1000,560 --full-page demo.html out.png
$ sips -g pixelWidth out.png
pixelWidth: 1078 # 78px 넘침한계: 로그인은 안 된다
Playwright CLI 는 매번 빈 브라우저를 띄웁니다. 쿠키도 세션도 없습니다. 그래서 로그인이 필요한 주소를 열면 로그인 화면이나 마케팅 페이지가 나옵니다.
방법 ② aside repl — 로그인이 필요한 화면은 어떻게 볼까
여기서 aside 를 씁니다. 사용자가 이미 로그인해 둔 브라우저를 그대로 쓰는 AI 브라우저입니다. aside repl 은 Playwright 와 거의 같은 API 를 제공합니다.
aside repl "const p = await openTab('https://example.com/');
console.log(await p.title());"같은 주소를 두 방식으로 열어 비교했습니다. 구글 서치콘솔입니다.
| Playwright | aside repl | |
|---|---|---|
| 도달한 화면 | 마케팅 랜딩 | 실제 대시보드 |
| 페이지 제목 | Google Search Console | 개요 |
| 소요 | 1.9~2.3초 | 6.6초 |
같은 URL 인데 결과가 완전히 다릅니다. Playwright 에는 쿠키가 없고, aside 에는 있기 때문입니다.
aside repl 은 REPL 이라 변수가 세션 안에서 유지됩니다. 화면 읽기용 API 도 따로 있습니다.
const p = await openTab(url);
await snapshot(p); // 접근성 트리로 화면 구조 읽기
await annotatedScreenshot(p); // 클릭 가능한 요소에 번호 붙인 캡처
await p.pdf({ path: './artifacts/page.pdf' });방법 ③ aside exec — 작업을 통째로 맡기기
repl 이 “내가 한 단계씩 조종”이라면 exec 는 “목적만 주고 맡기기”입니다. 브라우저 전용 서브에이전트를 띄우는 것에 가깝습니다.
aside exec "서치콘솔에서 지난 7일 검색 유입 상위 10개 쿼리를 표로 정리해줘"여러 사이트를 오가야 하거나 단계가 유동적일 때 적합합니다. 반대로 정확한 증거가 필요한 일(캡처, 특정 값 확인, 파일 다운로드)은 repl 이 낫습니다. 에이전트가 알아서 하면 무엇을 봤는지 재현하기 어렵습니다.
어느 걸 언제 쓰나
정리하면 기준은 두 개입니다. 로그인이 필요한가, 그리고 결정적인 증거가 필요한가.
| 상황 | 도구 |
|---|---|
| 공개 페이지 캡처 · 모바일 확인 · 넘침 검사 | Playwright CLI |
| 로그인 뒤 화면을 정확히 봐야 함 | aside repl |
| 여러 단계를 알아서 처리해야 함 | aside exec |
| 데스크톱 앱 창(브라우저 아님) | computer-use |
로그인 브라우저를 에이전트에 붙인다는 것
마지막은 편의가 아니라 위험 이야기입니다. aside 에 작업을 맡기는 순간, 에이전트는 내가 로그인해 둔 모든 것에 접근할 수 있는 브라우저를 쥡니다. 메일, 은행, 회사 계정이 같은 브라우저에 있다면 그것도 포함입니다.
제가 정한 선은 이렇습니다.
- 결과물에 무엇이 들어갔는지 항상 눈으로 확인한다. 특히 글에 실을 캡처는 계정 정보가 찍히지 않았는지 본다
- 자율 실행(
exec)은 읽기 작업에만 쓴다. 글 쓰기 · 결제 · 설정 변경은 직접 한다 - 공개할 화면은 되도록 로그인 없이 보이는 것으로 대체한다
이 글의 비교 이미지에서도 실제 대시보드 화면 대신 터미널 출력만 실었습니다. 제목이 「개요」로 떴다는 사실만으로 로그인 여부는 충분히 증명됩니다.
정리
- 클로드 코드는 HTML 은 읽어도 렌더된 화면은 못 본다 — JS 페이지 · 모바일 · 로그인 뒤가 사각지대
- 크롬 없이
npx -y playwright screenshot한 줄이면 캡처가 된다.-y없으면 프롬프트에서 멈춘다 - 브라우저 설치는 554MB, 캡처 한 장은 2.7~3.6초
--full-page캡처 가로 폭이 뷰포트보다 크면 그만큼 넘친 것 — 레이아웃 버그를 숫자로 잡는다- 로그인이 필요하면 Playwright 로는 안 된다 — aside repl 이 쿠키를 그대로 쓴다
- 단계가 유동적이면
aside exec, 정확한 증거가 필요하면aside repl - 로그인 브라우저를 맡기는 건 권한을 통째로 넘기는 일 — 자율 실행은 읽기에만
브라우저를 붙이고 나서 제일 크게 바뀐 건 도구가 아니라 습관입니다. 이제 글을 올리면 390px 로 한 장 찍어보고 끝냅니다. 3초짜리 습관 하나가, 몇 주 동안 못 본 문제를 그날 잡아줍니다.
