topic★★★★★난이도
Spinner
실잣는 물레에서 유래한 로딩 표시.
#spinner#로딩#대기
Spinner(스피너)는 실을 잣는 물레(spinning wheel)에서 왔다. 물레가 빙글빙글 돌아가며 실을 뽑아내듯, UI의 스피너도 빙글빙글 돌아가며 '처리 중'임을 알린다. 잠자는 숲속의 공주가 물레에 손가락을 찔려 잠들었듯, 스피너가 너무 오래 돌면 사용자도 '잠든다'.
| 실제 사물 | UI 패턴 |
|---|---|
| 물레가 빙글빙글 회전 | 원형 아이콘이 회전 애니메이션 |
| 실이 만들어지는 중 | 데이터가 로딩되는 중 |
| 결과물(실)이 나올 때까지 대기 | 콘텐츠가 나타날 때까지 대기 |
사용 가이드라인: 1초 이내에 끝나는 작업에는 스피너 없이 처리한다(깜빡이면 더 느려 보인다). 1~3초면 스피너를 쓰고, 3초 이상이면 진행률 바(progress bar)나 Skeleton으로 대체한다. 스피너만 덩그러니 보여주지 말고, '데이터를 불러오는 중...' 같은 텍스트를 함께 표시한다.