빈 상태 UI 디자인: 콘텐츠가 없을 때 다음 행동 안내하기

1. 공간이 빈 이유 진단하기

빈 상태를 장식 기회가 아닌 제품 상태에 대한 보고로 다루세요. 화면이 나타나기 직전에 어떤 일이 있었는지, 시스템이 무엇을 알고 있는지, 사용자가 상황을 바꿀 수 있는지 물으세요. NN/g는 빈 상태를 현황 전달, 학습 지원, 핵심 작업으로의 경로 제공 기회로 설명합니다. 이를 위해서는 먼저 상태를 정확히 파악해야 합니다.

특히 요청이 아직 실행 중인데 “항목 없음”이라고 표시하지 마세요. 결과를 알 때까지 로딩 표시나 스켈레톤을 유지하세요. 요청이 실패하면 실패 사실과 복구 방법을 설명하세요. 성공했지만 항목이 0개라면 일치하는 콘텐츠가 없다고 알려 주세요. 이렇게 구분해야 일시적인 지연이나 시스템 문제를 실제 결과로 오해하지 않습니다.

2. 원인에 맞는 문구 작성하기

제목으로 상태를 밝히고 보조 텍스트로 그 의미나 진행 방법을 설명하세요. 제목은 빠르게 읽을 수 있게 쓰세요. 실제 질문에 답할 때만 문장을 덧붙이세요. Apple의 글쓰기 지침은 빈 화면에서 명확한 다음 단계, 행동 중심의 레이블, 문제 해결 방법을 설명하는 직접적인 오류 메시지를 권장합니다. 의미를 가리는 재치, “여기에는 아무것도 없음” 같은 모호한 제목, 사용자를 탓하는 문구는 피하세요.

예를 들어 처음 사용하는 저장 항목 화면이라면 가상으로 “저장한 가이드가 여기에 표시됩니다”라고 쓰고 “나중에 다시 보려면 가이드를 저장하세요”라는 설명과 “가이드 둘러보기” 버튼을 붙일 수 있습니다. 완료된 점검 목록이라면 “모두 완료했어요”라고 알리고 “완료한 작업 보기”를 제시할 수 있습니다. 두 예시는 서로 다른 상황을 설명합니다. 하나는 기능에 항목을 채우는 방법을 가르치고, 다른 하나는 성공적인 결과를 확인합니다.

검색은 성공했지만 일치 결과가 없다면 가상 메시지로 “ ‘orchid’와 일치하는 프로젝트가 없습니다”라고 쓰고 “더 넓은 검색어를 사용하거나 필터를 지워 보세요”라고 제안할 수 있습니다. 가능하면 검색어를 보존하고 필터 변경을 되돌릴 수 있게 하세요. 네트워크 장애라면 “프로젝트를 불러올 수 없습니다”와 “다시 시도”를 사용하세요. 시스템이 확인하지 못했는데 프로젝트가 없다고 단정하지 마세요.

• 메시지를 맥락 밖에서도 이해할 수 있도록 관련 항목이나 조건을 명시하세요.
• 버튼에는 “프로젝트 만들기”, “필터 지우기”, “다시 시도”처럼 동사를 사용하세요.
• 영향을 받는 콘텐츠 가까이에 안내를 놓고 색이나 이미지와 함께 텍스트도 사용하세요.
• 문제 해결에 꼭 필요하지 않다면 “앗”, 사용자 탓, 기술 오류 코드를 피하세요.

3. 자동적인 버튼이 아닌 유용한 다음 단계 만들기

사용자가 합리적으로 상황을 바꾸거나 작업을 계속할 수 있을 때 행동을 제시하세요. 첫 사용에는 생성 또는 추가가 유용한 경우가 많고, 검색 결과가 없을 때는 제약 조건을 지우는 것이 유용할 수 있으며, 오류에는 재시도를 제시할 수 있습니다. 비워진 받은편지함이나 완료한 운동에는 행동이 전혀 필요하지 않을 수도 있습니다. 패널을 상호작용 가능한 것처럼 보이게 하려고 모든 상태에 버튼을 억지로 넣지 마세요.

복구 방식은 문제에 비례해야 합니다. 새로고침 실패에는 보통 흐름을 막는 경고창보다 화면 안의 설명과 재시도가 적합합니다. Apple은 정보의 중요도에 맞는 피드백을 권장하고, 경고창은 중요하고 조치 가능한 상황에 남겨 두라고 합니다. 검색에서는 질의를 몰래 바꾸지 말고 사용자의 작업을 보존하면서 합리적인 조정 방법을 제시하세요. Material Design은 실제로 도움이 될 때 시작용 콘텐츠, 짧은 교육 콘텐츠, 명확하게 표시된 최적 일치 항목도 대안으로 제안합니다.

일러스트는 맥락, 친근함 또는 인지에 도움이 될 때만 사용하세요. 메시지와 경쟁하거나 장식 이미지를 누를 수 있는 것처럼 보이게 해서는 안 됩니다. 작은 필터 결과에는 간단한 아이콘이면 충분할 수 있고, 처음 사용하는 작업 공간에는 앞으로 담길 콘텐츠의 작은 예시가 도움이 될 수 있습니다. 시작용 콘텐츠가 있다면 쉽게 구분하고 제거할 수 있게 하세요.

• 원인에 직접 대응하는 주요 행동 하나를 선택하세요.
• 있을 법한 후속 질문에 답할 때만 보조 도움말 경로를 추가하세요.
• 빈 결과가 좋은 소식이라면 조용한 완료 메시지를 사용하세요.
• 키보드와 화면 읽기 프로그램 사용자도 행동을 이해할 수 있게 하세요.

4. 일러스트뿐 아니라 전체 상태를 검토하기

실제 컨테이너에서 상태를 살펴보세요. 전체 화면의 첫 사용 화면, 작은 사이드바, 필터가 적용된 표는 공간과 시각적 위계 요구가 다릅니다. 메시지를 설명 대상 영역 가까이에 두세요. 텍스트를 확대하거나 줄을 바꿔도 읽을 수 있게 하고 색을 구분하지 않아도 주요 행동을 쉽게 찾도록 하세요. 로딩에서 빈 상태로, 로딩에서 오류로, 재시도에서 성공으로, 필터 변경에서 결과로 이어지는 전환도 테스트하세요.

실용적인 라이브러리 검토는 계기와 예상 복구 방법에서 시작합니다. 패턴마다 상태, 제목, 선택적 설명, 주요 행동, 보조 경로, 선택 후 결과를 기록하세요. 스크린샷에서 유용한 구조와 시각적 위계를 비교한 다음 실제 제품 동작을 맥락 속에서 확인하세요. 정지 이미지로는 오류에서 복구할 수 있는지 또는 결과가 정말 비어 있는지 알 수 없습니다. 시각 참고 자료는 ScreenKits UI 라이브러리에서 둘러보고, 인접한 패턴은 모든 카테고리에서 찾아보세요.

• 콘텐츠가 없는 것인지, 아직 로딩 중인지, 오류 때문에 사용할 수 없는 것인지 구분할 수 있나요?
• 메시지가 현재 검색어, 필터, 계정 또는 완료한 작업을 반영하나요?
• 행동이 유용한 입력을 보존하고 눈에 보이는 결과로 이어지나요?
• 작은 화면, 긴 현지화 문구, 보조 기술을 사용할 때도 상태가 제대로 작동하나요?
• 오류에서 복구하거나 실패한 검색을 조정할 방법을 찾을 수 있나요?