04 · Patterns · 피드백 · 상태
빈 상태Empty State
데이터가 없다는 사실만 알리면 사용자는 막힙니다. 왜 비었고, 무엇을 하면 채워지는지를 함께 말해야 빈 화면이 안내 화면이 됩니다.
3가지 유형
- 첫 방문(Onboarding) — 서비스 최초 진입, 아직 데이터 생성 전. 기회를 보여주는 화면.
- 검색 결과 없음 — 조건을 완화하도록 안내. 완전한 리셋 제공.
- 데이터 없음 — 휴지통이 비었다 등. 긍정적 상태임을 짧게 확인.
첫 방문
첫 프로젝트를 만들어보세요.
검색 결과 없음
"foo"에 대한 결과가 없습니다.
데이터 없음
휴지통이 비어있습니다.
구성 요소
- 아이콘 / 일러스트 — 맥락 힌트. 너무 화려하면 노이즈가 됩니다.
- 제목 — 상태 한 줄. “아직 저장한 항목이 없습니다”.
- 설명 — 왜 그런지 + 어떻게 채우는지. 한두 줄.
- 기본 액션 — 가장 가능성 높은 다음 행동. Primary 1개면 충분.
톤과 문구
‘비어있음’은 나쁜 일이 아닙니다. 말투는 중립 또는 긍정적으로. 사용자가 실수했다는 느낌을 주지 마세요.
Do· 기회로 전환
“첫 소그룹을 찾아보세요” 처럼 액션형 문장. 빈 화면을 온보딩 한 스텝으로 만듭니다.
Don't· 차갑고 건조
“결과 없음” 한 단어만. 큰 화면을 비워두고 사용자에게 다음 행동을 맡겨버리면 이탈률이 오릅니다.
검색 결과 없음
- 입력한 검색어·적용한 필터를 그대로 보여주세요. 무엇이 “없다”는 건지 확인할 기회.
- “필터 초기화” 또는 “검색어 수정” 버튼.
- 가능하면 유사 추천(“이 단어를 찾으셨나요?”)을 제공.
접근성
- 장식용 아이콘·일러스트는
aria-hidden="true". - 제목은 해당 영역의
h2/h3로. 스크린리더가 “이 영역이 비어있음”을 빠르게 파악합니다. - 액션 버튼 텍스트는 동사형으로 구체적이게(“프로젝트 생성” > “시작”).