일본의 선도적인 IT 기업인 CyberAgent는 인기 있는 Ameba 블로그 플랫폼을 비롯한 다양한 온라인 서비스를 제공합니다. 팀은 자동 테스트를 통해 감지하기 어려운 런타임 오류로 인해 상당한 어려움을 겪었으며, 이로 인해 시간이 많이 소요되는 수동 개입이 필요했습니다.
이 문서에서는 CyberAgent가 Chrome DevTools 모델 컨텍스트 프로토콜 (MCP) 서버를 사용하여 수동 프로세스에서 자동화된 워크플로로 전환하여 개발자 시간을 절약하고 테스트 흐름의 안정성을 개선한 방법을 살펴봅니다.
문제: 수동적이고 제한적인 워크플로
Ameba 디자인 시스템인 Spindle은 블로그 플랫폼의 인터페이스를 빌드하는 데 사용되는 재사용 가능한 UI 구성요소 모음입니다. UI 구성요소 개발 및 테스트에는 Storybook이 사용됩니다.
이전에는 런타임 오류를 해결하기 위한 CyberAgent의 워크플로가 반복적인 수동 사이클이었습니다. 개발자는 브라우저에서 각 구성요소를 확인하고, 수정사항을 적용한 다음 다시 확인합니다. 페이지와 구성요소가 많아 시각적 확인에 의존하는 데는 한계가 있었고 모든 버그를 포착하기가 어려웠습니다.
해결 방법: Chrome DevTools MCP를 사용하여 에이전트 디버깅
이 문제를 해결하기 위해 팀은 Chrome DevTools MCP 서버를 사용했습니다. 공식 온보딩 가이드를 사용하여 간단하게 설정한 후 AI 에이전트 (Claude)에 전체 디버깅 워크플로를 자동화하도록 즉시 지시할 수 있었습니다.
단일 프롬프트로 에이전트는 Chrome DevTools MCP에서 캡처한 브라우저 상태 정보를 처리하여 DevTools와 상호작용하고, 파일 시스템 컨텍스트에 액세스하고, 콘솔 로그를 읽을 수 있습니다. 그런 다음 수동 개입 없이 오류를 자율적으로 식별하고 수정사항을 구현했습니다.
사용된 초기 프롬프트는 다음과 같습니다.
Currently, spindle-ui's Storybook is running, but runtime errors may be occurring.
Please use chrome-dev-tools-mcp to confirm the operation of the Story in the following steps:
Identify all target Stories. Confirm each and every one, no matter how many there are.
Confirm that the Story is displayed correctly using dev-tools-mcp.
Fix all errors.
Click and move through each Story from the top in the browser opened with mcp to confirm.
AI 에이전트는 Storybook 인스턴스를 감사하여 전체 스토리를 탐색하면서 오류를 읽고, 코드 수정을 적용하고, 각 수정의 성공 여부를 확인했습니다.
영향: 수동 확인에서 자동 수정으로
결과는 빠르게 나타났습니다. 약 1시간 만에 AI 에이전트가 Spindle 디자인 시스템의 모든 구성요소 32개와 스토리 236개를 자율적으로 감사했습니다.
에이전트가 하나의 런타임 오류와 두 개의 경고를 식별하고 수정했지만 실험의 진정한 가치는 부정적인 것을 확인하는 데 있었습니다. 개발자가 수백 개의 상태를 수동으로 클릭하지 않아도 라이브러리의 대부분에 오류가 없음을 확인하는 것입니다.
이전에는 이러한 유형의 포괄적인 감사가 시각적으로 피로감을 유발하고 인적 오류가 발생하기 쉬웠습니다. 이 작업을 Chrome DevTools MCP에 오프로드함으로써 CyberAgent는 다음을 달성했습니다.
- 100% 감사 범위: 에이전트가 모든 스토리를 기계적으로 확인하여 '클린' 구성요소가 실제로 클린한지 확인했습니다. 이는 수동으로 유지하기 어려운 수준의 성실성입니다.
- 거짓 음성 0개: 시각적 런타임 비정상 상태를 놓칠 수 있는 자동 테스트 모음과 달리 MCP 서버를 사용하면 에이전트가 실제 브라우저 상태를 검증하여 높은 신뢰성을 보장할 수 있습니다.
- 인지 오프로딩: 개발자는 시스템이 반복적인 '힘든 작업'을 처리하도록 신뢰하여 일상적인 검사 대신 복잡한 로직에 집중할 수 있습니다.
웹 개발자 Kota Yanagi가 지적한 바와 같이 이점은 책임의 변화였습니다.
"브라우저에서 수동으로 실행했던 런타임 오류 및 경고 검사를 오프로드하는 것이 매우 편리했습니다. 또한 이제 자연어로 복잡한 작업을 설명하고 도구가 오류 로그를 읽는 것부터 문제 해결까지 바로 진행할 수 있다는 점도 마음에 듭니다.'
이 자동화된 워크플로의 성공으로 인해 CyberAgent는 AI 에이전트를 위한 내부 Spindle Agents 가이드를 업데이트하기도 했습니다. 이제 이 가이드에서는 Chrome DevTools MCP를 AI 에이전트인 Claude의 기본 디버깅 서버로 설정하여 이를 권장사항으로 사용하도록 공식화하고 이 새로운 AI 기반 프로세스에 대한 자신감을 보여줍니다.
구체적인 수정사항은 두 개의 pull 요청에 구현되었으며 GitHub에서 검토할 수 있습니다.
CyberAgent는 프롬프트를 더욱 발전시켜 이 최종 결과물을 게시했습니다.
의견 및 향후 계획
CyberAgent는 Chrome DevTools MCP에서 제공하는 유연성과 다양한 옵션에 만족했습니다. 또한 이 도구가 강력하기는 하지만 고급 기능을 사용하려면 일정 수준의 사용자 지식이 필요하다는 점을 지적하며 향후 개선을 위한 유용한 의견을 제공했습니다.
앞으로 이 팀은 DevTools 성능 패널과의 더 깊은 통합에 관심이 있습니다. 상담사가 코어 웹 바이탈을 검증한 후 성능 패널을 사용하여 더 심층적인 성능 분석을 진행하여 개선사항을 분석하고 제안하는 워크플로를 구상하고 있습니다.
CyberAgent의 개발자 전문가인 Kazunari Hara는 이 도구의 효율성과 향후 적용 가능성에 놀라움을 표했습니다.
'브라우저가 로그에서 직접 오류를 자동으로 수정하는 것을 보고 놀랐습니다. 이전에는 누락되거나 시간이 오래 걸렸던 작업을 이제 안정적으로 자동화할 수 있어 개발 효율성이 향상됩니다. Chrome DevTools MCP는 실제 런타임 환경에서 다양한 기능을 제공하므로 앞으로 다양한 상황에서 유용할 것으로 예상됩니다.'
결론
CyberAgent는 Chrome DevTools MCP를 워크플로에 통합하여 복잡하고 시간이 많이 소요되는 디버깅 작업을 자동화했습니다. 이들의 경험은 개발자 생산성을 높이는 AI 기반 도구의 엄청난 잠재력을 보여줍니다.
이 프로세스는 완전 자동화를 달성하여 수동 검사의 필요성을 없애고 오류가 누락되지 않도록 했습니다. 현재 구현이 이미 유용하다는 것이 입증되었지만 CyberAgent의 의견은 Chrome DevTools MCP를 통해 브라우저 내에서 더욱 정교한 성능 분석 및 최적화 작업을 직접 실행할 수 있는 흥미로운 미래를 보여줍니다.