Loading, Error, Success, Indeterminate, 상태 4종

Loading state

작업이 진행 중입니다. 로딩 인디케이터, 스피너, skeleton screen을 씁니다.

Error state

문제가 발생한 상태입니다. 사용자에게 (1) 무엇이 잘못됐는지, (2) 어떻게 고칠지를 명확히 전달합니다.

좋은 에러:

• "비밀번호가 틀렸습니다. 8자 이상 + 영문 + 숫자 조합이 필요해요."

나쁜 에러:

• "Error code: 0x80000003"

Success state

작업이 완료된 상태입니다. 짧은 피드백을 줍니다.

• Toast: "저장됐습니다."
• 체크 마크 아이콘과 색 변화.

너무 강한 success feedback은 오히려 산만합니다. 가벼운 신호로 충분합니다.

Indeterminate progress

진행률을 모를 때의 표시입니다. 일반 progress bar와 다릅니다.

• 막대가 좌에서 우로 계속 흐름.
• 회전하는 스피너.

확정된 % 표시가 가능하면 그게 항상 더 좋습니다. Indeterminate는 마지막 선택입니다.

Empty state vs Loading vs Error

• Empty state: 데이터가 없음. 정상 상황.
• Loading state: 데이터 가져오는 중.
• Error state: 데이터를 못 가져옴.

이 3가지를 명확히 구분해야 사용자가 헷갈리지 않습니다.

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

신규 화면을 디자인할 때 4가지 상태(loading, empty, error, success/normal)를 모두 디자인합시다. 디자이너는 normal만 신경 쓰기 쉽지만, 사용자는 다른 상태에서 헷갈립니다.

관련

Empty state · Spinner · Progress bar