Lighthouse의 새로운 "Agentic Browsing" 감사에서 100/100점을 받은 Vanilla JS 웹 앱을 구축했습니다. 그 의미를 알아봅시다.

최근 PageSpeed Insights나 Lighthouse에서 성능 감사(performance audit)를 실행해 보았다면, 메타데이터 보고서에 조용히 스며든 흥미로운 새로운 항목인 Agentic Browsing을 발견했을지도 모릅니다.

제가 만든 무료 도구 모음인 Paktheta를 감사했을 때, 저는 개발자로서 궁극적인 이정표인 성능(Performance), 접근성(Accessibility), 권장 사항(Best Practices), SEO 부문 모두에서 완벽한 100/100점을 달성했습니다. 하지만 _"Agentic Browsing"_이라는 라벨과 함께 표시된 이 완벽한 점수를 보고 생각에 잠겼습니다. AI 기반 에이전트(AI-driven agent)가 우리 사이트에 접속할 때 정확히 무엇을 경험하는 것이며, 왜 이것이 웹 성능의 새로운 골드 표준(gold standard)이 되고 있는 걸까요?

Agentic Browsing이 최적화의 미래에 실제로 무엇을 의미하는지 자세히 살펴보겠습니다.

"Agentic Browsing"이란 도대체 무엇인가?

역사적으로 Lighthouse와 같은 속도 테스트는 수동적이었습니다. 헤드리스 브라우저(headless browser)가 URL을 열고, 페이지가 로드될 때까지 기다린 후, First Contentful Paint (FCP) 및 Largest Contentful Paint (LCP)와 같은 지표를 기록하고 탭을 닫았습니다. 이는 선형적이고 예측 가능하며, 솔직히 말해 합성된(synthetic) 스냅샷이었습니다.

Agentic Browsing은 패러다임을 완전히 바꿉니다. 기본적인 정적 스크립트 대신, 현대적인 감사 플랫폼은 자율적이고 지능적인 브라우저 에이전트(browser agents)를 사용합니다. 현대적인 AI 기반 브라우저 제어(HeadlessChromium과 같은 업데이트된 인스턴스 사용)에 의해 안내되는 이 에이전트들은 단순히 페이지를 바라보는 것이 아니라, 실제 사람처럼 페이지를 **탐색(explore)**합니다.

에이전트 방식의 감사 실행기(agentic audit runner)는 다음과 같은 작업을 수행합니다:

• 대화형 버튼을 식별하고 클릭하여 응답성을 테스트합니다.
• 폼 요소(form elements)를 스캔하여 붙여넣기 명령을 깔끔하게 수락하는지 확인합니다.
• 동적으로 스크롤하고 마이크로 애니메이션(micro-animations)을 트리거함으로써 레이아웃 이동(CLS, Cumulative Layout Shift)을 지능적으로 탐색합니다.
• JavaScript 컴포넌트와 상호작용하여 메인 실행 스레드(main execution thread)를 차단하는지 확인합니다.

요약하자면: 이것은 실제의 예측 불가능한 인간의 행동을 번개 같은 속도로 시뮬레이션합니다. 만약 당신의 사이트가 처음에는 빨라 보이지만 사용자가 상호작용하려고 하는 순간 멈춰버리는 비대한 프레임워크 (frameworks)에 의존하고 있다면, 에이전틱 브라우저 (agentic browser)는 이를 즉시 포착하여 Interaction to Next Paint (INP) 또는 Total Blocking Time (TBT) 점수를 폭락시킬 것입니다.

Quad-100 해체: 에이전트를 어떻게 다루었는가

에이전트가 Paktheta JPG to PDF Tool을 실행했을 때, 실제 모바일 세션을 시뮬레이션했습니다 (제한된 4G 네트워크 환경의 Moto G Power를 에뮬레이션).

수치가 어떻게 산출되었는지, 그리고 왜 순수 최적화가 무거운 현대적 프레임워크 (frameworks)보다 여전히 승리하는지에 대한 결과는 다음과 같습니다:

1. 메인 스레드 버벅임 제로 (Performance: 100)

에이전트는 **정확히 0 ms의 Total Blocking Time (TBT)**을 기록했습니다.

• 비결: 단순한 유틸리티 페이지에는 무거운 JavaScript 프레임워크 (frameworks)를 피하십시오. 바닐라 실행 아키텍처 (vanilla execution architecture)를 사용하고 DOM 깊이를 최적화하여 (전체 요소 수를 112개로 가볍게 유지), 브라우저가 스크립트를 평가하는 데 단 16밀리초만을 소모하게 했습니다. 에이전트의 상호작용 클릭을 느리게 만드는 프레임워크 하이드레이션 (framework hydration) 지연이 전혀 없었습니다.

2. 예측 가능한 정적 레이아웃 (CLS: 0)

에이전트는 브라우징 루프 동안 레이아웃 이동 (layout shifts)을 공격적으로 탐색했습니다. 결과는? Cumulative Layout Shift (CLS) 0이었습니다.

• 비결: 모든 버튼과 컨테이너 크기가 엄격하게 계산되었습니다. 상호작용 버튼에 CSS 펄스 글로우 (pulse-glow) 애니메이션이 적용된 상태에서도 핵심 레이아웃 경계는 견고하게 유지되어, 자율 에이전트나 사람의 눈이 콘텐츠를 읽으려고 할 때 콘텐츠가 예상치 못하게 튀는 일이 발생하지 않도록 보장합니다.

3. 즉각적인 Time-To-First-Byte (TTFB)

초기 네트워크 요청 지연 시간(latency)이 엘리트 수준인 10 ms를 기록했습니다.

• 비결: 스마트한 캐싱 구조 (caching structures)와 믿을 수 없을 정도로 가벼운 페이로드 (전체 페이지 전송에 단 28 KiB 소요).

핵심 요약: 정적 봇을 위한 구축을 멈추고, 능동적인 에이전트를 위해 구축하십시오.

표준 웹 테스트 유틸리티에 에이전틱 브라우징 (Agentic Browsing)이 도입되었다는 것은, 피상적인 속임수로 시스템을 "속이려 (game)" 하는 방식이 더 이상 통하지 않음을 의미합니다. 알고리즘은 실제 기능적 흐름 (functional flow)을 찾아낼 만큼 충분히 똑똑합니다.

이 새로운 시대에 완벽한 점수를 얻고 싶다면 다음과 같이 하십시오:

1. 가볍게 유지하십시오: 바닐라 JS (vanilla JS)로 문제를 해결할 수 있다면, 그대로 두십시오.
2. 대화형 컴포넌트의 회복탄력성을 확보하십시오: 만약 AI 에이전트가 키보드 요소에 포커스를 맞추거나, 버튼을 부드럽게 클릭하거나, DOM을 탐색할 수 없다면, 접근성 (accessibility) 및 모범 사례 (best practices) 점수가 감점될 것입니다.
3. 초기 페인트 (initial paint)뿐만 아니라 상호작용을 최적화하십시오: 이제는 단순히 페이지가 얼마나 빨리 렌더링되는지의 문제가 아닙니다. 성능을 발휘하도록 압박을 받았을 때 얼마나 우아하게 동작하는지가 핵심입니다.

최근 빌드에서 새로운 에이전틱 지표 (agentic metrics)가 나타나는 것을 확인하셨나요? 이러한 지표를 처리하기 위해 워크플로우를 어떻게 최적화하고 있는지 댓글로 알려주세요!