빈 상태

정의

빈 상태는 화면에 보여 줄 데이터가 아직 하나도 없을 때 나타나는 화면입니다. 이제 막 가입해 아무것도 담기지 않은 장바구니, 한 건도 오지 않은 메시지함, 검색 결과가 없는 목록이 모두 여기에 해당합니다. 이 순간을 그냥 텅 빈 백지로 두면 사용자는 화면이 고장 났나 하고 의심하게 됩니다. 잘 만든 빈 상태는 지금 무엇이 없는지, 왜 없는지, 그리고 다음에 무엇을 하면 되는지를 짧게 안내해, 막막한 백지를 다음 행동으로 자연스럽게 이어 주는 안내판으로 바꿉니다. 데이터가 없다는 사실 자체보다, 그 빈자리를 어떻게 설명하고 채우도록 이끄는가가 훨씬 중요합니다.

왜 중요한가

빈 상태는 종종 사용자가 서비스에서 처음 마주하는 화면입니다. 가입 직후에는 당연히 아무 데이터도 없기 때문입니다. 이때 화면이 텅 비어 있으면 사용자는 무엇부터 해야 할지 몰라 그대로 떠나 버리기 쉽습니다. 반대로 빈 상태가 첫걸음을 친절히 안내하면, 사용자는 바로 무언가를 시작하며 서비스에 자연스럽게 발을 들입니다. 그래서 빈 상태는 사고나 예외가 아니라, 다음 행동으로의 초대로 다뤄야 합니다. 또 검색 결과가 없을 때처럼 잠깐 스치는 빈 상태에서도, 왜 결과가 없는지와 어떻게 다시 시도하면 되는지를 일러 주면 사용자는 막히지 않고 원하는 것을 계속 찾아 나갈 수 있습니다. 첫인상과 좌절의 순간을 동시에 책임지는 화면인 셈입니다. 아무것도 없는 순간이야말로 서비스가 사용자를 얼마나 세심하게 배려하는지가 오히려 또렷하게 드러나는 자리입니다.

흔한 실수

• 빈 화면을 아무 안내 없이 그냥 백지로 두는 것입니다. 사용자는 데이터가 없는 정상 상태인지 화면이 고장 난 건지 구분하지 못해, 뭘 해야 할지 몰라 이탈하기 쉽습니다.
• 데이터가 없는 상태와 로딩 중인 상태를 구분하지 않는 것입니다. 아직 불러오는 중일 뿐인데 결과가 없다고 단정해 버리면, 사용자는 있지도 않은 문제로 헷갈리게 됩니다.
• 다음에 무엇을 할 수 있는지 안내는 없이 아쉽다는 말만 늘어놓는 것입니다. 공감 문구만으로는 사용자가 다음 행동으로 나아갈 수 없고, 결국 화면 앞에서 멈춰 선 채 무엇을 해야 할지 찾지 못하게 됩니다.

실무 팁

• 빈 상태는 아이콘 하나, 한 줄 설명, 그리고 다음 행동을 여는 버튼의 조합을 기본 골격으로 삼으세요. 이 세 가지만 갖춰도 백지가 자연스럽게 다음 행동으로의 초대로 바뀝니다.
• 무엇이 없는지뿐 아니라 왜 없는지와 어떻게 채우면 되는지까지 함께 알려 주세요. 특히 검색 결과가 없을 땐 검색어를 바꿔 보라는 식의 구체적인 다음 단계를 제시하면 좋습니다.
• 데이터가 없는 빈 상태와 아직 불러오는 중인 로딩 상태를 반드시 따로 다루세요. 둘을 섞으면 멀쩡히 오고 있는 데이터를 없다고 오해하게 만들 수 있습니다.

관련 개념