빈 화면에 무엇을 보여 줄지 정하는 순서

비어 있는 이유부터 구분합니다

목록이 비어 보인다는 이유만으로 모든 상황에 “데이터가 없습니다”를 보여 주면 사용자는 무엇을 해야 할지 알기 어렵습니다. 아직 한 건도 만들지 않았는지, 검색 조건에 맞는 것이 없는지, 불러오는 중인지, 조회가 실패했는지에 따라 필요한 설명이 달라집니다.

화면을 설계할 때 정상 데이터가 있는 상태와 함께 최초 사용, 결과 없음, 로딩, 오류, 접근 제한을 나란히 적어 봅니다. 각각이 어떤 서버 응답이나 사용자 행동으로 만들어지는지도 연결합니다. 이 구분이 명확하면 잘못된 상태를 보여 주는 구현 오류도 찾기 쉽습니다.

특히 조회 실패를 빈 목록으로 처리하면 기존 데이터가 사라졌다고 오해할 수 있습니다. 실제로 내용이 없는 것인지, 지금 확인할 수 없는 것인지 문구와 행동을 다르게 구성해야 합니다.

설명과 다음 행동을 한 쌍으로 둡니다

처음 사용하는 화면이라면 무엇을 만들면 이곳에 나타나는지 설명하고 첫 행동으로 연결합니다. “아직 프로젝트가 없습니다” 다음에 “프로젝트 만들기”를 제공하는 식입니다. 생성 권한이 없는 사용자에게는 누가 준비해 줄 수 있는지 안내해야 합니다.

검색 결과가 없을 때는 입력한 검색어와 적용한 조건을 유지하고, 조건을 지우거나 범위를 넓힐 수 있게 합니다. 오류라면 재시도할 수 있는지와 입력 내용이 보존되는지를 알려 줍니다. 권한 제한은 데이터가 없는 것처럼 설명하지 않습니다.

버튼을 여러 개 놓기 전에 가장 자연스러운 다음 행동 하나를 정하세요. 처음부터 모든 설정 화면으로 보내면 무엇을 해결해야 하는지 다시 판단하게 됩니다. 사용자가 보고 있던 작업에 가까운 행동일수록 흐름을 이어 가기 쉽습니다.

장식보다 문맥과 정보의 순서를 먼저 봅니다

빈 상태에 그림을 넣을 수 있지만 화면의 목적을 이해하는 데 필요한 문구가 먼저입니다. 제목은 현재 상태를, 설명은 그 이유나 해결 조건을, 행동은 다음 단계를 맡도록 구성하면 같은 내용을 반복하지 않아도 됩니다.

처음 보는 사용자를 위한 설명과 자주 쓰는 사용자가 검색 중 만나는 설명은 길이가 달라야 합니다. 넓은 화면의 가운데에는 자연스러운 큰 그림도 작은 패널에서는 본문과 버튼을 밀어낼 수 있으므로 실제 배치에서 확인합니다.

샘플 데이터를 보여 주는 경우에는 실제 기록과 구분되게 표시합니다. 예시가 비어 있는 이유를 설명하는 데 도움이 되는지, 사용자가 자신이 만든 데이터로 오해하지 않는지 살펴야 합니다. 빈 공간을 채우는 것 자체를 목표로 삼지 않습니다.

실제 조건을 만들어 전환을 확인합니다

빈 화면의 이미지만 검토하면 상태 전환 문제를 놓칩니다. 새 계정으로 들어가고, 검색 결과를 없애고, 요청을 실패시키고, 권한이 없는 역할로 접근해 각각 올바른 안내가 나오는지 확인합니다.

• 첫 항목을 만든 뒤 목록이 갱신되는지 확인합니다.
• 검색 조건을 지웠을 때 원래 결과가 다시 보이는지 봅니다.
• 재시도 중 중복 요청과 깜빡임이 생기지 않는지 확인합니다.
• 키보드로 다음 행동에 도달할 수 있는지 살펴봅니다.

이 과정을 통해 빈 상태를 제품 흐름의 일부로 다룰 수 있습니다. 사용자가 막힌 상황에서 무엇을 이해하고 어디로 이동할지까지 정해져야 화면이 제 역할을 합니다.