AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

앵귤러 이미지 최적화: 레이지 로딩과 그 이상

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

  • 앵귤러 개발자 (중급~고급)
  • 이미지 성능 최적화 필요 시
  • 레이지 로딩, 서버 사이드 렌더링(SSR) 대응, 이미지 포맷 최적화에 관심 있는 개발자

핵심 요약

  • 앵귤러 이미지 성능의 주요 문제점: 루트 전환 시 이미지 재로딩, 중복 로딩, SSR과 클라이언트 수분화 갈등
  • 핵심 솔루션: SmartLazyLoadingDirective를 사용한 레이지 로딩 + ImageOptimizationService 기반의 포맷 최적화, 캐싱 전략
  • 핵심 코드:

- @Directive({ selector: '[appSmartLazyLoading]' })

- ImageOptimizationService.getOptimizedImageUrl()

섹션별 세부 요약

1. 앵귤러 이미지 성능 문제점

  • Change Detection: 이미지 소스 변경 시 불필요한 리렌더링 발생

- 해결책: OnPush 전략과 메모이제이션 사용

  • Route Transitions: 라우트 전환 시 이미지 재로딩

- 해결책: 서비스 기반 캐싱 및 프리로딩

  • Component Reuse: 동일 이미지의 중복 로딩

- 해결책: 싱글톤 서비스 및 지능형 캐싱

2. `SmartLazyLoadingDirective` 구현

  • 기능:

- IntersectionObserver 기반의 레이지 로딩

- placeholder, errorImage 입력 지원

- priority 기반의 이미지 로딩 우선순위 설정

  • 핵심 로직:

- SSR 환경에서 high 우선순위 이미지 즉시 로딩

- loadImage() 메서드로 최적화된 이미지 URL 생성 및 로딩

- preloadImage() 메서드로 이미지 미리 로딩

3. `ImageOptimizationService` 설계

  • 기능:

- 이미지 포맷 최적화 (AVIF, WebP, JPG)

- 캐싱 전략 (최대 100개, 24시간 유효)

- 포맷 지원 감지 (testFormatSupport())

  • 핵심 메서드:

- getOptimizedImageUrl()

- generateResponsiveSrcSet()

- preloadImage()

4. 포맷 지원 감지 및 SSR 대응

  • 포맷 지원 감지: webp, avif, heic 지원 여부 자동 감지
  • SSR 수분화 처리:

- handleSSR() 메서드로 SSR 환경에서 플레이스홀더 설정 또는 즉시 로딩

결론

  • 실무 팁:

- SmartLazyLoadingDirective를 사용해 레이지 로딩 구현

- ImageOptimizationService로 이미지 포맷 최적화 및 캐싱 적용

- SSR 환경에서 priority: 'high'로 중요한 이미지 즉시 로딩

- generateResponsiveSrcSet()을 통해 반응형 이미지 srcset 생성

  • 핵심: 앵귤러의 라이브러리 기능과 서비스 전략을 결합한 이미지 최적화가 성능 향상에 효과적