06 / 프런트엔드 / 직접 만든 예시

자료가 없을 때 다음 행동 안내 · Empty state

처음 방문해 데이터가 없거나 검색 결과가 없는 상황을 설명하고 다음 행동을 안내하는 화면

＋

첫 기록을 만들면 이곳에 모입니다.

이렇게 말해보세요

[목록]의 empty state를 설계해줘. 첫 방문은 첫 항목 만들기, 검색 결과 없음은 필터 초기화로 안내해줘. 이유 한 줄과 상황에 맞는 CTA 하나씩 넣어줘.

“없음”만 보이는 막다른 화면에서 다음 행동으로 이어줍니다. 실제 데이터가 없는 상황과 조건 때문에 보이지 않는 상황을 구분합니다.