Skeleton

스켈레톤은 콘텐츠를 불러오는 동안 그 자리를 미리 잡아두는 플레이스홀더예요.

설치

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/steel/skeleton.json

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/steel/skeleton.json

추가 의존성은 없어요. 아래 코드를 components/ui/skeleton.tsx 에 복사해요.

components/ui/steel/skeleton.tsx

/** * @title Skeleton * @description 콘텐츠를 불러오는 동안 그 자리를 미리 잡아두는 플레이스홀더예요. */import * as React from 'react';import { cn } from '@/lib/utils';// Atlassian @atlaskit/skeleton — ui/index.tsx 스펙// 색을 둘 다 지정하면 CSS 변수로 keyframes 의 시작·끝 색을 덮어쓴다.const keyframes = `@keyframes steel-skeleton-shimmer{0%{background-color:var(--ds-skeleton-from-color,var(--ds-skeleton))}to{background-color:var(--ds-skeleton-to-color,var(--ds-skeleton-subtle))}}`;export interface SkeletonProps {  width: string | number;  height: string | number;  /** 모서리 둥글기. radius 토큰 사용 (기본 `var(--ds-radius-small)`) */  borderRadius?: string | number;  /** 기본 색(color.skeleton)을 덮어써요. shimmer 시작 색은 ShimmeringEndColor 와 함께 줄 때만 바뀌어요. */  color?: string;  /** shimmer 끝 색 */  ShimmeringEndColor?: string;  /** shimmer 애니메이션 켜기 */  isShimmering?: boolean;  /** `data-<groupName>` 속성을 붙여 여러 스켈레톤을 한 번에 겨냥해요. */  groupName?: string;  testId?: string;  className?: string;}function Skeleton({  width,  height,  borderRadius = 'var(--ds-radius-small, 4px)',  color,  ShimmeringEndColor,  isShimmering = false,  groupName,  testId,  className,}: SkeletonProps) {  const groupAttribute = groupName ? { [`data-${groupName}`]: 'true' } : undefined;  const overrideShimmer = Boolean(color && ShimmeringEndColor);  return (    <div      data-slot="skeleton"      data-testid={testId}      aria-hidden      style={        {          width,          height,          borderRadius,          backgroundColor: color,          '--ds-skeleton-from-color': overrideShimmer ? color : undefined,          '--ds-skeleton-to-color': overrideShimmer ? ShimmeringEndColor : undefined,        } as React.CSSProperties      }      {...groupAttribute}      className={cn(        'bg-ds-skeleton [animation-direction:alternate] [animation-duration:1.5s] [animation-iteration-count:infinite] [animation-timing-function:linear]',        isShimmering && '[animation-name:steel-skeleton-shimmer]',        className,      )}    >      {isShimmering && (        <style href="steel-skeleton" precedence="default">          {keyframes}        </style>      )}    </div>  );}export { Skeleton };

Examples

Basic

width 와 height 로 크기를 정해요. 기본 색은 color.skeleton, 모서리는 radius.small(4px) 이에요.

Shimmering

isShimmering 을 켜면 color.skeleton 과 color.skeleton.subtle 사이를 1.5초 주기로 오가며 반짝여요.

Shape

borderRadius 에 radius 토큰을 넣어 모양을 바꿔요. 아바타 자리는 var(--ds-radius-full) 로 원을 만들어요.

Color

color 로 기본 색을 바꿔요. shimmer 색까지 바꾸려면 color 와 ShimmeringEndColor 를 둘 다 지정해요. color 만 주면 shimmer 중에는 효과가 보이지 않아요.

조합

실제 콘텐츠와 같은 크기·모양으로 스켈레톤을 조합해 로딩 화면을 만들어요. groupName 을 주면 data-<groupName> 속성이 붙어 한 번에 스타일을 겨냥할 수 있어요.

Usage guidelines

스켈레톤은 데이터를 불러오는 동안 콘텐츠가 들어갈 자리를 잡아둬요. 최종 콘텐츠와 크기·모양을 맞추면 로딩이 끝날 때 화면이 덜컹이지 않아요.

shimmer 는 로딩이 눈에 띄게 오래 걸릴 때만 써요.
색을 바꿀 때는 디자인 토큰을 쓰고, 상태 표시·차트·버튼처럼 보이지 않도록 은은한 색을 골라요.
콘텐츠가 준비되면 바로 스켈레톤을 치워요.
진행률이나 완료 여부가 중요하다면 Progress Bar 같은 진행 패턴을 써요.

Do· 같은 크기·모양

최종 콘텐츠와 같은 크기와 모양으로 자리를 잡아요.

Don't· 과한 shimmer

아주 짧은 로딩, 촘촘하게 반복되는 목록, 주변 콘텐츠를 방해하는 곳에는 shimmer 를 쓰지 않아요.

Accessibility

스켈레톤 자체는 의미 없는 장식이라 aria-hidden 으로 숨겨져요.
로딩 중인 영역 컨테이너에 aria-busy 와 무엇을 불러오는지 설명하는 aria-label 을 붙여 스크린 리더 사용자에게 알려요.
주변 콘텐츠를 방해하는 움직임을 줄이려면 shimmer 를 꺼요.

/** * @title Skeleton * @description 콘텐츠를 불러오는 동안 그 자리를 미리 잡아두는 플레이스홀더예요. */ import * as React from 'react'; import { cn } from '@/lib/utils'; // Atlassian @atlaskit/skeleton — ui/index.tsx 스펙 // 색을 둘 다 지정하면 CSS 변수로 keyframes 의 시작·끝 색을 덮어쓴다. const keyframes = ` @keyframes steel-skeleton-shimmer{0%{background-color:var(--ds-skeleton-from-color,var(--ds-skeleton))}to{background-color:var(--ds-skeleton-to-color,var(--ds-skeleton-subtle))}} `; export interface SkeletonProps { width: string | number; height: string | number; /** 모서리 둥글기. radius 토큰 사용 (기본 `var(--ds-radius-small)`) */ borderRadius?: string | number; /** 기본 색(color.skeleton)을 덮어써요. shimmer 시작 색은 ShimmeringEndColor 와 함께 줄 때만 바뀌어요. */ color?: string; /** shimmer 끝 색 */ ShimmeringEndColor?: string; /** shimmer 애니메이션 켜기 */ isShimmering?: boolean; /** `data-<groupName>` 속성을 붙여 여러 스켈레톤을 한 번에 겨냥해요. */ groupName?: string; testId?: string; className?: string; } function Skeleton({ width, height, borderRadius = 'var(--ds-radius-small, 4px)', color, ShimmeringEndColor, isShimmering = false, groupName, testId, className, }: SkeletonProps) { const groupAttribute = groupName ? { [`data-${groupName}`]: 'true' } : undefined; const overrideShimmer = Boolean(color && ShimmeringEndColor); return ( <div data-slot="skeleton" data-testid={testId} aria-hidden style={ { width, height, borderRadius, backgroundColor: color, '--ds-skeleton-from-color': overrideShimmer ? color : undefined, '--ds-skeleton-to-color': overrideShimmer ? ShimmeringEndColor : undefined, } as React.CSSProperties } {...groupAttribute} className={cn( 'bg-ds-skeleton [animation-direction:alternate] [animation-duration:1.5s] [animation-iteration-count:infinite] [animation-timing-function:linear]', isShimmering && '[animation-name:steel-skeleton-shimmer]', className, )} > {isShimmering && ( <style href="steel-skeleton" precedence="default"> {keyframes} </style> )} </div> ); } export { Skeleton };

/** * @title Skeleton * @description 콘텐츠를 불러오는 동안 그 자리를 미리 잡아두는 플레이스홀더예요. */import * as React from 'react';import { cn } from '@/lib/utils';// Atlassian @atlaskit/skeleton — ui/index.tsx 스펙// 색을 둘 다 지정하면 CSS 변수로 keyframes 의 시작·끝 색을 덮어쓴다.const keyframes = `@keyframes steel-skeleton-shimmer{0%{background-color:var(--ds-skeleton-from-color,var(--ds-skeleton))}to{background-color:var(--ds-skeleton-to-color,var(--ds-skeleton-subtle))}}`;export interface SkeletonProps { width: string | number; height: string | number; /** 모서리 둥글기. radius 토큰 사용 (기본 `var(--ds-radius-small)`) */ borderRadius?: string | number; /** 기본 색(color.skeleton)을 덮어써요. shimmer 시작 색은 ShimmeringEndColor 와 함께 줄 때만 바뀌어요. */ color?: string; /** shimmer 끝 색 */ ShimmeringEndColor?: string; /** shimmer 애니메이션 켜기 */ isShimmering?: boolean; /** `data-<groupName>` 속성을 붙여 여러 스켈레톤을 한 번에 겨냥해요. */ groupName?: string; testId?: string; className?: string;}function Skeleton({ width, height, borderRadius = 'var(--ds-radius-small, 4px)', color, ShimmeringEndColor, isShimmering = false, groupName, testId, className,}: SkeletonProps) { const groupAttribute = groupName ? { [`data-${groupName}`]: 'true' } : undefined; const overrideShimmer = Boolean(color && ShimmeringEndColor); return ( <div data-slot="skeleton" data-testid={testId} aria-hidden style={ { width, height, borderRadius, backgroundColor: color, '--ds-skeleton-from-color': overrideShimmer ? color : undefined, '--ds-skeleton-to-color': overrideShimmer ? ShimmeringEndColor : undefined, } as React.CSSProperties } {...groupAttribute} className={cn( 'bg-ds-skeleton [animation-direction:alternate] [animation-duration:1.5s] [animation-iteration-count:infinite] [animation-timing-function:linear]', isShimmering && '[animation-name:steel-skeleton-shimmer]', className, )} > {isShimmering && ( <style href="steel-skeleton" precedence="default"> {keyframes} </style> )} </div> );}export { Skeleton };

설치Copy Anchor Link

수동 설치

ExamplesCopy Anchor Link

BasicCopy Anchor Link

ShimmeringCopy Anchor Link

ShapeCopy Anchor Link

ColorCopy Anchor Link

조합Copy Anchor Link

Usage guidelinesCopy Anchor Link

AccessibilityCopy Anchor Link

PropsCopy Anchor Link

On this page

설치