# Lazy Loading (지연 로딩)

## 개요

**Lazy Loading**(지연 로딩)은 웹 개발 및 소프트웨어 공학에서 필요한 데이터나 리소스를 페이지가 로드될 때 즉시 모두 가져오는 대신, 사용자가 실제로 그 리소스가 필요할 때 비로소 로드하는 최적화 기법입니다. 주로 이미지, 비디오, iframe, 그리고 복잡한 자바스크립트 모듈 등에 적용되며, 초기 페이지 로드 시간을 단축하고 대역폭 사용량을 줄여 전반적인 웹 성능과 사용자 경험(UX)을 향상시키는 핵심 기술 중 하나입니다.

현대 웹은 고해상도 이미지와 풍부한 미디어 콘텐츠를 포함하는 경우가 많으며, 이러한 리소스는 페이지 크기를 급격히 증가시킵니다. Lazy Loading은 이러한 문제를 해결하기 위해 '필요한 순간에 필요한 만큼만' 데이터를 가져오는 전략을 취합니다. 이는 특히 모바일 환경이나 네트워크 속도가 느린 사용자들에게 큰 이점을 제공합니다.

## 동작 원리 및 기술적 구현

Lazy Loading의 핵심 개념은 **'관심 영역(Intersection)'**과 **'스크롤 이벤트'**의 감지입니다. 브라우저는 사용자가 현재 보고 있는 화면(Viewport)과 리소스가 위치할 영역이 겹치는 시점을 감지하여 해당 리소스의 로딩을 트리거합니다.

### 1. HTML5 내장 속성 활용 (`loading` 속성)
최근 브라우저들은 이미지와 iframe에 대한 기본 Lazy Loading 지원을 강화했습니다. HTML 태그에 `loading="lazy"` 속성을 추가하는 것만으로 간단한 지연 로딩을 구현할 수 있습니다.

```html
<!-- 기본 로딩 (Eager Loading) -->
<img src="image.jpg" alt="예시 이미지">

<!-- 지연 로딩 (Lazy Loading) -->
<img src="image.jpg" alt="예시 이미지" loading="lazy">
```

이 방법은 구현이 매우 간단하지만, 모든 브라우저에서 완벽하게 지원되지 않을 수 있으며, 로딩 시점의 미세한 제어가 어렵다는 한계가 있습니다.

### 2. Intersection Observer API
더 정교한 제어가 필요할 경우, 자바스크립 **Intersection Observer API**를 사용합니다. 이 API는 DOM 요소가 뷰포트와 얼마나 겹치는지를 비동기적으로 관찰할 수 있게 해줍니다. 스크롤 이벤트 리스너보다 성능적으로 훨씬 효율적입니다.

```javascript
const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // 실제 이미지 소스 적용
      obs.unobserve(img); // 한 번 로드되면 관찰 중지
    }
  });
});

document.querySelectorAll('img.lazy').forEach(img => {
  observer.observe(img);
});
```

### 3. Placeholders 및 Skeleton Screens
Lazy Loading 중에는 빈 공간이 나타나지 않도록 **플레이스홀더**(Placeholder)나 **스켈레톤 스크린**(Skeleton Screen)을 사용하는 것이 좋습니다. 이는 로딩이 완료될 때까지 사용자에게 시각적 피드백을 제공하여 '로딩 중'임을 인지하게 합니다.

## 주요 장점

1. **초기 페이지 로드 시간 단축**: 불필요한 하단 리소드의 다운로드를 지연시킴으로써 HTML, CSS, 주요 자바스크립트의 우선 순위를 높여 콘텐츠가 빠르게 렌더링되도록 합니다.
2. **대역폭 및 서버 부하 감소**: 사용자가 스크롤하지 않은 리소스는 다운로드되지 않으므로 데이터 사용량을 절약하고 서버의 트래픽 부하를 줄입니다.
3. **메모리 사용량 최적화**: 브라우저가 불필요한 리소스를 메모리에 적재하지 않아, 특히 모바일 기기에서 메모리 부족으로 인한 크래시를 방지할 수 있습니다.
4. **SEO(검색 엔진 최적화) 향상**: Google을 비롯한 주요 검색 엔진은 페이지 속도를 중요한 랭킹 요소로 고려합니다. Core Web Vitals의 주요 지표인 LCP(Largest Contentful Paint)를 개선하는 데 기여합니다.

## 단점 및 주의사항

* **CLS(누적 레이아웃 이동) 문제**: 이미지가 로드되기 전에는 공간이 확보되지 않아, 이미지가 로드되면서 페이지 레이아웃이 갑자기 밀리는 현상이 발생할 수 있습니다. 이를 방지하기 위해 이미지 컨테이너에 명시적인 `width`와 `height` 속성을 지정하거나 `aspect-ratio`를 사용하는 것이 필수적입니다.
* **스크롤 기반 로딩의 한계**: 스크롤이 발생해야만 로딩이 시작되므로, 사용자가 스크롤을 내리지 않으면 해당 리소스는 절대 로드되지 않습니다. 이는 특정 광고나 분석 스크립트 등 필수 리소스에 적용할 때 주의가 필요합니다.
* **구형 브라우저 호환성**: `loading="lazy"` 속성은 최신 브라우저에서만 지원되므로, 레거시 브라우저를 지원해야 한다면 폴리필(Polyfill)이나 Intersection Observer 기반의 자바스크립트 구현이 필요합니다.

## 관련 기술 및 도구

* **Responsive Images**: `srcset` 및 `sizes` 속성과 결합하여 디바이스 화면 크기에 맞는 최적화된 이미지를 지연 로딩할 수 있습니다.
* **WebP/AVIF 형식**: 지연 로딩과 함께 압축률이 높은 최신 이미지 형식을 사용하면 로드 속도를 더욱 극대화할 수 있습니다.
* **CDN(콘텐츠 전송 네트워크)**: 지연 로딩된 리소스를 CDN을 통해 빠르게 전달하면 전반적인 성능이 향상됩니다.

## 결론

Lazy Loading은 현대 웹 개발에서 성능 최적화를 위한 필수적인 전략입니다. 초기 로딩 속도를 개선하고 사용자 경험을 향상시키는 동시에, 서버 자원과 클라이언트 대역폭을 효율적으로 관리할 수 있게 해줍니다. 구현 시에는 CLS와 같은 레이아웃 이동 문제를 방지하기 위해 적절한 스타일링과 폴백(Fallback) 전략을 함께 고려하는 것이 중요합니다.