로딩과 오류를 성공 화면의 부속물이 아닌 상태로 다루기

초기 화면

사용자가 아직 검색하지 않았는지, 자동 요청을 기다리는지 구분한다.

전체 페이지인지 일부 영역인지에 맞춰 skeleton이나 spinner를 배치한다.

데이터가 있으면 콘텐츠를, 없으면 다음 행동을 담은 empty state를 보여준다.

오류 메시지와 재시도, 로그인 이동, 입력 수정 같은 행동을 연결한다.

Initial

시작 전 검색어 입력 전, 권한 요청 전처럼 아직 결과가 없는 상태

로딩과 다름

진행 중 사용자가 기다릴 이유를 알 수 있게 표시

레이아웃 밀림 최소화

Empty

정상 빈 값 조건을 바꾸거나 새 항목을 만들도록 안내

오류처럼 표현하지 않음

Error

실패 재시도 가능성과 원인 범위를 전달

기술 로그 노출 금지

분리 빈 배열을 오류나 로딩으로 처리하지 않는다.

부분 갱신 기존 데이터가 있으면 재요청 중 전체를 지우지 않는다.

재시도 오류 화면에서 사용자가 바로 다시 시도할 수 있다.

접근성 상태 변화가 시각적 장식에만 의존하지 않는다.