Skeleton UI 적용하기 🦴

데이터 로딩할 때 Skeleton UI 적용하기 🦴

오늘은 데이터를 불러오는 동안 사용자 경험을 개선하기 위해 Skeleton UI를 적용해봤슴다
사실 전에는 그냥 "로딩중..." 이라고 표시하고 말았는데, 이번에는 좀 더 세련되게 만들어보고 싶었어요

Skeleton UI란? 🤔

Skeleton UI는 실제 컨텐츠가 로드되기 전에 보여주는 임시 화면입니다!!
페이스북이나 유튜브 같은 서비스를 사용하다 보면 콘텐츠가
로드되기 전에 회색 막대들이 깜빡이면서 로딩을 표시하는데 그것이 바로 Skeleton UI입니닷

Skeleton UI를 사용하는 이유

1. 사용자가 어떤 내용이 로드될지 미리 예상할 수 있다
2. 갑자기 콘텐츠가 확 나타나는 것보다 자연스럽다
3. 로딩 중이라는 걸 직관적으로 보여준다

만드는 방법! 💻

Tailwind CSS를 사용해서 구현했고 아주 쉽게 구현이 가능합니다!

const LevelSectionSkeleton = () => {
  return (
    <section>
      <div className="w-[300px] h-[300px] bg-gray-200 animate-pulse rounded-lg" />
      <div className="space-y-2 mt-2">
        <div className="flex flex-col">
          <div className="h-7 bg-gray-200 rounded w-36 animate-pulse" />
          <div className="h-5 bg-gray-200 rounded w-48 mt-1 animate-pulse" />
        </div>
        <div className="w-full bg-gray-200 rounded-full h-4">
          <div className="bg-gray-300 rounded-full h-4 w-1/2 animate-pulse" />
        </div>
        <div className="flex justify-end">
          <div className="h-5 bg-gray-200 rounded w-16 animate-pulse" />
        </div>
      </div>
    </section>
  );
};


export const LevelSection = ({ levelInfo, isLoading }: LevelSectionProps) => {
  if (isLoading || !levelInfo) {
    return <LevelSectionSkeleton />;
  }

  return (
    <section>
      <figure className="w-[300px] h-[300px] border">
        <Image
          src={levelInfo.image}
// .... 이하 생략

데이터 요청을 Tanstack Query로 했슴다 따라서,
isLoading 속성을 사용해서 로딩에 대한 여부를 판단할 때
로딩중인 시점에는 만들었던 Skeleton UI를 반환해주면 끝입니다!!

키 포인트 📌

1. 애니메이션 효과

   • Tailwind의 animate-pulse 클래스를 사용하면 깜빡이는 효과를 쉽게 줄 수 있슴다(빤짝 빤짝 거려요)

2. 실제 컨텐츠와 비슷한 모양

   // 이렇게 조건부 렌더링을 해요
   {isLoading ? <SkeletonUI /> : <RealContent />}

   • 스켈레톤의 크기와 모양을 실제 컨텐츠와 비슷하게 맞춰야
   • 갑자기 레이아웃이 확 바뀌는 걸 방지할 수 있습니닷

3. 반응형 고려

   <div className="w-full max-w-[420px]" /> // 이런 식으로 크기 조절

   • 모바일에서도 잘 보일 수 있게 반응형도 고려해야 한다네요!

주의할 점 ⚠️

1. 너무 오래 보여주면 오히려 답답해 보일 수 있다..
2. 실제 컨텐츠와 너무 다른 모양이라면 너무 부자연스럽다
3. 애니메이션이 너무 과하면 어지러울 수 있으니 적당히!

배운 점 📝

스켈레톤 UI를 적용하고 나니 확실히 앱이 더 부드럽게 동작하는 것 같아 뿌듯하네여..
특히 데이터 로딩이 오래 걸리는 부분이라면 사용자 경험이 더 향상될 것 같슴다

유튜브 보면서 Skeleton UI가 종종 보였는데 직접 해보니 잼씀다
더 나은 애니메이션 효과가 있는지도 한 번 확인해 봐야겠네유

Framer Motion 같은 라이버러리를 활요하면 훨씬 더 깔끔하게 페이지가 나올 것 같슴닷😊

참고하면 좋은 자료들 🔍

• 테일윈드 애니메이션 관련 공식문서
• 참조한 블로그 1
• 토스트UI 기술 블로그