# Skeleton Screen — 디자인 스타일 가이드

## 기본 정보
- **ID**: skeleton-screen
- **카테고리**: ui-pattern
- **연도**: 2013

## 설명
콘텐츠 로딩 중에 페이지 구조의 미리보기를 제공하여 체감 성능을 향상시킵니다.

## 핵심 원칙
- 사용자 기대 관리
- 점진적 공개
- 지각된 성능

## 주요 특징
- 로딩 상태 시각화
- 콘텐츠 구조 미리보기
- 부드러운 애니메이션
- 점진적 렌더링
- 체감 성능 개선

## 컬러 시스템 가이드
로딩 상태의 색상 시스템. 실제 콘텐츠 색 아닌 placeholder 색상 체계

### 색상 역할
- skeleton-base: placeholder 기본 색 — 연한 회색 (#e0e0e0~#f0f0f0)
- skeleton-highlight: shimmer 애니메이션의 밝은 색 — base보다 약간 밝게
- background: 페이지 배경 — skeleton과 구분

### 색상 제약 조건
- skeleton 색이 배경과 너무 가까우면 인식 어려움 — 차이 유지
- skeleton은 실제 콘텐츠 크기·위치와 일치해야 함

### 다크모드 전략
skeleton-base를 어두운 회색으로 (#2a2a2a~#3a3a3a), highlight를 약간 더 밝게

### 대비 요구사항
skeleton 자체 대비보다 페이지 배경과의 대비가 중요

## 타이포그래피 가이드
- **폰트 성격**: skeleton은 텍스트 대신 직사각형 블록으로 표현 — 실제 폰트와 동일 크기로
- **권장 폰트 수**: 최대 1개
- **타입 스케일**: 실제 콘텐츠 타입 스케일 그대로 적용

### 타이포그래피 제약
- 텍스트 skeleton 높이 = 실제 폰트 line-height
- skeleton 블록 border-radius는 실제 UI 일관성 유지

## 하면 안 되는 것 (안티패턴)
- spinner만 사용 금지 — skeleton이 더 나은 UX
- 실제 레이아웃과 다른 skeleton 모양 금지 — 레이아웃 시프트 발생

## 반드시 포함해야 하는 것
- shimmer 애니메이션 (gradient 좌→우 이동)
- 실제 콘텐츠 크기와 동일한 placeholder
- 400~600ms 내 실제 콘텐츠로 전환 또는 무한 로딩 표시

## 모션 가이드
shimmer: CSS animation 1.5~2s linear infinite. background-position 이동 기법.

## 사용 사례
- 소셜 피드 로딩
- 이커머스 상품 목록
- 대시보드 데이터
- 검색 결과

## 추천 프로젝트 유형
- 소셜 피드
- 이커머스 목록
- 데이터 대시보드
- 검색 결과

## 장점
- 스피너 대비 체감 로딩 속도 빠름
- 레이아웃 안정성 (CLS 방지)
- 사용자 불안감 감소

## 단점·한계
- 실제 로딩 시간이 길면 오히려 답답
- 복잡한 레이아웃은 스켈레톤 구현 어려움
- 스켈레톤 자체 렌더링 비용 발생

## 실제 사용 제품·서비스
- Facebook 피드 로딩
- LinkedIn 프로필 로딩
- YouTube 썸네일 로딩

## 관련 스타일
- [micro-interactions](https://ui.buildersgate.com/styles/micro-interactions)
- [progressive-disclosure](https://ui.buildersgate.com/styles/progressive-disclosure)
- [card-design](https://ui.buildersgate.com/styles/card-design)

## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.

### 색상
- primary: #94A3B8
- secondary: #CBD5E0
- accent: #64748B
- background: #F8FAFC
- surface: #FFFFFF
- text: #1E293B
- textSecondary: #64748B
- border: #E2E8F0

### 헤더
- background: linear-gradient(135deg, #94A3B8 0%, #64748B 100%)
- textColor: #FFFFFF
- accentColor: #CBD5E0

### 타이포그래피
- fontFamily: system-ui, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0em

### 스페이싱
- unit: 8px
- scale: 1

### 그림자 (Shadows)
- sm: 0 1px 2px rgba(0, 0, 0, 0.05)
- md: 0 4px 6px rgba(0, 0, 0, 0.07)
- lg: 0 10px 15px rgba(0, 0, 0, 0.1)
- xl: 0 20px 25px rgba(0, 0, 0, 0.1)

### Border Radius
- none: 0
- sm: 4px
- md: 8px
- lg: 12px
- full: 9999px

### 테두리 (Borders)
- width: 1px
- style: solid
- color: #E2E8F0

### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.3s ease

### 애니메이션
- duration: 1500ms
- easing: ease-in-out

### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=none / textTransform=none
- 카드: style=flat / hoverEffect=none
- 인풋: style=filled / focusEffect=border
- 배지: shape=rounded / style=subtle
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=20

### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal

### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: true
- scanlines: false
- noise: false

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=skeleton-screen
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=skeleton-screen&merged=true

이 페이지 주소를 AI에게 보여주고 "디자인 시스템 문서를 만들어줘"라고 해보세요.

← 홈으로 돌아가기

Skeleton Screen

콘텐츠 로딩 중에 페이지 구조의 미리보기를 제공하여 체감 성능을 향상시킵니다.

연도

2013

#94A3B8

핵심 원칙

1

사용자 기대 관리

2

점진적 공개

3

지각된 성능

주요 특징

  • 로딩 상태 시각화
  • 콘텐츠 구조 미리보기
  • 부드러운 애니메이션
  • 점진적 렌더링
  • 체감 성능 개선

장단점

장점

  • +스피너 대비 체감 로딩 속도 빠름
  • +레이아웃 안정성 (CLS 방지)
  • +사용자 불안감 감소

단점 / 한계

  • −실제 로딩 시간이 길면 오히려 답답
  • −복잡한 레이아웃은 스켈레톤 구현 어려움
  • −스켈레톤 자체 렌더링 비용 발생

적합한 사용처

사용 사례

  • 소셜 피드 로딩
  • 이커머스 상품 목록
  • 대시보드 데이터
  • 검색 결과

이런 프로젝트에 추천

소셜 피드이커머스 목록데이터 대시보드검색 결과

실제 사용 예시

Facebook 피드 로딩LinkedIn 프로필 로딩YouTube 썸네일 로딩

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.

Basic Text Skeleton

기본적인 텍스트 스켈레톤 로딩 상태

Card Skeleton

카드 형태의 스켈레톤 UI

Shimmer Effect

반짝이는 효과가 있는 스켈레톤

Profile Skeleton

프로필 카드 스켈레톤

List Skeleton

리스트 아이템 스켈레톤

Table Skeleton

테이블 형태의 스켈레톤

Image Gallery Skeleton

이미지 갤러리 스켈레톤

Complex Layout Skeleton

복잡한 레이아웃의 스켈레톤

Button Skeleton

버튼 로딩 상태

관련 스타일 탐색

Micro-interactions

작은 애니메이션과 피드백으로 사용자 경험을 향상시킵니다.

Progressive Disclosure

복잡한 정보를 단계적으로 노출하여 인지 부하를 줄입니다.

Card-Based Design

정보를 카드 형태로 구조화하여 스캔과 소비가 용이하도록 합니다.