문제 상황

웹 애플리케이션을 개발하다 보면 이미지 로딩과 관련된 문제에 종종 직면하게 된다. 특히 슬라이드 형태로 이미지가 전환될 때 아래와 같은 깜빡임 현상이 발생했다.

이런 깜빡임은 사용자 경험을 저해하는 요소로, 웹사이트의 품질을 떨어뜨리는 원인이 된다.

기존 코드 분석

{/* 배경 이미지 */}
      <div
        className="absolute inset-0 bg-black z-0 transition-all
		duration-300 rounded-xl"
        style={{
          backgroundImage: `url(${background})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          opacity: 0.5,
        }}
      />

{/* 배경 이미지 preloading */}
      <div className="hidden">
        {champions.map((champion, idx) => (
          <Image
            key={idx}
            src={champion.logo}
            alt=""
            width={1}
            height={1}
            priority
          />
        ))}
      </div>

이 코드에서 발견된 문제점:

1. 배경 이미지는 일반 div의 style 속성으로 처리되어 최적화가 부족했다.
2. 이미지 preloading을 위해 hidden div 안에 모든 이미지를 넣어두었지만 효율적이지 않았다.
3. width와 height가 1로 설정되어 실제 이미지 크기와 맞지 않았다.

해결 방법

---

Next.js의 Image 컴포넌트를 제대로 활용하여 문제를 해결했다.

{/* 배경 이미지 */}
      <Image
        src={background}
        alt="배경 이미지"
        fill
        className="object-cover z-0 rounded-xl opacity-50 
		transition-opacity duration-300"
        priority
      />

해결 후에는 깜빡임이 사라진 것을 확인할 수 있다.

핵심 개선 사항

---

1. Next.js Image 컴포넌트 활용

• 기존 div + backgroundImage 방식 대신 Next.js의 최적화된 Image 컴포넌트 사용
  
  

2. fill 속성 적용

• 부모 요소의 크기에 맞게 이미지가 채워지도록 설정
  
  

3. priority 속성 활용

• LCP(Largest Contentful Paint) 요소로 인식하여 더 높은 우선순위로 로딩
  
  

4. transition-opacity 적용

• 이미지 전환 시 부드러운 효과 제공

결론

---

Next.js의 Image 컴포넌트를 적절히 활용하면 이미지 로딩 시 발생하는 깜빡임 현상을 효과적으로 해결할 수 있다. 특히 priority 속성과 fill 속성을 함께 사용하면 사용자 경험을 크게 향상시킬 수 있다. 이미지가 많은 웹 애플리케이션에서는 로딩 최적화가 매우 중요하므로, Next.js가 제공하는 이미지 최적화 기능을 적극적으로 활용하는 것이 좋다.