Spinner / Loader, Apple의 Beach ball of death

한 줄로

빙빙 도는 그 작은 동그라미입니다. 1990년대 마우스 모래시계로 시작해서, 지금까지 사용자가 가장 싫어하는 UI가 됐습니다.

어디서 왔나

1990년대 Windows 3.1과 Mac OS 7에 처음 등장한 모래시계 커서가 그것입니다. 시스템이 바쁠 때 마우스 포인터가 모래시계로 바뀌었습니다. 이게 첫 spinner입니다.

이후 진화의 분기는 다음과 같습니다.

Mac OS X (2001): 다채로운 무지개 색 동그라미. 사용자들이 이걸 "Beach ball of death"(죽음의 비치볼)이라 별명을 붙였습니다. 너무 오래 돌면 시스템이 멈춘 것이기 때문입니다.
iOS (2007): 회색 막대 12개가 회전하는 단순한 spinner. 지금도 그대로입니다.
Material Design (2014): 원형으로 그려지는 활호 스타일(CircularProgressIndicator).

웹에서는 1996년경 GIF 애니메이션 로딩 아이콘이 표준이 됐습니다. 그 후 CSS3와 SVG로 옮겨가면서 더 부드러워졌습니다.

종류

Determinate (확정형): 진행률을 알 수 있습니다. 막대가 0~100%로 채워집니다.
Indeterminate (비확정형): 끝을 모릅니다. 그냥 빙빙 돕니다.

확정형이 사용자 인내심에 훨씬 좋습니다. 얼마나 남았는지 아는 5초가 언제 끝날지 모르는 2초보다 덜 답답합니다(사용자 인지 연구 결과).

대안

Spinner의 한계가 명확해지면서 대안 패턴들이 등장했습니다.

Skeleton screen: 빈 spinner 대신 콘텐츠 윤곽을 미리 보여줍니다.
Progress bar: 비율로 진행 상황을 표시합니다.
Optimistic UI: spinner를 아예 안 보여주고 즉시 결과를 반영합니다.
Background loading: 사용자에게는 안 보여주고 뒤에서 작업합니다.

바이브 메이커가 챙길 한 가지

Spinner가 떠 있는 시간은 사용자가 떠나는 시간입니다. 400ms (Doherty Threshold) 이상이면 무조건 다른 패턴으로 대체할 고민을 해야 합니다. Spinner 자체보다 spinner가 떠 있는 시간 자체를 줄이는 게 본질입니다.

관련

Skeleton screen, Progress bar, Doherty Threshold