UX/UI
데이터가 없을 때 무엇을 보여줄까?: 빈 상태 UX 설계
데이터가 없을 때 무엇을 보여줄까?: 빈 상태 UX 설계
화면에 표시할 데이터가 없다고 해서 모두 같은 빈 상태는 아닙니다. 첫 사용, 검색 결과 없음, 권한 부족과 네트워크 오류를 구분하고 사용자가 다음 행동을 선택할 수 있는 화면을 설계하는 방법을 살펴봅니다.
화면에 표시할 데이터가 없다고 해서 모두 같은 빈 상태는 아닙니다. 첫 사용, 검색 결과 없음, 권한 부족과 네트워크 오류를 구분하고 사용자가 다음 행동을 선택할 수 있는 화면을 설계하는 방법을 살펴봅니다.
빈 화면은 정보가 없는 화면이 아니라 설명이 필요한 상태입니다
서비스를 처음 사용하는 사용자가 프로젝트 목록에 들어왔지만 아직 만든 프로젝트가 없다면 무엇을 보여줘야 할까요? 가장 단순한 방법은 가운데에 데이터가 없습니다라는 문장을 놓는 것입니다.
문장은 현재 상태를 설명하지만 사용자가 다음에 해야 할 일은 알려주지 않습니다. 프로젝트라는 기능이 무엇인지, 프로젝트를 만들면 무엇을 할 수 있는지, 어디에서 시작해야 하는지 다시 찾아야 합니다.
좋은 빈 상태는 세 가지 질문에 답합니다.
지금 이 영역은 왜 비어 있는가?
사용자가 여기에서 무엇을 할 수 있는가?
원하는 결과를 보려면 어떤 행동을 해야 하는가?
예를 들어 첫 프로젝트가 없는 화면이라면 다음처럼 구성할 수 있습니다.
상태: 아직 프로젝트가 없어요
설명: 프로젝트를 만들어 작업과 팀원을 한곳에서 관리해 보세요
주요 행동: 첫 프로젝트 만들기
보조 행동: 예시 프로젝트 보기
빈 상태는 사용자가 제품의 구조를 처음 배우는 온보딩이 될 수 있습니다. 기능 설명을 길게 늘어놓기보다 현재 맥락에 필요한 정보와 행동을 제공하면 사용자는 별도의 가이드를 읽지 않고도 제품을 시작할 수 있습니다.
같은 빈 화면처럼 보여도 원인은 서로 다릅니다
화면에 항목이 없다는 결과만 보고 하나의 컴포넌트를 공통으로 사용하면 사용자는 원인을 잘못 이해할 수 있습니다. 데이터가 실제로 없는 것과 시스템이 데이터를 불러오지 못한 것은 전혀 다른 상태입니다.
첫 사용
사용자가 아직 데이터를 만들지 않은 상태입니다. 제품을 시작하는 데 필요한 한 가지 행동을 가장 분명하게 보여줘야 합니다.
메시지: 아직 만든 프로젝트가 없어요
주요 행동: 프로젝트 만들기
보조 정보: 프로젝트에 포함되는 기능 또는 짧은 예시
이 화면에서는 오류나 문제를 암시하는 표현보다 시작을 돕는 문장이 적절합니다.
검색 결과 없음
전체 데이터는 존재하지만 입력한 검색어에 해당하는 결과가 없는 상태입니다. 현재 검색어를 보여주고 쉽게 지우거나 수정할 수 있어야 합니다.
메시지:
브랜드 리뉴얼에 대한 검색 결과가 없어요주요 행동: 검색어 지우기
보조 행동: 전체 프로젝트 보기
사용자가 입력한 검색어를 숨기거나 초기화하면 같은 검색을 반복할 가능성이 높습니다. 조건을 유지한 상태에서 수정할 수 있도록 해야 합니다.
필터 결과 없음
사용자가 선택한 여러 조건 때문에 결과가 사라진 상태입니다. 어떤 필터가 적용되어 있는지 보여주고 초기화할 수 있어야 합니다.
메시지: 선택한 조건에 맞는 프로젝트가 없어요
주요 행동: 필터 초기화
보조 정보: 현재 적용된 상태, 담당자와 기간 표시
접근 권한 없음
데이터는 존재하지만 현재 계정으로 확인할 수 없는 상태입니다. 데이터가 없습니다라고 표시하면 사용자는 데이터 자체가 없는 것으로 오해합니다.
메시지: 이 프로젝트를 볼 권한이 없어요
주요 행동: 관리자에게 권한 요청
보조 행동: 프로젝트 목록으로 이동
권한이 필요한 이유와 요청 이후 어떤 절차가 이어지는지도 짧게 안내하는 것이 좋습니다.
불러오기 실패
서버나 네트워크 문제로 데이터를 표시하지 못한 상태입니다. 빈 상태처럼 보이게 처리하면 사용자는 데이터가 삭제되었다고 생각할 수 있습니다.
메시지: 프로젝트를 불러오지 못했어요
주요 행동: 다시 시도
보조 정보: 작성한 내용은 저장되었는지 안내
첫 사용은 새로운 행동을 시작하게 하고, 검색과 필터 상태는 조건을 수정하게 하며, 오류 상태는 정상 상태로 회복하게 해야 합니다. 원인이 다르면 메시지와 버튼도 달라져야 합니다.
일러스트보다 먼저 메시지와 행동을 설계합니다
빈 상태에 일러스트를 추가하면 화면은 풍부해 보이지만 사용성이 자동으로 좋아지는 것은 아닙니다. 사용자가 필요한 것은 장식보다 현재 상황을 이해하고 빠져나갈 방법입니다.
데이터가 없습니다가 부족한 이유
다음 화면을 생각해보겠습니다.
제목: 프로젝트
본문: 데이터가 없습니다
생성 버튼: 없음
상단 필터와 검색: 비활성화된 것처럼 보임
처음 방문한 사용자는 프로젝트 생성 기능이 있는지, 권한이 없는지, 로딩이 끝난 것인지 판단하기 어렵습니다. 모바일에서는 넓은 여백과 짧은 문장만 남아 제품이 정상적으로 작동하는지도 불분명합니다.
여기에 Image 2를 삽입합니다.
다음 행동은 하나를 우선합니다
개선된 화면에서는 가장 중요한 행동 하나를 주요 버튼으로 제공합니다.
제목: 아직 프로젝트가 없어요
설명: 첫 프로젝트를 만들어 작업을 시작해 보세요
주요 행동: 첫 프로젝트 만들기
보조 행동: 예시 프로젝트 보기
여러 버튼을 같은 강도로 나열하면 사용자는 무엇부터 해야 할지 다시 판단해야 합니다. 빈 상태에서는 현재 목표를 해결하는 행동 하나를 우선하고, 학습이나 탐색은 보조 링크로 구분하는 편이 좋습니다.
현재 위치와 구조는 유지합니다
빈 상태라고 해서 내비게이션, 페이지 제목과 기존 레이아웃을 모두 제거할 필요는 없습니다. 사용자는 익숙한 구조 안에서 현재 위치를 확인한 뒤 행동을 선택합니다.
목록이 비어 있어도 다음 요소는 유지하는 편이 좋습니다.
페이지 제목과 주요 내비게이션
사용할 수 있는 생성 버튼
현재 검색어와 필터 조건
사용자의 권한과 워크스페이스 정보
모바일의 주요 탭과 뒤로가기 경로
빈 상태는 제품과 분리된 안내 페이지가 아니라 실제 기능 안에서 나타나는 하나의 상태입니다.
예시 데이터는 사용법을 보여줄 때만 제공합니다
대시보드나 편집 도구에서는 예시 프로젝트가 도움이 될 수 있습니다. 사용자는 완성된 결과를 보고 기능의 목적과 데이터 구조를 빠르게 이해할 수 있습니다.
다만 실제 데이터와 예시 데이터를 혼동하지 않도록 명확하게 표시하고, 사용자가 필요 없을 때 삭제하거나 숨길 수 있어야 합니다. 실제 데이터처럼 꾸민 장식용 카드보다 클릭해 살펴볼 수 있는 예시 하나가 더 유용합니다.
빈 상태는 정상 화면과 같은 수준으로 검수해야 합니다
실제 운영 환경에서는 사용자가 완성된 목록보다 빈 화면을 먼저 만나는 경우가 많습니다. 신규 계정, 새로운 워크스페이스와 초기 설정 화면이 대표적입니다. 그런데 QA에서는 데이터가 충분히 들어 있는 계정만 사용해 빈 상태를 놓치기 쉽습니다.
출시 전에 다음 항목을 확인해보세요.
Cause
첫 사용, 검색, 필터, 권한과 오류 상태를 구분했는가
로딩 중인 화면과 실제 빈 상태가 구분되는가
사용자가 데이터를 삭제한 직후의 상태도 정의했는가
다른 팀원의 작업을 기다리는 상태가 필요한가
Message
화면이 비어 있는 이유를 짧게 설명하는가
시스템 용어보다 사용자가 이해하는 표현을 사용하는가
검색어와 필터처럼 문제의 원인이 되는 조건을 보여주는가
오류라면 작성한 데이터의 저장 여부를 안내하는가
Action
현재 상태를 해결하는 주요 행동이 하나 있는가
버튼 문구가 행동의 결과를 구체적으로 설명하는가
필터 초기화와 권한 요청 같은 회복 경로가 있는가
행동할 권한이 없는 사용자에게 사용할 수 없는 버튼을 노출하지 않는가
Recovery
네트워크 오류에서 다시 시도할 수 있는가
다시 시도해도 검색어와 필터 조건이 유지되는가
키보드만으로 주요 행동에 접근할 수 있는가
스크린 리더가 상태 변화와 버튼을 이해할 수 있는가
빈 상태 노출과 주요 버튼 클릭을 분석할 수 있는가
빈 상태는 콘텐츠가 빠진 임시 화면이 아닙니다. 사용자가 제품을 처음 이해하거나 원하는 결과를 찾지 못했을 때, 혹은 오류에서 회복해야 할 때 만나는 핵심 경험입니다.
FOUR PERSPECTIVES STUDIO는 완성된 화면뿐 아니라 로딩, 빈 결과, 오류와 권한 제한처럼 실제 사용 중 발생하는 상태까지 함께 설계합니다. 기능은 구현되어 있지만 사용자가 어디에서 시작해야 할지 모르거나 빈 화면에서 반복적으로 이탈한다면, 사용자 흐름과 상태 구조부터 함께 점검할 수 있습니다.
Latest Blogs
UX/UI
데이터가 없을 때 무엇을 보여줄까?: 빈 상태 UX 설계
데이터가 없을 때 무엇을 보여줄까?: 빈 상태 UX 설계
화면에 표시할 데이터가 없다고 해서 모두 같은 빈 상태는 아닙니다. 첫 사용, 검색 결과 없음, 권한 부족과 네트워크 오류를 구분하고 사용자가 다음 행동을 선택할 수 있는 화면을 설계하는 방법을 살펴봅니다.
화면에 표시할 데이터가 없다고 해서 모두 같은 빈 상태는 아닙니다. 첫 사용, 검색 결과 없음, 권한 부족과 네트워크 오류를 구분하고 사용자가 다음 행동을 선택할 수 있는 화면을 설계하는 방법을 살펴봅니다.
빈 화면은 정보가 없는 화면이 아니라 설명이 필요한 상태입니다
서비스를 처음 사용하는 사용자가 프로젝트 목록에 들어왔지만 아직 만든 프로젝트가 없다면 무엇을 보여줘야 할까요? 가장 단순한 방법은 가운데에 데이터가 없습니다라는 문장을 놓는 것입니다.
문장은 현재 상태를 설명하지만 사용자가 다음에 해야 할 일은 알려주지 않습니다. 프로젝트라는 기능이 무엇인지, 프로젝트를 만들면 무엇을 할 수 있는지, 어디에서 시작해야 하는지 다시 찾아야 합니다.
좋은 빈 상태는 세 가지 질문에 답합니다.
지금 이 영역은 왜 비어 있는가?
사용자가 여기에서 무엇을 할 수 있는가?
원하는 결과를 보려면 어떤 행동을 해야 하는가?
예를 들어 첫 프로젝트가 없는 화면이라면 다음처럼 구성할 수 있습니다.
상태: 아직 프로젝트가 없어요
설명: 프로젝트를 만들어 작업과 팀원을 한곳에서 관리해 보세요
주요 행동: 첫 프로젝트 만들기
보조 행동: 예시 프로젝트 보기
빈 상태는 사용자가 제품의 구조를 처음 배우는 온보딩이 될 수 있습니다. 기능 설명을 길게 늘어놓기보다 현재 맥락에 필요한 정보와 행동을 제공하면 사용자는 별도의 가이드를 읽지 않고도 제품을 시작할 수 있습니다.
같은 빈 화면처럼 보여도 원인은 서로 다릅니다
화면에 항목이 없다는 결과만 보고 하나의 컴포넌트를 공통으로 사용하면 사용자는 원인을 잘못 이해할 수 있습니다. 데이터가 실제로 없는 것과 시스템이 데이터를 불러오지 못한 것은 전혀 다른 상태입니다.
첫 사용
사용자가 아직 데이터를 만들지 않은 상태입니다. 제품을 시작하는 데 필요한 한 가지 행동을 가장 분명하게 보여줘야 합니다.
메시지: 아직 만든 프로젝트가 없어요
주요 행동: 프로젝트 만들기
보조 정보: 프로젝트에 포함되는 기능 또는 짧은 예시
이 화면에서는 오류나 문제를 암시하는 표현보다 시작을 돕는 문장이 적절합니다.
검색 결과 없음
전체 데이터는 존재하지만 입력한 검색어에 해당하는 결과가 없는 상태입니다. 현재 검색어를 보여주고 쉽게 지우거나 수정할 수 있어야 합니다.
메시지:
브랜드 리뉴얼에 대한 검색 결과가 없어요주요 행동: 검색어 지우기
보조 행동: 전체 프로젝트 보기
사용자가 입력한 검색어를 숨기거나 초기화하면 같은 검색을 반복할 가능성이 높습니다. 조건을 유지한 상태에서 수정할 수 있도록 해야 합니다.
필터 결과 없음
사용자가 선택한 여러 조건 때문에 결과가 사라진 상태입니다. 어떤 필터가 적용되어 있는지 보여주고 초기화할 수 있어야 합니다.
메시지: 선택한 조건에 맞는 프로젝트가 없어요
주요 행동: 필터 초기화
보조 정보: 현재 적용된 상태, 담당자와 기간 표시
접근 권한 없음
데이터는 존재하지만 현재 계정으로 확인할 수 없는 상태입니다. 데이터가 없습니다라고 표시하면 사용자는 데이터 자체가 없는 것으로 오해합니다.
메시지: 이 프로젝트를 볼 권한이 없어요
주요 행동: 관리자에게 권한 요청
보조 행동: 프로젝트 목록으로 이동
권한이 필요한 이유와 요청 이후 어떤 절차가 이어지는지도 짧게 안내하는 것이 좋습니다.
불러오기 실패
서버나 네트워크 문제로 데이터를 표시하지 못한 상태입니다. 빈 상태처럼 보이게 처리하면 사용자는 데이터가 삭제되었다고 생각할 수 있습니다.
메시지: 프로젝트를 불러오지 못했어요
주요 행동: 다시 시도
보조 정보: 작성한 내용은 저장되었는지 안내
첫 사용은 새로운 행동을 시작하게 하고, 검색과 필터 상태는 조건을 수정하게 하며, 오류 상태는 정상 상태로 회복하게 해야 합니다. 원인이 다르면 메시지와 버튼도 달라져야 합니다.
일러스트보다 먼저 메시지와 행동을 설계합니다
빈 상태에 일러스트를 추가하면 화면은 풍부해 보이지만 사용성이 자동으로 좋아지는 것은 아닙니다. 사용자가 필요한 것은 장식보다 현재 상황을 이해하고 빠져나갈 방법입니다.
데이터가 없습니다가 부족한 이유
다음 화면을 생각해보겠습니다.
제목: 프로젝트
본문: 데이터가 없습니다
생성 버튼: 없음
상단 필터와 검색: 비활성화된 것처럼 보임
처음 방문한 사용자는 프로젝트 생성 기능이 있는지, 권한이 없는지, 로딩이 끝난 것인지 판단하기 어렵습니다. 모바일에서는 넓은 여백과 짧은 문장만 남아 제품이 정상적으로 작동하는지도 불분명합니다.
여기에 Image 2를 삽입합니다.
다음 행동은 하나를 우선합니다
개선된 화면에서는 가장 중요한 행동 하나를 주요 버튼으로 제공합니다.
제목: 아직 프로젝트가 없어요
설명: 첫 프로젝트를 만들어 작업을 시작해 보세요
주요 행동: 첫 프로젝트 만들기
보조 행동: 예시 프로젝트 보기
여러 버튼을 같은 강도로 나열하면 사용자는 무엇부터 해야 할지 다시 판단해야 합니다. 빈 상태에서는 현재 목표를 해결하는 행동 하나를 우선하고, 학습이나 탐색은 보조 링크로 구분하는 편이 좋습니다.
현재 위치와 구조는 유지합니다
빈 상태라고 해서 내비게이션, 페이지 제목과 기존 레이아웃을 모두 제거할 필요는 없습니다. 사용자는 익숙한 구조 안에서 현재 위치를 확인한 뒤 행동을 선택합니다.
목록이 비어 있어도 다음 요소는 유지하는 편이 좋습니다.
페이지 제목과 주요 내비게이션
사용할 수 있는 생성 버튼
현재 검색어와 필터 조건
사용자의 권한과 워크스페이스 정보
모바일의 주요 탭과 뒤로가기 경로
빈 상태는 제품과 분리된 안내 페이지가 아니라 실제 기능 안에서 나타나는 하나의 상태입니다.
예시 데이터는 사용법을 보여줄 때만 제공합니다
대시보드나 편집 도구에서는 예시 프로젝트가 도움이 될 수 있습니다. 사용자는 완성된 결과를 보고 기능의 목적과 데이터 구조를 빠르게 이해할 수 있습니다.
다만 실제 데이터와 예시 데이터를 혼동하지 않도록 명확하게 표시하고, 사용자가 필요 없을 때 삭제하거나 숨길 수 있어야 합니다. 실제 데이터처럼 꾸민 장식용 카드보다 클릭해 살펴볼 수 있는 예시 하나가 더 유용합니다.
빈 상태는 정상 화면과 같은 수준으로 검수해야 합니다
실제 운영 환경에서는 사용자가 완성된 목록보다 빈 화면을 먼저 만나는 경우가 많습니다. 신규 계정, 새로운 워크스페이스와 초기 설정 화면이 대표적입니다. 그런데 QA에서는 데이터가 충분히 들어 있는 계정만 사용해 빈 상태를 놓치기 쉽습니다.
출시 전에 다음 항목을 확인해보세요.
Cause
첫 사용, 검색, 필터, 권한과 오류 상태를 구분했는가
로딩 중인 화면과 실제 빈 상태가 구분되는가
사용자가 데이터를 삭제한 직후의 상태도 정의했는가
다른 팀원의 작업을 기다리는 상태가 필요한가
Message
화면이 비어 있는 이유를 짧게 설명하는가
시스템 용어보다 사용자가 이해하는 표현을 사용하는가
검색어와 필터처럼 문제의 원인이 되는 조건을 보여주는가
오류라면 작성한 데이터의 저장 여부를 안내하는가
Action
현재 상태를 해결하는 주요 행동이 하나 있는가
버튼 문구가 행동의 결과를 구체적으로 설명하는가
필터 초기화와 권한 요청 같은 회복 경로가 있는가
행동할 권한이 없는 사용자에게 사용할 수 없는 버튼을 노출하지 않는가
Recovery
네트워크 오류에서 다시 시도할 수 있는가
다시 시도해도 검색어와 필터 조건이 유지되는가
키보드만으로 주요 행동에 접근할 수 있는가
스크린 리더가 상태 변화와 버튼을 이해할 수 있는가
빈 상태 노출과 주요 버튼 클릭을 분석할 수 있는가
빈 상태는 콘텐츠가 빠진 임시 화면이 아닙니다. 사용자가 제품을 처음 이해하거나 원하는 결과를 찾지 못했을 때, 혹은 오류에서 회복해야 할 때 만나는 핵심 경험입니다.
FOUR PERSPECTIVES STUDIO는 완성된 화면뿐 아니라 로딩, 빈 결과, 오류와 권한 제한처럼 실제 사용 중 발생하는 상태까지 함께 설계합니다. 기능은 구현되어 있지만 사용자가 어디에서 시작해야 할지 모르거나 빈 화면에서 반복적으로 이탈한다면, 사용자 흐름과 상태 구조부터 함께 점검할 수 있습니다.
Latest Blogs
UX/UI
데이터가 없을 때 무엇을 보여줄까?: 빈 상태 UX 설계
데이터가 없을 때 무엇을 보여줄까?: 빈 상태 UX 설계
화면에 표시할 데이터가 없다고 해서 모두 같은 빈 상태는 아닙니다. 첫 사용, 검색 결과 없음, 권한 부족과 네트워크 오류를 구분하고 사용자가 다음 행동을 선택할 수 있는 화면을 설계하는 방법을 살펴봅니다.
화면에 표시할 데이터가 없다고 해서 모두 같은 빈 상태는 아닙니다. 첫 사용, 검색 결과 없음, 권한 부족과 네트워크 오류를 구분하고 사용자가 다음 행동을 선택할 수 있는 화면을 설계하는 방법을 살펴봅니다.
빈 화면은 정보가 없는 화면이 아니라 설명이 필요한 상태입니다
서비스를 처음 사용하는 사용자가 프로젝트 목록에 들어왔지만 아직 만든 프로젝트가 없다면 무엇을 보여줘야 할까요? 가장 단순한 방법은 가운데에 데이터가 없습니다라는 문장을 놓는 것입니다.
문장은 현재 상태를 설명하지만 사용자가 다음에 해야 할 일은 알려주지 않습니다. 프로젝트라는 기능이 무엇인지, 프로젝트를 만들면 무엇을 할 수 있는지, 어디에서 시작해야 하는지 다시 찾아야 합니다.
좋은 빈 상태는 세 가지 질문에 답합니다.
지금 이 영역은 왜 비어 있는가?
사용자가 여기에서 무엇을 할 수 있는가?
원하는 결과를 보려면 어떤 행동을 해야 하는가?
예를 들어 첫 프로젝트가 없는 화면이라면 다음처럼 구성할 수 있습니다.
상태: 아직 프로젝트가 없어요
설명: 프로젝트를 만들어 작업과 팀원을 한곳에서 관리해 보세요
주요 행동: 첫 프로젝트 만들기
보조 행동: 예시 프로젝트 보기
빈 상태는 사용자가 제품의 구조를 처음 배우는 온보딩이 될 수 있습니다. 기능 설명을 길게 늘어놓기보다 현재 맥락에 필요한 정보와 행동을 제공하면 사용자는 별도의 가이드를 읽지 않고도 제품을 시작할 수 있습니다.
같은 빈 화면처럼 보여도 원인은 서로 다릅니다
화면에 항목이 없다는 결과만 보고 하나의 컴포넌트를 공통으로 사용하면 사용자는 원인을 잘못 이해할 수 있습니다. 데이터가 실제로 없는 것과 시스템이 데이터를 불러오지 못한 것은 전혀 다른 상태입니다.
첫 사용
사용자가 아직 데이터를 만들지 않은 상태입니다. 제품을 시작하는 데 필요한 한 가지 행동을 가장 분명하게 보여줘야 합니다.
메시지: 아직 만든 프로젝트가 없어요
주요 행동: 프로젝트 만들기
보조 정보: 프로젝트에 포함되는 기능 또는 짧은 예시
이 화면에서는 오류나 문제를 암시하는 표현보다 시작을 돕는 문장이 적절합니다.
검색 결과 없음
전체 데이터는 존재하지만 입력한 검색어에 해당하는 결과가 없는 상태입니다. 현재 검색어를 보여주고 쉽게 지우거나 수정할 수 있어야 합니다.
메시지:
브랜드 리뉴얼에 대한 검색 결과가 없어요주요 행동: 검색어 지우기
보조 행동: 전체 프로젝트 보기
사용자가 입력한 검색어를 숨기거나 초기화하면 같은 검색을 반복할 가능성이 높습니다. 조건을 유지한 상태에서 수정할 수 있도록 해야 합니다.
필터 결과 없음
사용자가 선택한 여러 조건 때문에 결과가 사라진 상태입니다. 어떤 필터가 적용되어 있는지 보여주고 초기화할 수 있어야 합니다.
메시지: 선택한 조건에 맞는 프로젝트가 없어요
주요 행동: 필터 초기화
보조 정보: 현재 적용된 상태, 담당자와 기간 표시
접근 권한 없음
데이터는 존재하지만 현재 계정으로 확인할 수 없는 상태입니다. 데이터가 없습니다라고 표시하면 사용자는 데이터 자체가 없는 것으로 오해합니다.
메시지: 이 프로젝트를 볼 권한이 없어요
주요 행동: 관리자에게 권한 요청
보조 행동: 프로젝트 목록으로 이동
권한이 필요한 이유와 요청 이후 어떤 절차가 이어지는지도 짧게 안내하는 것이 좋습니다.
불러오기 실패
서버나 네트워크 문제로 데이터를 표시하지 못한 상태입니다. 빈 상태처럼 보이게 처리하면 사용자는 데이터가 삭제되었다고 생각할 수 있습니다.
메시지: 프로젝트를 불러오지 못했어요
주요 행동: 다시 시도
보조 정보: 작성한 내용은 저장되었는지 안내
첫 사용은 새로운 행동을 시작하게 하고, 검색과 필터 상태는 조건을 수정하게 하며, 오류 상태는 정상 상태로 회복하게 해야 합니다. 원인이 다르면 메시지와 버튼도 달라져야 합니다.
일러스트보다 먼저 메시지와 행동을 설계합니다
빈 상태에 일러스트를 추가하면 화면은 풍부해 보이지만 사용성이 자동으로 좋아지는 것은 아닙니다. 사용자가 필요한 것은 장식보다 현재 상황을 이해하고 빠져나갈 방법입니다.
데이터가 없습니다가 부족한 이유
다음 화면을 생각해보겠습니다.
제목: 프로젝트
본문: 데이터가 없습니다
생성 버튼: 없음
상단 필터와 검색: 비활성화된 것처럼 보임
처음 방문한 사용자는 프로젝트 생성 기능이 있는지, 권한이 없는지, 로딩이 끝난 것인지 판단하기 어렵습니다. 모바일에서는 넓은 여백과 짧은 문장만 남아 제품이 정상적으로 작동하는지도 불분명합니다.
여기에 Image 2를 삽입합니다.
다음 행동은 하나를 우선합니다
개선된 화면에서는 가장 중요한 행동 하나를 주요 버튼으로 제공합니다.
제목: 아직 프로젝트가 없어요
설명: 첫 프로젝트를 만들어 작업을 시작해 보세요
주요 행동: 첫 프로젝트 만들기
보조 행동: 예시 프로젝트 보기
여러 버튼을 같은 강도로 나열하면 사용자는 무엇부터 해야 할지 다시 판단해야 합니다. 빈 상태에서는 현재 목표를 해결하는 행동 하나를 우선하고, 학습이나 탐색은 보조 링크로 구분하는 편이 좋습니다.
현재 위치와 구조는 유지합니다
빈 상태라고 해서 내비게이션, 페이지 제목과 기존 레이아웃을 모두 제거할 필요는 없습니다. 사용자는 익숙한 구조 안에서 현재 위치를 확인한 뒤 행동을 선택합니다.
목록이 비어 있어도 다음 요소는 유지하는 편이 좋습니다.
페이지 제목과 주요 내비게이션
사용할 수 있는 생성 버튼
현재 검색어와 필터 조건
사용자의 권한과 워크스페이스 정보
모바일의 주요 탭과 뒤로가기 경로
빈 상태는 제품과 분리된 안내 페이지가 아니라 실제 기능 안에서 나타나는 하나의 상태입니다.
예시 데이터는 사용법을 보여줄 때만 제공합니다
대시보드나 편집 도구에서는 예시 프로젝트가 도움이 될 수 있습니다. 사용자는 완성된 결과를 보고 기능의 목적과 데이터 구조를 빠르게 이해할 수 있습니다.
다만 실제 데이터와 예시 데이터를 혼동하지 않도록 명확하게 표시하고, 사용자가 필요 없을 때 삭제하거나 숨길 수 있어야 합니다. 실제 데이터처럼 꾸민 장식용 카드보다 클릭해 살펴볼 수 있는 예시 하나가 더 유용합니다.
빈 상태는 정상 화면과 같은 수준으로 검수해야 합니다
실제 운영 환경에서는 사용자가 완성된 목록보다 빈 화면을 먼저 만나는 경우가 많습니다. 신규 계정, 새로운 워크스페이스와 초기 설정 화면이 대표적입니다. 그런데 QA에서는 데이터가 충분히 들어 있는 계정만 사용해 빈 상태를 놓치기 쉽습니다.
출시 전에 다음 항목을 확인해보세요.
Cause
첫 사용, 검색, 필터, 권한과 오류 상태를 구분했는가
로딩 중인 화면과 실제 빈 상태가 구분되는가
사용자가 데이터를 삭제한 직후의 상태도 정의했는가
다른 팀원의 작업을 기다리는 상태가 필요한가
Message
화면이 비어 있는 이유를 짧게 설명하는가
시스템 용어보다 사용자가 이해하는 표현을 사용하는가
검색어와 필터처럼 문제의 원인이 되는 조건을 보여주는가
오류라면 작성한 데이터의 저장 여부를 안내하는가
Action
현재 상태를 해결하는 주요 행동이 하나 있는가
버튼 문구가 행동의 결과를 구체적으로 설명하는가
필터 초기화와 권한 요청 같은 회복 경로가 있는가
행동할 권한이 없는 사용자에게 사용할 수 없는 버튼을 노출하지 않는가
Recovery
네트워크 오류에서 다시 시도할 수 있는가
다시 시도해도 검색어와 필터 조건이 유지되는가
키보드만으로 주요 행동에 접근할 수 있는가
스크린 리더가 상태 변화와 버튼을 이해할 수 있는가
빈 상태 노출과 주요 버튼 클릭을 분석할 수 있는가
빈 상태는 콘텐츠가 빠진 임시 화면이 아닙니다. 사용자가 제품을 처음 이해하거나 원하는 결과를 찾지 못했을 때, 혹은 오류에서 회복해야 할 때 만나는 핵심 경험입니다.
FOUR PERSPECTIVES STUDIO는 완성된 화면뿐 아니라 로딩, 빈 결과, 오류와 권한 제한처럼 실제 사용 중 발생하는 상태까지 함께 설계합니다. 기능은 구현되어 있지만 사용자가 어디에서 시작해야 할지 모르거나 빈 화면에서 반복적으로 이탈한다면, 사용자 흐름과 상태 구조부터 함께 점검할 수 있습니다.