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

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

조회 0추천 0

직접 만든 예시

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

빈칸을 내 상황에 맞게 채워 사용하세요.

입력과 결과 비교

설명용 예시

입력 목록이 비어 있으면 없다고 써줘.

첫 방문에는 만들기 · 검색 실패에는 초기화

활용 방식을 보여주는 예시이며, 직접 실행한 결과가 아닙니다.

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

전문 용어를 활용해 mouseco가 작성한 문구입니다. 출처는 용어와 기법의 참고 문서입니다. 원출처 ↗

기존 가이드와 자세한 사용법 읽기

안녕하세요 mouseco 입니다. :)

Empty state · 빈 상태은 처음 방문해 데이터가 없거나 검색 결과가 없는 상황을 설명하고 다음 행동을 안내하는 화면입니다.

막연한 요청을 구체적인 문구로

기존 요청: 목록이 비어 있으면 없다고 써줘.

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

첫 방문에는 만들기 · 검색 실패에는 초기화

예시는 위 기법을 보여주기 위해 직접 제작했습니다. 수치와 업무 상황은 가상이며 특정 모델의 성능 비교 결과가 아닙니다.

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