이렇게 확인해 보세요
- 크롬 150 이상에서 아래 표의 케이스 하나를 엽니다.
- 개발자 도구(F12) → Lighthouse 패널에서 Accessibility(접근성)와 Agentic Browsing(에이전트형 브라우징)을 함께 선택하고 분석합니다. 리포트 맨 아래에서 Lighthouse 버전도 확인하세요.
- Tab 키로 '장바구니 담기'까지 가서 Enter로 눌러 봅니다.
- 개발자 도구 Elements 패널의 Accessibility 탭에서 버튼의 역할과 이름을 봅니다. 스크린 리더(NVDA, VoiceOver 등)가 있다면 직접 들어 보세요. 05·06처럼 자동 검사와 키보드로는 드러나지 않는 결함은 여기서 보입니다.
케이스 8개와 실측 결과
결함 페이지는 같은 쇼핑 화면에서 한 곳씩 바꿨습니다(02는 세 곳, 06은 세 요소). 01을 뺀 나머지는 일부러 접근성 결함을 넣은 실험용 페이지입니다.
| 케이스 | 바꾼 것 | 에이전트형 브라우징 | 접근성 점수 | 키보드로 누르기 | 역할·이름으로 찾기 |
|---|---|---|---|---|---|
| 01 기준 | 없음(시맨틱 HTML) | 2/2 | 100 | 성공 | 성공 |
| 02 alt·대비·lang 누락 | 사진 대체 텍스트 삭제, 저대비(약 2.4:1), lang 삭제 | 2/2 | 87 | 성공 | 성공 |
| 03 div 버튼 | 클릭 핸들러만 붙은 <div> | 2/2 | 100 | 실패 | 실패(버튼이 아님) |
| 04 이름 없는 아이콘 버튼 | 글자 대신 아이콘, 이름 없음 | 1/2 | 95 | 성공 | 실패(이름 없음) |
| 05 보이는 글자와 다른 이름 | 화면 '장바구니 담기' ≠ aria-label '상품을 카트에 추가' | 2/2 | 100 | 성공 | 실패(이름이 다름) |
| 06 aria-label 키워드 채우기 | 버튼·메뉴 링크 두 개의 aria-label에 검색 키워드 | 2/2 | 100 | 성공 | 성공 |
| 07 aria-hidden 실수 | 카드 전체에 aria-hidden | 1/2 | 96 | 성공 | 실패(트리에서 빠짐) |
| 08 레이블 없는 검색창 | 검색 입력칸 label 삭제 | 1/2 | 95 | 성공 | 검색창 실패(버튼은 성공) |
측정: Lighthouse 13.5.0(데스크톱 설정) · Chrome 154 · Playwright 1.63, 2026-10-02. '역할·이름으로 찾기'는 Playwright getByRole로 "버튼, 장바구니 담기"(08은 "검색창, 상품 검색")를 찾은 결과입니다. 이름으로 요소를 찾는 도구나 음성 제어에 가까운 방식이고, LLM 에이전트에게 과업을 시킨 결과는 아닙니다.
에이전트용 MCP 서버는 도구마다 받는 스냅샷이 다릅니다. 같은 케이스를 Playwright MCP와 Chrome DevTools MCP로 직접 찍고 눌러 본 비교는 tool-snapshots.md에 있습니다.
한 번에 재 보기
측정 스크립트는 measure/ 폴더에 있습니다. Node.js 22.19 이상과 설치된 크롬이 필요합니다.
git clone https://github.com/IsaacEryn/isaaceryn.github.io.git
cd isaaceryn.github.io/demo_codes/lighthouse-agentic-browsing/measure
npm ci
npm run measure # 케이스 8개: Lighthouse + 역할·이름 조회 + 키보드 + 스냅샷
npm run sites -- --runs 3 # sites.txt의 사이트를 세 번 재고 다수결로 요약케이스 결과는 results/summary.md, 스냅샷은 results/snapshots/, 사이트 결과는 results/sites-<날짜>/에 쌓입니다. sites.txt의 기본값은 이 블로그와 example.com뿐입니다. 남의 사이트를 잴 때는 그 사이트의 접속 차단 정책과 이용약관을 지켜 주세요.