디자인 시안은 대개 내용이 가득 찬 화면으로 만들어집니다. 카드가 여섯 장 깔리고 목록이 스무 줄 있는 화면입니다. 그런데 실제 사이트에서 사람이 가장 자주 이탈하는 화면은 그 반대입니다 — 아무것도 없는 화면입니다.
검색 결과가 없을 때, 필터 조합에 해당하는 항목이 없을 때, 아직 아무것도 등록하지 않았을 때. 이 화면이 “결과가 없습니다” 한 줄로 끝나면 방문자는 대체로 뒤로가기를 누르고, 그 뒤로가기가 세션의 마지막 동작이 됩니다.
빈 화면이 말해야 하는 세 가지
잘 만든 빈 상태에는 언제나 같은 세 가지가 있습니다.
왜 비었는가는 조건을 되풀이해 주는 것으로 충분합니다. “결과가 없습니다” 가 아니라 “성능 × 입문 조건에 맞는 글이 아직 없습니다” 라고 쓰면, 사용자는 자기가 무엇을 걸었는지 화면에서 확인하고 어느 조건을 풀어야 할지 스스로 판단할 수 있습니다.
지금 무엇을 할 수 있는가가 이 화면의 실제 값입니다. 조건 하나를 풀었을 때의 결과를 미리 제안하거나, 인접한 주제를 링크하거나, 검색어 오타를 짚어 줄 수 있습니다. 목록이 비었어도 페이지가 비어 있을 이유는 없습니다.
어떻게 돌아가는가는 가장 자주 빠지는 항목입니다. 필터를 걸어 0건에 도달한 사용자에게 전체로 돌아가는 링크가 없으면, 되돌아가는 방법을 브라우저 뒤로가기에서 찾게 됩니다. 그 순간 필터는 도구가 아니라 함정이 됩니다.
빈 상태는 한 종류가 아닙니다
같은 “비어 있음” 이라도 원인이 다르면 필요한 문장이 다릅니다. 하나의 문구로 전부 덮으면 어느 상황에서도 어색해집니다.
특히 첫 사용과 결과 없음을 구분하는 것이 중요합니다. 아직 아무것도 등록하지 않은 사용자에게 “결과가 없습니다” 라고 말하면 시스템이 고장 난 것처럼 읽힙니다. 이 자리는 오히려 가장 좋은 안내 기회입니다 — 첫 항목을 만드는 방법을 여기서 알려 주면 됩니다.
애초에 0건을 누르지 않게 만듭니다
가장 좋은 빈 화면은 도달하지 않는 빈 화면입니다. 필터가 0건을 만들 수 있는 구조라면, 누르기 전에 그 사실을 보여 줄 수 있습니다.
방법은 간단합니다. 필터 항목마다 개수를 함께 적습니다. “성능 12”, “입문 5” 처럼 적어 두면 사용자는 0건짜리 항목을 애초에 고르지 않습니다. 개수가 0인 항목은 비활성으로 두거나 목록에서 빼는 선택도 가능합니다.
그리고 첫 항목은 언제나 “전체” 여야 합니다. 필터를 건 상태에서 되돌아가는 경로가 화면 안에 있어야 하고, 그 자리는 필터 목록의 첫 칸이 가장 자연스럽습니다.
검색엔진에게도 빈 화면은 신호입니다
디자인 얘기에서 조금 벗어나지만 함께 정해야 할 것이 있습니다. 필터 조합 주소는 조합의 수만큼 무한히 생길 수 있고, 그중 상당수가 0건입니다. 이런 주소가 색인되면 내용이 거의 없는 페이지가 대량으로 생기고, 검색엔진은 이를 품질 신호로 읽습니다.
그래서 필터 조합 주소는 색인 대상에서 빼고 원본 목록 주소를 정본으로 지정하는 것이 일반적입니다. 사람에게는 유용한 필터이고 크롤러에게는 필요 없는 주소라는 판단이며, 두 요구가 충돌하지 않게 만드는 방법입니다.
아카이브와 필터 주소의 색인 정책은 SEO 아카이브에서 더 다루고, 화면 폭에 따라 필터를 접고 펴는 방법은 반응형 연재에 있습니다. 우리가 실제로 어떤 순서로 화면을 점검하는지는 작업 과정에 공개돼 있습니다.