빈 상태와 검색 결과 없음 화면을 디자인하는 방법

비어 있는 프로젝트 목록은 아직 프로젝트를 만든 적이 없다는 뜻일 수 있습니다. 검색에 맞는 프로젝트를 찾지 못했다는 뜻일 수도 있습니다. 같은 빈 사각형처럼 보여도 필요한 설명과 행동은 다릅니다.

빈 상태와 검색 결과 없음의 실질적인 차이는 콘텐츠가 없는 이유입니다. 실제로 빈 모음에는 보통 시작할 방법이나 콘텐츠가 들어오는 방식을 설명해야 합니다. 결과가 없는 화면에는 원래 존재하는 콘텐츠를 보이지 않게 만든 검색어, 필터, 범위를 수정할 방법이 필요합니다. 둘 다 “프로젝트 만들기”로 보내면 단순한 검색 문제가 중복 작업이 될 수 있습니다.

검색 결과 없음도 빈 상태의 한 종류입니다. 실용적으로는 모음 자체에 콘텐츠가 없는 경우와, 검색 요청은 처리됐지만 일치하는 항목을 찾지 못한 경우를 구분해야 합니다. 전자는 콘텐츠가 들어오면 바뀌고, 후자는 요청 조건이 바뀌면 달라집니다.

무엇을 해야 콘텐츠가 나타나는지 물어보세요

제목을 쓰기 전에 이 문장을 완성하세요. 사람이 무엇을 하면 여기에 콘텐츠가 나타날까요? 그 답만으로도 상황에 맞는 유용한 빈 화면을 만들 수 있을 때가 많습니다. 어떤 상황에나 쓰는 틀에 박힌 화면을 피하는 데 도움이 됩니다.

“첫 프로젝트를 만들면”이라면 프로젝트에 무엇이 들어가는지 설명하고 만들기를 제안할 수 있습니다. “Archived(보관됨) 필터를 없애면”이라면 필터 변경을 도와야 합니다. “요청이 끝날 때까지 기다리면”이라면 아직 로딩 중입니다. “권한을 되찾으면”이라면 생성 버튼은 무관하거나 사용할 수 없을 수 있습니다.

이 질문은 보이는 행이 없으니 데이터가 없다고 단정하는 흔한 문구 실수도 막습니다. 화면이 아는 것은 현재 요청에 맞는, 접근 가능한 레코드가 없다는 사실뿐일 수 있습니다. 워크스페이스 전체에 대해 더 강하게 주장하지 말고 그 지식에 맞게 말해야 합니다.

Nielsen Norman Group의 빈 상태 글은 시스템 상태를 설명하고 과제로 들어가는 적절한 경로를 제공하는 가치를 다룹니다. 콘텐츠가 로딩 중인데 결과가 없다는 메시지를 보이지 말라는 경고도 있습니다. 이 기반은 유용하지만 구체적인 판단은 현재 모음과 요청에 관해 앱이 무엇을 아는지에 달려 있습니다.

Power BI는 콘텐츠가 들어오는 방식을, NexTag는 위계의 중요성을 보여 줍니다

NN/G의 빈 상태 글에 실린 Microsoft Power BI의 최근 항목 화면은 콘텐츠를 열면 Recents에 나타난다고 설명합니다. 중요한 부분은 인과관계입니다. 계정 전체가 비었다거나 새로 만들어야 한다고 암시하지 않습니다.

NN/G의 결과 없음 연구에는 대조적인 예가 있습니다. 과거 NexTag 검색 페이지에서 한 참여자는 작게 표시된 일치 항목 없음 메시지를 놓치고 더 눈에 띄는 아래 콘텐츠를 봤습니다. 시선 추적도에는 메시지 자체를 응시한 기록이 없었습니다. 다음 행동의 제안은 있었지만 그 제안이 왜 필요한지를 놓친 것입니다.

모든 빈 화면에 거대한 제목이 필요하다는 교훈은 아닙니다. Power BI의 메시지는 기존 워크스페이스 안에서 해당 화면을 설명하는 역할에 집중합니다. 검색 페이지는 주된 영역에 일치하는 결과가 있을 것이라는 기대를 끊어야 합니다. 맥락에 맞게 상태를 충분히 드러낸 뒤 유용한 다음 행동을 찾기 쉽게 하세요. 문구가 기술적으로 존재해도 장식 그림과 무관한 추천은 이 순서를 훼손할 수 있습니다.

빈 배열이 아니라 사실로 상태를 고르세요

길이가 0인 응답만으로는 인터페이스를 정할 수 없습니다. 요청이 진행 중이거나 실패했거나 제한됐거나 성공했지만 비었을 수 있습니다. 실제 구현에서는 레코드 수와 함께 요청 상태와 범위로 메시지를 골라야 합니다.

이 표는 전환을 검토할 때 특히 유용합니다. 한 검색어를 입력한 직후 다른 검색어로 바꾸고 응답을 반대 순서로 받게 해 보세요. 화면은 현재 활성 요청의 상태를 보여야 합니다. 오래된 빈 응답이 새 성공 결과를 지워서는 안 됩니다. 데이터 흐름의 결함이지 그림을 하나 더 넣어 해결할 문제가 아닙니다.

검토할 때 “이제 무엇을 하시겠어요?”라고 물어보세요. 상태를 먼저 설명하지 말고 화면을 보여 주세요. 남아 있는 검색어를 못 찾아 생성을 선택하면 복구 컨트롤을 살펴야 합니다. 미완성처럼 보여 기다린다면 처리가 끝났는지 명확히 하세요. 의도한 버튼을 눌렀는지만 보지 말고 해석을 기록하세요. 우연히 올바른 클릭을 해도 상태를 오해했을 수 있습니다.

빈 이유에 맞게 쓰세요

첫 사용: 납득할 수 있는 시작

첫 사용 화면은 앞으로 만들 대상이 무엇인지 이해하게 해야 합니다. “아직 아무것도 없습니다”는 빈 공간을 인정하지만 영역의 목적을 설명하지 않습니다. “프로젝트 브리프, 링크, 검토 메모를 한곳에 모으세요”는 시작할 구체적인 이유를 줍니다.

그 설명을 실제로 할 수 있는 행동과 연결하세요. 이름만 있으면 프로젝트를 만들 수 있다면 “프로젝트 만들기”는 작은 첫 단계를 열면 됩니다. 외부 서비스를 연결해야 한다면 행동도 그 연결을 말해야 합니다. 쉬워 보이는 버튼이 예상치 못한 복잡한 설정을 열면 빈 화면을 해결한 직후 새 문제를 만듭니다.

설명의 양은 예상되는 익숙함에 맞추세요. 처음 워크스페이스를 여는 사람은 짧은 예를 반길 수 있습니다. 마지막 저장 검색을 의도적으로 지운 사람에게는 검색 입문이 필요 없을 것입니다. 둘 다 모음은 비었지만 아는 것이 다릅니다.

샘플 콘텐츠를 조심하세요. 예시 행은 개념을 구체화하지만 예시임을 명백히 표시하고 본인 데이터처럼 가장해서는 안 됩니다. 샘플 프로젝트에 “Client approved”가 있다면 실제 승인으로 오해할 수 없어야 합니다. 빈 상태는 불확실성을 매력적인 허구로 대체하지 말고 줄여야 합니다.

결과 없음: 요청을 수정하세요

“검색 결과가 없습니다”는 검색이 끝났다고 알려 주지만 그 이유와 문제에서 벗어날 방법까지 알려 주지는 않습니다. 유용한 메시지는 요청과 결과의 관계를 유지합니다. 검색에서는 입력한 검색어를 보이게 하고 편집 가능하게 남겨 두세요. 필터링에서는 활성 필터를 남깁니다. 그렇지 않으면 무엇을 바꿀지 결정하기 전에 무엇을 요청했는지 기억해야 합니다.

예제에서는 “‘autumn launch’에 맞는 프로젝트가 없습니다”라고 제목을 쓸 수 있습니다. 날짜가 제한일 수 있다면 “현재 기간은 10월 1~7일입니다”라고 설명할 수 있습니다. 검색어와 날짜 중 무엇이 원인인지 앱이 알 수 없어도 유용한 정보입니다.

관련 조건을 바꾸는 행동을 고르세요. 날짜 필터 하나가 켜졌다면 “처음부터”보다 “날짜 필터 지우기”가 정확합니다. “모든 필터 지우기”는 정말 전부 없앨 때 적절하며 검색어는 남긴다면 그 차이를 이해할 수 있어야 합니다. 한 가지만 바꾸려는 사람에게 검색과 필터 범위를 조용히 동시에 재설정하면 놀랄 수 있습니다.

Nielsen Norman Group의 검색 결과 없음 가이드는 결과를 명확히 하고 앞으로 갈 길을 남기고 사람을 조롱하는 어조를 피하라고 권합니다. 지금의 과제에 적용하세요. 프로젝트 검색, 제품 카탈로그, 법률 문서 라이브러리에 같은 제안과 이미지가 필요한 것은 아닙니다.

대안을 제시하면 무엇인지 설명하세요. “관련 프로젝트”가 실패한 검색의 결과처럼 보여서는 안 됩니다. 결과 없음 설명을 제안보다 먼저 두고 대체 모음에 별도 라벨을 주세요. 특정 항목을 검색했는데 무관해 보이는 내용이 나타난 이유를 역으로 추론하게 해서는 안 됩니다.

시스템이 확인할 수 있는 것만 말하세요

“프로젝트가 존재하지 않습니다”는 넓은 주장입니다. “이 필터에 맞는 프로젝트가 없습니다”는 더 좁습니다. “이 워크스페이스에 당신이 볼 수 있는 프로젝트가 없습니다”는 또 다른 경계입니다. 한 줄에 예쁘게 들어가는 문장이 아니라 인터페이스가 가진 근거로 선택하세요.

비공개·제한 콘텐츠가 있는 시스템에서 중요합니다. 빈 결과가 객체의 부재를 뜻하지 않을 수 있습니다. 그 사람이 못 보는 것일 수 있습니다. 무엇을 공개하고 어떤 행동을 권할 수 있는지는 제품팀이 정해야 합니다. 빈 메시지를 구체화하려고 기밀 레코드의 존재를 드러내서는 안 됩니다.

권한 문제가 없는 경우에도 화면이 상황 전체를 파악하지 못할 수 있습니다. 콘텐츠를 저장한 뒤에야 검색 색인이 갱신되거나, 가져오기가 아직 처리 중일 수 있습니다. 앱이 가져오기가 진행 중이라는 사실을 알고 있다면 그 상태를 설명할 수 있습니다. 모른다면 안심시키려고 누락된 항목이 곧 나타날 것이라고 약속하지 마세요.

가상 워크스페이스에 간단한 문구 규칙을 정해 보세요. 검색 요청이 성공했지만 일치하는 항목이 없으면 “일치하는 프로젝트가 없습니다”라고 표시합니다. 모음 전체의 항목 수가 0이라고 확인되면 “아직 프로젝트가 없습니다”라고 표시합니다. 검색 요청 자체가 실패했다면 어느 문구도 사용하지 않습니다. 이 단순한 구분은 네트워크 문제가 첫 사용의 낙관적인 어조를 빌리는 일을 막습니다.

다음 행동이 쉬울 만큼 구조를 남기세요

빈 화면은 채워진 목록보다 차분하면서도 유용한 컨트롤을 유지할 수 있습니다. 검색, 필터 칩, 페이지 제목, 모음의 범위는 사용자가 지금 어디에 있는지 이해하는 데 도움이 됩니다. 전부 없애고 중앙 그림으로 대체하면 보기 좋지만 문제에서 빠져나오기 어려워질 수 있습니다.

결과 없는 프로젝트 목록에서는 검색란을 같은 위치에 두고 선택 워크스페이스를 보여 주세요. 원래 결과가 나오는 영역에 설명을 놓습니다. 결과 수가 달라져 이동한 컨트롤을 찾아 헤매지 않고 요청을 수정할 수 있습니다.

첫 사용 화면은 더 자유롭습니다. 비교할 행이 없으니 큰 도입이 적절할 수 있습니다. 그래도 익숙한 탐색과 명확한 제목은 유지하세요. 버튼을 누르기 전에 개인 공간인지 공유 팀 공간인지 알아야 합니다.

짧은 영어 한 문장에만 시각적 크기가 의존하지 않게 하세요. 긴 프로젝트 이름, 긴 번역 메시지, 두 줄로 접히는 필터를 시험하세요. 빈 화면은 편한 데스크톱에서 만든 뒤 좁은 사이드패널에 들어가곤 합니다. “No items”에서만 되는 디자인은 실제 콘텐츠에 준비되지 않았습니다.

유용한 범위에서 비용이 가장 적은 행동을 고르세요

다음 행동은 불필요하게 작업을 버리지 않고 전진시켜야 합니다. 워크스페이스, 날짜, 담당자를 신중하게 골랐다면 전체 초기화는 큰 재설정입니다. 결과가 없다는 문제는 해결해도 조사하려던 맥락을 파괴합니다.

지원할 수 있다면 작은 변경을 제시하세요. 개별 필터 해제가 전체 요청 지우기보다 유용할 수 있습니다. 날짜를 넓히면 관련 키워드를 유지할 수 있습니다. 앱 홈으로 보내기보다 상위 폴더로 돌아가는 편이 정보가 많을 수 있습니다.

작은 행동이 성공을 보장한다고 암시하지 마세요. “날짜 필터 제거”는 동작을 정직하게 설명합니다. “내 프로젝트 보기”는 화면이 보장하지 못할 결과를 약속합니다. 조건을 바꿨을 때 표시될 결과 수를 미리 알 수 있고 그 수가 신뢰할 만하다면 더 확실한 제안을 할 수 있습니다. 그렇지 않다면 행동 라벨에는 실제로 수행하는 동작만 쓰세요.

결과 없음 화면에서도 생성은 유용할 수 있지만 보통 보조 역할이어야 합니다. 만들기 전에 검색하는 사람도 있습니다. 그 경로는 제공하되 유일한 회복 경로처럼 보이지 않게 하세요. 중복 비용이 큰 시스템에서는 성급히 새 객체를 제안하기보다 현재 워크스페이스를 검색했다는 점을 설명하는 편이 낫습니다.

같은 페이지를 시간 순서로 살펴보세요

고립된 빈 화면 스크린샷을 나열하는 것보다 짧은 사용 흐름을 따라가며 검토할 때 더 많은 문제를 발견할 수 있습니다. 채워진 목록에서 시작해 일치하는 항목이 없어지는 필터를 적용한 뒤, 필터를 해제하면 원래 목록이 돌아오는지 확인하세요. 그다음 실제로 빈 모음을 만들고 메시지와 행동을 비교하세요.

가상 워크스페이스에서 현재 모음은 프로젝트 여섯 개로 시작합니다. 선택한 주에 프로젝트가 없는 담당자를 고릅니다. 결과 영역에는 일치하는 항목이 없다고 안내하고, 담당자와 날짜 컨트롤은 그대로 남겨 둡니다. 날짜 필터를 지우면 더 넓은 기간에서 조건에 맞는 프로젝트가 다시 나타나고, 담당자 선택은 유지됩니다.

이제 프로젝트 없는 새 워크스페이스로 갑니다. 같은 결과 영역이 프로젝트의 목적과 생성을 소개합니다. 활성 필터도 없고 실제 모음이 비었으므로 필터 해제는 불필요합니다. 메시지는 달라도 앞 상태와 타이포그래피와 간격은 공유할 수 있습니다.

구현의 문제이기도 합니다. 정적인 비교는 원하는 행동을 지정할 수 있지만 실제 앱에는 요청 타이밍과 상태 변화 테스트가 필요합니다. 무관한 모든 인터페이스 상태의 카탈로그로 넓히지 말고 작은 여정에 집중하세요.

상황에 어조를 맞추세요

개인 즐겨찾기가 비었을 때는 가볍고 환영하는 느낌이어도 좋습니다. 사고 조사 중 감사 로그가 비었다면 차분하고 정확해야 합니다. 같은 웃는 그림과 “시작해 볼까요!”가 둘 다에 적합하지는 않습니다.

가장 궁금할 내용을 고려하세요. 새 사용자는 “무엇이 들어오나요?”라고 생각할 수 있습니다. 아는 파일을 찾는 사람은 “권한을 잃었나, 위치가 틀렸나, 이름을 잘못 썼나?”라고 생각할 수 있습니다. 완료 작업을 검토하는 사람은 남은 것이 없다는 확인만 필요할 수 있습니다. 질문이 명확하면 어조도 정하기 쉽습니다.

행이 0이라는 이유만으로 축하하지 마세요. 빈 대기열은 완료를 뜻할 수도, 필터가 가린 것일 수도 있습니다. 축하에는 확인된 긍정적 조건이 필요합니다. 앱이 확인할 수 없으면 중립적인 설명이 더 믿을 만합니다.

평범한 첫 사용에 사과할 필요도 없습니다. 새 모음에 레코드가 없는 것은 잘못이 아닙니다. 문제가 생겼음을 알리는 표현은 실제로 사용 흐름이 중단됐을 때 쓰세요. 일상적인 빈 화면은 제품 사용의 자연스러운 일부로 느껴지게 하세요.

그림에 공간을 차지할 이유를 주세요

그림은 모음에 무엇이 올지 설명하거나 첫 사용과 검색 결과를 구분할 수 있습니다. 유용한 행동을 화면 아래로 밀거나 막다른 길로 느끼게 해서는 안 됩니다. 그림을 지우니 메시지가 쉬워진다면 장식을 옹호하기보다 구성을 고치세요.

워크스페이스 예에서는 절제된 프로젝트 카드 선화로 어떤 정보를 담는지 보일 수 있습니다. 결과 없음 화면에는 검색과 필터가 이미 맥락을 주므로 작은 검색 기호만으로 충분할 수 있습니다. 같은 큰 그림 없이도 같은 시각적 계열이 될 수 있습니다.

핵심 설명은 실제 인터페이스 텍스트로 유지하세요. 그림은 필터와 결과의 관계를 강화할 수 있지만 이미지가 없어도 문구는 이해돼야 합니다. 디자인 파일에서는 선명하던 작은 라벨이 좁은 레이아웃에서는 읽을 수 없게 되는 경우에 특히 중요합니다.

OpenDesign에서 차이를 검토하세요

OpenDesign의 지원되는 HTML 프리뷰로 대안을 쉽게 비교할 수 있습니다. 실제적인 문구로 빈 모음과 결과 없음 예를 만들고 텍스트와 스타일을 수동 조절하며 화면 크기 프리셋으로 살펴보세요. 채팅으로 보내는 댓글은 수정할 정확한 메시지나 행동을 짚을 수 있습니다.

유용한 검토를 위해 각 화면에서 무슨 일이 일어났고 다음에 무엇을 할지 설명하게 하세요. 먼저 “첫 사용 상태”, “필터된 빈 상태”라고 소개하지 마세요. 디자인이 전달해야 할 답을 미리 알려 줍니다. 두 화면이 같은 해석을 낳으면 차이가 아직 충분히 명확하지 않은 것입니다.

실제 앱에서도 데이터 조건을 확인하세요. 활성 검색어, 권한 범위, 필터 초기화가 디자인에서 검토한 메시지를 선택해야 합니다.

작은 결정으로 큰 오해를 막으세요

빈 영역을 승인하기 전에 제목을 사실 주장으로 읽으세요. 앱이 그 주장을 할 만큼 아는지 확인하세요. 주된 행동을 무엇이 달라질 것인지에 대한 약속으로 읽고, 컨트롤이 실제로 그 변화를 만드는지 확인하세요.