피드로 돌아가기
Dev.toFrontend
원문 읽기
Browser-side Scan 기반 LLM 비용 최적화 및 A11y 자동 수정 워크플로우 구현
Scaling agentic A11y with browser-side scans
AI 요약
Context
전체 코드베이스를 LLM으로 스캔하는 방식은 저장소 규모에 비례해 토큰 비용이 증가하는 확장성 문제를 야기함. 특히 정적 분석으로 해결 가능한 결정론적 검사를 LLM 토큰으로 처리하는 비효율적인 구조적 한계가 존재함.
Technical Solution
- Rendered DOM 기반 Deterministic Audit Engine을 활용한 탐색 범위 제한
- Browser MCP를 통한 실시간 DOM 분석 및 구조화된 Violation List 추출
- LLM의 역할을 '전수 조사'에서 '특정 위반 사항에 대한 소스 수정'으로 국한한 역할 분리
- data-testid 및 aria-label 등 Stable Hook을 통한 위반 지점과 소스 파일 간의 매핑 로직 구현
- Production URL 직접 분석을 통한 Preview Deploy 및 Docker 환경 의존성 제거
- GitHub Action 기반의 Nightly Scan 및 Rolling PR 구조를 통한 지속적 개선 체계 구축
실천 포인트
- LLM 도입 시 전수 조사(Discovery) 대신 정밀 수정(Revision) 단계에만 토큰을 할당하는 구조인지 검토 - 정적 분석의 한계(Computed Style, Conditional State 등)를 극복하기 위해 Runtime DOM 분석 단계 도입 고려 - Agentic Workflow 설계 시 MCP(Model Context Protocol)를 활용해 외부 도구의 결정론적 결과물을 LLM의 Context로 주입하는 패턴 적용