[Next.js] Skeleton UI

Skeleton UI 이란?

콘텐츠가 아직 준비되지 않은 상태에서 실제 레이아웃을 닮은 뼈대 형태의 화면을 미리 보여주는 UI 패턴.

마치 완성된 화면의 스케치 버전을 보여주는 것이다.
아래 사진들을 보자.

위 사진은 페이스북, 아래 사진은 유튜브의 스켈레톤 UI이다.
이 처럼 주변에 스켈레톤 UI를 많이 사용하는 것을 볼 수 있다.

그럼 왜 사용하는 걸까?

사용자에게 편안함을 느끼게 해주고, 화면이 매끄럽게 만들기 위해서다.

만약 스켈레톤 UI이 아닌, 빈 화면 또는 화면 가운데에 로딩 스피너만 있다면 보는 사용자는 심리적으로 불안감과 불편함을 느낄 것이다.

Next.js에 적용하는 방법

먼저 적용하고자 하는 페이지를 참고하여 그 컴포넌트에 대한 스켈레톤 UI 스타일을 만들어준다. (css는 생략)

// card.tsx

import style from './card.module.css'

export default function Card() {
    return <div className={style.container}>
        <div className={style.cardimage}></div>
        <div className={style.cardinfo}>
            <div className={style.cardtitle}></div>
            <div className={style.cardauthor}></div>
        </div>
    </div>;
}

그리고나서 스트리밍을 위해 작성했던 Suspense의 fallback에 추가해준다.

examplecomponent.tsx

import { Suspense } from "react";
import Card from "./card";         
import SkeletonCard from "./skeleton-card";

export default function ExampleComponent() {
  return (
    <Suspense fallback={<SkeletonCard />}>
      <Card/>
    </Suspense>
  );
}

이렇게 진행했으면 데이터를 부르는데 시간이 걸리는 컨텐츠는 스켈레톤 UI로 표시되는 것을 볼 수 있다.