Indeterminate progress, Loading 패턴 정리

Indeterminate progress

진행률을 모를 때의 progress 표시입니다. 보통 좌에서 우로 흐르는 막대 또는 회전하는 스피너입니다.

CSS 구현:

<progress></progress>  <!-- value 속성 없으면 indeterminate -->

또는 직접 애니메이션:

.indeterminate {
  background: linear-gradient(to right, transparent, #blue, transparent);
  background-size: 50% 100%;
  animation: slide 1s infinite;
}

언제 indeterminate를 쓰나

• 시간 추정 불가: 서버 응답 대기, API 호출.
• 첫 로딩: 화면이 비어 있는 상태.

좋은 패턴은 처음 1~2초는 indeterminate, 그 이후에는 가능하면 progressive UI(skeleton screen)로 전환하는 것입니다.

Loading 패턴 우선순위

1. 즉시 반응 (0~100ms): Optimistic UI.
2. 400ms 이하: Spinner.
3. 1초 이상: Skeleton screen.
4. 시간 추정 가능: Progress bar.
5. 시간 추정 불가, 긴 작업: Indeterminate + 단계별 안내.

인지된 시간 vs 실제 시간

실제 로딩 시간을 줄이는 게 가장 좋지만, 그게 안 되면 인지된 시간을 줄입니다.

기법:

• Skeleton screen: 빈 화면이 아닌 콘텐츠 윤곽.
• 점진적 콘텐츠 로드: 위에서부터 보임.
• 재밌는 로딩 메시지: "조금만 기다려 주세요" 같은 문구.

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

3초 이상 걸리는 작업에는 단순 spinner보다 상태 메시지가 좋습니다. "데이터를 불러오는 중...", "거의 다 됐어요" 같은 것입니다. 시간 진행을 사용자가 느낄 수 있게 합니다.

관련

Spinner · Skeleton screen · Progress bar