안녕하세요, 디자인 엔지니어 올리브예요.
Empty State(빈 화면)는 보여 줄 데이터가 없을 때 나오는 화면이에요. 처음 가입했을 때, 검색 결과가 없을 때, 할 일을 다 끝냈을 때처럼 사용자가 생각보다 자주 만나요. 이때 "데이터가 없습니다" 한 줄만 두면 사용자는 고장인지, 자기가 뭘 잘못했는지 몰라 떠나요. 좋은 빈 화면은 왜 비었는지 알려 주고, 다음에 할 일을 하나 건네요.
디자인 시안을 만들 때는 보통 데이터가 꽉 찬 화면부터 그려요. 그래서 빈 화면은 개발 막바지에 "일단 문구 하나 넣자"로 끝나기 쉬워요. 그런데 신규 사용자가 가장 먼저 보는 화면이 바로 이 빈 화면이에요.
Empty State란 무엇인가요?
Empty State는 목록, 표, 대시보드처럼 내용이 채워져야 할 자리가 비어 있는 상태를 말해요. 우리말로는 '빈 화면', '빈 상태'라고 불러요. 구글의 Material Design, 닐슨 노먼 그룹(NN/g) 같은 곳에서도 따로 다루는 UI 패턴이에요.
빈 화면은 크게 네 가지 상황에서 나와요.
| 구분 | 언제 나오나요? | 사용자 마음 | 예시 |
|---|---|---|---|
| 처음 사용 | 가입 직후, 아직 만든 게 없을 때 | "여기서 뭘 하면 되지?" | 첫 프로젝트 만들기 화면 |
| 결과 없음 | 검색·필터 결과가 0건일 때 | "내가 잘못 찾았나?" | 검색 결과 없음 |
| 다 비움 | 할 일·알림·장바구니를 다 처리했을 때 | "다 끝났다!" | 받은편지함 0 |
| 불러오기 실패 | 네트워크·권한 문제로 못 가져왔을 때 | "고장 났나?" | 다시 시도 화면 |
같은 "아무것도 없음"이라도 사용자 마음이 완전히 달라요. 그래서 문구 하나로 네 상황을 다 덮으면 어딘가에서는 반드시 어긋나요.
빈 화면을 대충 두면 어떤 일이 생기나요?
고장 난 것처럼 보여요
빈 표에 "데이터가 없습니다"만 있으면, 사용자는 아직 없는 건지, 불러오다 실패한 건지 구분할 수 없어요. 새로고침을 몇 번 누르다 고객센터에 문의하거나 그냥 떠나요.
신규 사용자의 첫인상이 빈 화면이에요
가입하고 처음 들어온 대시보드가 텅 비어 있으면, 이 서비스가 무엇을 해 주는지 보여 줄 기회를 놓쳐요. 디자이너가 시안에서 공들인 '꽉 찬 화면'은 사용자가 무언가를 만든 다음에야 보여요.
검색 결과 0건에서 길이 끊겨요
"검색 결과가 없습니다"에서 끝나면 사용자가 할 수 있는 일은 뒤로 가기뿐이에요. 철자를 고쳐 볼지, 필터를 풀어야 할지 알려 주지 않으면 찾는 물건이 있어도 못 찾고 나가요.
좋은 빈 화면에는 무엇이 들어가나요?
빈 화면 하나에 넣을 건 세 가지면 충분해요.
- 왜 비었는지: "아직 만든 프로젝트가 없어요", "'플러터'에 맞는 글이 없어요"처럼 상황을 그대로 말해요.
- 다음에 할 일: 버튼이나 링크 하나. 첫 프로젝트 만들기, 필터 초기화, 다시 시도하기.
- 여기에 무엇이 올지: 채워지면 어떤 모습일지 짧은 설명이나 작은 그림으로 보여 줘요.
| 구분 | 나쁜 예 | 좋은 예 |
|---|---|---|
| 처음 사용 | 데이터가 없습니다. | 아직 프로젝트가 없어요. 첫 프로젝트를 만들면 여기에 모아 보여 드려요. [+ 새 프로젝트] |
| 결과 없음 | 검색 결과가 없습니다. | '플러터'에 맞는 글이 없어요. 철자를 확인하거나 다른 단어로 찾아보세요. [전체 글 보기] |
| 다 비움 | 항목이 없습니다. | 오늘 할 일을 다 끝냈어요. [내일 할 일 보기] |
| 불러오기 실패 | 오류가 발생했습니다. | 목록을 불러오지 못했어요. 인터넷 연결을 확인하고 다시 시도해 주세요. [다시 시도] |
상황마다 다르게 만들면?
아래에서 상황 버튼을 눌러 보세요. "나쁜 예 보기"를 켜면 같은 자리에 흔히 들어가는 한 줄 문구로 바뀌어요.
- 제목은 상황, 설명은 이유: "아직 프로젝트가 없어요"처럼 사용자 입장에서 지금 상태를 말해요.
- 버튼은 하나만: 처음 사용과 실패는 진한 버튼, 결과 없음과 다 비움은 테두리 버튼으로 무게를 낮췄어요.
- 아이콘은 거들기만: 그림이 없어도 문구와 버튼만으로 뜻이 통해야 해요.
상황별로 무엇을 다르게 해야 하나요?
처음 사용: 첫 행동으로 이끌어요
첫 빈 화면은 온보딩의 일부예요. "첫 프로젝트 만들기"처럼 가장 먼저 해야 할 행동 하나를 크게 두고, 샘플 데이터나 템플릿을 고를 수 있게 하면 빈 화면을 건너뛸 수도 있어요.
결과 없음: 검색어를 보여 주고 빠져나갈 길을 줘요
- 사용자가 입력한 검색어를 그대로 보여 줘요. 오타를 스스로 발견할 수 있어요.
- 필터 때문에 0건이면 필터 초기화 버튼을 바로 옆에 둬요.
- 인기 글, 전체 목록처럼 다른 길을 하나 열어 줘요.
다 비움: 칭찬하고 쉬게 해요
할 일과 알림을 다 처리한 빈 화면은 보상의 순간이에요. 여기서 또 행동을 재촉하기보다 "다 끝냈어요"라고 말해 주는 게 좋아요. 이모지나 작은 그림이 가장 잘 어울리는 곳도 여기예요.
불러오기 실패: 비어 있는 것과 구분해요
실패를 빈 화면처럼 보여 주면 사용자는 데이터가 사라졌다고 오해해요. 실패는 실패라고 말하고, "다시 시도" 버튼을 줘요. 실패 화면은 '빈 화면'이 아니라 '오류 화면'으로 따로 디자인해 두는 게 안전해요.
이 블로그의 빈 화면은 어떤가요?
써 놓고 보니 제 블로그도 고칠 데가 보였어요.
| 구분 | 지금 문구 | 고친다면 |
|---|---|---|
| 검색 결과 없음 | 찾는 글이 없어요. | '○○'에 맞는 글이 없어요. 다른 단어로 찾아보거나 카테고리에서 둘러보세요. |
| 빈 카테고리 | 아직 '○○' 카테고리에 글이 없습니다. | 아직 '○○' 글을 준비하고 있어요. 그동안 최근 글을 읽어 보세요. [최근 글] |
검색 쪽은 해요체라 부드럽지만 검색어를 다시 보여 주지 않고, 다음에 갈 곳도 없어요. 카테고리 쪽은 블로그 다른 곳과 달리 합니다체라서 갑자기 딱딱하게 느껴져요. 빈 화면 문구도 사이트 전체 말투를 따라야 한다는 걸 저도 다시 배웠어요.
자주 묻는 질문
빈 화면에 꼭 일러스트를 넣어야 하나요?
아니요. 일러스트는 분위기를 더해 줄 뿐이에요. 문구와 버튼만으로 상황과 다음 행동이 전해지면 충분하고, 표나 관리자 화면처럼 좁은 자리에서는 오히려 문구만 두는 게 깔끔해요.
빈 화면 문구는 누가 써야 하나요?
디자이너가 시안 단계에서 직접 써 두는 게 좋아요. 개발 막바지에 정하면 "데이터가 없습니다" 같은 기본 문구로 끝나기 쉬워요. UX 라이터가 있다면 상황별 사용자 마음을 함께 정리해서 넘겨요.
로딩 중일 때도 빈 화면을 보여 줘도 되나요?
안 돼요. 불러오는 중에 빈 화면이 잠깐이라도 보이면 사용자는 "없구나" 하고 떠날 수 있어요. 로딩 중에는 스켈레톤이나 로딩 표시를 보여 주고, 결과가 0건으로 확정된 뒤에 빈 화면을 보여 줘요.
시안에서 빈 화면을 빠뜨리지 않으려면 어떻게 하나요?
화면 하나를 그릴 때 꽉 찬 상태, 빈 상태, 로딩, 오류 네 가지를 한 세트로 그려요. 피그마라면 컴포넌트 변형(variant)으로 네 상태를 만들어 두면 빠뜨리지 않아요.
정리
- Empty State: 보여 줄 데이터가 없을 때 나오는 화면. 신규 사용자가 가장 먼저 만나요.
- 네 가지 상황: 처음 사용, 결과 없음, 다 비움, 불러오기 실패. 사용자 마음이 다 달라요.
- 세 가지 재료: 왜 비었는지, 다음에 할 일 하나, 여기에 무엇이 올지.
- 실패는 따로: 오류를 빈 화면처럼 보여 주면 데이터가 사라졌다고 오해해요.
빈 화면은 데이터가 없는 화면이 아니라, 사용자가 다음 걸음을 고르는 화면이에요. 🌿
오늘도 읽어 주셔서 고마워요. 다음 글에서 만나요!