Next.js에서 Loading UI 구현하기 (Skeleton UI)

2025.6.29 일요일의 공부기록

이번 글에서는 Next.js에서 제공하는 Loading UI와 Streaming 기능을 활용해 로딩 상태를 의미 있게 표현하는 방법에 대해 알아본다. 이를 통해 사용자 경험(UX)을 향상시킬 수 있으며, Skeleton UI 예시 코드를 통해 쉽게 이해할 수 있도록 돕는다.

---

Next.js의 Loading UI (Skeleton UI)란?

Next.js의 특수 파일인 loading.js(또는 loading.tsx)는 React의 Suspense를 활용하여 서버에서 데이터를 로딩하는 동안 사용자에게 시각적으로 의미 있는 UI를 제공하는 기능이다.

데이터 로딩 과정에서 사용자가 빈 화면을 보는 대신 Skeleton UI와 같은 시각적 피드백을 제공하여 더 나은 사용자 경험을 줄 수 있다.

📚 Next.js 공식 문서: Loading UI & Streaming

---

Loading UI 예시 코드 (Skeleton UI)

아래는 프로젝트에서 사용된 Skeleton UI를 만드는 예시 코드이다. Tailwind CSS를 이용해 간단하면서도 효과적인 로딩 화면을 만들 수 있다.

app/(tabs)/products/loading.tsx

export default function Loading() {
  return (
    <div className="p-5 animate-pulse flex flex-col gap-5">
      {[...Array(10)].map((_, index) => (
        <div key={index} className="*:rounded-md flex gap-5">
          <div className="bg-neutral-700 size-28" />
          <div className="flex flex-col gap-2 *:rounded-md">
            <div className="bg-neutral-700 h-5 w-40" />
            <div className="bg-neutral-700 h-5 w-20" />
            <div className="bg-neutral-700 h-5 w-10" />
          </div>
        </div>
      ))}
    </div>
  );
}

위 코드에서 중요한 요소를 설명하면 다음과 같다:

• animate-pulse 클래스:

  • Tailwind CSS에서 제공하는 클래스로, 요소가 부드럽게 깜박이는 애니메이션 효과를 준다.
  • 사용자가 로딩 상태임을 직관적으로 인지할 수 있다.

• Skeleton 형태 구성:

  • 이미지처럼 보이는 정사각형 영역과 텍스트처럼 보이는 여러 개의 직사각형 영역으로 구성하여 로딩 중에도 콘텐츠 구조를 쉽게 예상할 수 있게 해준다.

---

실제 화면 예시