이 글은 누구를 위한 것인가
- 빈 화면을 "데이터가 없습니다"로 처리하고 있는 팀
- 신규 사용자의 초기 이탈률을 줄이고 싶은 프로덕트 팀
- Empty State를 전략적으로 설계하려는 디자이너
들어가며
Empty State는 "화면에 보여줄 콘텐츠가 없을 때"의 상태다. 많은 앱이 이 순간을 대충 처리한다. "결과가 없습니다." 한 줄과 빈 공간이 전부인 화면이 얼마나 많은가.
하지만 Empty State는 사용자 여정에서 중요한 전환점이다. 처음 앱을 켠 신규 사용자에게 "어떻게 시작할까"를 안내하는 순간이기도 하고, 검색 결과가 없을 때 사용자를 잡아둘 마지막 기회이기도 하다. 잘 설계된 Empty State는 이탈을 막고 행동을 유도한다.
이 글은 bluefoxdev.kr의 신규 사용자 온보딩 UX 를 참고하고, Empty State 설계 관점에서 확장하여 작성했습니다. 더 많은 UX 패턴은 bluebutton.kr 에서도 확인할 수 있습니다.
1. Empty State의 4가지 유형
유형 1: 첫 사용 (First Use)
앱을 처음 실행하거나 기능을 처음 사용하는 순간. 사용자가 가장 많이 이탈하는 시점이기도 하다.
목표: 사용자가 즉시 가치를 경험하도록 안내
구성 요소:
- 친근한 일러스트레이션 (부담 없이)
- 간결한 설명 (이 기능이 무엇을 하는가)
- 명확한 첫 번째 행동 CTA
예시 (슬랙 첫 접속):
"여기에 메시지가 표시됩니다"
[일러스트]
"채널에 입장하거나 새 채널을 만들어 팀과 소통하세요"
[채널 탐색하기] 버튼
유형 2: 사용자 생성 콘텐츠 없음 (User-Cleared)
할 일 목록이 비어 있거나, 즐겨찾기에 아무것도 없는 상태.
목표: 사용자가 콘텐츠를 추가하도록 유도
구성 요소:
- 긍정적이거나 중립적인 메시지 ("할 일이 모두 완료됐습니다!" ✅)
- 추가 행동 CTA ("+ 새 항목 추가")
- 일러스트레이션 (필요 시)
주의: 부정적 표현 사용 금지
❌ "아무것도 없습니다"
✅ "여기에 저장된 항목이 나타납니다"
유형 3: 검색 결과 없음 (No Results)
검색어나 필터에 맞는 결과가 없는 상태.
목표: 사용자가 검색을 수정하거나 대안을 찾도록 안내
구성 요소:
- 검색어 표시 ("'{검색어}'에 대한 결과가 없습니다")
- 대안 제안 (오타 수정, 다른 키워드, 필터 초기화)
- 연관 콘텐츠 추천
예시:
"'아이폰 케이스'를 찾고 있나요?"
→ [필터 초기화] [비슷한 상품 보기]
유형 4: 오류 상태 (Error)
네트워크 오류, 권한 없음, 서버 오류 등.
목표: 사용자가 상황을 이해하고 적절히 대응하도록 안내
구성 요소:
- 오류 유형에 맞는 명확한 메시지
- 사용자가 할 수 있는 행동 제시
- 재시도 버튼 (필요 시)
유형별 메시지:
네트워크 오류: "인터넷 연결을 확인해주세요" + [재시도]
서버 오류: "일시적인 문제가 발생했습니다. 잠시 후 다시 시도해주세요"
권한 없음: "이 콘텐츠에 접근할 권한이 없습니다" + [문의하기]
2. Empty State 설계 원칙
원칙 1: 상황에 맞는 메시지
❌ 모든 Empty State에 같은 메시지 사용
"데이터가 없습니다."
✅ 상황별 맥락 있는 메시지
주문 내역 없음: "아직 주문한 상품이 없네요. 첫 구매를 시작해보세요!"
찜 목록 없음: "마음에 드는 상품에 하트를 눌러 찜해보세요"
리뷰 없음: "첫 번째 리뷰를 작성해보세요"
원칙 2: CTA는 하나만
❌ 행동 선택지 과다
[카테고리 탐색] [검색] [인기 상품 보기] [추천 받기]
✅ 가장 효과적인 행동 하나
[지금 탐색하기]
원칙 3: 일러스트레이션 사용 기준
일러스트레이션은 도움이 될 수도, 방해가 될 수도 있다.
| 상황 | 일러스트 사용 여부 | 이유 |
|---|---|---|
| 첫 사용 온보딩 | ✅ 적극 활용 | 친근함, 브랜드 경험 |
| 검색 결과 없음 | △ 선택적 | 단순 메시지가 더 빠른 경우 |
| 오류 상태 | ⚠️ 신중하게 | 귀여운 오류 화면이 불쾌감 유발 가능 |
| 로딩 오래 걸림 | ❌ 지양 | 로딩보다 일러스트에 집중 유발 |
원칙 4: 접근성 확보
<!-- Empty State 접근성 예시 -->
<section
role="region"
aria-label="주문 내역이 없습니다"
>
<img
src="/empty-orders.svg"
alt=""
aria-hidden="true" <!-- 장식용 이미지는 숨김 -->
/>
<h2>아직 주문한 상품이 없네요</h2>
<p>첫 구매를 시작해보세요. 다양한 상품이 기다리고 있어요.</p>
<a href="/products" role="button">상품 탐색하기</a>
</section>
3. 실제 앱 Empty State 사례 분석
Slack 첫 채널 진입
구성: 일러스트 + "이 채널의 첫 메시지입니다"
전략: 역사적 의미 부여 ("You're the first person here")
CTA: 없음 (자연스럽게 메시지 입력 유도)
학습: CTA 없어도 컨텍스트가 행동을 유도
Notion 빈 페이지
구성: "/" 입력 힌트 + 템플릿 제안
전략: 빠른 시작을 위한 구체적 행동 제시
CTA: 템플릿 선택 또는 직접 작성
학습: 여러 진입점 제공이 효과적
에어비앤비 검색 결과 없음
구성: 날짜/인원 수정 제안 + 유사 숙소 추천
전략: 이탈 방지를 위한 대안 즉시 제공
CTA: 조건 수정하기 / 다른 날짜 보기
학습: 검색 실패를 다른 콘텐츠로 연결
마무리: Empty State 설계 체크리스트
- 상황마다 다른 맥락 있는 메시지 작성
- CTA 하나만, 가장 효과적인 행동 유도
- 일러스트는 브랜드 톤에 맞게, 과도하지 않게
- 접근성: 대체 텍스트, 역할, 제목 태그 사용
- 다크모드에서도 일러스트 가독성 확인
- 모바일과 데스크톱 레이아웃 모두 테스트
Empty State는 "아무것도 없음"이 아니라 "다음 행동을 만드는 기회"다.