스켈레톤 로딩 (Skeleton Loading)
데이터가 불러와지기 전에 뱅글뱅글 도는 단순한 스피너 대신, 콘텐츠의 실제 뼈대 형태를 미리 보여주는 스켈레톤 로딩 화면은 사용자 경험(UX)을 크게 향상시킵니다. 회색 배경 위에 대각선 방향의
linear-gradient를 깔고, background-position을 가로로 이동시키는 애니메이션을 주면 빛이 스윽 하고 지나가는 멋진 시머(Shimmer) 효과를 만들 수 있습니다.<div class="skeleton-container">
<div class="skeleton-avatar skeleton"></div>
<div class="skeleton-lines">
<div class="skeleton-line skeleton"></div>
<div class="skeleton-line skeleton short"></div>
</div>
</div>