Skeleton

콘텐츠가 로드되기 전 레이아웃을 미리 보여 주는 Next.js Client Component입니다. 텍스트·아바타·이미지· 버튼 형태와 조합 레이아웃을 지원하며 role="status" ·aria-busy · aria-label로 접근성을 보장합니다.

기본

`skeleton`에 `skeleton_text` · `skeleton_title` 형태 클래스를 조합합니다.

형태

아바타·이미지·버튼·블록 등 콘텐츠 유형에 맞는 형태 클래스를 사용합니다.

카드

카드·대시보드 위젯 로딩 시 실제 콘텐츠 구조와 유사하게 배치합니다.

정적

`skeleton_static`을 지정하면 쉬머 애니메이션 없이 고정 플레이스홀더만 표시합니다. `prefers-reduced-motion` 환경에서도 애니메이션이 비활성화됩니다.

마크업

스켈레톤 그룹에 role="status"와aria-busy="true"를 지정하고, 장식용 막대에는aria-hidden="true"를 추가합니다. 실제 콘텐츠가 로드되면 스켈레톤을 제거하고 aria-busy="false"로 변경합니다.

<!-- 문단 -->
<div class="skeleton_group" role="status"
  aria-live="polite" aria-busy="true" aria-label="콘텐츠 로딩 중">
  <span class="skeleton skeleton_title" aria-hidden="true"></span>
  <span class="skeleton skeleton_text" aria-hidden="true"></span>
  <span class="skeleton skeleton_text skeleton_w-md" aria-hidden="true"></span>
</div>

<!-- 아바타 + 텍스트 행 -->
<div class="skeleton_row">
  <span class="skeleton skeleton_circle" aria-hidden="true"></span>
  <div class="skeleton_row-body">
    <span class="skeleton skeleton_text skeleton_w-lg" aria-hidden="true"></span>
    <span class="skeleton skeleton_text skeleton_w-sm" aria-hidden="true"></span>
  </div>
</div>

API · Props

Prop	타입	기본값	설명
`active`	boolean	true	쉬머 애니메이션. false면 skeleton_static
`avatar`	boolean	false	아바타 + 본문 행 레이아웃
`paragraph`	boolean \| number	false	본문 줄 수. false·true는 기본 3줄, 0은 자동 콘텐츠 숨김
`round`	boolean	false	원형만 표시
`ariaLabel`	string	콘텐츠 로딩 중	role=status 라벨
`className`	string	—	skeleton_group 루트에 추가 클래스

API · Children

Children	설명
`children`	커스텀 Skeleton 막대를 전달하는 React children. paragraph={0}으로 자동 콘텐츠 숨김

클래스 · 속성

React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.

클래스	설명
`skeleton · skeleton_text · skeleton_title · skeleton_circle`	막대·제목·원형
`skeleton_button · skeleton_image · skeleton_block`	버튼·이미지·블록 형태
`skeleton_w-sm · skeleton_w-md · skeleton_w-lg`	줄 너비
`skeleton_group · skeleton_row · skeleton_row-body`	레이아웃
`skeleton_static · skeleton_sm · skeleton_lg`	애니메이션·크기

전체 영역 스피너·오버레이는 Spin 컴포넌트를, 빈 상태 UI는 Empty 컴포넌트를 사용하세요.

디자인 토큰

토큰	기본값	설명
`--skeleton-bg · --skeleton-shine`	—	배경·쉬머
`--skeleton-text-height · --skeleton-title-height`	0.875rem · 1.125rem	줄 높이
`--skeleton-avatar-size · --skeleton-gap · --skeleton-duration`	—	아바타·간격·주기