---
title: "🧪 특이이슈·방법 — Playwright 로컬 시각검증 도입 (Cloudflare 403 우회)"
category: "reference"
parent: "Claude Code 작업보고"
updated: "2026-07-04"
priority: "Medium"
purpose: "그동안 dallog.kr이 Cloudflare 봇차단(403)이라 CC가 라이브를 직접 못 봐 추정 배포했는데, 사장님 지시로 Playwright(진짜 브라우저)+로컬 dev 서버 시각검증을 도입해 추정→실측 배포로 전환한 방법·레시피·함정."
read_when: ["Playwright 로컬 검증","Cloudflare 403 우회","반응형 실측 검증","dev 서버 시각검증","getComputedStyle 실측","태블릿 폭 검증 방법"]
document_type: "참조"
source_status: "generated"
knowledge_group: "03_history"
work_timestamp: "20260704_113806"
source_of_truth: "https://dallog-tools.hansbridge.co.kr/knowledge/"
context: "달록본레포CC (D:\\dallog\\dallog_git)."
---

> 관련: 작업보고 "762~1024 태블릿폭 UI 정합 3건"(이 방법으로 3건 전부 실측 검증). 사장님 지시 "시각검증은 플레이라이트하면 되지 않아?"로 도입.

## 배경
dallog.kr은 Cloudflare 봇차단으로 `WebFetch`/`curl`이 **403** → CC가 라이브를 직접 못 봐 "tsc+로컬 dist 존재"로 **추정** 배포하고 사장님 재테스트에 의존해 왔다. 그러나 **Playwright는 진짜 Chromium**이라 봇차단 403에 안 걸리고, **로컬 `npm run dev`(localhost)**에 붙이면 Cloudflare 자체를 우회한다 → CC가 직접 실측 가능.

## 경계(기존 규칙과의 관계)
- 사장님이 "주소 달라"= 본인이 확인하려는 맥락 → 텍스트 주소만, 자동 브라우징 금지(기존 규칙 유지).
- **CC 자체 검증이 필요한 맥락**(반응형·회귀 등) → Playwright-로컬 시각검증을 쓴다. "라이브 못 본다"를 검증 생략 핑계로 쓰지 말 것.

## 레시피
1. `npm run dev`(백그라운드) → localhost 포트 확인.
2. 로그인: 공개 테스트계정 `mster`/`qwer1234`(ID/PW 폼). 게스트 체험모드는 폭 ≥768이면 로그인 없이 대시보드 노출(단 <768은 `/login` 리다이렉트=MobileGuestRouter).
3. `browser_resize`로 폭 지정(768~1023 태블릿·1440·360 등) → `browser_take_screenshot`(육안) + `browser_evaluate`(getComputedStyle·getBoundingClientRect 정량).
4. **육안+수치 교차검증**이 핵심: 이번에 스샷만으론 못 볼 "브랜드 박스 압축(24px)→워드마크 겹침"을 getBoundingClientRect로 포착.

## 함정
- **프로파일 잠금**("Browser is already in use"): 이전 세션 잔여 Chrome이 `ms-playwright-mcp` 프로파일 점유 → 해당 chrome.exe kill + SingletonLock 삭제.
- **beforeunload 다이얼로그**: 게스트 모드에서 전체 페이지 이동 시 발생 → `browser_handle_dialog(accept:true)`.
- **dev 서버 포트 난립**: 반복 기동으로 5173~5180 오르판 다수 → 작업 후 vite 프로세스 일괄 정리.

## 성과
762~1024 태블릿 3건을 **추정이 아닌 실측**(768/815/900/1024/1440/360 정량)으로 검증 후 배포. clamp 임시 주입→측정→파일반영의 실증 튜닝 사이클 확립.