CWV Superpowers: 자동화된 Core Web Vitals 진단

CWV Superpowers는 사용자의 CoreDash field data 및 Chrome 브라우저 도구와 연결하여 Core Web Vitals 문제를 진단하는 무료 오픈 소스 Claude Code 스킬입니다. 실제 사용자 데이터에서 가장 심각한 병목 구간을 식별하고, 근본 원인을 추적하며, 코드 수정을 생성합니다. Lighthouse 제안 목록이 아닙니다. 엘리먼트, 파일, 코드 라인을 정확히 짚어줍니다.

최종 검토: Arjen Karel (2026년 3월)

빠른 시작:

코드는 GitHub에 있습니다. 두 개의 명령어로 Claude Code에 설치하십시오:

/* MarketPlace 및 CWV SuperPower 스킬 설치 */
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpowers

/* 이제 Core Web Vitals AI superpower 시작 */
Why is my site slow?

그다음 CoreDash을 MCP 서버로 추가하고 claude --chrome을 실행합니다. 이게 전부입니다.

CWV SuperPower 스킬의 기능

CWV Superpowers는 무엇이 느린지(what)와 왜 느린지(why)를 모두 답하기 위해 두 가지 데이터 소스를 결합합니다.

CoreDash Real User Monitoring은 실제로 무엇이 느린지 알려줍니다. 실제 사용자, 실제 기기, 실제 네트워크 환경을 기반으로 합니다. CoreDash는 모든 페이지 로드를 추적하고, 각 지표의 원인을 문제를 유발하는 정확한 엘리먼트로 지목합니다. LCP가 4.2초이고 병목 엘리먼트가 div.hero > img.main이라고 표시된다면, 그것이 바로 실제 사용자가 겪고 있는 경험입니다.

Chrome 브라우저 트레이싱은 그 이유를 알려줍니다. 이 스킬은 모바일 에뮬레이션(4G, 4배 CPU 쓰로틀링)으로 페이지를 방문하여 네트워크 워터폴을 기록하고, RUM 데이터가 식별한 정확한 단계를 추적합니다. 모든 것을 보는 것이 아니라, 페이지를 느리게 만든다고 입증된 부분만 추적합니다!

이것이 핵심입니다! RUM 데이터는 무엇이 느린지는 알려주지만 왜 느린지는 알려주지 못합니다. Chrome 트레이스는 그 이유를 제공하지만, field data가 없으면 엉뚱한 페이지나 엉뚱한 지표를 조사하게 됩니다. CWV Superpowers는 이 두 가지를 결합합니다.

이 스킬은 세 가지 Core Web Vitals 지표를 모두 진단합니다: LCP(4단계 분석), INP(스크립트 기여도가 포함된 3단계 분석), CLS(알려진 원인 패턴 매칭). 지표별 전체 워크플로우는 LCP 진단 가이드 및 INP 진단 가이드를 참조하십시오.

5단계 워크플로우

모든 조사는 5단계를 거칩니다.

1단계: 의도 파악. 분석할 대상("내 제품 페이지의 LCP")을 지정하거나 문제를 찾아달라고 요청합니다("무엇부터 해결해야 합니까?"). 특정 대상을 언급하면 범위를 명확히 정의합니다. 탐색을 원하면 2단계로 넘어갑니다.

2단계: 탐색. 이 스킬은 CoreDash를 통해 사이트를 스캔합니다. 전체 상태, 모바일 상태, LCP 기준 최악의 URL, INP 기준 최악의 URL을 가져옵니다. 그런 다음 가장 큰 문제를 선택합니다. 이때 needs improvement보다 poor 등급을, 데스크톱보다 모바일을, 트래픽 양이 많은 곳을 우선합니다. p75 LCP가 2.4초로 "통과" 기준이지만 18%의 사용자가 poor 영역에 있는 페이지도 여전히 문제입니다. CWV Superpowers는 이러한 문제도 놓치지 않고 잡아냅니다.

3단계: 진단. LCP의 경우 5~7회의 CoreDash API 호출을 실행합니다. LCP 엘리먼트, 엘리먼트 유형, 우선순위 상태, 4개 단계 분석(TTFB, Load Delay, Load Time, Render Delay), 그리고 7일간의 트렌드를 가져옵니다. 절대적인 임계값을 초과하는 단계가 아닌, 전체 시간에서 가장 큰 비중을 차지하는 단계를 찾는 비례적 추론을 통해 병목 구간을 식별합니다. INP의 경우 느린 상호작용 엘리먼트, LOAF 스크립트, 3개 단계 분석 정보를 가져옵니다. CLS의 경우 알려진 5가지 원인 패턴과 대조합니다.

4단계: Chrome 트레이스. Chrome 환경이 제공되면 스킬이 직접 페이지를 방문하여 3단계에서 찾아낸 병목 단계만 추적합니다. 타겟팅된 트레이스는 명확한 근거를 제시하지만, 모든 것을 다 트레이스하면 불필요한 노이즈만 늘어납니다.

5단계: 출력. 코드 수정을 적용하거나 HTML 보고서를 생성할 수 있고, 둘 다 진행할 수도 있습니다. 수정 코드는 파일, 라인, 엘리먼트를 명시하며 변경 전후의 코드를 보여줍니다.

출력 형태 예시

이 스킬은 field data, Chrome의 분석 근거, 구체적인 해결책을 하나로 연결하는 근본 원인 분석 결과를 생성합니다:

근본 원인: /product/running-shoes-42 페이지의 LCP 이미지 div.hero-banner > img.product-main이 preload 힌트가 없고 fetchpriority="high"가 설정되지 않아 1,980ms 늦게 발견되었습니다. CoreDash 데이터: 모바일 p75 기준 LCP는 3,820ms(poor)입니다. Load Delay가 전체의 52%를 차지하는 병목 구간입니다. Chrome 트레이스로 확인한 결과, 네트워크 워터폴에서 HTML 첫 바이트와 이미지 요청 사이에 1,940ms의 지연이 확인되었습니다.

해결책은 직관적입니다: preload 힌트를 추가하고 fetchpriority="high"를 설정하는 것입니다. 일반적인 조언이 아니라, 해당 엘리먼트, 파일, 발생 원인에 정확히 맞춘 해결책을 제시합니다.

상세 보고서에는 색상별 지표 카드, 단계별 분석 차트가 포함되며, Chrome을 사용한 경우에는 필름스트립 스크린샷과 네트워크 워터폴 SVG가 추가로 제공됩니다. 두 보고서 유형 모두 단독으로 실행 가능한 HTML 파일이므로 Slack 스레드에 공유하거나 티켓에 첨부할 수 있습니다.

팁: Chrome은 선택 사항입니다. Chrome이 없어도 전체 RUM 진단, 병목 식별, 코드 수정을 모두 제공받을 수 있습니다. 필름스트립이나 워터폴 시각 자료는 제외되지만, 실제 사용자 데이터가 가장 확실한 기준이므로 진단 품질은 동일합니다.

시작하기

실제 사용자 데이터가 연동된 CoreDash 계정이 필요합니다. 무료 요금제도 지원합니다. 대화형으로 사용하는 경우에는 API 키가 전혀 필요 없으며, Claude Code가 브라우저를 통해 로그인합니다. 헤드리스 환경이나 CI 환경을 위해 키가 필요한 경우, Project Settings > API Keys (MCP) 메뉴에서 발급받을 수 있습니다. 발급된 키는 최초 1회만 표시되며, SHA-256 해시로 저장되어 읽기 전용으로 관리됩니다.

Claude Code (권장)

# CoreDash MCP 서버 추가 (브라우저 로그인, API 키 불필요)
claude mcp add --transport http coredash https://app.coredash.app/api/mcp

# 마켓플레이스에서 스킬 추가
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpower

# 전체 분석을 위해 Chrome 환경으로 시작
claude --chrome

처음 연결할 때는 /mcp를 실행하고 coredash를 선택한 뒤 Authenticate를 진행합니다. 브라우저에서 CoreDash 로그인 및 권한 동의 페이지가 열리면 로그인을 하고 프로젝트를 선택한 다음 동의하십시오. Claude Code는 수명이 짧고 자동 갱신되는 OAuth 토큰(1시간 유효 기간, 30일 자동 연장)을 저장하며, 필요시 언제든 취소할 수 있습니다. 완료 후 "What are my Core Web Vitals?"라고 질문해 보십시오. 실제 LCP, INP, CLS 데이터를 올바르게 반환하면 모든 준비가 끝난 것입니다.

API 키를 사용하거나 브라우저가 없는 헤드리스 환경에서 실행하고 싶습니까? 그렇다면 Bearer 헤더를 대신 전달하십시오:

claude mcp add --transport http coredash https://app.coredash.app/api/mcp \
  --header "Authorization: Bearer cdk_YOUR_API_KEY"

Cursor

.cursor/mcp.json에 CoreDash를 추가합니다:

{
  "mcpServers": {
    "coredash": {
      "url": "https://app.coredash.app/api/mcp",
      "headers": {
        "Authorization": "Bearer cdk_YOUR_API_KEY"
      }
    }
  }
}

기타 MCP 클라이언트

CoreDash MCP 서버는 HTTP MCP를 지원하는 모든 클라이언트(VS Code(Copilot 에이전트 모드), Windsurf, Gemini CLI, Cline, JetBrains IDE 등)와 연동됩니다. 엔드포인트는 Bearer 토큰 헤더를 사용하는 https://app.coredash.app/api/mcp입니다. 클라이언트별 설정법은 GitHub 설정 가이드를 참조하십시오.

AI 에이전트 Core Web Vitals 작업에서 field data가 왜 필수적인지, 그리고 Lighthouse만 사용하는 에이전트가 생성한 코드 수정의 1/3이 왜 반려되는지에 대한 배경 정보는 개요 문서를 읽어보십시오.