스켈레톤 vs 스피너: 기다림의 인지심리학

디자이너: “이번 개편에서 로딩 스피너 다 걷어내고 스켈레톤으로 바꿨어.”

개발자: “근데 이상해. 서버 응답 속도는 그대로인데, 앱이 느려진 것 같다는 문의가 오히려 늘었어.”

대화는 내가 지어냈지만 억지 장면은 아니다. 스켈레톤 화면이 스피너보다 느리게 느껴졌다는 실험이 실제로 있고, 정반대로 스켈레톤이 가장 빠르게 느껴졌다는 실험도 있다. 같은 질문에 실험 결과가 갈렸다면, 어느 한쪽이 틀렸다기보다 우리가 질문을 잘못 잡았을 가능성이 크다. 이 글은 그 갈림을 인지심리학의 시간 지각 이론으로 푼다. 앞 글이 기다림 설계 전체의 지도였다면, 이 글은 스켈레톤과 스피너 한 쌍만 붙잡고 왜 그렇게 느껴지는지의 기제를 판다.

시간은 시계가 아니라 주의가 잰다

라면을 끓일 때 3분을 재는 두 가지 방법이 있다. 냄비 앞에 서서 타이머 숫자가 줄어드는 걸 지켜보는 것, 그리고 그 사이 설거지를 하다가 알람 소리에 돌아오는 것. 시계가 잰 시간은 둘 다 3분인데, 몸이 잰 시간은 다르다. 지켜본 3분은 길고, 설거지한 3분은 순식간이다.

심리학은 시간 판단을 두 갈래로 나눈다. 기다리는 중이라는 걸 스스로 알면서 시간을 의식하는 전망적 추정(prospective estimation), 그리고 지나고 나서야 얼마나 걸렸는지 돌아보는 회고적 추정이다. 두 판단은 서로 다른 인지 과정이 담당한다. 전망적 추정은 주의가, 회고적 추정은 기억이 좌우한다.Block, R. A. & Zakay, D. (1997), “Prospective and retrospective duration judgments: A meta-analytic review,” Psychonomic Bulletin & Review 4(2). 20개 실험의 메타분석. 전망적 판단은 시간에 주의를 줄수록 길어지고, 회고적 판단은 기억에 저장된 사건이 많을수록 길어진다. 한국 문헌의 역어는 이고은·신현정(2012)의 전망적·회고적 추정법을 따랐다. 로딩 화면 앞의 사용자는 전형적인 전망적 상황에 있다. 지금 기다리고 있다는 걸 알고, 시간이 가는 걸 의식한다.

전망적 상황의 체감 시간을 설명하는 대표 모델이 주의 게이트 모델(attentional gate model)이다.Zakay, D. & Block, R. A. (1995), “An Attentional-Gate Model of Prospective Time Estimation.” 이 계열 연구 117개를 모은 메타분석(Block, Hancock & Zakay 2010, Acta Psychologica)의 결론은, 하고 있는 과제의 부하가 높을수록 같은 시간을 더 짧게 추정한다는 것이다(전망적 추정 기준. 회고적 추정은 반대로 길어진다). 쉽게 말해 마음속에 초시계가 하나 있고, 그 앞에 주의라는 문이 달려 있어서 문이 열린 만큼 눈금이 쌓인다. 시간에 주의를 줄수록 문이 넓게 열리고 눈금이 빨리 쌓인다. 시간 말고 다른 것에 주의를 뺏기면 눈금이 덜 쌓이고, 그만큼 짧게 느껴진다. 라면 냄비 앞의 3분이 길었던 이유가 이거다. 주의가 통째로 시간에 가 있었으니 눈금이 쉬지 않고 쌓였다.

이 직관을 서비스 관점에서 일찍 정리한 사람이 매장과 대기줄을 연구한 David Maister다. 그가 1985년에 내놓은 대기 심리 명제 중 세 개가 로딩 화면에 그대로 얹힌다. 채워진 시간은 빈 시간보다 짧게 느껴진다. 언제 끝날지 모르는 대기는 끝이 보이는 대기보다 길게 느껴진다. 이유를 모르는 대기는 설명된 대기보다 길게 느껴진다.Maister, D. H. (1985), “The Psychology of Waiting Lines,” in The Service Encounter, Lexington Books. 실험 논문이 아니라 서비스 운영 관점의 이론적 에세이라는 점은 밝혀둔다. 디즈니가 줄 서는 구간에 볼거리를 두는 것, 엘리베이터 옆에 거울을 다는 것이 이 글의 사례다. 명제 자체는 실험이 아니라 관찰에서 나왔지만, 이후 실증도 쌓였다. 국내 연구로는 이고은·신현정이 이 명제를 실험으로 검증했는데, 대기의 이유가 명확할수록, 그리고 시간이 아닌 다른 정보에 주의가 분산될수록 사람들이 대기 시간을 짧게 추정했다.이고은·신현정 (2012), “주의분산, 기다림의 이유, 시간 단서가 기다림 시간 추정에 미치는 영향,” 인지과학 23(1), 한국인지과학회.

단서 하나만 짧게 얹는다. 은행 대기 구역에 뉴스 전광판을 달아 볼거리를 준 실측 연구에서, 체감 대기 시간은 거의 줄지 않았는데 대기 경험의 평가는 좋아졌다.Katz, K. L., Larson, B. M. & Larson, R. C. (1991), “Prescription for the Waiting-in-Line Blues: Entertain, Enlighten, and Engage,” Sloan Management Review 32(2). 보스턴의 은행 지점에서 실제 고객을 대상으로 한 현장 실측이다. 주의 분산이 초를 항상 속여주는 건 아니지만, 속이지 못한 순간에도 경험은 덜 나쁘게 만든다. 우리가 설계하는 최종 목표도 결국 초가 아니라 경험이다.

여기까지가 이론의 뼈대다. 로딩 대기는 전망적 상황이니, 이 글의 나머지에서 회고적 추정은 잊어도 된다. 정리하면 이렇다. 로딩 앞의 사용자는 전망적 추정 모드에 있고, 체감 시간은 주의를 시간에 얼마나 빼앗기느냐로 결정된다. 그러니 기다림을 짧게 느끼게 하려면 주의를 시간 아닌 곳으로 옮겨줄 무언가가 필요하다.

스피너는 주의를 시간에 묶는다

이 이론으로 스피너를 보면 문제가 선명해진다. 스피너가 사용자에게 주는 정보는 딱 하나다. 아직 안 끝났다. 언제 끝날지 말해주지 않고, 왜 기다리는지도 말해주지 않고, 그 사이 주의를 둘 곳도 주지 않는다. Maister의 세 명제를 한꺼번에 어기는 셈이다. 돌아가는 원을 바라보는 일은 시간 그 자체를 바라보는 일과 다르지 않아서, 마음속 초시계의 눈금은 쉬지 않고 쌓인다. 그리고 이 초시계는 원래부터 후하게 잰다. 매장 계산대 앞 손님들의 대기를 실측한 오래된 연구에서, 손님들은 자기가 기다린 시간을 실제보다 상당히 길게 추정했다.Hornik, J. (1984), “Subjective vs. Objective Time Measures: A Note on the Perception of Time in Consumer Behavior,” Journal of Consumer Research 11(1). 과대추정 폭은 3할 안팎으로 널리 인용되는데, 이 수치는 요약된 통용값이라 정확한 조건별 값은 원문 기준으로 보는 게 안전하다. 아무 장치가 없는 대기는 그냥 길게 느껴지는 게 아니라, 실제보다 부풀려져 기억된다.

스켈레톤 스크린(skeleton screen)이라는 말을 처음 만든 Luke Wroblewski의 진단도 정확히 이 지점이었다. 2013년 그의 팀은 투표 앱에 스피너를 넣었다가 앱이 느리다는 불평을 받았다. 그가 내린 결론은, 스피너가 사용자를 시계 앞에 세워두고 시간이 가는 것만 바라보게 만들었다는 것이다. 그래서 로딩 중이라는 표시 대신, 곧 도착할 콘텐츠의 윤곽을 미리 그려두자고 제안했다.Wroblewski, L. (2013), “Mobile Design Details: Avoid The Spinner,” lukew.com. 실험 논문이 아니라 자기 제품(Polar)의 경험에서 나온 일화 기반 에세이다. 스피너 제거 후 속도 불만이 줄었다고 서술하지만 정량 수치는 없다.

인지심리학 언어로 옮기면 스켈레톤의 가설은 이렇다. 회색 박스들은 곧 올 화면의 예고편이고, 사용자의 주의는 시간에서 그 예고된 구조로 옮겨간다. 주의 게이트가 좁아지고, 눈금이 덜 쌓이고, 기다림이 짧게 느껴진다. 여기까지만 보면 스켈레톤의 완승이어야 한다. 그런데 실험은 그렇게 나오지 않았다.

실험은 스켈레톤 편이 아니었다

2017년 디지털 에이전시 Viget이 이 통설을 실험대에 올렸다. 참가자 136명에게 같은 길이의 로딩을 스켈레톤, 스피너, 빈 화면 세 가지로 보여주고 체감을 물었다. 결과는 통설의 정반대였다. 스켈레톤을 본 집단이 대기 시간을 가장 길게 추정했고, 대기를 부정적으로 평가한 비율도 가장 높았다.Viget (2017), “A Bone to Pick with Skeleton Screens,” viget.com. n=136. 동료심사를 거친 학술 연구가 아니라 업계 자체 실험이라는 점, 그리고 유료 모집(Amazon Mechanical Turk)과 자사 채널 모집 두 집단에서 같은 결과가 재현됐다는 점을 같이 적어둔다.

이듬해 토론토의 디자이너 Bill Chung이 이 결과를 알고 재검증에 나섰다. 그는 Viget과 같은 결과를 예상했다고 밝혔는데, 실험을 실제 모바일 기기에서, 참가자가 화면에 반쯤만 집중하는 현실적인 상황으로 옮기자 결과가 뒤집혔다. 80명의 모바일 사용자에게 세 조건을 무작위 순서로 보여줬더니 이번에는 스켈레톤이 체감 시간에서 가장 좋은 성적을 냈고, 빈 화면이 최악이었다.Chung, B. (2018), “Everything you need to know about skeleton screens,” UX Collective. n=80, UserTesting.com 모바일 사용자. 역시 동료심사 연구는 아니다. 한편 같은 해 학술 쪽에서 나온 스웨덴 연구는 가상 뉴스 사이트로 스켈레톤과 스피너를 비교했는데, 스켈레톤 쪽 평가 점수가 높긴 했지만 어느 비교에서도 통계적으로 유의한 차이가 없었다.Mejtoft, T., Långström, C. & Söderström, U. (2018), “The effect of skeleton screens: Users’ perception of speed and ease of navigation,” Proc. ECCE 2018, ACM.

세 실험을 나란히 놓으면 스켈레톤 최악, 스켈레톤 최선, 차이 없음이다. 엉망처럼 보이지만, 나는 이 갈림이 주의 게이트 모델로 오히려 일관되게 읽힌다고 본다. 스켈레톤이 이기려면 회색 박스가 곧 올 콘텐츠의 예고로 읽혀서 주의를 가져가야 한다. 그런데 Viget의 참가자들처럼 화면을 뚫어지게 응시하며 로딩이 끝나기만 기다리는 조건이라면, 아무 정보도 없는 회색 박스는 예고편이 아니라 두 번째 시계가 된다. 스피너보다 화면을 더 넓게 덮은 시계다. 반대로 Chung의 참가자들처럼 주의가 이미 흩어져 있는 모바일 맥락에서는, 스켈레톤이 화면의 윤곽을 미리 잡아주는 예고로 작동할 여지가 생긴다. 다만 이건 내 해석이다. 두 실험이 이 차이를 통제해서 직접 비교한 적은 없으니, 검증된 결론이 아니라 두 결과를 잇는 그럴듯한 다리 정도로 받아들이면 된다.

확실하게 말할 수 있는 건 이것뿐이다. 스켈레톤이 스피너보다 빠르게 느껴진다는 명제는 실험적으로 확립된 사실이 아니라 조건부로만 성립하는 가설이고, 그 조건은 사용자의 주의가 어디에 있느냐와 얽혀 있다.

말로만 들으면 안 와닿으니 직접 겪어보자. 아래 실험은 매번 2초에서 4초 사이의 로딩을 무작위로 만들고, 끝나기 전에는 몇 초인지 알려주지 않는다. 스켈레톤과 스피너를 번갈아 겪은 뒤 각각 몇 초처럼 느껴졌는지 비교해보면, 위 실험들이 무엇을 쟀는지 몸으로 알게 된다. 한 가지 재미있는 관전 포인트도 있다. 지금 이 글을 읽는 조건은 화면을 응시하며 로딩만 기다리는 쪽, 그러니까 Viget의 조건에 가깝다.

애니메이션은 체감 시간을 바꾼다

스켈레톤이냐 스피너냐만큼이나 체감을 흔드는 변수가 하나 더 있다. 그 위에 얹는 애니메이션이다. 이쪽은 동료심사를 거친 연구가 제법 쌓여 있다.

Harrison 연구팀의 실험이 대표적이다. 진행 바 위에 뒤로 흐르는 물결무늬를 얹었더니, 같은 길이의 대기가 더 짧게 지각됐다. 2차 인용 기준으로 약 11% 짧게 보고된다.Harrison, C., Yeo, Z. & Hudson, S. E. (2010), “Faster Progress Bars: Manipulating Perceived Duration with Visual Augmentations,” Proc. CHI 2010. 11%라는 수치는 원문이 아니라 이를 인용한 2차 출처(옥스퍼드 인터넷 연구소 기사 등)에서 확인한 값이라 그렇게 적었다. 진행 바의 속도 곡선 자체가 체감을 바꾼다는 같은 팀의 2007년 연구는 앞 글에서 다뤘다. 눈에 보이는 무늬 하나 바꿨을 뿐인데 초시계가 속은 것이다.

같은 계열의 발견이 이어진다. 진행 표시의 스텝을 잘게 쪼개 자주 움직이게 하면 사용자는 경과 시간을 더 짧게 추정한다.Ziat, M. et al. (2022), “Malleability of time through progress bars and throbbers,” Scientific Reports 12. 애니메이션 속도는 빠를수록 좋은 게 아니다. 최근의 소비자 연구에서 너무 느려도 너무 빨라도 대기가 길게 느껴졌고, 중간 속도에서 가장 짧게 느껴졌다. 흥미로운 건 대기 시간이 몇 초라고 미리 알려주면 이 효과가 사라졌다는 점이다.Ding, Y. & Kyung, E. J. (2025), “Optimizing Animation Speed: Convex Effects on Perceived Waiting Time and Digital Customer Experience,” Journal of Consumer Research. 효과의 전제가 대기의 불확실성이라는 점에서 Maister의 명제와 이어진다.

스켈레톤 애니메이션에 한정하면 다시 Bill Chung의 실험으로 돌아온다. 그의 테스트에서 좌우로 훑고 지나가는 웨이브 방식은 투명도가 깜빡이는 펄스 방식보다 짧게 지각됐고, 참가자들은 실제로는 같은 길이였는데도 웨이브 쪽이 짧았다고 확신했다. 느리고 일정한 모션이 빠른 모션보다 낫다는 힌트도 얻었지만, Chung 본인이 표본이 작아 결정적 결론은 못 내린다고 선을 그었다.

여기서 통설 하나를 걸러두자. 웨이브는 왼쪽에서 오른쪽으로 흘러야 더 빠르게 느껴진다는 말이 업계에 널리 돈다. 이번에 자료를 뒤지면서 이 방향 효과를 확인한 독립 실험을 찾으려 했는데, 못 찾았다. Chung이 방향을 변수로 테스트했고 최종 권고에 좌에서 우 방향을 포함하긴 했지만, 방향 자체의 유의미한 차이를 보고한 수치는 확인되지 않는다. 셔머 주기는 1.5초에서 2초가 최적이라는 식의 구체 수치도 마찬가지로 1차 출처를 못 찾았다. 이런 값들은 근거가 확인된 상수가 아니라 업계에서 돌려 쓰는 말로 취급하는 게 안전하다.

그래서 어떻게 고르나

이론과 실험을 다 놓고 보면, 질문 자체를 바꾸는 게 낫다. 스켈레톤이냐 스피너냐가 아니라, 이 대기에서 사용자의 주의를 어디로 보낼 것인가.

1초 안에 끝나는 대기라면 주의를 옮길 필요조차 없다. 닐슨 노먼 그룹은 1초 미만의 로딩에는 어떤 로딩 표시도 띄우지 말라고 권고한다. 나타나자마자 사라지는 표시는 주의를 오히려 로딩의 존재로 끌어당긴다.NN/g, “Progress Indicators Make a Slow System Less Insufferable.” 1초 미만은 표시 없음, 그 이상 10초 안팎까지는 불확정 표시, 그보다 길면 진행률 표시라는 권고다.

주의를 옮길 곳이 있는 화면, 그러니까 피드나 카드 리스트처럼 최종 구조가 정해진 콘텐츠 화면이라면 스켈레톤이 후보가 된다. 단, 예고 기능이 살아 있어야 한다. 회색 박스의 모양과 자리가 실제 콘텐츠와 맞아야 하고, 콘텐츠가 도착할 때 화면이 밀리지 않아야 한다. 모양이 어긋난 스켈레톤은 예고 기능은 죽고 레이아웃 이동이라는 비용만 남는다.

반대로 주의를 옮길 구조가 없는 대기, 예컨대 저장 버튼 하나가 서버 응답을 기다리는 상황이라면 스켈레톤을 그릴 자리 자체가 없다. 이럴 때는 짧으면 낙관적 UI로 기다림을 접고, 길고 무거우면 무엇을 하고 있는지 설명을 붙여 드러낸다. 이 갈림은 앞 글에서 자세히 다뤘다.

마지막으로, 이 글에서 가장 믿을 만한 교훈은 어쩌면 특정 결론이 아니라 Viget과 Chung의 태도다. 두 팀 다 통설을 그대로 받아들이지 않고 자기 사용자로 실험했고, 그래서 서로 다른 답을 얻었다. 실증이 이렇게 갈리는 주제라면, 남의 실험 결과를 정답으로 이식하는 것보다 내 서비스의 맥락에서 직접 재보는 쪽이 정직하다.

정리

도입의 그 문의로 돌아가자. 스피너를 스켈레톤으로 바꿨는데 느려졌다는 말이 나온 게 이제 이상하지 않다. 스켈레톤은 그 자체로 체감 속도를 올려주는 게 아니라 주의를 시간에서 콘텐츠 예고로 옮길 때만 효과를 내는 장치이고, 예고가 예고로 읽히지 않는 맥락에서는 그저 두 번째 시계가 된다. 기다림의 체감을 정하는 건 로딩 표시의 종류가 아니라 그 몇 초 동안 사용자의 주의가 어디에 있느냐다. 그걸 정할 수 있는 사람이 디자이너다.