Skip to Content
ComponentsFoundationSkeleton

Skeleton

콘텐츠 로딩 중 레이아웃 자리를 표시하는 플레이스홀더 컴포넌트

개요

Skeleton 컴포넌트는 데이터 로딩 중에 실제 콘텐츠의 형태를 모사한 플레이스홀더를 표시하여 사용자에게 로딩 상태를 전달합니다. animate-pulse 애니메이션이 기본 적용되며, 기본적으로 aria-hidden="true"가 설정되어 스크린 리더에 노출되지 않습니다.

주요 특징

  • ✅ Pulse 애니메이션: animate-pulse 기반 로딩 효과
  • ✅ 유연한 크기: className으로 너비/높이/모서리 자유롭게 지정
  • ✅ 접근성: 기본 aria-hidden="true"로 스크린 리더에서 숨김
  • ✅ 디자인 토큰: 테마 커스터마이징 지원

사용 예시

기본

너비와 높이를 지정해 다양한 형태의 플레이스홀더를 만듭니다.

카드 형태

아바타와 텍스트 라인을 조합해 카드 로딩 상태를 표현합니다.

콘텐츠 블록

이미지와 본문 영역을 모사한 콘텐츠 블록입니다.

API Reference

Props

PropTypeDefaultDescription
classNamestring-크기/모양을 지정하는 CSS 클래스
aria-hiddenbooleantrue스크린 리더 숨김 여부
childrenReact.ReactNode-내부 콘텐츠 (일반적으로 비워둠)

기본 사용법

import { Skeleton } from "@vortex/ui-foundation"
 
// 텍스트 라인
<Skeleton className="h-4 w-[250px]" />
 
// 원형 아바타
<Skeleton className="size-12 rounded-full" />
 
// 이미지 블록
<Skeleton className="h-[200px] w-full rounded-lg" />

접근성

스크린 리더

  • 기본적으로 aria-hidden="true"가 적용되어 보조 기술에서 무시됨
  • 로딩 상태 자체를 알려야 하는 경우 별도의 role="status" 요소와 함께 사용

권장 사항

  • ✅ 실제 콘텐츠의 레이아웃과 동일한 크기로 구성해 레이아웃 시프트 방지
  • ✅ 로딩 완료 후 실제 콘텐츠로 교체
  • ❌ Skeleton 자체에 의미 있는 텍스트를 넣지 않기

관련 컴포넌트

  • Spinner: 인라인 로딩 표시기
  • OverlayLoading: 전체 화면 로딩 오버레이
  • Sidebar: SidebarMenuSkeleton으로 메뉴 로딩 표시
Last updated on
SidebarSlider