# 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
## 자주 묻는 질문 (FAQ)
### Q: Skeleton Screen이란 무엇인가요?
A: 콘텐츠 로딩 중에 페이지 구조의 미리보기를 제공하여 체감 성능을 향상시킵니다.
### Q: Skeleton Screen의 핵심 디자인 원칙은 무엇인가요?
A: Skeleton Screen의 핵심 원칙은 사용자 기대 관리, 점진적 공개, 지각된 성능입니다.
### Q: Skeleton Screen은 어떤 프로젝트에 적합한가요?
A: Skeleton Screen은 소셜 피드 로딩, 이커머스 상품 목록, 대시보드 데이터, 검색 결과, 소셜 피드, 이커머스 목록, 데이터 대시보드, 검색 결과 등의 프로젝트에 적합합니다.
### Q: Skeleton Screen의 장단점은 무엇인가요?
A: 장점으로는 스피너 대비 체감 로딩 속도 빠름, 레이아웃 안정성 (CLS 방지), 사용자 불안감 감소이 있습니다. 단점으로는 실제 로딩 시간이 길면 오히려 답답, 복잡한 레이아웃은 스켈레톤 구현 어려움, 스켈레톤 자체 렌더링 비용 발생이 있습니다.
### Q: Skeleton Screen에서 색상은 어떻게 사용하나요?
A: 로딩 상태의 색상 시스템. 실제 콘텐츠 색 아닌 placeholder 색상 체계 색상 역할은 skeleton-base: placeholder 기본 색 — 연한 회색 (#e0e0e0~#f0f0f0), skeleton-highlight: shimmer 애니메이션의 밝은 색 — base보다 약간 밝게, background: 페이지 배경 — skeleton과 구분입니다. 주의사항: skeleton 색이 배경과 너무 가까우면 인식 어려움 — 차이 유지, skeleton은 실제 콘텐츠 크기·위치와 일치해야 함.
### Q: Skeleton Screen에 어울리는 폰트 스타일은 무엇인가요?
A: Skeleton Screen에는 skeleton은 텍스트 대신 직사각형 블록으로 표현 — 실제 폰트와 동일 크기로 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 텍스트 skeleton 높이 = 실제 폰트 line-height, skeleton 블록 border-radius는 실제 UI 일관성 유지.
### Q: Skeleton Screen 디자인에서 하면 안 되는 것은 무엇인가요?
A: Skeleton Screen에서 피해야 할 것: spinner만 사용 금지 — skeleton이 더 나은 UX, 실제 레이아웃과 다른 skeleton 모양 금지 — 레이아웃 시프트 발생.
### Q: Skeleton Screen을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Skeleton Screen을 적용한 대표적인 제품·서비스로는 Facebook 피드 로딩, LinkedIn 프로필 로딩, YouTube 썸네일 로딩 등이 있습니다.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=skeleton-screen
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=skeleton-screen&merged=true
Skeleton Screen의 핵심 원칙은 사용자 기대 관리, 점진적 공개, 지각된 성능입니다.
Skeleton Screen은 어떤 프로젝트에 적합한가요?
Skeleton Screen은 소셜 피드 로딩, 이커머스 상품 목록, 대시보드 데이터, 검색 결과, 소셜 피드, 이커머스 목록, 데이터 대시보드, 검색 결과 등의 프로젝트에 적합합니다.
Skeleton Screen의 장단점은 무엇인가요?
장점으로는 스피너 대비 체감 로딩 속도 빠름, 레이아웃 안정성 (CLS 방지), 사용자 불안감 감소이 있습니다. 단점으로는 실제 로딩 시간이 길면 오히려 답답, 복잡한 레이아웃은 스켈레톤 구현 어려움, 스켈레톤 자체 렌더링 비용 발생이 있습니다.
Skeleton Screen에서 색상은 어떻게 사용하나요?
로딩 상태의 색상 시스템. 실제 콘텐츠 색 아닌 placeholder 색상 체계 색상 역할은 skeleton-base: placeholder 기본 색 — 연한 회색 (#e0e0e0~#f0f0f0), skeleton-highlight: shimmer 애니메이션의 밝은 색 — base보다 약간 밝게, background: 페이지 배경 — skeleton과 구분입니다. 주의사항: skeleton 색이 배경과 너무 가까우면 인식 어려움 — 차이 유지, skeleton은 실제 콘텐츠 크기·위치와 일치해야 함.
Skeleton Screen에 어울리는 폰트 스타일은 무엇인가요?
Skeleton Screen에는 skeleton은 텍스트 대신 직사각형 블록으로 표현 — 실제 폰트와 동일 크기로 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 텍스트 skeleton 높이 = 실제 폰트 line-height, skeleton 블록 border-radius는 실제 UI 일관성 유지.
Skeleton Screen 디자인에서 하면 안 되는 것은 무엇인가요?
Skeleton Screen에서 피해야 할 것: spinner만 사용 금지 — skeleton이 더 나은 UX, 실제 레이아웃과 다른 skeleton 모양 금지 — 레이아웃 시프트 발생.
Skeleton Screen을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Skeleton Screen을 적용한 대표적인 제품·서비스로는 Facebook 피드 로딩, LinkedIn 프로필 로딩, YouTube 썸네일 로딩 등이 있습니다.