Empty states

Empty states (빈 상태)

빈 상태는 사용자에게 표시할 데이터가 없을 때 앱에서 나타나는 순간이에요. 사용자가 제품이나 페이지와 처음 상호작용할 때 가장 흔히 보이지만, 데이터가 삭제되었거나 사용할 수 없을 때도 사용할 수 있습니다.

출처: Empty states

본문

개요 (Overview)

빈 상태는 사용자를 정보에 밝게 하고, 지원하며, 생산적인 경로에 유지하는 단순하지만 매우 강력한 방법이에요. 사용자가 데이터가 있다면 무엇을 볼 수 있을지 소통하는 기회를 제공하면서, 다음 단계에 대한 건설적인 안내도 제공합니다.

충분한 맥락적 안내만 있다면 빈 상태는 특히 일이 예상대로 작동하지 않을 때 경험의 매끄러움을 보장해요.

대부분은 페이지에 보통 어떤 데이터가 나타날지 설명하는 기본 빈 상태 페이지에 익숙합니다. 그러나 항상 한 가지 해결책만 있는 것은 아닙니다.

이 패턴은 다음 접근 방식을 탐구합니다.

• 첫 사용, 사용자 동작 확인, 오류 관리를 위한 기본 빈 상태
• 인라인 문서, 온보딩, 스타터 콘텐츠를 포함한 첫 사용 빈 상태의 심층 보충과 대안

구조 (Anatomy)

• 이미지(Image, 선택): 상황과 관련된 비인터랙티브 이미지(선택).
• 제목(Title): 짧고 간결한 설명이에요. 가능하면 이것을 긍정적인 진술로 쓰세요. 이 예시에서는 "데이터 에셋 추가로 시작하세요"가 "데이터 에셋이 없습니다"보다 더 긍정적으로 느껴집니다. 또는 "아직 데이터 에셋이 없습니다"라고 할 수도 있어요.
• 본문(Body): 공간을 채울 다음 동작을 명확히 설명하세요. 공간이 왜 비어 있는지 설명하고 이 단계를 취하는 혜택을 포함할 수도 있습니다. 기본 동작을 설명하는 세 가지 옵션:
  • 사용자를 복사 아래에 배치된 기본 동작 버튼으로 안내
  • 복사 안에 기본 동작 링크 포함
  • 사용자를 UI 요소로 안내 — 이점은 사용자에게 요소가 어디에 있고 미래에 어떻게 작업을 수행할지 가르쳐 주는 것
• 기본 동작—복사 안의 버튼이나 링크(선택): 위 본문 복사에서 언급된 기본 콜투액션이에요.
• 보조 콜투액션(Secondary call to action, 선택): 추가 읽기를 위한 문서 참조 같은 보조 동작이 있다면 복사 아래에 링크로 포함하세요.

빈 상태로 디자인하기 (Designing with empty states)

빈 상태는 종종 뒷전으로 취급되곤 해요. 신중하게 디자인되면 빈 상태는 사용자가 생산적으로 계속 작업할 수 있도록 맥락 안에서 정확히 충분한 정보를 제공해 매끄러운 사용자 경험의 필수 부분이 됩니다.

디자인 과정에서 다음 질문을 스스로에게 하세요.

• 콘텐츠 없이 페이지, 타일, 데이터 테이블, 사이드 패널이 어떻게 보일까?
• 사용자가 상황을 해결하기 위해 취할 수 있는 모든 단계는 무엇인가?
• 보여줄 수 있는 유용한 콘텐츠가 있을까?
• 이 상황을 매력적이고 도움이 되는 것으로 어떻게 바꿀까?

디자인 단계에서 팀과 함께 옵션의 전체 범위를 탐구해 각 빈 공간에 가장 적절하고 도움이 되는 콘텐츠가 만들어지도록 하세요.

언제 사용할까요 (When to use)

빈 상태는 다양한 이유로 발생하며 다른 처리가 필요할 수 있어요.

상황과 제공하는 콘텐츠 사이의 균형을 위해 노력하세요. 콘텐츠가 더 많다고 반드시 더 나은 해결책인 것은 아닙니다. 페이지에 콘텐츠가 더 많으면 인지 비용이 있기 때문이에요. 이는 사용자가 제품과 처음 상호작용할 때 특히 그렇습니다. 그러니 더 복잡한 교육적 순간은 주요 기능과 더 복잡한 상황에 아껴두세요.

다음 표는 서로 다른 상황에서 사용자 요구에 맞는 빈 상태에 대한 다양한 접근 방식을 제안합니다.

기본 빈 상태 (Basic empty states)

Type	Use cases	Goal of the empty state	When to use
No data empty states	첫 사용, 아직 데이터 없음	사용자는 데이터가 추가되거나 사용 가능해지면 페이지에서 무엇이 제공될지 이해한다. 스스로 데이터를 추가하는 방법을 이해한다.	더 단순한 상황, 또는 작게 쪼갠 정보 조각이 선호되는 보조 기능을 위해.
User action empty states	일부 사용자 동작에 기반한 피드백 제공. 예: 검색 결과 없음, 프로세스 완료 확인	사용자는 검색을 계속하기 위해 검색어나 필터를 조정하는 방법을 이해한다. 사용자는 프로세스를 성공적으로 완료했음을 이해한다.	상호작용에 기반해 사용자에게 피드백을 제공해야 할 때.
Error management empty states	권한 문제, 시스템 문제, 구성 필요	사용자는 문제를 이해하고, 가능한 시정 조치가 있다면 어떤 조치를 취해야 하는지 알거나 문제를 해결할 옵션이 있다.	무언가 잘못되었거나 어느 정도 개입이나 문제 해결이 필요할 때, 더 높은 수준의 상세와 구체성이 사용자를 더 잘 지원한다.

어디에 사용할까요 (Where to use)

빈 상태는 항상 달리 비어 있는 공간, 누락된 데이터의 맥락에 나타나요. 대시보드, 데이터 테이블, 타일, 전체 페이지, 사이드 패널을 포함한(이에 국한되지 않는) 앱이 데이터를 표시할 수 있는 어디에서나 발생할 수 있습니다.

선택하는 접근 방식과 레이아웃은 상황, 그리고 페이지 레이아웃과 맥락에 가장 적절한 것에 따라 달라져요.

더 작은 빈 공간에 대한 시각적 가이드라인 (Visual guidelines for smaller empty spaces)

작은 타일과 사이드 패널의 경우 다음 가이드라인을 따르고 아래 표시된 레이아웃을 사용하세요.

요소 정렬 (Alignment of elements)

빈 상태 요소는 블록으로 왼쪽 정렬되어야 해요. 이 규칙의 유일한 예외는 작은 타일 안의 빈 상태입니다. 이 경우 이미지는 왼쪽 정렬된 텍스트와 기본 동작 위에 중앙 정렬되어야 합니다. 이 예외는 빈 상태가 콘텐츠처럼 보여 건너뛰어질 수 있는 것을 방지하기 위해 만들어졌어요. 더 작은 공간의 중앙 이미지는 사용자 동작이 필요할 수 있는 상태에 주의를 끄는 데 도움이 됩니다.

이미지 선택 고려 사항 (Image choice considerations)

• 이미지 선택은 상황과 관련되어야 해요.
• 빈 상태를 위한 공간의 크기도 이미지 크기를 안내해야 합니다. 공간이 제한되면 텍스트만 사용하세요.

여러 빈 상태 (Multiple empty states)

한 번에 여러 빈 상태가 표시될 수 있는 상황에서는 콜투액션에 3차(tertiary) 버튼을 사용할 것을 권장합니다. 이렇게 하면 UI에 여러 기본 동작 버튼이 있는 시나리오를 피할 수 있어요.

더 큰 빈 공간에 대한 시각적 가이드라인 (Visual guidelines for larger empty spaces)

더 큰 공간에서는 더 큰 빈 상태를 배치하는 데 약간의 유연성이 있습니다. 다음 가이드라인을 따르고 예시를 검토한 후 상황에 가장 좋은 것을 판단하세요.

요소 정렬 (Alignment of elements)

빈 상태 요소는 블록으로 왼쪽 정렬되어야 해요. 사용하는 이미지에 따라 다른 배치가 가능합니다.

레이아웃/위치 옵션 (Layout/positioning options)

더 큰 빈 상태에서 블록을 배치하는 두 가지 옵션이 있어요.

• 더 넓은 왼쪽 여백 사용
• 빈 공간에서 왼쪽 정렬 그룹을 블록 중앙 배치

이미지 위치 옵션 (Image position options)

더 큰 빈 상태에서 이미지를 배치하는 두 가지 옵션이 있어요.

• 빈 상태 제목 위 — 일반적으로 더 넓은 이미지에 좋음
• 요소 블록의 왼쪽 — 일반적으로 더 높은 이미지에 좋음

이미지 선택 고려 사항 (Image choice considerations)

• 이미지 선택은 상황과 관련되어야 해요.
• 빈 상태를 위한 공간의 크기도 이미지 크기를 안내해야 합니다. 공간이 제한되면 텍스트만 사용하세요.

모범 사례 (Best practices)

• 빈 상태는 보통 표시되던 요소를 대체해야 해요. 예를 들어 테이블의 빈 상태는 테이블과 컬럼 헤더를 대체해야 하고, 푸터는 없어야 합니다. 이 관행은 화면 리더가 테이블에 콘텐츠가 없다는 메시지에 도달하기 전에 전체 테이블을 읽는 것을 피하게 해요. 마찬가지로 무언가를 검색하고 결과가 없으면, 밑에 있는 콘텐츠는 빈 상태 메시지로 대체되어야 합니다.
• 공간에 얼마나 많은 빈 상태가 나타날 수 있는지 고려하세요. 여러 위젯이 있는 대시보드에서 여러 위젯의 로드가 실패한다면 일러스트레이티브 아이콘을 쓰면 빈 상태의 반복이 동일한 영향을 주지 않을 수 있어요. 이런 경우 텍스트만 사용하는 빈 상태가 더 나을 수 있습니다.

빈 상태 유형 (Types of empty states)

데이터 없음 빈 상태 (No data empty states)

이것들은 가장 잘 알려진 첫 사용 빈 상태로, 공간이 데이터로 채워지면 무엇이 들어올지 설명하고 사용자가 공간을 채우기 위해 취할 수 있는 다음 단계를 안내합니다.

Do (권장):

• 더 단순한 상황이나 작게 쪼갠 정보 조각이 선호되는 보조 기능에는 기본 빈 상태를 사용하세요.
• 데이터가 있을 때 공간에서 무엇이 제공될지 구체적으로 말하세요.
• 빠르게 읽고 행동할 수 있도록 단어를 최소화하세요.
• 실행 가능한 다음 단계가 있다면 메시지 복사에 직접 링크를 포함하거나 기본 동작 버튼을 넣어 그 동작을 빠르게 하세요. 또는 클릭해야 할 것을 안내하세요.

Don’t (피해야 할 것):

• 하나의 빈 상태에 여러 옵션을 담지 마세요. 사용자가 할 수 있는 일이 여러 가지라면 가장 중요한 것을 골라 그 동작에 집중하세요.
• 사용자가 아직 이해하지 못할 수 있는 제품 관련 용어를 사용하지 마세요.
• 앱의 다른 영역에 관한 콘텐츠를 포함하지 마세요. 맥락적이어야 합니다.
• 일반 규칙으로 사용자를 막다른 길로 이끌지 마세요. 유용한 다음 단계가 있다면 포함하세요.

사용자 동작 빈 상태 (User action empty states)

이 빈 상태는 사용자 동작의 결과로 발생해요. 예:

• 검색 결과가 없다는 메시지
• 프로세스나 작업 집합 완료에 대한 성공 확인

메시지를 보게 된 이유를 설명하고 사용자를 안내할 후속 단계를 제공하세요. 예를 들어 검색 결과가 없다면 검색이나 필터를 조정할 것을 제안하세요. 문서 링크도 보조 콜투액션으로 적절할 수 있습니다.

다음 단계가 불가능하거나 보충 텍스트가 필요하지 않은 상황도 있을 수 있으므로 무엇을 포함하는 것이 유용한지 판단하세요. 예를 들어 사용자가 알림을 구성했고 아무것도 트리거되지 않았다면, 알림이 설정되지 않은 것이 아니라 사용자의 주의를 요하는 것이 없는 경우입니다. 이런 경우 보충 텍스트는 필요하지 않습니다.

오류 관리 빈 상태 (Error management empty states)

데이터가 있지만 어떤 이유로 표면화될 수 없을 때도 빈 상태가 발생할 수 있어요. 사용자가 스스로 문제를 편안히 해결할 수 있도록 하려는 목적으로 더 높은 수준의 구체성이 여기서 유용합니다.

데이터가 없는 이유에 대한 안내와, 사용자가 데이터 부족을 해결하기 위해 할 수 있는 것 또는 데이터가 나타날 상황을 제공하세요. 그리고 평이한 언어를 사용하세요. 이렇게 함으로써 Jakob Nielsen의 아홉 번째 사용성 휴리스틱을 충족합니다: 사용자가 오류를 인식하고, 진단하고, 복구하도록 도와라.

오류 메시지는 평이한 언어로 표현되고(코드 없이), 문제를 정확히 나타내며, 해결책을 건설적으로 제안해야 합니다.

• 10 Usability Heuristics for User Interface Design, Jakob Nielsen

기본 빈 상태 솔루션으로 해결될 수 있는 오류 관리 상황은 다음과 같아요.

Error type	Explain why there is no data	Explain what the user can do
Permissions issue	사용자는 데이터를 볼 권한이 없다.	접근 요청을 위한 단계나 프로세스를 제안하세요.
Systems issue	관련 시스템의 문제가 데이터 공급을 막고 있다.	사용자가 무슨 일이 일어났는지 알기 위해 취할 수 있는 단계를 설명하세요. 예: 활동 로그 보기.
Configuration required	데이터에 접근하려면 추가 구성이 필요할 수 있다.	필수 구성에 대해 설명과 사용자가 취할 첫 단계를 제공하세요.
Action not supported	예: 사용자가 지원되지 않는 파일 유형을 업로드하려 한다.	어떤 파일 유형이 지원되는지 설명하세요.

Do (권장):

• 어떤 정보가 사용 가능한지 탐구하기 위해 팀과 상의하세요.
• 시정 조치가 있다면 사용자에게 실행 가능한 다음 단계를 주세요. 메시지 복사에 직접 링크를 포함하거나 기본 동작 버튼을 넣어 다음 동작을 빠르게 하세요. 또는 클릭해야 할 요소로 안내하세요.
• 상황을 설명하는 데 직접적이고 평이한 언어를 사용하세요.
• 사용자를 존중하고 농담하거나 경솔한 언어를 사용하지 마세요.
• 사용된 이미지는 상황을 반영하고 심각할 수 있는 상황에 민감해야 해요.

Don’t (피해야 할 것):

• 앱의 다른 영역에 관한 콘텐츠를 포함하지 마세요. 맥락적이어야 합니다.
• 사용자를 막다른 길로 이끌지 마세요. 항상 해결책으로 가는 경로를 제공하는 것을 목표로 하세요.
• 사용자가 시도할 것이 여러 가지라면 어떤 옵션이 기본 동작인지 명확하도록 위계를 포함하세요.

오류 메시지 작성에 대한 더 자세한 정보는 Nielsen Norman 그룹의 Error Message Guidelines를 참고하세요.

오류 상태에 대한 안내를 제공하는 패턴이 현재 계획 중입니다. 기여하고 싶다면 기여 가이드라인을 참고하세요.

심층 대안 (In-depth alternatives)

사용자가 방향을 잡고 시작하도록 돕는 교육적 콘텐츠는, 이른바 빈 공간을 첫 사용자에게 긍정적이고 생산적인 경험으로 바꾸는 또 다른 옵션이에요.

접근 방식을 결정할 때 좋은 경험칙은, 페이지의 주요 리소스는 더 교육적인 접근 방식의 혜택을 받을 수 있는 반면, 보조 리소스에는 기본 빈 상태로 충분할 수 있다는 것입니다.

대안 접근 방식 (Alternative approaches)

Type	Use cases	Goal of the empty state	When to use
In-line documentation	첫 사용(앱 또는 기능), 비워지거나 삭제된 데이터, 구성 필요	사용자가 기능에 대해 더 이해하도록 페이지의 상세 개요를 제공하고 시작할 콜투액션이 최소 하나 주어진다.	주요 기능을 소개할 때 사용 혜택을 보여줄 기회가 있다. 더 교육적인 상세가 참여를 이끌 수 있다.
Onboarding	첫 사용	빈 상태에서 시작해 사용자가 앱의 그 영역에 대한 더 깊은 이해를 얻기 위해 맥락적 온보딩 흐름을 시작할 기회가 있다.	더 상세한 개념 설명, 워크플로우 시퀀스 단계, 또는 생산성을 높이는 다른 정보가 필요할 수 있는 주요 기능을 소개할 때. 온보딩 흐름은 보통 사용자에게 선택사항이므로 기본 빈 상태와 함께 사용해야 한다.
Starter content	첫 사용	사용자는 데이터와 상호작용하고 만져보며 시스템을 배울 수 있다. 사용자는 기본 설정 작업이 처리되어 생산성에 바로 뛰어들 수 있다.	복잡한 상황에서 스타터 콘텐츠는 학습과 설정 구성 모두에서 사용자에게 많은 시간을 절약해 줘서 좋은 선택이 될 수 있다.

인라인 문서 (In-line documentation)

인라인 문서는 첫 사용을 위한 기본 빈 상태의 확장이에요. 주요 기능이 처음 소개될 때 가장 도움이 되며, 더 많은 상세를 제공하고 혜택을 강조합니다. 데이터로 채워진 공간의 이미지를 포함하면 관심과 사용을 불러일으키는 데 도움이 될 수 있어요. 점진적 공개 모델을 따라 더 상세한 문서로 연결되는 링크를 제공할 수 있습니다.

인라인 문서 고려 사항 (Considerations for in-line documentation)

• 테스트 결과 사용자가 기능이나 개념을 이해하지 못하는 것으로 나타나면, 더 많은 상세가 사용을 장려할 수 있어요.
• 이 접근 방식은 제품 이미지를 사용할 경우 기본 빈 상태보다 더 높은 수준의 유지 관리가 필요할 수 있습니다. 이미지는 최신 상태로 유지해야 하기 때문이에요. 앱이 번역된다면 지역화된 이미지를 제공하는 추가 작업이 있을 수 있습니다.
• 콘텐츠를 한 기능으로 제한하세요. 앱의 다른 영역에 대해 이야기하지 마세요. 사용자가 할 수 있는 일이 여러 가지라면 가장 중요한 것을 골라 그에 집중하세요.

온보딩 (Onboarding)

온보딩 서비스는 사용자를 빈 상태로 안내하거나 향상시킬 수 있는 다양한 맥락적 인앱 가이드 옵션을 제공합니다.

빈 상태 메시지를 보충하는 정보로 사용자를 워크플로우에 단계별로 안내하면 사용자를 빠르게 편안한 상태로 만들 수 있어요. 투어는 기능의 위치를 짚어주고, 핵심 작업에 더 많은 상세를 제공하며, 혜택을 강조할 수 있습니다. 온보딩 흐름은 사용자에게 선택사항이므로 기본 빈 상태와 함께 사용해야 합니다.

온보딩 고려 사항 (Considerations for onboarding)

• 측정 지표가 사용자가 빈 상태가 있어도 기능 사용을 시도하지 않는 것을 보여준다면 보충 정보가 필요할 수 있어요. 빈 상태는 온보딩 시퀀스의 출발점으로 사용되어 사용자가 프로세스를 통과하도록 도울 수 있습니다.
• 온보딩 타사 서비스를 사용할 때는 언제든지 측정 지표를 볼 수 있고, 콘텐츠 조정을 즉시 배포할 수 있습니다.
• 온보딩 흐름은 보통 사용자에게 선택사항이므로 기본 빈 상태와 함께 사용해야 해요.
• 고려할 또 다른 측면은 유지 관리와 이를 유지하는 데 필요한 헌신 수준입니다.

온보딩에 대한 안내를 제공하는 패턴이 현재 계획 중이에요. 여기에는 사용자 요구와 디자인 솔루션을 맞추는 프레임워크, 복사 작성 팁, 일반 모범 사례가 포함됩니다. 기여하고 싶다면 기여 가이드라인을 참고하세요.

스타터 콘텐츠 (Starter content)

달리 빈 공간을 다루는 또 다른 전략은 새 사용자가 걱정 없이 앱을 빠르게 시작할 수 있게 하는 사전 구축 콘텐츠를 제공하는 것입니다.

앱용 사전 구축 콘텐츠 (Pre-built content for apps)

스타터 콘텐츠는 사용자가 샘플 데이터로 주요 기능과 함수에 대해 뛰어들어 배울 기회를 제공할 수 있어요. 사용자는 만져보며 콘텐츠를 검토하고 심각한 결과 없이 삭제할 수 있습니다. 여기에 개인화를 포함할 수 있다면 긍정적 경험에 더해집니다.

사전 구축 콘텐츠로 시작 지점이 있으면 챗봇 만들기가 쉬워요. 누군가 심각한 결과 없이 인터페이스를 탐구할 수 있다고 느끼면, 탐구하지 않는 사람보다 더 많이 배우고 그것에 대해 더 긍정적으로 느낄 가능성이 높습니다. 좋은 소프트웨어는 사람들이 낯선 것을 시도하고, 물러나고, 다른 것을 시도하도록—모두 스트레스 없이—허용합니다.

• Jenifer Tidwell, Designing Interfaces, (O’Reilly Media, 2011), 9.

사전 구성 키트와 워크플로우 (Pre-configured kits and workflows)

스타터 콘텐츠의 다른 옵션은 사전 구성된 키트와 워크플로우예요. 코드와 API 자격 증명을 포함한 사전 구성 키트는 빠른 시작 경로를 제공할 수 있습니다.

스타터 콘텐츠는 사전 구성된 워크플로우 형태를 취할 수도 있는데, 여기서 서비스 구성이 자동화되어 사용자를 긴 설정 프로세스의 지루함에서 구해줍니다.

스타터 콘텐츠 고려 사항 (Considerations for starter content)

• 사용자에게 가장 도움이 될 워크플로우 사전 구성을 결정하기 위해 전체 제품 팀과 사전 계획이 필요해요.
• 사용자가 스타터 콘텐츠를 삭제할 수 있다면 백업으로 기본 빈 상태가 필요합니다.

접근성 (Accessibility)

대부분의 빈 상태 일러스트레이션은 장식으로 간주되므로 화면 리더가 건너뛰어야 해요.

장식 이미지는 실용적이거나 정보적인 목적을 제공하지 않고 시각적 공백을 채우기 위해 포함된 이미지입니다. 장식 이미지에 정보 콘텐츠를 포함하지 마세요.

Web Content Accessibility Guidelines는 장식 이미지에 빈 alt 태그를 주거나 role을 presentation으로 지정하도록 요구해요. 빈 alt 태그가 더 널리 지원되므로, WCAG 가이드를 따르고 지원이 더 보편화될 때까지 role을 presentation으로 지정하는 것을 피할 것을 권장합니다.

관련 (Related)

컴포넌트 (Components)

• 버튼 (Button)
• 데이터 테이블 (Data table)
• 타일 (Tile)

패턴 (Patterns)

• 오류 상태 (Error states, 향후)
• 온보딩 (Onboarding, 향후)

참고 자료 (References)

• Jakob Nielsen, Error Message Guidelines (Nielsen Norman Group, 2001)
• Jakob Nielsen and Page Labuheimer, Top 10 Application-Design Mistakes (Nielsen Norman Group, 2019)
• Jenifer Tidwell, Designing Interfaces (O’Reilly Media, 2nd edition, 2011)
• Web Content Accessibility Guidelines (W3C, 2018)
• Kathryn Whitenton, 3 Guidelines for Search Engine "No Results" Pages (Nielsen Norman Group, 2014)

더 알아보기 (Learn more)

빈 상태는 데이터가 없을 때 사용자를 정보에 밝게 하고 생산적인 경로로 안내하는 강력한 패턴이에요. 데이터 없음·사용자 동작·오류 관리라는 세 유형에 상황에 맞는 접근을 하고, 더 교육적인 인라인 문서·온보딩·스타터 콘텐츠를 보조로 활용할 수 있습니다. 장식 이미지는 화면 리더가 건너뛰도록 빈 alt 태그를 주고, 막다른 길을 만들지 않으며 맥락에 맞는 평이한 언어를 쓰는 것이 핵심입니다.