Skeleton
콘텐츠가 로딩되는 동안 이후 나타날 요소의 윤곽을 미리 보여줘서 로딩 시간을 짧게 느끼게 하는 컴포넌트예요.
설치
pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/skeleton.jsonclass-variance-authority 를 설치하고 아래 코드를 components/ui/skeleton.tsx 에 복사해요.
Anatomy
Skeleton은 Background와 Corner Radius로 구성되며, 로딩이 시작되면 Shimmer 애니메이션이 나타나요.
Properties
Size
Skeleton의 너비(Width)와 높이(Height)는 자유롭게 조절할 수 있어요. 표시될 실제 콘텐츠의 크기를 반영해 조절해요.
텍스트를 대체할 때는 height="lineHeight.t4" 처럼 텍스트와 같은 행간 토큰을 지정하면 실제 글자 한 줄과 높이가 같아져요.
Radius
표현하려는 콘텐츠의 형태에 따라 0, 8, 16, full(9999) 중 하나를 사용해요.
| 콘텐츠 유형 | Radius |
|---|---|
| 텍스트 | 8 |
| 카드 및 썸네일 | 16 |
| Avatar (원형) | full |
Tone
일반 콘텐츠는 Neutral, AI를 활용하는 콘텐츠는 Magic 스타일을 사용해요.
Animation
Skeleton은 로딩 중임을 나타내기 위해 Shimmer 애니메이션을 기본으로 제공해요. 사용자가 동작 줄이기(prefers-reduced-motion)를 설정한 경우에는 애니메이션이 멈춰요.
Guidelines
Skeleton의 사용
Skeleton은 주로 목록, 카드 뷰, 리스트 뷰처럼 반복되는 데이터 기반의 화면이나, 곧 나타날 콘텐츠의 구조를 미리 보여줄 수 있는 페이지에서 사용해요.
실제 콘텐츠가 나타날 자리에 같은 형태로 표시해요.
Progress Circle과 같이 사용하는 것은 최대한 지양해요.
상황에 맞는 Tone 사용하기
데이터 종류에 따라 Skeleton이 다른 색상으로 표시돼요. 맥락에 알맞은 Tone을 선택해요.
| Tone | 사용 상황 |
|---|---|
| Neutral | 데이터를 불러오는 일반적인 로딩 경험일 때 표시해요. |
| Magic | 빈 공간을 자동으로 채워주는 등 AI 기능이 활성화되었을 때 표시해요. |
Skeleton vs. Progress Circle
Skeleton과 Progress Circle은 콘텐츠 로딩 상태를 보여준다는 공통점 때문에 자주 혼동돼요. Skeleton은 무엇이 로딩될지 콘텐츠의 구조를 보여주고, Progress Circle은 '지금 로딩 중'이라는 상태 자체를 알려준다는 점이 핵심적인 차이예요.
| Skeleton | Progress Circle (Indeterminate) | |
|---|---|---|
| 핵심 용도 | 콘텐츠의 구조를 미리 보여줘요 | 콘텐츠 형태와 상관없이 시스템이 작동 중이라는 사실을 알려줘요 |
| 위치 | 콘텐츠가 실제로 표시될 영역 | 특정 영역(컴포넌트)의 중앙 또는 화면 전체 |
| 특징 | 넓은 영역의 콘텐츠나 반복되는 콘텐츠가 한 번에 로딩될 때 | 데이터 저장, 일부 새로고침 등 특정 행동으로 로딩될 때 |
| 로딩 시간 | 상대적으로 긴 로딩(1~10초)에 적합해요 | 짧은 로딩(1~4초)에 적합해요 |
| 애니메이션 | 곧 내용이 나타날 것을 표현하는 Shimmer | 지속적인 회전 |
접근성
Skeleton은 시각적인 자리 표시일 뿐이라 스크린 리더에 의미를 전달하지 않아요. 로딩 중인 영역을 감싸는 컨테이너에 aria-busy="true" 를 지정하고, 필요하면 "불러오는 중" 같은 숨김 텍스트를 함께 제공해요.
Props
Prop
Type