메뉴 로딩 상태: Skeleton과 Spinner — 모범 사례

부르사 괴륵레의 14개 테이블 캠퍼스 카페가 디지털 메뉴의 회전 스피너를 shimmer-skeleton으로 교체하자 모바일 이탈률이 18%에서 11%로 떨어졌습니다. 동일한 데이터, 동일한 이미지, 동일한 3G 네트워크.

Nielsen Norman 2023 연구

Nielsen Norman Group의 2023년 연구에 따르면 skeleton 화면은 체감 로딩 시간을 38% 줄이고, 전통적인 spinner는 12% 늘립니다. 뇌는 애니메이션된 빈 공간보다 윤곽이 그려진 구조를 더 잘 받아들입니다.

레스토랑 메뉴에서는 결정적입니다. 손님은 테이블에 앉아 휴대폰을 들고 빠르게 결정하고 싶어 합니다. 2초간의 흰 화면은 "네트워크 끊겼나?"라는 의심을 심습니다. Skeleton은 이 의심을 즉시 해소합니다.

thMenu 기본값: shimmer-skeleton

thMenu는 상품 카드, 카테고리 탭, 이미지 플레이스홀더에 CSS gradient shimmer 애니메이션을 사용합니다. 이미지 로딩 중에는 blur-up placeholder와 skeleton 프레임이 표시됩니다.

• 카테고리 탭: 5개의 회색 알약, shimmer 1.5초
• 상품 카드: 이미지 + 텍스트 2줄 + 가격
• 카트 드로어: spinner 대신 행 skeleton

Spinner는 언제 적합한가?

동작 확인 — "주문 전송 중", "결제 처리 중", "직원 호출 중" — 에는 작은 인라인 spinner가 더 좋습니다. 여기서는 결과를 기다리는 것이지 콘텐츠가 아닙니다.

규칙: 데이터는 skeleton, 동작은 spinner. thMenu는 "카트에 추가" 탭 후 200ms 안에 인라인 spinner를 보여주고 성공 토스트를 띄웁니다.

FAQ

느린 skeleton 애니메이션이 해로울 수 있나요? 네. 2초 이상 사이클은 짜증을 유발합니다. 이상적인 값은 1.2-1.8초, thMenu는 1.5초.

매우 나쁜 네트워크에서도 skeleton만으로 충분한가요? Skeleton + 8초 이상 후 toast + service worker 오프라인 fallback.

Skeleton은 접근성에 부합하나요? 네, aria-busy="true"와 aria-label="메뉴 로딩 중"으로 처리합니다.

도움이 되셨나요? 공유해 주세요.