빈 화면 설계
빈 화면은 어떻게 설계해야 하나요? 첫 사용, 검색 결과 없음, 다 비운 상태, 오류 네 가지로 나누고 화면마다 다음에 누를 버튼을 하나만 둡니다.
보여 줄 게 없는 화면도 설계해야 합니다. 빈 화면에서 할 일을 알려 주지 않으면 사용자는 그냥 나갑니다.
이름과 미리보기
미리보기를 누르면 멈추고, 다시 누르면 재생합니다.
첫 사용
First-use empty state
가입 직후라 아직 데이터가 하나도 없음
검색 결과 없음
No results
찾는 조건에 맞는 항목이 없음
다 비운 상태
Cleared state
장바구니·할 일을 사용자가 전부 지운 뒤
오류 상태
Error state
불러오다 실패함. 빈 화면과 구분해야 함
이렇게 씁니다
- 빈 화면마다 다음에 누를 버튼을 딱 하나만 둡니다. 여러 개면 다시 망설입니다.
- 검색 결과 없음에는 입력한 검색어를 다시 보여 주고, 철자 확인이나 비슷한 검색어를 제안합니다.
- 다 비운 상태는 실패가 아닙니다. "모두 끝냈습니다"처럼 칭찬하는 말투가 맞습니다.
- 오류를 빈 화면처럼 보여 주면 데이터가 사라진 줄 압니다. 오류에는 [다시 시도] 버튼을 둡니다.
복사해서 쓰는 프롬프트
빈 상태 4종
이 목록 화면의 빈 상태를 4가지로 만들어 줘.
1. 첫 사용(First-use): 무엇을 하는 곳인지 한 줄 + [첫 항목 추가] 버튼 1개.
2. 검색 결과 없음(No results): "'{검색어}'에 맞는 결과가 없습니다" + [검색어 지우기] 버튼.
3. 다 비운 상태(Cleared): 끝낸 것을 칭찬하는 한 줄. 버튼 없음.
4. 오류(Error state): 무엇이 실패했는지 + [다시 시도] 버튼.
일러스트 없이 글과 버튼만으로.참고한 게시물: @uxwoodytips