Skeleton

Skeleton 컴포넌트는 실제 콘텐츠가 로드되기 전, 자리 표시자로 사용되어 사용자에게 로딩 상태를 명확하게 전달합니다. 로딩 중에도 레이아웃 안정성을 유지하며, 부드러운 애니메이션을 통해 자연스러운 전환 효과를 제공합니다.

Anatomy

root

전체 컴포넌트를 감싸는 컨테이너이며, 기본 배경색은 $color.palette.gray-200로 설정됩니다.

avatar

프로필 사진이나 아이콘 자리를 위한 원형 또는 둥근 사각형 영역을 나타낼 수 있습니다.

title

주요 제목의 경우 스켈레톤으로 표현합니다.

textLine

본문 혹은 설명 텍스트 자리 표시를 표현합니다.

footer

추가 정보나 액션 영역을 표현합니다.

Shape

Rounded (Default)

기본 형태로, 부드러운 곡선을 지니며 텍스트 콘텐츠를 표현하거나 및 다양한 컴포넌트를 표현할 때 적합합니다.

Circular

프로필 사진이나 아이콘 등 원형 요소에 적합한 형태입니다.

Rectangular

직선적이고 각진 형태로, 이미지를 표현할 때 사용합니다.

Animation

Pulse

부드러운 펄스 효과로, 콘텐츠가 로드 중임을 시각적으로 표현합니다.

Shimmer

$gradient.shimmer 컬러와 $timing-function.easing 타이밍 함수를 사용하여, 1.5초 동안 shimmer 효과를 제공합니다.

Behaviors

Responsive Layout

컨테이너(root) 크기에 따라 크기와 배치가 유동적으로 조정됩니다.

Animation Behavior

pulse 또는 shimmer 애니메이션을 통해 로딩 상태를 직관적으로 전달합니다.

shimmer 애니메이션은 spec에 따라 1.5초 동안 $gradient.shimmer 색상과 $timing-function.easing 타이밍 함수를 사용합니다.

Transition

실제 콘텐츠 로드 시, skeleton 컴포넌트가 부드럽게 fade out 되는 전환 효과를 제공합니다.

Guidelines

로딩 상태 표현

실제 데이터가 준비되기 전 임시 자리 표시자로 Skeleton을 사용하며, 콘텐츠가 로드되면 반드시 실제 컴포넌트로 교체합니다.

일관성 유지

애니메이션 스타일(예: pulse, shimmer)과 지속시간(1.5초)은 전체 애플리케이션에서 통일되게 적용되어야 합니다.

접근성 고려

ARIA 역할 등 접근성 속성을 활용하여, 스크린 리더가 해당 영역이 로딩 중임을 인식할 수 있도록 합니다.

성능 최적화

콘텐츠 로드 전 임시 상태로만 사용하며, 불필요하게 skeleton이 오래 유지되지 않도록 관리합니다.

인터랙션 주의

Skeleton 컴포넌트는 인터랙티브한 요소가 아니므로, 버튼이나 링크와 같은 상호작용 요소로 사용하지 않습니다.

Related Articles

Loading

개요

옵션 테이블

링크

스펙

base

상태	슬롯	속성	값
enabled	root	color	$color.palette.gray-200
	shimmer	duration	1.5s
		timingFunction	$timing-function.easing
		color	$gradient.shimmer

radius=0

상태	슬롯	속성	값
enabled	root	cornerRadius	0px

radius=8

상태	슬롯	속성	값
enabled	root	cornerRadius	8px

radius=16

상태	슬롯	속성	값
enabled	root	cornerRadius	16px

radius=full

상태	슬롯	속성	값
enabled	root	cornerRadius	$radius.full