빈 화면 디자인: 아무것도 없을 때가 진짜 승부

앱을 처음 켠다. 회색 배경 한가운데에 흐릿한 아이콘 하나, 그 아래 작은 글씨로 “데이터가 없습니다”. 끝이다. 여기서 무엇을 해야 하는지, 이게 원래 이런 화면인지 아니면 뭔가 잘못된 건지 알 수가 없다. 이 순간 그냥 앱을 닫아버리는 사용자가 적지 않다.

디자이너로서 화면을 그릴 때, 우리는 대개 데이터가 가득 찬 상태를 먼저 그린다. 리스트가 열 줄쯤 채워지고, 카드가 그리드에 예쁘게 깔린 상태. 포트폴리오에 올리기 좋은 그 화면 말이다. 그런데 사용자가 그 앱을 처음 만나는 순간은 정반대다. 아무것도 없다. 리스트는 비어 있고, 그리드는 텅 비었다. 데이터가 있을 때의 화면이 잘 만든 인상을 준다면, 데이터가 없을 때의 화면은 계속 쓸지 말지를 결정한다. 그래서 빈 상태(empty state)가 진짜 승부처다.

이 글에서는 빈 상태를 세 종류로 나눠서, 각각이 노리는 목표가 어떻게 다른지 보려 한다. 그리고 나쁜 빈 상태의 전형, 빈 상태와 로딩 상태를 혼동하는 실수, 마지막으로 실무에서 이걸 언제 그려야 하는지까지 다룬다.

빈 상태는 한 종류가 아니다

빈 상태를 그냥 데이터 없는 화면이라고 뭉뚱그리면 설계가 어긋난다. 화면은 똑같이 비어 있어도, 사용자가 왜 그 빈 화면을 보고 있는지는 상황마다 완전히 다르기 때문이다. 크게 세 가지로 나뉜다.

첫째는 최초 사용이다. 신규 유저가 앱을 막 설치하고 처음 켰는데 아직 아무것도 안 만든 상태. 노트 앱을 처음 열면 노트가 0개인 게 당연하다.

둘째는 사용자가 다 비운 상태다. 원래 데이터가 있었는데 사용자가 스스로 다 처리해서 비워낸 경우. 할 일 앱에서 오늘 할 일을 하나씩 끝내다가 마지막 항목까지 체크한 순간이 여기 해당한다.

셋째는 검색이나 필터 결과가 없는 경우다. 사용자가 조건을 걸었는데 거기 맞는 게 하나도 없는 상황. 이커머스에서 검색어를 입력했는데 결과가 0건인 화면이 대표적이다. (시스템이 데이터를 아예 못 가져온 로드 실패는 성격이 다른 별도 상태다. 이건 원인을 알려주고 다시 시도할 길을 주는 게 목표라, 지금 다루는 빈 상태와는 따로 설계한다.)

세 화면 모두 비어 있다는 사실은 같다. 그런데 사용자의 마음 상태는 완전히 다르다. 최초 사용자는 아직 이 앱이 뭘 해주는지 모른다. 다 비운 사용자는 방금 뭔가를 끝냈다. 검색 실패 사용자는 원하는 걸 못 찾아서 살짝 답답하다. 마음 상태가 다르면 화면이 해줘야 할 일도 달라진다.

특히 앞의 둘은 화면만 보면 똑같이 항목 0개라 겉으로 구별이 안 된다. 그래서 시스템은 사용자가 지금까지 한 번이라도 데이터를 만든 적이 있는지로 둘을 가른다. 만든 이력이 없으면 최초 사용, 있으면 다 비운 상태다. 설계도 이 갈림에 맞춰 최초 사용용 화면과 다 비운 화면을 따로 준비해야 한다.

각 상황이 노리는 목표

세 종류를 나눴으면, 각각 화면이 무엇을 해줘야 하는지가 자연스럽게 갈린다. 핵심은 이 화면을 본 사용자가 다음에 무엇을 하길 바라느냐다.

최초 사용 상태의 목표는 온보딩과 첫 행동 유도다. 이 사용자는 앱이 뭘 해주는지 아직 모르니, 빈 화면이 곧 설명서 역할을 해야 한다. 노트 앱을 처음 열었다면 그냥 비워두지 말고, 이 앱으로 무엇을 할 수 있는지 한 줄로 알려주고 “첫 노트 작성하기” 같은 명확한 행동 버튼(CTA)을 크게 놓는다. 쉽게 말해, 빈 화면이 사용자의 손을 잡고 첫걸음을 떼게 만들어야 한다.

다 비운 상태의 목표는 성취감과 안심이다. 이 사용자는 실수한 게 아니라 오히려 잘 해낸 거다. 할 일을 전부 끝냈는데 화면이 “할 일이 없습니다"라고 무뚝뚝하게 말하면, 마치 뭔가 사라진 듯한 허전함을 준다. 대신 “오늘 할 일을 다 끝냈어. 잘했어” 같은 톤으로 마무리의 기분을 살려주면, 사용자는 이 앱을 계속 쓰고 싶어진다. 여기서는 새 행동을 강하게 유도할 필요가 없다. 오히려 잠깐 쉬어가는 화면이 맞다.

검색 결과 없음의 목표는 다음 행동 제안이다. 이 사용자는 원하는 걸 찾으러 왔다가 막혔다. 그러니 막힌 지점에서 빠져나갈 길을 알려줘야 한다. 이커머스에서 “빨간 겨울 코트"를 검색했는데 결과가 없다면, 그냥 “검색 결과가 없습니다"로 끝내지 말고 철자를 확인하라거나, 필터를 완화해보라거나, 비슷한 인기 상품을 대신 보여준다. 다시 말해, 막다른 골목이 아니라 갈림길을 그려줘야 한다.

같은 빈 화면이라도 최초 사용은 앞으로 밀고, 다 비운 상태는 토닥이고, 검색 실패는 옆길을 튼다. 이 세 방향을 섞어 쓰면 어색해진다. 다 끝낸 할 일 화면에서 굳이 강한 CTA로 새 일을 만들라고 밀면, 성취감이 부담으로 바뀐다.

나쁜 빈 상태의 전형

나쁜 빈 상태는 놀랄 만큼 비슷하게 생겼다. 두 가지 전형이 반복된다.

첫 번째 전형은 “데이터가 없습니다” 한 줄로 끝내는 화면이다. 이건 사실 아무 설계도 안 한 화면이다. 사용자가 왜 여기 왔는지, 다음에 뭘 해야 하는지에 대한 힌트가 하나도 없다. 대시보드를 열었는데 아직 데이터 수집 전이라 “표시할 데이터가 없습니다"만 떠 있으면, 사용자는 자기가 뭘 잘못했는지 아니면 원래 이런 건지 판단할 근거가 없다. 여기서는 “데이터를 수집하는 중이야. 보통 24시간 안에 첫 리포트가 들어와” 정도만 붙여줘도 화면의 성격이 완전히 달라진다.

두 번째 전형은 로딩 상태와 구분이 안 되는 화면이다. 데이터를 아직 못 가져온 건지, 원래 없는 건지 사용자가 알 수 없다. 이게 특히 위험한 이유는 다음 장에서 따로 다룰 만큼 흔한 실수이기 때문이다.

빈 상태와 로딩 상태를 혼동하지 마라

빈 상태와 로딩 상태(loading state)는 겉보기엔 둘 다 내용이 아직 없는 화면이라 헷갈리기 쉽다. 그런데 둘은 의미가 정반대다. 로딩 상태는 곧 뭔가가 채워질 거라는 약속이고, 빈 상태는 지금은 채울 게 없다는 사실이다.

이 둘을 구분해서 보여주는 표준 도구가 스켈레톤(skeleton)이다. 데이터를 불러오는 동안 회색 박스가 실제 콘텐츠의 자리 모양대로 깜빡이는 그 화면. 스켈레톤은 사용자에게 “잠깐만, 지금 가져오는 중이야"라고 말해준다. 그러니 스켈레톤은 로딩 상태에만 써야 한다.

문제는 데이터를 다 불러왔는데도 결과가 0건일 때다. 이때 스켈레톤이 계속 돌면 사용자는 영원히 기다린다. 반대로 로딩 중인데 빈 상태 메시지를 먼저 띄우면, 사용자는 결과가 없다고 오해하고 화면을 떠난다. 실제로 잘못 만든 검색 화면에서 이런 일이 자주 벌어진다. 결과를 가져오는 0.5초 동안 “검색 결과가 없습니다"가 번쩍 떴다가, 뒤늦게 결과가 채워진다. 사용자는 이미 뒤로 가기를 누른 다음이다.

그래서 화면은 최소 세 가지 상태를 구분해서 설계해야 한다. 불러오는 중(로딩), 다 불러왔고 내용 있음(정상), 다 불러왔는데 내용 없음(빈 상태). 이 셋을 한 화면으로 대충 뭉치면 반드시 어딘가에서 사용자가 오해한다.

빈 상태는 처음부터 같이 그려라

마지막은 실무 순서에 대한 이야기다. 빈 상태가 방치되는 가장 큰 이유는 실력이 아니라 순서다. 디자이너는 데이터가 찬 화면을 먼저 그리고, 빈 상태는 나중에 시간이 남으면 붙이려 한다. 그런데 그 나중은 잘 오지 않는다.

디자이너: “이 리스트 화면 시안 다 됐어요.” 개발자: “데이터 없을 때는 어떻게 보여요?” 디자이너: “아, 그건 나중에 드릴게요.”

이 나중이 문제다. 시안에 빈 상태가 없으면 개발자는 빈 화면을 직접 만들어야 하고, 대개 “데이터가 없습니다” 한 줄로 때운다. 앞에서 본 나쁜 빈 상태가 바로 이렇게 태어난다. 디자이너가 안 그린 화면은 개발 단계에서 조용히 누락되거나, 아무 설계 없는 기본값으로 채워진다.

그래서 빈 상태는 정상 화면을 그릴 때 같이 그려야 한다. 리스트 화면을 디자인한다면 그 자리에서 화면 상태 세 벌을 함께 준비하는 걸 기본값으로 삼자. 데이터가 찬 화면, 불러오는 중인 화면, 그리고 빈 화면. 세 벌을 나란히 놓고 보면, 빈 화면이 셋 중 하나로 뭉개지지 않고 자기 목표를 갖게 된다.

정리하면 이렇다. 빈 상태는 한 종류가 아니라 세 종류이고, 각각 온보딩과 성취감과 다음 행동이라는 다른 목표를 가진다. 로딩 상태와는 반드시 구분해야 하고, 무엇보다 정상 화면과 같은 타이밍에 그려야 한다. 데이터가 가득 찬 화면은 누구나 예쁘게 그린다. 진짜 실력은 아무것도 없을 때 드러난다.