topic★★★★★난이도
Skeleton
콘텐츠 로딩 전 뼈대(골격)를 보여주는 UI.
#skeleton#스켈레톤#로딩
Skeleton(스켈레톤)은 그리스어 'skeletos'(말려버린 것)에서 왔으며, 뼈대/골격을 뜻한다. 건축에서 건물의 골조(skeleton frame)를 먼저 세우고 나중에 벽과 창문을 채우듯, UI에서도 실제 콘텐츠가 로딩되기 전에 레이아웃의 뼈대만 먼저 보여준다. Facebook이 2014년경 뉴스피드에 적용하면서 대중화됐다.
| 실제 사물 | UI 패턴 |
|---|---|
| 건물의 철골 골조 | 콘텐츠의 레이아웃 뼈대 |
| 골조 위에 벽/창문을 채움 | 뼈대 위에 실제 텍스트/이미지가 채워짐 |
| 완성 전에도 구조를 짐작 가능 | 로딩 전에도 어떤 콘텐츠가 올지 예측 가능 |
사용 가이드라인: 스피너보다 체감 로딩 시간을 줄여주는 것으로 연구로 입증되었다. 실제 콘텐츠와 동일한 레이아웃으로 만들어야 효과가 있다. 펄스(pulse) 또는 웨이브(wave) 애니메이션을 넣어 '로딩 중'임을 암시한다. 콘텐츠 영역별로 독립적으로 로딩되면 점진적으로 Skeleton이 사라지는 것이 이상적이다.