게시일: 2026년 11월 10일
Policybazaar는 인도 최고의 보험 플랫폼 중 하나로, 등록된 고객이 9,700만 명 이상입니다. 고객의 약 80%가 매달 웹사이트를 방문합니다. 모회사인 PB Fintech는 최근 Paisabazaar Marketing & Consulting Private Limited의 브랜드인 엔드 투 엔드 은퇴 계획 플랫폼 Pensionbazaar를 출시했습니다.
두 팀 모두 이미 코딩 에이전트를 사용하고 있습니다. 코딩 에이전트는 코드를 빠르게 작성하지만 브라우저에서 해당 코드가 어떤 작업을 하는지 확인할 수 없습니다. 에이전트는 오래된 웹 패턴을 사용하는 경우가 많았고 화면이 올바르게 렌더링되었는지 확인할 방법이 없었기 때문에 엔지니어가 여전히 모든 것을 직접 확인해야 했습니다.
이 문제를 해결하기 위해 두 회사는 에이전트 워크플로에 두 가지 도구를 결합했습니다. 모델에 최신 웹 표준을 가르치는 Modern Web Guidance와 에이전트에게 작업을 검사하고 확인할 수 있는 실시간 헤드리스 브라우저를 제공하는 에이전트용 Chrome DevTools입니다.
영향은 다음과 같습니다.
92%
약 30개의 Policybazaar 방문 페이지에서 수동 감사 작업 감소
90% 초과
새로운 Pensionbazaar 페이지의 개발 및 테스트 소요 시간이 약 4일에서 몇 시간으로 단축됨
90% 초과
새로운 Pensionbazaar 화면에서 발생하는 UI 버그 감소
과제: 빠른 코드, 느린 검증
Policybazaar와 Pensionbazaar는 표준 AI 코딩 워크플로가 프로덕션 수준에서 최적화할 수 없는 두 가지 병목 현상에 직면했습니다.
Pensionbazaar: QA 주기가 긴 새 화면
Pensionbazaar에는 다단계 Retirement Freedom Score 계산기, 맞춤설정 가능한 투자 비용 예측, 자동 추천 보고서와 같은 수십 개의 복잡한 새 화면이 필요했습니다. 팀은 코딩 에이전트와 Figma MCP 서버를 사용하여 이를 빌드했지만 두 가지 문제로 인해 QA 주기가 길어졌습니다.
첫째, 상담사들이 명확한 지침 없이 코딩을 하고 있었습니다. 기본 모델은 코드를 생성할 수 있지만 렌더링된 인터페이스를 보거나, 계산된 스타일을 디자인 사양과 비교하거나, 레이아웃 변경을 감지하거나, 네트워크 폭포를 읽을 수 없습니다. 따라서 잘린 UI 및 레이아웃 변경과 같은 관련 문제가 수동 QA까지 이어졌습니다.
둘째, 생성된 코드가 과거에 머물러 있었습니다. 최신 웹 플랫폼에 대한 인식이 부족했던 에이전트는 내장된 <dialog> 요소를 사용하는 대신 무거운 JavaScript 모달을 작성하고, 불필요한 폴리필을 추가하고, fetchpriority와 같은 성능 힌트를 생략하는 등 오래된 해결 방법을 사용했습니다.
Policybazaar: 방문 페이지 30개 및 수동 감사
Policybazaar의 생명 보험팀은 다양한 보험 상품에 대해 약 30개의 방문 페이지를 운영하며, 각 페이지는 다양한 마케팅 캠페인에 따라 변형될 수 있습니다. 이러한 사이트에는 하루에 200,000~300,000명의 방문자가 방문하며, 모든 페이지는 매월 디자인 및 비즈니스 로직 업데이트를 받습니다. 팀은 Core Web Vitals 점수를 높게 유지하고 모든 대안이 모든 화면 크기에서 액세스 가능하고 올바르게 렌더링되도록 해야 합니다.
자동화 전에는 엔지니어가 각 페이지를 수동으로 감사했습니다.
- PageSpeed Insights를 실행하여 실제 사용자 데이터를 수집합니다.
- Core Web Vitals 점수와 권장사항을 평가합니다.
- 개발 또는 스테이징 빌드를 검사하고, 점수 뒤에 있는 문제를 진단하고, 코드 수정을 적용합니다.
이 프로세스는 느리고 반복적이며 확장성이 없었습니다. 이로 인해 최적화 누락, 일관되지 않은 감사 범위, 감지되지 않은 성능 회귀, 출시 지연이 발생할 수 있었습니다.
워크플로를 변경하기 전에 팀은 세 가지 목표를 설정했습니다. 성능 감사에 소요되는 개발자 시간을 80% 이상 줄이면서 감사 범위를 지속적으로 유지하고, 검증된 보고서로 QA 처리 시간을 단축하고, 화면이 와이어프레임과 일치하지 않아 발생하는 UI 버그를 줄이는 것입니다.
해결 방법: 코드-검증 루프
Pensionbazaar는 코드 작성과 확인 사이의 격차를 해소했습니다. 에이전트는 코드를 작성하고, 깨끗한 브라우저 인스턴스를 시작하고, 시각적 동등성, 레이아웃 손상, 콘솔 오류, 성능을 프로그래매틱 방식으로 감사하고, 최소한의 인간 개입으로 발견한 문제를 해결합니다. 에이전트는 Figma MCP에서 디자인을 가져오므로 렌더링된 페이지를 디자이너가 의도한 것과 비교할 수 있습니다.
다음 동영상은 이 루프의 작동 모습을 보여줍니다. 에이전트는 새 화면의 Figma 디자인을 읽고 구현한 다음 에이전트용 Chrome DevTools를 사용하여 렌더링된 페이지를 검사하고 발견된 차이점을 수정합니다.
1단계: 최신 웹 표준을 기반으로 에이전트 그라운딩
Pensionbazaar팀은 생성된 코드가 최신 웹 권장사항을 따르고, 현재 플랫폼 기능을 사용하며, 이전 브라우저에서도 작동하기를 원했습니다. 수동으로 확인하는 것은 번거롭고 에이전트가 항상 플랫폼과 최신 상태를 유지하는 것은 아닙니다. Modern Web Guidance는 이 문제를 해결합니다. Chrome 및 웹 커뮤니티의 웹 전문가가 작성하고 유지관리하는 에이전트 기술로, 200개 이상의 사용 사례를 다룹니다. 에이전트를 최신 웹 플랫폼 API와 기준 목표에 맞는 성능 및 접근성 권장사항으로 안내합니다. 타겟을 설정하지 않으면 기본값은 Baseline Widely Available입니다.
에이전트는 Figma 파일에서 컨텍스트를 가져온 후 코드를 작성할 때 Modern Web Guidance를 사용합니다. Pensionbazaar의 경우 이로 인해 코드가 세 가지 방식으로 변경되었습니다.
- 네이티브 요소가 JavaScript 해결 방법을 대체했습니다. 에이전트는 요금제 세부정보 모달에 기본 제공
<dialog>요소와 Popover API를 사용하고 재무 요약 카드에 CSS 그리드와 Flexbox를 사용했습니다. - 에이전트는 기본 모델에서 일반적으로 생략하는 성능 힌트를 추가했습니다.
여기에는 히어로 LCP 이미지의
fetchpriority="high", 스크롤해야 볼 수 있는 부분의 요금제 카드의loading="lazy", 다음 페인트에 대한 상호작용(INP)을 보호하기 위한scheduler.yield()를 사용한 시간 기반 실행 예산이 포함되었습니다. - 최신 기능이 이전 브라우저를 중단하지 않았습니다. Pensionbazaar는 Browserslist에 정의된 이전 브라우저 버전을 지원합니다. 에이전트는 일회용 비밀번호(OTP) 필드에
:user-invalidCSS 가상 클래스 및autoComplete="one-time-code"와 같은 기능을 사용했습니다. 이전 브라우저는 이를 무시하고 핵심 기능은 계속 작동합니다.
기본 모델은 크게 다르지 않았습니다. 성능 측면에서 팀은 권장사항과 약 70% 일치하는 것으로 확인했습니다. 에이전트 자체 보고서에는 나머지 격차를 해소하는 12개의 Modern Web Guidance 규칙이 나열되어 있었습니다. 네 가지 예시는 다음과 같습니다.
| 영역 | 기본 모델 격차 | Modern Web Guidance 규칙 |
|---|---|---|
| 이미지 로드 | fetchpriority="high"를 loading="lazy"와 페어링하는 것과 같이 상충되는 조합을 할루시네이션합니다. |
이러한 이미지를 결합하는 것을 명시적으로 금지하고 우선순위가 높은 이미지를 페이지당 1개 또는 2개로 제한합니다. |
| 레이아웃 안정성 | 실적을 위해 content-visibility: auto를 제안했지만 contain-intrinsic-size를 생략했습니다. |
콘텐츠가 렌더링될 때 심각한 레이아웃 변경을 방지하려면 두 속성을 페어링해야 합니다. |
| 기본 스레드 양보 | scheduler.yield()를 기한 패턴 없이 일반적으로 사용했습니다. |
다음 페인트에 대한 상호작용(INP)을 보호하기 위해 엄격한 시간 기반 기한(performance.now() + 50)을 적용합니다. |
| 서비스 워커 캐싱 | 오프라인 양식 제출을 고려하지 않았습니다. | 서비스 워커가 GET 요청 이외의 요청을 기본적으로 캐시할 수 없음을 에이전트에게 경고합니다. |
Pensionbazaar의 경우, 나중에 기술 부채를 방지하기 위해 첫날부터 고품질 코드를 빌드하는 것이 우선순위였습니다. Modern Web Guidance는 코딩 에이전트가 특정 브라우저 호환성 목표를 준수하면서 최신 웹 표준과 성능 권장사항을 채택하도록 안내했습니다. 덕분에 프런트엔드 코드 검토가 훨씬 더 쉽고 빨라졌으며, 궁극적으로 개발 소요 시간이 개선되었습니다.
아만 소니, Policybazaar 엔지니어링 관리자
2단계: 에이전트에 브라우저 제공
에이전트용 Chrome DevTools는 MCP 서버, CLI, 에이전트 스킬을 포함한 도구 모음으로, 코딩 에이전트가 콘솔 로그, 네트워크 트래픽, 접근성 트리, 기타 DevTools 기능과 같은 런타임 디버깅 데이터에 실시간으로 액세스할 수 있도록 지원합니다.
팀은 에이전트용 Chrome DevTools를 코딩 에이전트인 Claude Code에 플러그인으로 설치했습니다.
# Add the marketplace registry
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
# Install the plugin (MCP server and skills)
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
팀은 설치된 Chrome 확장 프로그램이 결과에 영향을 미치지 않고 개인 정보나 민감한 정보가 유출되지 않도록 모든 테스트를 깨끗한 브라우저 인스턴스에서 실행하기를 원했습니다. 이를 가져오려면 MCP 서버 구성의 args 배열에 --isolated를 추가합니다.
{
"args": ["-y", "chrome-devtools-mcp@latest", "--isolated"]
}
테스트에 기존의 로그인된 브라우저 세션이 필요한 경우 --autoConnect를 사용합니다.
3단계: 에이전트가 자체 작업을 확인하고 수정하도록 허용
엔지니어링팀은 에이전트의 요청 사항에 프롬프트 또는 에이전트 기술로 검사를 나열합니다. 개략적으로 에이전트는 다음을 수행합니다.
- DOM 트리와 계산된 CSS를 검사하고 Figma 디자인과 비교합니다.
- 페이지 크기를 모바일 표시 영역으로 조절하여 반응성을 테스트합니다.
- 성능 트레이스를 기록하여 스크립트, 렌더링 차단 리소스, 기타 성능 문제로 인해 발생하는 긴 애니메이션 프레임(LoAF)을 찾습니다.
- 엔지니어가 검토하기 전에 코드를 다시 작성하여 설계 불일치, 성능 문제, 콘솔 예외를 수정합니다.
다음 표에는 각 검사를 지원하는 에이전트용 Chrome DevTools 도구가 나와 있습니다.
| 확인 | 도구 |
|---|---|
| 표시 영역 전반에서 반응성 테스트 | resize_page는 페이지 창의 크기를 명시적 크기로 조절합니다. emulate는 특정 기기 환경을 에뮬레이션합니다. take_screenshot는 결과를 캡처합니다. |
| DOM 및 계산된 CSS를 Figma 디자인과 비교 | take_snapshot는 접근성 트리를 기반으로 페이지의 텍스트 스냅샷을 반환합니다. get_css_styles는 적용된 CSS 규칙을 읽습니다. evaluate_script는 페이지 내에서 JavaScript 함수를 실행합니다. |
| LoAF, 렌더링 차단 리소스, Core Web Vitals 문제 찾기 | click 및 drag는 상호작용을 에뮬레이션합니다. performance_start_trace 및 performance_stop_trace는 성능 트레이스를 기록합니다. performance_analyze_insight는 trace의 통계에 대한 자세한 진단을 반환합니다. list_network_requests 및 get_network_request는 네트워크 활동을 보여줍니다. lighthouse_audit는 SEO 및 접근성과 같은 비성능 영역을 감사합니다. |
에이전트가 작은 화면에서 텍스트가 잘리거나, 플렉스 래핑이 깨지거나, 레이아웃 변경을 일으키는 최적화되지 않은 이미지와 같은 문제를 발견하면 짧은 수정 루프를 실행합니다.
- 에이전트용 Chrome DevTools는 정확한 오류를 캡처합니다.
- 에이전트가 데이터를 분석하고 문제가 있는 CSS 또는 JavaScript를 다시 작성합니다.
- 상담사가 페이지를 새로고침하여 문제가 해결되었는지 확인합니다.
한 화면에서 에이전트가 페이지를 렌더링한 결과 헤더 레이아웃, 간격, 그라데이션이 디자인과 일치하지 않는 것을 발견했습니다. 관련 .scss 파일이 수정되었습니다. 또한 아코디언을 펼쳐 열린 상태가 디자인과 일치하는지 확인하는 등 페이지와 상호작용했습니다.
4단계: QA에 확인된 신고서 전달
검증이 완료되면 에이전트는 QA팀을 위한 감사 보고서와 함께 프로덕션에 즉시 사용 가능한 코드를 제공합니다. 보고서에는 다음 항목이 포함됩니다.
- 스크린샷, DOM 스냅샷, 계산된 스타일을 기반으로 빌드된 Figma 디자인과의 시각적 비교를 통해 픽셀 차이를 강조 표시합니다.
- 다양한 화면 크기에서 렌더링된 페이지의 스크린샷입니다.
performance_start_trace및performance_analyze_insight의 Core Web Vitals 및 성능 진단(예: Speed Index 및 총 차단 시간(TBT))lighthouse_audit의 검색엔진 최적화, 권장사항, 접근성에 대한 Lighthouse 점수- 행 접기, 전환과 같은 상호작용과 콘솔 오류, 애플리케이션 상태 변경(예: 행 수정, 행 삭제, 빈 상태)에 대한 통과 또는 실패 검사입니다.
30개의 캠페인 페이지에 동일한 접근 방식 적용
Policybazaar는 기본 플랫폼에서 수동 PageSpeed Insights 실행을 Kiro의 에이전트용 Chrome DevTools를 통한 감사 실행으로 대체했습니다. 캠페인 페이지가 게시되기 전에 엔지니어가 모바일 및 데스크톱의 스테이징 URL에 대한 감사를 트리거합니다. 에이전트는 성능 및 Lighthouse 감사를 실행하고, 에이전트용 Chrome DevTools는 실험실 데이터와 함께 실제 Chrome 사용자 경험 보고서(CrUX) 필드 데이터를 자동으로 가져옵니다. 이로 인해 PageSpeed Insights 단계가 완전히 대체되었습니다.
그런 다음 에이전트는 성능 점수, 발견한 병목 현상, 엔지니어가 수정해야 할 개선사항의 우선순위 목록을 보고합니다. 출시 전 감사에서 페이지 로드 중에 연달아 실행되고 중요한 렌더링 작업과 경쟁하는 중요하지 않은 API 호출에 플래그를 지정했습니다. 팀은 페이지가 게시되기 전에 문제를 해결했습니다.
이제 에이전트는 엔지니어가 1개를 완료하는 데 필요한 시간에 12개의 성능 감사를 완료합니다. 수작업이 92% 줄어든 것입니다.
웹 성능은 우수한 사용자 환경을 유지하는 데 중요하지만 수십 개의 방문 페이지에서 수동으로 감사하고 폭포식 구조와 트레이스를 평가하는 것은 지루하고 주요 병목 현상이었습니다. 에이전트용 Chrome DevTools는 이 프로세스를 혁신하고 엔지니어의 성능 감사 시간을 92% 단축하여 더 복잡한 작업에 집중할 수 있는 여유를 제공했습니다.
아만 소니, Policybazaar 엔지니어링 관리자
영향
Policybazaar와 Pensionbazaar는 Modern Web Guidance와 에이전트용 Chrome DevTools를 사용하여 수동적이고 사후 대응적인 프런트엔드 테스트를 자동화되고 사전 예방적인 프로세스로 전환했습니다. 다음 표에서는 변경 전후의 워크플로를 비교합니다.
| 영역 | 이전: 수동 검토 및 기본 모델 | 이후: Modern Web Guidance 및 에이전트용 Chrome DevTools |
|---|---|---|
| 성능 감사 노력(Policybazaar) | 엔지니어가 PageSpeed Insights를 실행하고 Core Web Vitals를 검토한 후 약 30개의 방문 페이지 각각에 수동으로 수정사항을 적용했습니다. | 수작업 92% 감소 에이전트는 엔지니어가 1건을 처리하는 데 필요한 시간 동안 12건의 감사를 완료합니다. |
| 감사 범위(Policybazaar) | 캠페인 대안 전반의 감사 범위가 일관되지 않았습니다. | 캠페인 페이지의 성능 테스트 적용 범위 100% |
| 새 화면 전환(Pensionbazaar) | 코드에서 인증된 화면까지 며칠이 걸립니다. | 몇 시간 만에 완료되어 90% 이상 빨라졌습니다. |
| 디자인 패리티 버그(Pensionbazaar) | 잘린 UI 및 레이아웃 변경이 수동 QA에 도달했습니다. | UI 버그가 90% 이상 감소했습니다. |
92% 감소는 팀의 목표인 80% 이상을 초과 달성한 것입니다. 방문 페이지 회귀가 스테이징 또는 QA에 도달하기 전에 포착됩니다. Pensionbazaar에서는 여러 표시 영역의 스크린샷과 함께 이미 감사를 거친 코드가 제공되므로 디자인, 엔지니어링, QA 간의 커뮤니케이션이 줄어듭니다.
팀을 위한 핵심 요약
- 공신력 있는 가이드에 에이전트를 그라운딩합니다. Modern Web Guidance와 같은 선별된 가이드는 에이전트가 오래된 패턴을 사용하지 않도록 하고 코드를 기준 타겟 내에 유지합니다.
- 에이전트가 렌더링된 페이지를 확인할 때까지 프런트엔드 작업을 완료로 표시하지 않도록 합니다. 에이전트용 Chrome DevTools를 사용하면 에이전트가 실제 브라우저에서 레이아웃, 표시 영역, 성능 trace를 검사할 수 있습니다.
- 루프에 명확한 종료 기준을 제공합니다. 에이전트가 루프를 돌며 토큰을 낭비하지 않도록 단계 한도와 명시적인 통과 및 실패 조건을 설정합니다.
- 자주 사용되는 템플릿 기반 페이지부터 시작하세요. 폐쇄 루프 워크플로는 처리 속도가 중요한 경우에 가장 효과적입니다.
- 깨끗한 브라우저에서 감사를 실행합니다. 확장 프로그램과 캐시된 데이터가 결과에 영향을 미치거나 개인 정보를 노출하지 않도록
--isolated를 사용합니다.