스켈레톤 UI(Skeleton UI)는 콘텐츠가 로딩되는 동안 표시되는 저해상도 미리보기 또는 자리 표시자 화면으로, 실제 콘텐츠의 구조와 레이아웃을 시각적으로 나타냅니다. 이는 사용자에게 콘텐츠가 곧 표시될 것이라는 시각적 피드백을 제공하고, 페이지가 로딩 중이라는 인상을 주어 체감 로딩 시간을 줄여줍니다.
인지된 성능 향상: 실제 로딩 시간은 동일하더라도, 사용자는 무언가 일어나고 있다는 것을 시각적으로 확인하면 기다림을 덜 지루하게 느낍니다.
레이아웃 시프트 방지: 콘텐츠가 로드될 때 페이지 요소가 갑자기 이동하는 레이아웃 시프트(Layout Shift)를 방지합니다. 이는 Google의 Core Web Vitals 중 하나인 CLS(Cumulative Layout Shift)를 개선합니다.
사용자 경험 개선: 빈 화면이나 로딩 스피너만 표시하는 것보다 콘텐츠의 구조를 미리 보여주는 것이 사용자에게 더 나은 경험을 제공합니다.
실제 콘텐츠 구조 반영: 로드될 콘텐츠의 레이아웃과 구조를 그대로 반영합니다.
중립적인 색상: 일반적으로 회색 계열의 중립적인 색상을 사용합니다.
애니메이션 효과: 대부분 왼쪽에서 오른쪽으로 흐르는 반짝임(shimmer) 효과를 적용하여 로딩 중임을 강조합니다.
세부 정보 생략: 텍스트, 이미지 등의 실제 콘텐츠 대신 단순한 도형으로 표현합니다.
뉴스피드 포스트 로딩 시 사용자 프로필 이미지, 이름, 텍스트 블록을 스켈레톤으로 표시
스토리 섹션에서 카드 형태의 스켈레톤 적용
프로필 페이지 로딩 시 헤더, 경력 섹션, 추천 섹션 등을 스켈레톤으로 표시
뉴스피드에서 포스트 로딩 시 스켈레톤 적용
YouTube
비디오 섬네일, 제목, 채널 정보를 스켈레톤으로 표시
검색 결과 페이지에서 효과적으로 활용
Netflix
영화/TV 시리즈 카드 로딩 시 스켈레톤 UI 사용
콘텐츠 상세 페이지 로딩 시 포스터, 설명, 캐스트 정보 등을 스켈레톤으로 표시