/cc-inspector:image — 이미지 메모리 진단

실행 중인 앱의 이미지 캐시 점유율과 메모리 사용량을 재고, 과대 이미지에 점수·개선 제안을 붙이며 캐시를 비워 메모리를 회수합니다 — 이미지 때문에 앱이 무거울 때.

항목	내용
실행 명령	`/cc-inspector:image`
분류	개발
난이도	●○○ 간단
MCP 서버	`flutter-inspector`

한마디로#

앱이 보여주는 사진들이 메모리를 얼마나 잡아먹고 있는지 들여다보는 청진기입니다. 냉장고에 음식이 너무 꽉 찼는지, 상한 게 있는지 열어보고 정리해 주는 것과 같아요.

누가·언제 쓰나요#

앱이 갑자기 느려지거나 "메모리 부족" 경고가 뜰 때
이미지가 잘 안 뜨거나 로딩이 답답하게 느릴 때
사진이 많이 들어간 화면에서 앱이 멈추거나 꺼질 때(메모리 초과)

무엇을 해주나요#

지금 이미지 캐시가 얼마나 차 있는지(예: 100MB 중 50MB 사용, 50%)와 전체 메모리 사용량을 알려줍니다.
문제가 될 만한 이미지를 찾아내고 점수(예: 65점, C등급)와 개선 제안을 줍니다. (예: "이 이미지는 화면 크기보다 4배 큽니다" → 크기를 줄여 쓰라는 제안)
쌓인 캐시를 비워서 메모리를 다시 확보해 줍니다.

어떻게 쓰나요#

# 지금 캐시 상태 확인
/inspector/image stats

# 문제 있는 이미지 분석
/inspector/image warnings

# 만료된 캐시 비우기
/inspector/image clear expired

clear 뒤에는 비울 대상을 골라 쓸 수 있습니다: all(전체) / memory(메모리) / disk(디스크) / expired(만료된 것).

안에서 무슨 일이 벌어지나요#

상황별로 아래 순서대로 점검합니다.

메모리 경고가 떴을 때: 현재 사용량 확인 → 문제 이미지 찾기 → 캐시 비우기 → 이미지 크기 줄이기(cacheWidth/cacheHeight) 검토
이미지 로딩이 느릴 때: 캐시 적중률 확인 → 네트워크 다운로드 점검 → 이미지 용량 최적화 검토
앱이 메모리 초과로 꺼질 때: 최대 메모리 확인 → 너무 큰 이미지 찾기 → 큰 이미지 최적화 → 최대 캐시 크기 조정 검토

⚙️ 상세 옵션·실행 명세 (개발자 / AI 에이전트용)

Triggers#

Image cache issues
Memory usage warnings
Image loading performance

MCP Tools#

img_get_cache_stats#

Returns image cache statistics.

Response example:

{
  "cache": {
    "currentSize": 52428800,
    "currentSizeFormatted": "50 MB",
    "maximumSize": 104857600,
    "maximumSizeFormatted": "100 MB",
    "usagePercent": 50,
    "liveImageCount": 25
  },
  "memory": {
    "currentUsage": 157286400,
    "currentUsageFormatted": "150 MB"
  }
}

img_analyze_warnings#

Analyzes image-related warnings and issues.

Parameters:

threshold: Warning threshold (MB)

Response example:

{
  "warnings": [
    {
      "type": "oversized",
      "severity": "high",
      "message": "Image is 4x larger than display size",
      "image": "banner_home.png",
      "suggestion": "Recommend using cacheWidth/cacheHeight"
    }
  ],
  "score": 65,
  "grade": "C"
}

img_clear_cache#

Clears the image cache.

Parameters:

type: Clear type (all, memory, disk, expired)

Common Diagnostics#

Memory warning#

1. img_get_cache_stats -> Check current usage
2. img_analyze_warnings -> Identify problematic images
3. img_clear_cache -> Clear cache
4. Consider applying cacheWidth/cacheHeight

Slow image loading#

1. img_get_cache_stats -> Check cache hit rate
2. /inspector/network -> Check downloads
3. Review image size optimization

App crash (OOM)#

1. img_get_cache_stats -> Check peak memory
2. img_analyze_warnings -> Find oversized images
3. Apply large image optimization
4. Consider adjusting maximum cache size

Best Practices#

Image Loading Patterns#

// CORRECT: Specify cache size
Image.network(
  imageUrl,
  cacheWidth: 200,
  cacheHeight: 200,
)

// CORRECT: Use CachedNetworkImage
CachedNetworkImage(
  imageUrl: imageUrl,
  memCacheWidth: 200,
  placeholder: (context, url) => CircularProgressIndicator(),
)

// WRONG: Loading at original size
Image.network(imageUrl)  // 4000x4000 image displayed at 100x100

Examples#

Check cache status#

/inspector/image stats

Analyze image issues#

/inspector/image warnings

Clear cache#

/inspector/image clear expired

References#

Detailed implementation: .claude/agents/flutter-inspector-image.md
Master inspector: .claude/commands/inspector.md
Image optimization: .claude/agents/flutter-image-optimizer.md