스켈레톤스크린 (Skeleton Screen)
쉽게 풀면
내용이 아직 안 불러와졌을 때 회색 네모들로 대략적인 모양을 먼저 보여주는 방식이다.
왜 중요한가
스켈레톤 스크린은 콘텐츠가 로딩되는 동안 실제 레이아웃의 윤곽을 회색 블록으로 미리 보여주는 기법으로, 페이스북이 대중화시킨 이후 로딩 시 체감 대기시간을 줄이는 UX 패턴으로 널리 채택됐다. 스피너 아이콘보다 다음에 나타날 콘텐츠의 구조를 예측 가능하게 해 사용자의 인지 부담을 낮춘다는 것이 실무에서 선호되는 이유다. 스켈레톤은 실제 콘텐츠의 이미지·제목·본문 위치를 그대로 흉내 낸 회색 블록으로 구성해, 로딩이 끝나는 순간 블록이 실제 콘텐츠로 자연스럽게 치환되는 느낌을 주도록 설계하는 것이 핵심이다. 네트워크 상태가 매우 느린 환경에서는 스켈레톤이 지나치게 오래 유지되어 오히려 화면이 멈춘 것처럼 느껴질 수 있어, 일정 시간 이상 지속되면 별도의 오류 메시지로 전환하는 예외 처리가 함께 필요하다. 스켈레톤 블록의 모서리를 실제 콘텐츠 요소(이미지, 버튼)의 모서리 둥글기와 동일하게 맞추는 세부 디테일이 완성도 차이를 만든다. 스켈레톤 화면은 첫 방문자에게는 오히려 낯설게 느껴질 수 있어, 무엇이 로딩되고 있는지 짧은 텍스트 라벨을 함께 곁들이는 보완이 쓰이기도 한다.
논문에서는 이렇게 쓰입니다
로딩 표시 방식의 차이가 사용자의 심리적 대기 시간 인지에 미친 영향을 실험한 연구이다.
로딩 표시 방식이 사용자의 이탈 행동 같은 실제 행동 지표에도 영향을 준다는 것을 검증한 사례이다.
조금 더 깊게 보면
스켈레톤 화면이 실제 콘텐츠 구조와 지나치게 다르면 로딩 완료 시 레이아웃이 급격히 바뀌어 오히려 어색한 인상을 줄 수 있어 실제 콘텐츠 비율에 최대한 맞춰 설계해야 한다. 단순 회전 스피너와 달리 스켈레톤 스크린은 콘텐츠의 형태 정보를 미리 전달한다는 점에서 지각된 성능 개선 효과가 더 크다고 알려져 있다. 스켈레톤은 보통 좌우로 은은하게 움직이는 그라디언트 애니메이션(셔머 효과)을 넣어 '지금 무언가 진행 중'이라는 신호를 함께 전달하며, 정지된 회색 블록만 보여주면 화면이 멈춘 것으로 오인될 수 있다.
주의할 점
스켈레톤스크린은 실제 로딩 시간을 줄이는 것이 아니라 체감 대기시간을 줄이는 심리적 기법임에 유의해야 한다.