프론트엔드
무조건 스켈레톤 화면을 보여주는게 사용자 경험에 도움이 될까요?
두줄요약
짧은 API 응답에 스켈레톤을 무조건 노출하면 오히려 화면이 덜그럭거릴 수 있음을 설명했습니다. React Suspense와 성능 지표를 활용한 지연 노출 방식을 제안했습니다.
문제 상황
- 빠른 API 응답 환경에서 짧게 노출되는 스켈레톤 애니메이션으로 인한 화면 깨짐·덜그럭거림 인상
- 공지사항 화면의 평균 API 지연시간 약 60ms, 100ms 응답에서도 불필요한 스켈레톤 노출
해결 방법
- React Suspense의 fallback을
DeferredComponent로 감싸 스켈레톤 노출을 200ms 지연 - 200ms 이내 응답 시 빈 화면 뒤 실제 콘텐츠 노출, 장기 로딩 시점부터 스켈레톤 노출
트레이드오프
- 지연 직후 응답이 완료되는 250~300ms 구간에서는 짧은 스켈레톤 노출 가능성
- 모든 지연시간에 동일한 UX를 보장하지 못하는 임계값 기반 제어
성능/운영 포인트
- Firebase Performance Monitoring의 실제 네트워크 응답시간 백분위 기반 지연 기준 검토
- 실서비스 시나리오와 실험·검증을 통한 사용자 경험 지속 개선
