169 lines
6.6 KiB
Markdown
169 lines
6.6 KiB
Markdown
## Analyze Performance
|
|
|
|
사용자 경험 관점에서 애플리케이션 성능을 분석하고, 최적화를 통한 체감 속도 향상을 정량화합니다. Core Web Vitals에 기반한 UX 점수를 산출하고, 우선순위가 지정된 최적화 전략을 제안합니다.
|
|
|
|
### UX 성능 점수
|
|
|
|
```text
|
|
사용자 경험 점수: B+ (78/100)
|
|
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
|
|
⏱️ Core Web Vitals
|
|
├─ LCP (로딩): 2.3초 [좋음] 목표<2.5초 ✅
|
|
├─ FID (반응): 95ms [좋음] 목표<100ms ✅
|
|
├─ 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 |
|
|
| **FID (반응)** | -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
|
|
```
|
|
|
|
### 지속적 개선
|
|
|
|
- **정기 감사**: 주간 성능 테스트 실행
|
|
- **메트릭 수집**: 응답 시간, 메모리 사용량 추적
|
|
- **알림 설정**: 임계값 초과 시 자동 알림
|
|
- **팀 공유**: 개선 사례와 안티패턴의 문서화
|