패턴
빈 상태·일부 실패·오류
목록·카드·위젯·차트에서 같은 7상태를 같은 문장으로. 세 가지 빈 상태는 서로 다른 문장이다.
세 가지 빈 상태
빈 상태 세 가지는 다른 문장이다: 아직 읽지 않음 / 읽었지만 결과 없음 / 일부 실패.
아직 읽지 않음
출처를 연결하면 여기에 보여요.
비어 있음
아직 여기에 보여줄 기록이 없어요.
‘roadmap’ 결과 없음
읽은 기간에는 해당하는 기록이 없어요.
- 이렇게빈 상태에는 원 안의 선 아이콘 하나, 문장 하나, 버튼 0–1개. 상태마다 아이콘과 문장이 다르다.
- 이렇게 하지 않기큰 “0”, 일러스트, 진척을 암시하는 그림을 쓰지 않는다. “쉬었던 날” 같은 노력 평가도 없다.
- 이렇게화면별 문장이 있으면 공통 문장 대신 그것을 쓴다(예: 이번 주 → “이번 주 기록이 아직 없어요.”).
표면마다 같은 상태
실제 컴포넌트: 한 상태를 목록·카드·위젯·차트에 동시에
surface="list"
아직 읽지 않음
출처를 연결하면 여기에 보여요.
surface="card"
아직 읽지 않음
출처를 연결하면 여기에 보여요.
surface="widget"
아직 읽지 않음
출처를 연결하면 여기에 보여요.
CollectionCoverage
오류와 일부 실패
오류 문장은 무슨 일 → 무엇이 남았나 → 무엇을 하면 되나. 행동은 0–1개, 보통 “다시 시도”. 배너는 계정 전체의 일(이메일 인증, 끊긴 연결)에만, 흐름을 막지 않는다.
오류지금 불러오지 못했어요.
주의일부 기간을 읽지 못했어요.
받은 기록은 그대로 있어요.
Google Calendar 연결이 끊겼어요. 받은 기록은 그대로 있어요.
- 이렇게 하지 않기이전 그림을 오류 표시 없이 남기지 않는다. 반대로 데이터가 있을 때 다시 불러오기가 실패하면 데이터를 지우지 않고 “오래됨”으로 표시한다.
- 이렇게 하지 않기사과·감탄·탓하기(“앗”, “죄송합니다”, “잘못 입력하셨습니다”)를 쓰지 않는다.
- 이렇게assertive 알림은 사용자 자신의 행동이 실패했을 때만. 백그라운드 실패는 polite.
어느 컴포넌트를 쓰나
| 상황 | 컴포넌트 |
|---|---|
| 데이터 영역 전체의 상태 | StateView |
| 독립된 빈 화면 (카드 하나) | EmptyState |
| 받은 데이터 위 일부 실패 | PartialFailureRow |
| 흐름 안의 문제 알림 | Alert |
| 계정 전체의 일 | Banner |
| 행동 결과 (실행 취소 포함) | Toast |
| 처음 불러오는 중 | Skeleton |