스켈레톤 스크린

기다림을 덜 지루하게

마이어스(1985)는 진행 표시가 있으면 사람들이 같은 대기를 더 잘 견딘다는 것을 보였고, 마이스터(1985)는 할 일 없이 보내는 시간과 끝을 알 수 없는 기다림이 더 길게 느껴진다고 정리했어요. 스켈레톤 스크린은 이 두 통찰을 결합해, 빈 화면이나 돌아가는 스피너 대신 곧 나타날 콘텐츠의 모양을 미리 보여줘요. 사용자는 '이미 무언가 오고 있다'고 느끼고 어디에 무엇이 나올지 미리 눈으로 훑을 수 있어요.

연구가 말하는 효과

해리슨과 동료들(2007, 2010)은 진행 막대의 움직임 패턴이나 시각 효과만 바꿔도 같은 시간이 더 짧게 느껴진다는 것을 보였어요. 호헨스타인과 동료들(2016)은 로딩 화면 종류에 따라 체감 성능이 달라진다고 보고했고, 메이토프트와 동료들(2018)은 스켈레톤 스크린이 빈 화면이나 스피너보다 빠르게 느껴지는 경향을 보였지만 그 차이는 조건에 따라 크지 않을 수 있다고 했어요. 나(2004)의 연구처럼 피드백이 있으면 견딜 수 있는 시간이 늘어나지만, 그렇다고 실제 속도 개선을 대신할 수는 없어요.

잘 쓰는 법과 주의점

스켈레톤은 실제 레이아웃과 같은 크기로 그려야 콘텐츠가 들어올 때 화면이 밀리지 않아 코어 웹 바이탈의 CLS가 나빠지지 않아요. 1초 미만의 짧은 로딩에는 오히려 깜빡임만 더하므로 생략하고, 10초 이상 걸리는 작업에는 진행률을 보여주는 막대가 더 적합해요. 화면 낭독기 사용자에게는 'aria-busy' 같은 상태 알림이 필요해요. 마지막 순간의 경험이 전체 인상을 좌우한다는 피크엔드 법칙처럼, 로딩이 끝날 때 부드럽게 전환되는 것도 중요해요. 느린 네트워크가 흔한 모바일 환경에서 효과가 가장 커요.

자주 묻는 질문

스켈레톤 스크린과 스피너는 무엇이 다른가요?

스피너는 '기다리는 중'만 알려주지만, 스켈레톤 스크린은 곧 나올 화면의 구조를 미리 보여줘서 더 빠르게 느껴지고 화면을 미리 파악할 수 있어요.

언제 쓰지 않는 게 좋나요?

로딩이 1초도 안 걸릴 때는 깜빡임만 생기므로 생략하고, 아주 긴 작업에는 진행률 표시가 더 적합해요.

출처 검토일: 2026-10-27

참고문헌

1. Myers, B. A. (1985). The importance of percent-done progress indicators for computer-human interfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 11–17). ACM. 진행 표시가 있으면 사용자가 기다림을 더 잘 견딘다는 고전 연구라, 로딩 피드백의 출발점을 볼 때 참고하면 도움이 돼요.
2. Maister, D. H. (1985). The psychology of waiting lines. In J. A. Czepiel, M. R. Solomon, & C. F. Surprenant (Eds.), The service encounter (pp. 113–123). Lexington Books. '아무것도 안 하는 시간이 더 길게 느껴진다'는 대기 심리 원칙이라, 체감 시간의 배경을 볼 때 참고하면 도움이 돼요.
3. Harrison, C., Amento, B., Kuznetsov, S., & Bell, R. (2007). Rethinking the progress bar. In Proceedings of the 20th Annual ACM Symposium on User Interface Software and Technology (pp. 115–118). ACM. 진행 막대의 속도 변화 패턴이 체감 시간을 바꾼다는 연구라, 로딩 애니메이션을 설계할 때 참고하면 도움이 돼요.
4. Harrison, C., Yeo, Z., & Hudson, S. E. (2010). Faster progress bars: Manipulating perceived duration with visual augmentations. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1545–1548). ACM. 시각 효과만으로 같은 대기가 약 11% 짧게 느껴진다는 결과라, 애니메이션 방향을 정할 때 참고하면 도움이 돼요.
5. Nah, F. F.-H. (2004). A study on tolerable waiting time: How long are Web users willing to wait? Behaviour & Information Technology, 23(3), 153–163. 피드백 유무에 따라 견딜 수 있는 시간이 달라진다는 실험이라, 피드백의 가치를 볼 때 참고하면 도움이 돼요.
6. Hohenstein, J., Khan, H., Canfield, K., Tung, S., & Perez Cano, R. (2016). Shorter wait times: The effects of various loading screens on perceived performance. In Proceedings of the 2016 CHI Conference Extended Abstracts on Human Factors in Computing Systems (pp. 3084–3090). ACM. 스피너·진행 막대·빈 화면 등 로딩 화면 종류를 비교해, 어떤 방식이 빠르게 느껴지는지 볼 때 참고하면 도움이 돼요.
7. Mejtoft, T., Långström, A., & Söderström, U. (2018). The effect of skeleton screens: Users' perception of speed and ease of navigation. In Proceedings of the 36th European Conference on Cognitive Ergonomics (pp. 1–4). ACM. 스켈레톤 스크린을 직접 비교한 드문 실험이라, 효과의 크기와 조건을 확인할 때 참고하면 도움이 돼요.