UI 가이드요소
엠티 스테이트Empty State
엠티 스테이트는 목록이나 화면에 보여줄 데이터가 아직 없을 때 빈 공간 대신 표시하는 안내 UI입니다. 왜 비어 있는지와 다음에 무엇을 하면 되는지(CTA)를 알려줍니다.
- 이렇게 생겼습니다
- 아무것도 없을 때 가운데 뜨는 아이콘 + 한 줄 안내 + 버튼.
- 프롬프트에 쓰는 이름
- Empty State · 다른 이름: 빈 상태, 제로 스테이트, Zero State, 빈 화면 안내
말 그대로 '비어 있는 상태'를 위한 디자인입니다. 바이브 코딩에서 가장 흔하게 빠뜨리는 화면이기도 합니다. AI에게 목록 화면을 시키면 데이터가 있는 경우만 만들어 주기 때문입니다. 하지만 처음 가입한 사용자가 만나는 화면은 대부분 빈 화면입니다. 첫인상이 여기서 정해집니다.
- 첫 홈페이지 배포하기
- 레슨 4까지 듣기
- 회고 글 한 편 쓰기
좋은 엠티 스테이트의 3요소
- 왜 비어 있는지 — "아직 정한 목표가 없어요"
- 무엇을 하면 되는지 — "이달의 목표를 하나 적어 보세요"
- 바로 할 수 있게 — [목표 정하기] 버튼(CTA)
검색 결과 없음, 필터 결과 없음, 오프라인, 에러도 각각 엠티 스테이트의 변형입니다. "결과 없음"과 "아직 없음"은 다른 메시지가 필요합니다.
AI에게 시키기
목록이 비어 있을 때 엠티 스테이트를 보여줘.
- 가운데 정렬: 아이콘 + "아직 정한 목표가 없어요" + 부가 설명 한 줄 + [목표 정하기] 버튼
- 검색 결과가 없는 경우는 다른 문구: "'{검색어}'에 맞는 결과가 없어요" + 필터 초기화 버튼
- 로딩 중(스켈레톤)과 빈 상태를 혼동하지 않게 분기
마지막 줄이 중요합니다. 로딩 중인데 엠티 스테이트가 먼저 깜빡 보이는 것은 AI가 정말 자주 만드는 버그입니다.
혼동 주의
- 스켈레톤: "데이터가 오는 중"입니다. 엠티 스테이트는 "다 왔는데 없음"입니다.
- 404 페이지: 페이지 자체가 없는 것입니다. 엠티 스테이트는 페이지는 있고 내용물이 없는 것입니다.