30.스켈레톤 스크린 (대기 화면 플레이스 홀더) 활용
요약:
**스켈레톤 스크린(skeleton screen)**은 사용자가 페이지가 로드될 때까지 기다리는 동안 표시되는 플레이스홀더(placeholder) 역할을 한다.
이 진행 표시기는 **전체 페이지 로딩(full page load)**에 사용되며, 페이지가 최종적으로 어떻게 보일지에 대한 힌트를 제공하여 긴 로딩 시간을 체감하는 정도를 줄여준다.
스켈레톤 스크린은 페이지가 로딩 중임을 나타내는 디자인 패턴으로, 사용자에게 페이지 레이아웃을 흉내 낸 와이어프레임(wireframe) 형태의 시각적 표시를 제공한다.
이 특정 유형의 진행 표시기는 전체 페이지 로딩에만 사용된다.
스켈레톤 스크린의 종류
스켈레톤 스크린에는 크게 세 가지 유형이 있다:
• 정적 콘텐츠 및 이미지 스켈레톤 스크린(Static-content and -image skeleton screens)
• 애니메이션 스켈레톤 스크린(Animated skeleton screens)
• 프레임 표시 스켈레톤 스크린(Frame-display skeleton screens)
⸻
정적 콘텐츠 및 이미지 스켈레톤 스크린
가장 일반적인 스켈레톤 스크린으로, **와이어프레임(wireframe)**처럼 보인다.
연한 회색 상자는 콘텐츠나 이미지를 나타내며, 회색 상자의 구조는 최종 페이지의 실제 콘텐츠 구조를 모방한다.
이 스켈레톤 스크린은 사용자가 페이지에 무엇이 있을지 **정신적 모델(mental model)**을 형성하도록 돕고, 페이지 내 정보 계층 구조에 대한 단서를 제공하기도 한다.
애니메이션 스켈레톤 스크린
일부 스켈레톤 스크린에는 맥동(pulsating) 효과, 그라디언트 사용, 또는 요소의 점진적 등장/사라짐(fade in/out) 형태의 애니메이션이 포함되어 있다.
이들은 **대기 애니메이션(스피너 등)**과 유사하며, 시스템이 여전히 작동 중이고 콘텐츠를 로딩하고 있음을 사용자에게 알려준다.
이를 통해 사용자는 로딩 중인 콘텐츠에 계속 집중할 수 있어, 긴 로딩 시간을 덜 길게 느끼게 된다.
단, 이러한 애니메이션은 일부 사용자에게 주의를 분산시키거나, 불쾌감을 주거나, 접근성 문제를 일으킬 수 있다는 점에 유의해야 한다.
프레임 표시 스켈레톤 스크린(Frame-Display Skeleton Screens)
추천하지 않는 한 가지 유형은 콘텐츠 와이어프레임 없이 애플리케이션의 프레임만 보여주는 스켈레톤 스크린이다.
이 최소한의 스켈레톤 스크린은 헤더, 푸터, 배경만 포함하며, 콘텐츠의 플레이스홀더는 제공하지 않는다.
그 결과, 사용자는 페이지의 전체 구조를 파악할 수 없다.
프레임 표시 방식은 추천되지 않는다.
왜냐하면 사용자가 너무 오래 기다리면, 화면 대부분이 비어 있어 페이지가 작동하지 않는다고 오해할 수 있기 때문이다.
스켈레톤 스크린 사용의 장점
스켈레톤 스크린은 페이지가 로딩 중임을 사용자에게 알리는 동시에, 페이지가 최종적으로 어떻게 보일지를 전달한다. 다음은 스켈레톤 스크린을 사용하는 이유 몇 가지이다:
• 사이트가 작동하지 않는다는 오해를 방지
사용자가 페이지를 방문했을 때, 로딩 중 빈 화면이 보이면 문제가 있다고 생각하고 떠날 수 있다.
스켈레톤 스크린은 사용자가 로딩 중인 콘텐츠에 집중하게 하고, 기다리는 동안 볼거리를 제공한다.
• 짧은 대기 시간의 착각을 만들어 냄
긴 로딩 시간은 사용자를 짜증나게 한다.
스켈레톤 스크린은 와이어프레임처럼 보여, 페이지가 점진적으로 최종 형태로 전환되고 있다는 느낌을 준다.
진행 표시가 있다는 사실만으로도 사용자는 곧 로딩이 끝날 것이라는 인식을 갖게 된다.
• 사용자의 인지적 부담(cognitive load) 감소
처음에 빈 화면을 보여주고 곧바로 모든 콘텐츠를 한 번에 보여주는 대신,
스켈레톤 스크린은 페이지 구조를 미리 이해할 시간을 주어 사용자가 **정신적 모델(mental model)**을 형성하게 돕는다.
예를 들어, 큰 사각형 위에 작은 박스가 있는 모습을 보면 사용자는 이미지와 캡션이 올 것이라는 것을 예상할 수 있다.
⸻
스켈레톤 스크린이 진행 막대(progress bar)나 스피너(spinner)보다 나은가?
스켈레톤 스크린, 진행 막대, 스피너 모두 시스템이 정보를 로딩 중임을 보여주지만, 용도와 상황에 따라 적합성이 다르다.
⸻
대기 시간 길이에 따른 선택 기준
• 스피너 / 대기 애니메이션: 시스템이 작동 중임을 보여주지만, 대기 시간을 알려주지는 못한다.
페이지 로딩이 2~10초 정도일 때 사용 권장.
• 스켈레톤 스크린: 10초 미만의 로딩 시간에 적합.
전체 화면 로딩 시, 와이어프레임을 통해 페이지 구조를 보여주므로 인지적 부담 감소에 도움.
• 진행 막대(progress bar): 10초 이상 걸리는 페이지에 강력 추천.
시스템 상태와 남은 시간을 명확히 보여준다. 10초 이상은 명시적 시간 추정치가 필요하다.
⸻
10초 미만 대기 시 선택 기준
• 스피너: 단일 모듈(예: 동영상, 대시보드 카드) 로딩에 적합
• 스켈레톤 스크린: 전체 화면 로딩에 적합 (와이어프레임으로 구조를 보여주므로 인지 부담 최소화)
⸻
빠른 페이지 로딩(1초 미만)
• 스켈레톤 스크린이나 스피너는 필요 없음
• 너무 짧은 시간 동안 깜빡이는 스켈레톤 화면은 오히려 사용자에게 불편을 줄 수 있음
⸻
진행 막대는 프로세스 관련 표시기에 적합
• 스켈레톤 스크린은 전체 페이지 로딩에만 사용
• 다운로드, 업로드, 파일 변환 등 다른 프로세스에는 진행 막대나 단계별 위저드(wizard) 사용 권장
• 스켈레톤 화면은 이런 경우 혼동을 줄 수 있음
⸻
프레임 표시 스켈레톤 스크린 사용 금지
• 헤더, 푸터, 빈 배경만 보여주며 페이지 구조 정보 없음
• 진행 상황을 보여주지 않기 때문에, 사용자가 오래 기다리면 페이지가 작동하지 않는다고 오해함
• 따라서 진행 표시기로 사용하지 말 것
⸻
결론
• 사용자는 긴 로딩 시간에 일반적으로 조급함을 느낀다.
• 스켈레톤 스크린은 중간 정도 길이의 로딩 시간 동안 페이지 구조를 점진적으로 보여주어 기다림의 불편을 줄여준다.
• 단, 스켈레톤 스크린이 성능 최적화를 대체하지는 못하며, 콘텐츠 로딩 시 사용자가 경험하는 기다림을 개선하기 위한 추가 도구일 뿐이다.
⸻
참고 문헌:
Thomas Mejtoft, Arvid Långström, Ulrik Söderström. (2018). The effect of skeleton screens. Proceedings of the 36th European Conference on Cognitive Ergonomics (2018). DOI: http://dx.doi.org/10.1145/3232078.3232086
-
정확한 내용은 원문링크를 통해 확인해주세요.
https://www.nngroup.com/articles/skeleton-screens/
