Image blurDataURL

이미지가 로드 중일 때 빈 화면 대신 회색 스켈레톤 이미지를 사용하는 것은 UX 측면에서 여러 가지 효과가 있습니다. 로딩 중인 콘텐츠의 구조를 미리 보여줌으로써 사용자에게 현재 이미지가 로드되고 있음을 명확하게 알릴 수 있습니다. 특히 이미지 파일의 용량이 크거나 네트워크 요청이 원활하지 않은 환경에서 더욱 효과적입니다.

Next.js에서 스켈레톤 이미지 구현

png-pixel.com 사이트에서 원하는 색상의 이미지를 만들어냅니다. 예를 들어, #eeeeee 색상으로 1px 이미지를 만들면 다음과 같은 Base64 인코딩된 데이터를 얻을 수 있습니다.

const GREY_BLUR_IMAGE =
  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mM8/h8AApMByMhOLQwAAAAASUVORK5CYII='

그 후, 프로젝트에서 외부 이미지를 동적 임포트하는 Image 컴포넌트에 다음과 같이 적용할 수 있습니다.

import Image from "next/image";
import { GREY_BLUR_IMAGE } from "@/constants/image";
 
interface Props {
  url: string;
}
 
const LogoImage: React.FC<Props> = ({ url }) => {
  return (
    <Image
      width={1200}
      height={700}
      src={url}
      alt="로고"
      placeholder="blur"
      blurDataURL={GREY_BLUR_IMAGE}
    />
  );
};
 
export default LogoImage;

위의 코드에서 외부 이미지 소스가 로드되기 전에는 #eeeeee 색상의 스켈레톤 이미지가 노출됩니다. 만약 이 방법을 사용하지 않고 큰 용량의 이미지를 로드하거나 네트워크 요청이 지연된다면 사용자에게는 흰색 빈 화면이 나타나게 됩니다. 이는 UX적으로 좋지 않은 경험을 초래할 수 있습니다. 사용자는 빠른 페이지 반응성을 원하며 로드되고 있다는 것을 명확하게 인지하고 싶어합니다.

주의사항

blurDataURL을 사용할 때는 공식 문서에서 권장하는 바와 같이 10px 미만의 이미지를 사용하는 것이 좋습니다.
placeholder="blur"와 함께 사용할 때만 효과가 있습니다.
외부 이미지여야 합니다.

참고 자료

Image Image 톺아보기