엠티 스테이트 (Empty State)

말 그대로 '비어 있는 상태'를 위한 디자인이에요. 바이브코딩에서 가장 흔하게 빠뜨리는 화면이기도 합니다 — AI에게 목록 화면을 시키면 데이터가 있는 경우만 만들어주거든요. 하지만 신규 유저가 처음 만나는 화면은 대부분 빈 화면입니다. 첫인상이 여기서 결정돼요.

좋은 엠티 스테이트의 3요소#

1. 왜 비어 있는지 — "아직 등록한 제품이 없어요"
2. 뭘 하면 되는지 — "첫 제품을 올리고 피드백을 받아보세요"
3. 바로 할 수 있게 — [제품 올리기] 버튼(CTA)

검색 결과 없음, 필터 결과 없음, 오프라인, 에러도 각각 엠티 스테이트의 변형이에요. "결과 없음"과 "아직 없음"은 다른 메시지가 필요합니다.

AI에게 시키기#

목록이 비어 있을 때 엠티 스테이트를 보여줘.
- 가운데 정렬: 아이콘 + "아직 등록한 제품이 없어요" + 부가 설명 한 줄 + [제품 올리기] 버튼
- 검색 결과가 없는 경우는 다른 문구: "'{검색어}'에 맞는 결과가 없어요" + 필터 초기화 버튼
- 로딩 중(스켈레톤)과 빈 상태를 혼동하지 않게 분기

마지막 줄이 중요해요 — 로딩 중인데 엠티 스테이트가 먼저 깜빡 보이는 건 AI가 정말 자주 만드는 버그입니다.

혼동 주의#

• 스켈레톤: "데이터가 오는 중" — 엠티 스테이트는 "다 왔는데 없음"
• 404 페이지: 페이지 자체가 없는 것. 엠티 스테이트는 페이지는 있고 내용물이 없는 것