🚨 문제 상황 분석

1. 사내 내부 종속성 문제로 next.js 기반의 최적화된 <Image> 컴포넌트 사용불가.
2. 프로젝트는 모바일, 데스크톱 모두 지원하고있지만 모바일의 사용율이 90%, 데스크톱은 10%에 반해 서버에 저장되어있는 이미지는 모바일 사이즈 기준 3배수의 이미지가 저장되어있어. 호출시 렌더링 지연 및 비용문제에 직면
3. 모든 이미지가 즉시 로드되어 초기 로딩 속도 저하

🎯 설계 목표

• 다중 해상도 지원: 1x, 2x, 3x density별 최적화된 이미지 제공
• 최신 포맷 활용: WebP/AVIF 우선, fallback으로 원본 제공
• 지연 로딩: 뷰포트 진입 시점에 로딩
• 타입 안전성: TypeScript로 props 검증

🔍 동작 원리:

• 다중 해상도 대응 (srcset)
• 포맷 최적화 (Picture 태그)
• 브라우저가 디바이스에 맞는 최적 이미지 자동 선택
• 쿼리 파라미터 처리

📈 성능 지표