Coworkers - 팀 페이지 구현(Skeleton UI 구현)

오병훈·2025년 3월 3일

[팀 프로젝트] - 코드잇 스프린트 FE11기 심화 프로젝트

목록 보기

8/9

4. Skeleton UI: 더 나은 사용자 경험을 위한 로딩 처리

Skeleton UI는 페이지가 데이터를 가져오는 동안 사용자에게 빈 화면이 아닌, 로딩 중이라는 시각적 힌트를 제공하는 디자인 패턴입니다. 이를 통해 사용자 경험(UX)을 향상시키고, 부드러운 화면 전환을 구현할 수 있습니다.

🎯 Skeleton UI를 적용한 이유

1. 빈 화면 방지

데이터를 불러오는 동안 UI가 깜빡이거나 공백이 보이지 않도록 하여 사용자 경험을 개선함.

2. UX 향상

단순한 스피너보다는 실제 UI의 레이아웃과 유사한 스켈레톤을 보여주면 사용자는 콘텐츠가 곧 표시될 것이라는 기대감을 갖게 됨.
심리적으로 더 빠른 로딩 속도를 느끼게 하는 효과가 있음.

3. 로딩 지연 시 발생할 수 있는 이탈 방지

로딩 시간이 길어지면 사용자가 떠날 가능성이 높아지는데, Skeleton UI는 "지금 로딩 중"이라는 명확한 피드백을 줌으로써 사용자 이탈을 줄이는 효과가 있음.

🛠 Skeleton UI 구현 방법

✅ 1. report Skeleton 구조 적용

div 요소를 사용하여 실제 UI와 유사한 레이아웃을 유지
animate-pulse 클래스를 추가하여 부드러운 로딩 애니메이션 효과 적용

export default function ReportSkeleton() {
  return (
    <div className="mx-auto my-12 flex max-w-[75rem] flex-col gap-4 xl:my-16">
      <h2 className="text-lg font-semibold text-text-primary">리포트</h2>
      <div className="flex h-56 w-full animate-pulse justify-between gap-4 rounded-xl bg-background-secondary p-6 xl:h-[13.5625rem]">
        <div className="flex items-center gap-10 xl:gap-16">
          <div className="h-[140px] w-[140px] rounded-full bg-background-tertiary" />

          <div className="hidden flex-col gap-2 tablet:flex">
            <div className="h-5 w-32 rounded bg-background-tertiary" />
            <div className="h-8 w-24 rounded bg-background-tertiary" />
          </div>
        </div>

        <div className="flex flex-col gap-4">
          <div className="h-20 w-[8.875rem] rounded-xl bg-background-tertiary px-4 tablet:w-[17.5rem] xl:w-[25rem]" />
          <div className="h-20 w-[8.875rem] rounded-xl bg-background-tertiary px-4 tablet:w-[17.5rem] xl:w-[25rem]" />
        </div>
      </div>
    </div>
  );
}

📌 주요 포인트

animate-pulse 사용 → 자연스러운 깜빡이는 효과 추가하여 로딩 느낌 강조
rounded 스타일 적용 → UI가 둥글게 렌더링되도록 설정

✅ 2. Todo List Skeleton 적용

할 일 목록(Todo List)에서도 데이터를 불러오는 동안 사용자 경험을 개선하기 위해 Skeleton UI를 추가함.

export default function TodoListSkeleton() {
  return (
    <div className="space-y-4">
      {Array.from({ length: 6 }).map(() => (
        <div
          key={`todolist_skeleton_${getRandomId()}`} // 고유한 key를 부여하여 리렌더링 문제 방지
          className="relative mt-4 flex h-10 w-full animate-pulse items-center rounded-xl bg-background-secondary pl-6 pr-4"
        >
          <div className="absolute left-0 h-10 w-3 rounded-l-xl bg-background-tertiary" />
          <div className="ml-4 h-4 w-1/6 rounded bg-background-tertiary" />
          <div className="absolute right-4 flex items-center gap-2">
            <div className="h-6 w-14 rounded-xl bg-background-tertiary px-2 py-1" />
          </div>
        </div>
      ))}
    </div>
  );
}

📌 주요 포인트

Array.from({ length: 6 }) 사용 → 일정 개수의 스켈레톤 아이템 생성
animate-pulse 효과 적용 → 자연스럽게 로딩 애니메이션 추가

🎯 Skeleton UI 적용 후 변화

적용 전	적용 후
데이터 로딩 중 빈 화면 노출	실제 UI와 유사한 스켈레톤 화면 제공
사용자가 로딩을 기다리지 않고 이탈할 가능성 증가	로딩 상태를 직관적으로 전달하여 UX 향상