React에서 Progressive Image Loading 구현하기

웹에서 이미지 로딩 속도는 사용자 경험에 큰 영향을 미칩니다. 특히 고해상도 이미지를 사용하는 경우, 전체 이미지가 로드될 때까지 빈 공간이 보이는 현상이 자주 발생합니다. 이 문제를 해결하기 위해 React에서 Progressive Image Loading(점진적 이미지 로딩)을 구현하는 방법을 실무 중심으로 소개합니다.

1. Progressive Image Loading 개념

Progressive Image Loading은 먼저 저해상도 또는 블러 처리된 작은 이미지를 빠르게 보여주고, 이후 고해상도 원본 이미지가 완전히 로드되면 이를 자연스럽게 교체하는 기법입니다. 이렇게 하면 사용자는 빈 이미지 공간 대신 흐릿한 이미지를 먼저 보고, 본 이미지를 기다리므로 체감 속도가 향상됩니다.

2. React에서 구현하기

React에서는 상태 관리와 이벤트 핸들링을 적절히 활용해 쉽게 구현할 수 있습니다. 대표적인 방법은 두 개의 이미지 URL을 받아 저해상도 이미지는 먼저 로드하고, 고해상도 이미지는 백그라운드에서 로드한 뒤 교체하는 방식입니다.

3. 코드 예제

import React, { useState, useEffect } from 'react';

const ProgressiveImage = ({ lowResSrc, highResSrc, alt, ...props }) => {
  const [src, setSrc] = useState(lowResSrc);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const img = new Image();
    img.src = highResSrc;
    img.onload = () => {
      setSrc(highResSrc);
      setLoading(false);
    };
  }, [highResSrc]);

  return (
    <img
      src={src}
      alt={alt}
      style={{
        filter: loading ? 'blur(10px)' : 'none',
        transition: 'filter 0.3s ease-out',
        width: '100%',
        height: 'auto'
      }}
      {...props}
    />
  );
};

export default ProgressiveImage;

4. 사용법

위 컴포넌트를 임포트한 후, 저해상도 이미지와 고해상도 이미지를 각각 넘겨주면 됩니다.

<ProgressiveImage
  lowResSrc="/images/sample-low.jpg"
  highResSrc="/images/sample-high.jpg"
  alt="Sample Image"
/>

5. 마무리

Progressive Image Loading은 간단한 코드로 사용자 경험을 크게 개선할 수 있습니다. React의 상태와 이펙트 훅을 이용하면 자연스러운 흐림 효과 전환도 구현 가능하니, 이미지가 많은 사이트에서 꼭 적용해보시길 추천합니다.