고객이 사이트를 둘러보다 처음 마주하는 흰 화면이 있다. 검색 결과가 0건일 때, 장바구니가 비어 있을 때, 첫 회원가입 직후 아무것도 없는 마이페이지를 열었을 때다. 이 순간을 디자인 단계에서 챙긴 사이트는 의외로 많지 않다. 그러나 사용자 입장에서는 가장 답답하고, 가장 빠르게 뒤로 가기 버튼을 누르는 화면이기도 하다.
웹 디자인에서는 이런 순간을 빈 상태(Empty State)라고 부른다. 보여줄 데이터가 없는 화면이 아니라, 다음 행동을 안내해야 할 가장 중요한 화면 중 하나다.
1. 빈 화면은 실패가 아니다 — 다음 행동을 알려주는 신호여야 한다
빈 상태에서 가장 흔한 실수는 "내용이 없습니다" 한 줄로 끝내는 것이다. 사용자는 그 화면 앞에서 "여기서 뭘 해야 하지?"를 떠올린다. 그 답이 화면에 없으면 사이트를 떠난다.
잘 설계된 빈 상태는 거의 항상 다음 세 가지를 함께 보여준다.
- 지금 어떤 상태인지 한 줄로 설명하는 제목
- 왜 이 화면이 비어 있는지 짧게 짚어 주는 맥락
- 다음에 무엇을 하면 되는지 제시하는 행동 버튼
예를 들어 "찜한 상품이 없습니다"라고만 적기보다, "마음에 드는 상품을 ♡ 버튼으로 모아 두세요"라는 안내와 '인기 상품 보러 가기' 버튼을 함께 두는 식이다. 빈 화면이 막다른 골목이 아니라 다음 페이지로 가는 입구가 된다.
2. "결과 없음"보다 "이렇게 검색해 보세요"가 낫다
검색 결과 0건은 빈 상태 중에서도 가장 자주 마주치는 케이스다. 사용자는 분명히 무언가를 찾고 있던 사람이다. 그 의지를 식히지 말아야 한다.
- 오타나 띄어쓰기 차이가 있을 수 있음을 부드럽게 안내
- 비슷한 카테고리, 인기 검색어, 최근 본 상품을 함께 노출
- 한글과 영문이 섞인 사이트라면 자동 보정 검색어를 함께 제시
"검색 결과가 없습니다" 한 줄에서 멈추는 사이트와, "찾으시는 상품이 없네요. 혹시 이런 상품은 어떠세요?"로 자연스럽게 추천을 이어가는 사이트의 이탈률은 다르다. 검색은 사용자의 의도가 가장 강하게 드러나는 행동이라, 이 화면에서 한 번만 더 잡으면 매출까지 이어질 확률이 높아진다.
3. 첫 방문 화면은 가장 비싼 빈 상태다
처음 가입한 고객이 마이페이지나 대시보드를 열었을 때 마주하는 화면은 가장 비싼 빈 상태다. 광고비를 들여 데려온 사용자가 두 번째 방문을 할지 말지를 결정하는 순간이기 때문이다.
이 화면은 단순히 "주문 내역이 없습니다"가 아니라, 사이트의 핵심 가치를 한 번 더 압축적으로 보여 주는 자리여야 한다.
- 이 사이트로 무엇을 할 수 있는지 한 화면에 보여 주는 카드
- 지금 시작할 수 있는 가장 작은 첫 행동(예: 프로필 사진 등록, 첫 상품 둘러보기)
- 이미 잘 활용하고 있는 다른 사용자의 후기 또는 사례
빈 마이페이지를 그저 비워 두지 않는 것만으로 첫 주 잔존율은 의미 있게 움직인다.
4. 일러스트 한 장이 메시지보다 빨리 닿는다
빈 상태에는 심볼 일러스트나 아이콘이 함께 있을 때 메시지가 더 빠르게 전달된다. 텍스트만으로 채운 화면은 무겁고, 사용자는 글을 다 읽기 전에 떠난다.
다만 일러스트를 쓸 때는 다음을 챙겨야 한다.
- 브랜드 컬러 체계 안에서 그릴 것 — 무료 일러스트 사이트의 그림을 그대로 쓰면 톤이 어긋난다
- 너무 귀여운 그림은 진지한 서비스에선 신뢰를 떨어뜨릴 수 있다
- 같은 사이트 안에서 빈 상태별로 그림 스타일이 들쭉날쭉해선 안 된다
그림 한 장의 톤이 사이트 전체의 인상을 결정한다는 점을 잊지 말아야 한다.
5. 에러와 빈 상태는 다르다 — 톤과 색을 구분한다
"데이터가 없는 상태"와 "오류가 난 상태"는 사용자에게 전혀 다른 의미다. 그런데 디자인이 비슷하면 사용자는 자기가 뭔가 잘못한 줄 알고 위축된다.
- 빈 상태: 중립적인 톤, 회색이나 연한 브랜드 컬러, 다음 행동을 권하는 카피
- 에러 상태: 경고 컬러(빨강 계열), "잠시 후 다시 시도해 주세요"처럼 책임지는 카피, 새로 고침/재시도 버튼
특히 네트워크가 불안정해 일시적으로 데이터를 못 불러온 화면은 절대 빈 상태로 보여서는 안 된다. 사용자가 "정말 아무것도 없는 줄" 알고 떠나기 때문이다. 로딩 실패는 분명히 "실패"라고 알려 주고, 다시 시도할 길을 열어 두는 게 좋다.
흰 화면을 줄이는 디자인이 결국 매출을 만든다
빈 상태는 디자인 단계에서 가장 늦게 챙겨지고, 가장 자주 잊히는 화면이다. 그러나 사용자는 사이트의 화려한 메인 페이지보다 검색 결과 0건, 빈 장바구니, 첫 방문 마이페이지에서 더 많은 시간을 흔들린다. 그 한 화면에서 다음 행동이 보이지 않으면 광고비를 들여 데려온 고객이 그대로 빠져나간다.
CYAN 에이전시는 사이트를 만들 때 메인 페이지뿐 아니라 0건·미가입·실패·로딩 중 같은 사이의 상태를 함께 설계한다. 빈 화면이 다음 행동을 만드는 페이지로 바뀌는 순간, 사이트의 잔존율과 전환율은 함께 움직이기 시작한다.