---
name: wasabeef/core-web-vitals-기반-성능-분석-및-ux-스코어-산출
source: https://app.decimal.ai/s/wasabeef-core-web-vitals-ux@1/SKILL.md
source_sha256: 76f1126fd5cd
---

# Core Web Vitals 기반 성능 분석 및 UX 스코어 산출

사용자 경험 관점에서 애플리케이션 성능을 분석하고, 최적화를 통한 체감 속도 향상을 정량화합니다. Core Web Vitals에 기반한 UX 점수를 산출하고, 우선순위가 지정된 최적화 전략을 제안합니다.

## UX 성능 점수

```text
사용자 경험 점수: B+ (78/100)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

⏱️ Core Web Vitals
├─ LCP (로딩): 2.3초 [좋음] 목표<2.5초 ✅
├─ INP (반응): 95ms [좋음] 목표<200ms ✅
├─ CLS (시각적 안정성): 0.08 [좋음] 목표<0.1 ✅
├─ FCP (첫 렌더링): 1.8초 [좋음] 목표<1.8초 ✅
├─ TTFB (서버): 450ms [개선 필요] 목표<200ms ⚠️
└─ TTI (상호작용 가능): 3.5초 [개선 필요] 목표<3.8초 ⚠️

📊 사용자 체감 속도
├─ 초기 표시: 2.3초 [업계 평균: 3.0초]
├─ 페이지 전환: 1.1초 [업계 평균: 1.5초]
├─ 검색 결과 표시: 0.8초 [업계 평균: 1.2초]
├─ 폼 제출: 1.5초 [업계 평균: 2.0초]
└─ 이미지 로딩: 지연 로딩 구현됨 ✅

😊 사용자 만족도 예측
├─ 이탈률 예측: 12% (업계 평균: 20%)
├─ 완료율 예측: 78% (목표: 85%)
├─ 추천 NPS: +24 (업계 평균: +15)
└─ 재방문율: 65% (목표: 70%)

📊 사용자 경험에 미치는 영향
├─ 표시 속도 0.5초 단축 → 이탈률 -7%
├─ 이탈률 5% 감소 → 세션 길이 +15%
├─ 검색 개선 → 체류 시간 +15%
└─ 전반적 UX 개선도: +25%

🎯 개선 기대 효과 (우선순위 순)
├─ [P0] TTFB 개선 (CDN 도입) → LCP -0.3초 = 체감 속도 +15%
├─ [P1] JS 번들 최적화 → TTI -0.8초 = 상호작용 시간 -20%
├─ [P2] 이미지 최적화 (WebP) → 전송량 -40% = 로드 시간 -25%
└─ [P3] 캐시 전략 → 재방문 시 50% 고속화
```

## 사용법

```bash
# UX 점수의 포괄적 분석
find . -name "*.js" -o -name "*.ts" | xargs wc -l | sort -rn | head -10
「UX 성능 점수를 산출하고 Core Web Vitals를 평가해주세요」

# 성능 병목 지점 검출
grep -r "for.*await\|forEach.*await" . --include="*.js"
「비동기 처리의 병목을 검출하고 사용자 체감에 미치는 영향을 분석해주세요」

# 사용자 경험에 미치는 영향 분석
grep -r "addEventListener\|setInterval" . --include="*.js" | grep -v "removeEventListener\|clearInterval"
「성능 문제가 사용자 경험에 미치는 영향을 분석해주세요」
```

## 기본 예시

```bash
# 번들 크기와 로드 시간
npm ls --depth=0 && find ./public -name "*.js" -o -name "*.css" | xargs ls -lh
"번들 크기와 에셋 최적화의 개선점을 특정해주세요"

# 데이터베이스 성능
grep -r "SELECT\|findAll\|query" . --include="*.js" | head -20
"데이터베이스 쿼리 최적화 포인트를 분석해주세요"

# 의존성의 성능 영향
npm outdated && npm audit
"오래된 의존성이 성능에 미치는 영향을 평가해주세요"
```

## 분석 관점

### 1. 코드 수준의 문제

- **O(n²) 알고리즘**: 비효율적인 배열 연산 검출
- **동기 I/O**: 블로킹 처리의 특정
- **중복 처리**: 불필요한 계산이나 요청의 삭제
- **메모리 누수**: 이벤트 리스너와 타이머의 관리

### 2. 아키텍처 수준의 문제

- **N+1 쿼리**: 데이터베이스 액세스 패턴
- **캐시 부족**: 반복 계산이나 API 호출
- **번들 크기**: 불필요한 라이브러리나 코드 분할
- **리소스 관리**: 커넥션 풀이나 스레드 사용량

### 3. 기술 부채에 의한 영향

- **레거시 코드**: 오래된 구현에 의한 성능 저하
- **설계 문제**: 책임 분산 부족에 의한 높은 결합도
- **테스트 부족**: 성능 회귀 검출 누락
- **모니터링 부족**: 문제의 조기 발견 체제

## 성능 개선 ROI 매트릭스

```text
개선 ROI = (시간 단축 효과 + 품질 향상) ÷ 구현 공수
```

| 우선도                  | 사용자 경험 향상 | 구현 난이도 | 시간 단축 효과 | 구체적 예     | 공수 | 효과      |
| ----------------------- | ---------------- | ----------- | -------------- | ------------- | ---- | --------- |
| **[P0] 즉시 구현**      | 높음             | 낮음        | > 50%          | CDN 도입      | 8h   | 응답 -60% |
| **[P1] 조기 구현 권장** | 높음             | 중간        | 20-50%         | 이미지 최적화 | 16h  | 로드 -30% |
| **[P2] 계획적 구현**    | 낮음             | 높음        | 10-20%         | 코드 분할     | 40h  | 초기 -15% |
| **[P3] 보류/경과 관찰** | 낮음             | 낮음        | < 10%          | 미세한 최적화 | 20h  | 부분 -5%  |

### 우선도 판정 기준

- **P0 (즉시 구현)**: UX 향상 「높음」× 난이도 「낮음」= ROI 최대
- **P1 (조기 구현)**: UX 향상 「높음」× 난이도 「중간」= ROI 높음
- **P2 (계획적)**: UX 향상 「낮음」× 난이도 「높음」= ROI 중간
- **P3 (보류)**: UX 향상 「낮음」× 난이도 「낮음」= ROI 낮음

## 성능 지표와 UX 개선 상관관계

| 지표                    | 개선 폭 | 체감 속도 향상 | 사용자 만족도  | 구현 공수 |
| ----------------------- | ------- | -------------- | -------------- | --------- |
| **LCP (로딩)**          | -0.5초  | +30%           | 이탈률 -7%     | 16h       |
| **INP (반응)**          | -50ms   | +15%           | 스트레스 -20%  | 8h        |
| **CLS (시각적 안정성)** | -0.05   | +10%           | 오조작 -50%    | 4h        |
| **TTFB (서버)**         | -200ms  | +25%           | 체감 속도 +40% | 24h       |
| **TTI (상호작용 가능)** | -1.0초  | +35%           | 완료율 +15%    | 32h       |
| **번들 크기**           | -30%    | +20%           | 첫 방문 +25%   | 16h       |

## 측정과 도구

### Node.js / JavaScript

```bash
# 프로파일링
node --prof app.js
clinic doctor -- node app.js

# 번들 분석
npx webpack-bundle-analyzer
lighthouse --chrome-flags="--headless"
```

### 데이터베이스

```sql
-- 쿼리 분석
EXPLAIN ANALYZE SELECT ...
SHOW SLOW LOG;
```

### 프론트엔드

```bash
# React 성능
grep -r "useMemo\|useCallback" . --include="*.jsx"

# 리소스 분석
find ./src -name "*.png" -o -name "*.jpg" | xargs ls -lh
```

## 지속적 개선

- **정기 감사**: 주간 성능 테스트 실행
- **메트릭 수집**: 응답 시간, 메모리 사용량 추적
- **알림 설정**: 임계값 초과 시 자동 알림
- **팀 공유**: 개선 사례와 안티패턴의 문서화