Skeleton

콘텐츠가 로딩되는 동안 표시되는 플레이스홀더 컴포넌트입니다. 사용자에게 로딩 상태를 시각적으로 전달합니다.

설치

Skeleton 컴포넌트를 import하여 사용합니다. width, height로 크기를 지정하고 variant로 형태를 선택합니다.

rectangular, rounded, circular, text 네 가지 변형을 지원합니다.

Rectangular

Rounded

Circular

Text

여러 줄의 텍스트 플레이스홀더를 생성합니다. lines로 줄 수를, lastLineWidth로 마지막 줄 너비를 조절합니다.

아바타 형태의 원형 플레이스홀더입니다. sm, md, lg, xl 네 가지 크기를 지원합니다.

32px

40px

48px

64px

카드 형태의 복합 플레이스홀더입니다. 이미지, 아바타, 텍스트를 조합하여 사용합니다.

테이블 형태의 플레이스홀더입니다. rows와 columns로 행/열 수를 지정할 수 있습니다.

disableAnimation prop으로 펄스 애니메이션을 비활성화할 수 있습니다.

애니메이션 활성화

애니메이션 비활성화

Skeleton은 WCAG 2.1 / KWCAG 2.2 Level AA 기준을 준수합니다.

aria-hidden: 모든 Skeleton 컴포넌트에 aria-hidden="true"가 적용되어 스크린 리더가 무시합니다.
aria-busy: 실제 로딩 상태는 상위 컨테이너에서 aria-busy="true"로 전달하세요.
prefers-reduced-motion: 시스템의 모션 감소 설정을 존중합니다. Tailwind의 animate-pulse는 자동으로 지원합니다.
로딩이 완료되면 실제 콘텐츠로 교체하고 aria-busy를 제거하세요.