[SkeletonUI] 데이터 로딩중 스켈레톤 UI 적용하여 사용자 경험 향상시키기

🧑‍🎨 [SkeletonUI] 데이터 로딩중 스켈레톤 UI 적용하여 사용자 경험 향상시키기

이렇게 생긴 그림일기 디테일 페이지에 스켈레톤 UI를 적용하려고 한다.

스켈레톤 UI를 적용하면 단순히 스피너가 돌아가는 것보다 사용자가 어디에 어떤 내용이 뜰지 예측할 수 있도록 도와주며, 로딩 중 지루함을 덜어줄 수 있다.

직접 구현할 수도 있지만 react-loading-skeleton 라이브러리를 사용하면 더 간펀하게 스켈레톤 UI를 만들 수 있다.

 

---

1. react-loading-skeleton 설치하기

npm install react-loading-skeleton

설치 후 Skeleton 컴포넌트를 가져와서 사용할 수 있다.

 

2. Skeleton 기본 사용법

두가지 방법으로 크기를 지정할 수도 있고 부모 너비의 비율에 맞춰서 조정할 수도 있다.

• 특정 크기 지정 
• <Skeleton circle width={60} height={60} />
• 비율 기반 크기 설정

  <Skeleton width="100%" height={25} />
  

 

3. 그림일기 디테일 페이지 스켈레톤 UI 적용

 

코드 구현

import Skeleton from "react-loading-skeleton";

export default function DiaryDetailSkeleton() {
  return (
    <div className="p-4 w-full h-auto rounded-3xl space-y-4">
      {/* 일기 헤더 */}
      <div className="p-4 w-full rounded-3xl h-auto bg-white">
        <div className="flex w-full items-center space-x-3">
          {/* 기분 아이콘 */}
          <Skeleton circle width={60} height={60} />
          <div className="flex flex-col h-auto w-full">
            {/* 날씨 및 공개 상태 */}
            <div className="flex flex-row space-x-2">
              <Skeleton circle width={30} height={30} />
              <Skeleton circle width={30} height={30} />
            </div>
            {/* 날짜 */}
            <div className="w-full h-auto">
              <Skeleton width="60%" height={20} />
            </div>
          </div>
        </div>
        {/* 제목 */}
        <div className="space-y-2">
          <Skeleton width="100%" height={25} />
        </div>
      </div>

      {/* 그림일기 영역 */}
      <div className="w-full h-48 bg-white rounded-3xl flex items-center justify-center">
        <Skeleton width="90%" height="90%" />
      </div>

      {/* 일기 내용 */}
      <div className="p-4 rounded-3xl bg-white">
        <Skeleton width="80%" height={25} />
        <Skeleton width="90%" height={25} />
        <Skeleton width="70%" height={25} />
      </div>
    </div>
  );
}

 

 

4. 결과

• react-loading-skeleton의 기본 애니메이션 효과 덕분에 반짝이는 듯한 효과가 나타나면서 로딩 중임을 직관적으로 알릴 수 있다.
• 실제 UI에서는 제목, 날짜, 기분 아이콘, 그림일기 영역, 다이어리 내용이 자연스럽게 자리 잡는 형태로 보이게 된다.