빈 화면(Empty State) 디자인: 첫 사용자가 이탈하지 않게 만드는 4요소

빈 화면은 실패 화면이 아니다

데이터가 없다는 사실 자체보다 더 큰 문제는 사용자가 다음에 무엇을 해야 할지 모르는 상태입니다. 빈 화면을 단순히 “아직 아무것도 없습니다”로 끝내면 첫 사용자는 제품이 고장 났거나 자신이 잘못 들어왔다고 느낄 수 있습니다.

조코헌트에 출시된 프로덕트는 296개입니다. 제품마다 기능은 달라도, 처음 방문한 사람이 맞닥뜨리는 빈 화면은 대부분 비슷한 질문을 만듭니다. “여기서 무엇을 하지?” Empty State의 목적은 이 질문에 짧고 분명하게 답하는 것입니다.

빈 화면의 세 가지 원인

먼저 데이터가 없는 이유를 구분하세요. 사용자가 아직 아무것도 만들지 않은 첫 진입 상태, 조건에 맞는 결과가 없는 검색·필터 상태, 일시적으로 데이터를 불러오지 못한 에러 상태는 서로 다른 안내가 필요합니다. 같은 일러스트와 같은 문구를 재사용하면 사용자는 원인을 파악하기 어렵습니다.

빈 공간을 브랜드 경험으로 바꾸기

빈 화면은 제품의 말투를 처음 보여주는 자리이기도 합니다. 친절하되 장황하지 않게, 문제를 숨기기보다 다음 행동을 제시하세요. 작은 제품일수록 이런 화면 하나가 제품의 완성도를 크게 좌우합니다.

4요소를 한 화면에 배치하는 법

좋은 Empty State는 보통 네 가지 요소로 구성됩니다. 시각 요소, 현재 상태를 설명하는 제목, 상황을 풀어주는 짧은 설명, 그리고 가장 중요한 다음 행동 CTA입니다.

1. 상태를 즉시 이해시키는 시각 요소

일러스트나 아이콘은 장식보다 맥락 전달에 집중해야 합니다. 첫 진입이라면 빈 상자·새 문서처럼 “시작 전”을 보여주고, 검색 결과 없음이라면 탐색·필터와 연결되는 이미지를 사용하세요. 에러 화면에는 성공을 암시하는 장식보다 복구나 재시도를 떠올리게 하는 표현이 적합합니다.

2. 제목은 현재 상황을 한 문장으로

“아직 프로젝트가 없어요”, “조건에 맞는 결과가 없어요”처럼 사용자가 처한 상태를 그대로 말합니다. 추상적인 “앗, 이런!”만 쓰면 귀엽지만 정보가 부족합니다. 제목만 읽어도 지금 화면의 의미가 전달되는지 확인하세요.

3. 설명은 불안을 줄이고 맥락을 보충하기

설명은 한두 문장으로 제한하는 편이 좋습니다. 무엇이 비어 있는지, 사용자가 어떤 행동을 하면 바뀌는지를 알려주세요. 예를 들어 첫 진입에서는 “첫 항목을 만들면 이곳에서 관리할 수 있어요”처럼 결과를 예고할 수 있습니다.

4. CTA는 하나의 다음 행동으로

버튼이 여러 개면 사용자는 다시 선택해야 합니다. 기본 CTA는 “첫 항목 만들기”, “검색 조건 지우기”, “다시 불러오기”처럼 동사로 시작하세요. 버튼의 우선순위·상태·크기는 버튼 하나 제대로 디자인하기에서 다룬 원칙과 연결해 점검하면 좋습니다.

상황별로 다른 빈 상태를 설계하기

첫 진입: 시작 비용을 낮추기

처음 들어온 사용자는 제품의 구조를 아직 모릅니다. CTA를 누르면 어떤 결과가 생기는지 예시를 곁들이고, 입력해야 할 항목이 많다면 가장 쉬운 첫 단계부터 열어주세요. “새로 만들기”보다 “첫 기록 남기기”처럼 사용자의 목적을 표현하는 문구가 행동을 구체화합니다.

검색 결과 없음: 검색 실패와 데이터 부재 구분하기

검색 결과가 없을 때는 사용자가 검색어를 잘못 입력했을 수도 있고, 실제로 데이터가 없을 수도 있습니다. “검색 결과가 없습니다”와 함께 검색어를 바꾸거나 필터를 초기화할 수 있는 선택지를 제공하세요. 다만 기본 CTA는 하나로 두고, 보조 행동은 링크나 텍스트 버튼으로 낮추는 방식이 깔끔합니다.

에러: 원인보다 복구 경로를 먼저

에러 빈 상태에서 내부 오류 코드나 기술 용어를 먼저 보여주면 사용자는 해결할 수 없습니다. “잠시 불러오지 못했어요”처럼 현재 상태를 설명한 뒤 “다시 시도”를 배치하세요. 반복해서 실패할 가능성이 있는 작업이라면 문의나 도움말로 이어지는 보조 경로도 고려할 수 있습니다.

출시 전에 확인할 체크리스트

빈 화면은 기능이 완성된 뒤 마지막에 붙이는 장식이 아닙니다. 개발 중 각 화면에 데이터가 0건일 때 무엇이 보이는지 먼저 확인하고, 실제 콘텐츠가 있는 화면과 함께 비교하세요.

• 데이터가 없어진 이유가 제목만으로 이해되는가?
• 일러스트가 현재 상황과 맞는가?
• 설명이 다음 행동의 결과를 알려주는가?
• CTA가 한 가지 핵심 행동을 유도하는가?
• 키보드·모바일에서도 버튼과 문구가 잘 보이는가?
• 로딩, 에러, 검색 결과 없음 상태가 서로 구분되는가?

조코헌트에서 출시 후 첫 24시간 안에 업보트나 댓글을 하나라도 받은 프로덕트는 53%였습니다. 모든 반응을 Empty State의 성과로 해석할 수는 없지만, 출시 초기에 방문자가 제품을 이해하고 행동할 기회를 만드는 일은 중요합니다. 댓글을 받은 프로덕트가 31%였다는 점을 참고하면, 빈 화면에서도 사용자의 막힘을 관찰하고 피드백을 받을 통로를 남겨둘 만합니다.

마지막으로 여백과 정렬이 어색하면 좋은 카피도 힘을 잃습니다. 여백이 디자인의 8할과 바이브코딩으로 만든 UI 품질 올리는 체크리스트 20을 함께 보며 모바일 화면의 간격, 대비, 터치 영역을 확인해 보세요. Empty State의 목표는 빈 공간을 채우는 것이 아니라, 사용자가 다음 한 걸음을 편하게 내딛게 하는 것입니다.