스켈레톤 화면: 언제나 좋은 선택일까요?

웹사이트에서 데이터를 불러올 때, 흔히 '스켈레톤 화면'이라는 로딩 표시를 사용합니다. 하지만 이게 항상 최선의 선택은 아니라는 흥미로운 블로그 글이 있어 공유드립니다.

세계적인 UX리서치 그룹 닐슨 노먼은 1초 미만이 소요되는 항목의 경우 애니메이션을 사용하면 오히려 주의가 산만해진다고 합니다. 이유는 사용자 입장에서는 너무 짧은 시간 이기에 화면에서 어떤 일이 발생했는지 따라갈 수 없기 때문인데요.

스켈레톤 화면의 효과

1. 빠른 로딩 (100ms 미만):

   • 스켈레톤이 너무 빨리 사라져 화면이 '덜그럭거리는' 느낌을 줍니다.

   • 결론: 이런 경우 스켈레톤을 보여주지 않는 것이 더 깔끔합니다.

2. 느린 로딩 (300ms 이상):

   • 스켈레톤 화면이 유용하게 작용합니다.

   • 사용자에게 '무언가 로딩 중'이라는 시각적 피드백을 제공합니다.

카카오페이의 해결책: 지연된 스켈레톤

카카오페이는 이 문제를 Suspense와 DeferredComponent라는 유틸리티 컴포넌트로 아래와 같이 해결했습니다. 200ms 까지는 빈 화면을 보여주고 이후에는 스켈레톤을 표시하는 방식인데요.

• 작동 방식:

  • 0-200ms: 빈 화면 표시

  • 200ms 이후:

    • 데이터 로딩 완료 시 → 즉시 데이터 표시

    • 데이터 로딩 중 → 스켈레톤 표시

• 예시:

  • 100ms 응답: 200ms 후 바로 데이터 표시 (스켈레톤 없음)

  • 400ms 응답: 200ms 후 스켈레톤 표시, 400ms에 데이터 표시

또한 성능 모니터링 도구(Firebase)를 활용하여 실제 API 응답 시간을 분석하여 대부분의 응답시간이 200ms이내임을 확인하고, 위와 같은 전략으로 '덜그럭거림'이 없는 부드러운 경험을 제공했습니다.

따라서 무조건 스켈레톤을 보여주는것보다는 사용자의 환경과 데이터를 분석하여 선택적으로 스켈레톤을 보여주는 것이 더 나을 수 있습니다. 이렇게 사용자 경험에 대한 연구들을 통해 인사이트를 얻고 데이터를 활용한 가설 및 검증 과정을 통해 더 좋은 사용자 경험을 제공할 수 있습니다.

https://tech.kakaopay.com/post/skeleton-ui-idea/