무조건 스켈레톤 화면을 보여주는게 사용자 경험에 도움이 될까요?

간단 소개

빠른 인터넷 환경에서 스켈레톤 UI가 항상 긍정적인 사용자 경험을 제공하는지 분석하고, React Suspense와 성능 모니터링을 통해 개선 방안을 제시합니다.

AI Summary

Progress Indicator UX 리서치
- 닐슨 노먼 그룹은 1초 이상 작업에 Progress Indicator 사용을 권장, 짧은 작업에는 반복 애니메이션이 주의를 산만하게 할 수 있다고 지적.
- 카카오페이는 로딩 시 스켈레톤 애니메이션을 적극 사용하지만, 한국의 빠른 인터넷 속도에서는 역효과를 낼 수 있음.
카카오페이 공지사항 사례
- API 지연시간이 짧을 경우(100ms), 스켈레톤 화면이 오히려 사용자에게 거슬리는 느낌을 줄 수 있음.
- API 응답 시간이 짧은 경우 스켈레톤을 보여주지 않는 것이 더 나은 사용자 경험을 제공할 수 있음.
React Suspense를 활용한 구현 및 Firebase Performance Monitoring
- React Suspense와 DeferredComponent를 사용하여 특정 시간(예: 200ms) 이후에 스켈레톤을 노출시켜 사용자 경험을 개선할 수 있음.
- Firebase Performance Monitoring을 통해 수집된 성능 지표를 활용, 스켈레톤 노출 지연 시간을 조정하여 덜그럭거리는 느낌을 줄일 수 있음. 75% 사용자에게 긍정적 효과 기대.