Empty state, 2013년 Mailchimp가 대중화한 빈 화면 디자인

한 줄로

데이터가 아무것도 없는 화면입니다. 사용자의 첫 만남이자, 가장 자주 무시되는 화면입니다.

어디서 왔나

UI에서 "빈 화면" 자체는 컴퓨터의 시작과 함께였습니다. 그런데 이 상태를 의도적으로 디자인해야 한다는 개념이 본격화된 건 2013년경입니다.

Mailchimp가 자사 디자인 블로그에 "Empty State Design" 시리즈를 올리면서 이 단어가 산업 표준이 됐습니다. 그들의 주장에 따르면, 빈 화면이야말로 사용자에게 가장 강한 메시지를 줄 수 있는 기회입니다.

이전까지의 빈 화면은 보통 "No data" 같은 회색 글자 한 줄이었습니다. Mailchimp는 그것을 일러스트, 안내, 다음 동작 버튼으로 채웠습니다. 사용자가 "여기서 뭘 해야 할까?"를 자연스럽게 알 수 있게 만든 것입니다.

3가지 종류

First-time empty: 처음 사용입니다. "아직 메모가 없어요. 첫 메모를 만들어 보세요." 같은 안내와 시작 버튼.
No results empty: 검색 결과 없음입니다. "검색어 'xyz'에 맞는 결과가 없어요. 다른 단어로 검색하시거나..." 같은 안내와 추천.
Error/cleared empty: 모두 완료 / 삭제됨. "할 일을 다 끝내셨네요!" 같은 칭찬.

각각 다른 디자인이 필요합니다. 같은 "빈 화면"이지만 사용자의 맥락이 완전히 다르기 때문입니다.

좋은 사례

Notion: 새 페이지를 만들면 빈 화면에 "/" 입력 안내가 떠 있습니다. 사용자가 즉시 다음 동작을 알 수 있습니다.
Trello: 빈 보드에 "리스트를 추가하려면 클릭" 버튼이 강조됩니다.
Slack: 새 채널에 환영 메시지와 핀 고정·통합 안내가 있습니다.

바이브 메이커가 챙길 한 가지

본인 도구의 빈 화면이 "데이터가 없습니다" 한 줄이라면, 거기서 사용자의 30%가 떠납니다. 빈 화면을 첫 온보딩의 일부로 다뤄야 합니다. 일러스트, 안내, 첫 동작 버튼 3가지가 들어가야 사용자가 다음으로 갑니다.

관련

Onboarding, First-100-users, Microinteraction