Empty states
보여줄 것이 없을 때 이유를 설명하고 다음 행동으로 이끌어요.
빈 상태는 화면에 보여줄 데이터가 없을 때 나타나요. 이슈가 하나도 없는 보드, 다 처리한 알림함, 결과가 없는 검색처럼요. 빈 화면을 그냥 두면 사용자는 오류인지, 기다려야 하는지 알 수 없어요. 지금 왜 비어 있는지와 무엇을 하면 되는지를 알려줘요.
사용하는 컴포넌트: Empty state, Button.
구성
- 이미지 (선택) — 메시지와 관련 있는 작은 일러스트나 아이콘. 직접적이어도, 비유적이어도 좋아요.
- 제목 (필수) — 지금 상태를 짧게 설명해요.
- 설명 (선택) — 왜 이런 상태인지, 다음에 무엇을 하면 되는지 한두 문장으로 써요.
- 액션 (선택) — 다음 단계를 위한 primary 버튼, 보조 버튼, 또는 링크.
모든 요소는 가운데 정렬로 세로로 쌓아요.
유형
| 유형 | 상황 | 톤 | 액션 |
|---|---|---|---|
| 처음 시작 | 아직 아무것도 만들지 않음 (새 프로젝트, 빈 보드) | 동기를 주고, 가르쳐 줘요 | "이슈 만들기", "가져오기" |
| 모두 완료 | 할 일을 다 처리함 (빈 알림함, 완료된 스프린트) | 축하해요 | 없어도 돼요 |
| 결과 없음 | 검색·필터 결과가 없음 | 담담하게, 다른 방법을 제안해요 | "필터 지우기" |
| 권한 없음·오류 | 볼 수 없거나 불러오지 못함 | 원인과 해결 방법 | "권한 요청", "다시 시도" |
결과 없음
크기와 위치
| 너비 | 값 | 쓰는 곳 |
|---|---|---|
wide (기본) | 464px | 페이지 전체, 넓은 영역 |
narrow | 304px | 패널, 사이드바, 카드처럼 좁은 영역 |
- 전체 화면: 화면의 주 메시지로 쓸 때. 이미지를 크게 써도 돼요.
- 컨테이너 안: 표·패널·목록 안에 넣을 때. 이미지를 빼거나 작게 줄여요.
표 안의 빈 상태
표는 헤더를 그대로 두고, 본문 자리에 빈 상태를 보여줘요. 사용자가 무엇이 비어 있는지 열 이름으로 알 수 있어요.
문구 쓰기
Do· 다음 행동을 제안
"아직 이슈가 없어요. 첫 이슈를 만들어 팀의 할 일을 정리해 보세요."
Don't· 상태만 말하기
"데이터 없음" 처럼 사용자가 할 일을 알려주지 않는 문구는 피해요.
- 사람들은 훑어 읽어요. 문구를 짧게 써요.
- 버튼 라벨은 동사로 시작해요. "만들기", "지우기", "다시 시도".
- 다른 페이지로 보내 읽게 하는 일은 줄여요. 꼭 필요하면 보조 링크로 둬요.
- 전문 용어 대신 쉬운 말을 써요.
좋은 빈 상태를 위해
- primary 액션은 하나만 둬요. 페이지에 primary 버튼이 이미 있다면 빈 상태에는 보조 버튼을 써요.
- 이미지는 중립적이거나 가볍게 유머러스하게, 부정적인 느낌은 피해요. 비유가 다른 문화권에서도 통하는지 생각해요.
- 큰 이미지를 좁은 곳에 억지로 줄이지 않아요. 공간이 좁거나 주변에 다른 이미지가 많으면 이미지를 빼요.
- 장식용 이미지에는 대체 텍스트를 넣지 않아요. 정보를 담은 이미지에만 넣어요.
- 처음 불러오는 중에는 빈 상태가 아니라 Loading 을 보여줘요. 데이터가 없다는 걸 확인한 뒤에 빈 상태를 띄워요.