게시일: 2026년 6월 22일
디지털 솔루션 대행사인 P2ER은 에이전트용 Chrome DevTools를 사용하여 최종 검토를 위해 검증되고 작동하는 소프트웨어만 사람에게 전달되도록 합니다. 워크플로를 에이전트 인프라로 전환하여 AI 에이전트가 실증적 UI 검증을 실행할 수 있도록 지원함으로써 배포 빈도를 주 1회에서 하루에 여러 번으로 늘렸습니다.
과제: 기존 애플리케이션에서 품질 확장
P2ER은 자동차 제조업체, 시계 브랜드, 숙박업체 등 글로벌 브랜드를 위한 고급 디지털 환경을 제공합니다. 많은 기업과 마찬가지로 이들의 주요 과제는 복잡한 기존 애플리케이션 내에서 작업하는 것이었습니다. 에이전트 기반 코딩을 도입하는 팀은 세 가지 주요 장애물에 직면했습니다.
- 취약한 UI 테스트 표준 테스트 스위트는 일부 P2ER 프로젝트의 변동하는 호텔 가격이나 시즌별 혜택과 같은 동적 데이터에 어려움을 겪었습니다. 모의 데이터는 사람 테스터가 즉시 발견할 수 있는 통합 결함을 숨기는 경우가 많았습니다.
- 에이전트 안정성 문제 명시적인 지시가 없으면 AI 에이전트가 실제로 확인하지 않고도 작업이 완료되었다고 주장하는 경우가 있었습니다.
- 컨텍스트 손실 광범위한 작업과 모델 시간 제한으로 인해 에이전트가 세션 목표를 추적하지 못했습니다. 이로 인해 개발자가 에이전트가 시작한 작업을 추적하고 계속하기가 어려웠습니다.
해결책: 장인 정신을 위한 인프라 구축
P2ER은 AI를 개발의 반복적인 측면도 처리할 수 있는 '스파링 파트너'로 취급하는 인프라를 구축했습니다. 이 접근 방식을 통해 팀은 아키텍처와 창의적인 문제 해결에 집중하여 장인 정신을 확장할 수 있습니다.
DevTools를 사용하여 에이전트의 MCP 서버에 대한 실증적 검증 시행
신뢰성을 보장하기 위해 P2ER에서는 필수 실증적 검증 규칙을 설정했습니다.
프로젝트의 AGENTS.md 파일에 명시된 이 엔지니어링 요구사항은 다음과 같습니다.
All claims regarding service availability and component rendering
MUST be empirically verified (log output, dev compiler, browser/devtools inspection)
before asserting to the user.
팀은 상담사의 말을 그대로 받아들이는 대신 상담사가 애플리케이션을 시각적이고 대화형으로 탐색하고 상호작용할 수 있는 안전한 환경을 제공하기 위해 상담사에게 Chrome DevTools를 사용하도록 합니다.
이러한 '테스트 에이전트'는 표준 정적 테스트에서 놓치는 몇 가지 주요 작업을 실행합니다.
- 동적 데이터 테스트: 스테이징 환경에서도 에이전트는 실제 변동 데이터 (예: 시즌에 따라 변하는 호텔 가격)를 기준으로 테스트하여 사용자가 애플리케이션을 사용하는 것과 똑같은 경험을 합니다. 이는
github-issue-test스킬에 언급된new_page,navigate_page,fill,click,hover과 같은 에이전트의 상호작용 도구를 위해 DevTools에서 사용 설정되어 에이전트가 동적으로 인증하고 실제 사용자 클릭 경로를 시뮬레이션할 수 있습니다. - 시각적 감사: 에이전트가 Figma 레이아웃과 실제 구현 간의 시각적 불일치를 식별합니다. 상담사를 위한 DevTools의
take_screenshot도구를 사용하면figma-validate스킬이 라이브 Storybook 렌더링의 고해상도 스크린샷을 캡처하여 Figma 내보내기와 나란히 비교합니다. - 사용성 확인: 에이전트는 자동화된 스크립트에서 간과하는 경우가 많은 번역 누락이나 사용성 오류를 포착합니다. 접근성 트리와 직접 상호작용하고
take_snapshot및take_screenshot를 통해 가져온 시각적 스냅샷을 검토함으로써 에이전트는 자동화된 검증 워크플로에 명시적으로 안내된 대로 MISSING_MESSAGE 문자열과 같은 UI 이상을 적극적으로 스캔합니다.
하위 태스크 분해 및 유지
세션 시간 제한 및 컨텍스트 손실을 방지하기 위해 P2ER은 하위 에이전트를 통해 작업을 엄격하게 분류합니다. 그런 다음 다음과 같이 에이전트가 오케스트레이터 역할을 하도록 지시합니다.
Rather than executing everything in the main thread, you must decompose large
or complex objectives into modular subtasks that can be delegated
to specialized subagents.
이 과정에서 인간 제품 소유자에게 정보를 제공하기 위해 팀은 상담사가 GitHub 문제에서 작업을 추적할 수 있는 맞춤 기술을 통합했습니다. 이렇게 하면 모든 하위 에이전트 작업과 그 결과가 GitHub API를 사용하여 하위 문제로 유지되고 문서화되어 다른 개발자가 파악할 수 있는 명확한 감사 추적과 지속적인 컨텍스트가 생성됩니다.
병렬 실행을 위해 환경 격리
여러 에이전트가 코드를 병렬로 실행할 수 있도록 개발 프로세스를 확장하기 위해 P2ER은 에이전트의 태스크별 격리된 환경을 의무화합니다. 이렇게 하면 UI 확인 중에 상태 충돌과 네트워크 문제가 방지됩니다.
이 격리를 위한 기술 설정에는 다음이 포함됩니다.
- 격리된 Git 작업 트리: 여러 에이전트가 동시에 작동할 때 파일 충돌과 작업공간 오염을 방지하기 위해 격리된 Git 작업 트리 내에서 작업이 실행됩니다. 각 에이전트에는 환경 변수가 복사되고 종속 항목이 심볼릭 링크되는 전용 파일 시스템 공간이 제공되므로 파일 변경사항이 서로 덮어쓰지 않습니다.
- 고유한 환경: 각 에이전트와 작업은 고유한 격리된 포트에서 Next.js 개발 서버를 실행합니다. 프로젝트 규칙에 따라 서버는 네트워크 충돌 없이 병렬 실행을 보장하기 위해
npx next dev -p <custom_port> --turbopack로 동적으로 시작됩니다. - 데이터베이스 클론: 병렬 테스트 중에 데이터 충돌을 방지하기 위해 P2ER은 에이전트 시작 시 기본 데이터베이스를 작업별 스키마로 프로그래매틱 방식으로 복제합니다. 에이전트가 확인을 완료하고 작업이 승인되면 자동 정리 프로세스에서 격리된 데이터베이스를 삭제합니다. 이 수명 주기를 통해 모든 에이전트가 깨끗한 작업 공간에서 작동하고 남아 있는 데이터가 없도록 할 수 있습니다.
- 타겟팅된 테스트: 상담사를 위한 Chrome DevTools를 통한 모든 브라우저 테스트는 해당 특정 상담사 인스턴스에 할당된 정확한 맞춤 포트를 타겟팅해야 합니다.
테스트 의무에 따라 기본 포트가 하드코딩되지 않으므로
http://localhost:<custom_port>와 같은 테스트 타겟 URL이 필요합니다.
영향: 품질을 유지하면서 개발 속도 10배 증가
신뢰도가 높은 가드레일이 적용된 에이전트 코딩으로 전환한 결과 P2ER의 출력이 달라졌습니다. 이러한 변경사항은 원래 에이전트가 안정적으로 실행되도록 하기 위해 필요했지만 전체 개발 수명 주기에도 도움이 되었습니다.
- 10배 빠른 작업 주기: 이전에는 평균 1~3일이 걸렸지만 이제 대부분의 문제가 하루 만에 해결됩니다. 배포 빈도가 주 1회에서 하루에 여러 번으로 증가했습니다.
- QA팀의 전략적 집중: 이제 에이전트가 기본적인 회귀와 '손쉬운 문제'를 포착하므로 인간 테스트팀은 더 심층적이고 복잡한 테스트 시나리오에 집중할 수 있습니다.
- 이해관계자를 위한 강력한 구현: 이제 프로그래머의 표준 '성공 경로'를 넘어 테스트가 진행되므로 구현이 더 탄력적입니다.
- 명확한 커뮤니케이션 및 추적 가능성: '인간의 문제에서 구현 하위 문제' 규칙을 적용하면 이해관계자가 기술적 구현 세부정보와 테스트 방법을 포함한 티켓을 읽는 대신 논리적 개선사항이 무엇인지에 관한 명확한 안내를 받을 수 있습니다.
이러한 변화가 개발 속도에 미치는 영향을 보여주는 예로, P2ER은 기존 방법을 사용했다면 수년이 걸렸을 새로운 플랫폼을 6개월 만에 구축했습니다. 사람은 에이전트가 이미 검증한 풀 요청을 검토하는 최종 품질 관리자로 남습니다.
팀을 위한 기술 통계
이 워크플로를 구축하는 동안 P2ER은 실험에서 성숙한 에이전트 지원 개발 모델로 전환하는 데 도움이 되는 여러 전략을 확인했습니다.
이러한 전략은 다른 팀이 자체 에이전트 구현을 개선하는 데 도움이 될 수 있습니다.
스크립트 삽입 및 CLI 일괄 처리를 사용하여 토큰 사용량 최적화
에이전트가 단계별 탐색 (예: 스냅샷 촬영, ID 찾기, 입력 작성, 대기)에만 의존하는 경우 긴 개발 세션 중에 MCP 서버가 토큰 집약적이 될 수 있습니다. 이 오버헤드를 최소화하기 위해 P2ER은 다음과 같은 두 가지 접근 방식을 사용합니다.
- 인라인 스크립트 삽입: 복잡한 React 양식을 통한 인증과 같은 타겟팅된 상호작용의 경우 상담사는
evaluate_script도구를 사용하여 일반 JavaScript를 브라우저에 직접 삽입합니다. 이렇게 하면 내장된 setter 재정의가 우회되고 여러 작업이 한 번에 실행되어 수많은 대화 턴이 절약됩니다. - CLI 스크립트 일괄 처리: 상담사가 '문제'를 발견하거나 반복되는 브라우저 흐름이 지나치게 길어지면 CLI 일괄 처리 대체로 전환합니다. 반복되는 개별 MCP 도구에 토큰을 사용하거나 맞춤 자동화 스크립트를 처음부터 작성하는 대신 P2ER은 Chrome DevTools CLI에 브라우저 작업을 유지하고 일괄 처리하도록 프롬프트를 표시합니다. 이를 통해 에이전트는 한 번에 전체 다단계 흐름을 프로그래매틱 방식으로 실행하여 지속적인 모델-도구 통신의 오버헤드를 크게 줄일 수 있습니다.
트레이스 분석으로 실적 추적 자동화
P2ER은 순전히 인간의 인식에 의존하는 대신 에이전트가 DevTools를 사용하여 자동화된 Lighthouse 감사 및 성능 추적을 실행하는 review-performance 스킬을 만들었습니다.
상담사는 performance_start_trace 및 performance_analyze_insight 도구를 사용하여 Core Web Vitals (LCP, INP, CLS)을 캡처하고 조사하여 기본 스레드 병목 현상이나 레이아웃 이동을 식별합니다. 품질 게이트를 마무리하기 위해 상담사는 전체 lighthouse_audit를 실행하여 접근성 (a11y), SEO, 일반 웹 권장사항의 회귀를 구체적으로 방지하여 풀 요청에 고품질 코드만 제출되도록 할 수 있습니다.
에이전트용 Chrome DevTools로 인증 강화
P2ER은 맞춤 기술 외에도 에이전트 MCP 서버의 Chrome DevTools 핵심 기능을 사용하여 기능 검증을 실행합니다. 여기에는 서버를 사용하여 다양한 기기를 에뮬레이션하고 반응성을 테스트하여 사용자 인터페이스가 다양한 화면 크기와 기기에서 작동하는지 확인하는 작업이 포함됩니다.
MCP 서버를 사용하여 애플리케이션을 탐색하면 상담사가 레이아웃과 실제 구현 간의 시각적 불일치를 식별하여 정적 테스트에서 간과하는 오류를 식별할 수 있습니다.
리소스
P2ER의 사용 사례를 자세히 알아보려면 관련 GitHub 저장소에서 언급된 모든 기술을 살펴보세요.
직접 시작하고 에이전트용 DevTools로 유사한 워크플로를 구현하는 방법을 자세히 알아보려면 다음 리소스를 참고하세요.