1. 엠프티 스테이트(Empty states)의 정의

엠프티 스테이트는 사용자에게 표시할 데이터가 없는 경우에 제공합니다.
사용자가 페이지 진입 시 해당 페이지의 데이터가 삭제되었거나 사용할 수 없는 경우에 사용할 수 있습니다.

2. 유형

• 데이터가 없는 엠프티 스테이트

  

• 결과 데이터가 없는 엠프티 스테이트

  

• 시스템 오류 엠프티 스테이트

  

3. 데이터가 없는 엠프티 스테이트 구성 옵션

• 

• 이미지(선택 사항)

  상황에 관련된 이미지를 제공합니다.

• 

• 제목

  현재 페이지의 상태를 간결하게 나타내는 텍스트를 제공합니다.
  (예: ‘데이터를 추가하고 시작하기’ 또는 ‘아직 데이터가 없습니다.’)

• 

• 메시지

  사용자에게 다음 행동을 유도하도록 설명을 제공할 수 있습니다.
  패널에는 단순한 메시지와 필요에 따라 버튼, 링크를 제공할 수 있으며, 메시지 제공 시 사용자가 명확하게 인지할 수 있도록 해야 합니다.

• 

• 버튼(선택 사항)

  메시지 내용에 대해 보조 역할로 기능을 제공해야 하는 경우 버튼을 포함하여 제공할 수 있습니다. 단 여러 개의 버튼을 제공하지 않습니다.

4. 결과 데이터가 없는 엠프티 스테이트 구성 옵션

• 

• 이미지(선택 사항)

  상황에 관련된 이미지를 제공합니다.

• 

• 제목

  현재 페이지의 상태를 간결하게 나타내는 텍스트를 제공합니다.
  (예: ‘검색 결과가 없습니다.’ 또는 ‘ ‘검색어’에 대한 검색 결과가 없습니다.’)

• 

• 메시지

  사용자에게 다음 행동을 유도하도록 설명을 제공할 수 있습니다.
  패널에는 단순한 메시지와 필요에 따라 버튼, 링크를 제공할 수 있으며, 메시지 제공 시 사용자가 명확하게 인지할 수 있도록 해야 합니다.

• 

• 링크(선택 사항)

  메시지에 대해 보충적으로 정보를 제공해야 하는 경우 링크를 포함하여 제공할 수 있습니다.

5. 시스템 오류 엠프티 스테이트 구성 옵션

• 

• 이미지(선택 사항)

  권한의 문제가 생겼을 때와 시스템 문제 등 오류가 있는 경우 제공하며, 상황에 관련된 이미지를 제공합니다.

• 

• 제목

  현재 페이지의 상태를 간결하게 나타내는 텍스트를 제공합니다.
  (예: ‘사이트와 연결할 수 없습니다’ 또는 ‘이 페이지를 표시할 수 없습니다’)

• 

• 메시지

  사용자에게 다음 행동을 유도하도록 설명을 제공할 수 있습니다.
  패널에는 단순한 메시지 또는 버튼, 링크로 다양하게 제공할 수 있으며, 메시지 제공 시 사용자가 명확하게 인지할 수 있도록 제공해야 합니다.

• 

• 버튼(선택 사항)

  메시지 내용에 대해 보조 역할로 기능을 제공해야 하는 경우 버튼을 포함하여 제공할 수 있습니다. 단 여러 개의 버튼을 제공하지 않습니다.

6. 오류 안내

데이터가 없는 경우에도 엠프티 스테이트를 제공하지만, 다양한 오류로 인해 엠프티 스테이트를 제공하기도 합니다. 사용자에게 오류 상황 중 어떤 오류에 해당되는 지 인지할 수 있도록 오류 안내 문구를 제공하여 문제를 해결할 수 있도록 도움을 줍니다.

시스템에 사용되는 상황별 문장 사례는 아래와 같습니다.

권한 문제로 오류가 발생하는 경우에 사용합니다.

시스템 문제로 오류가 발생하는 경우에 사용합니다.

추가 프로그램이 없어 오류가 발생하는 경우에 사용합니다.

지원되지 않는 작업으로 오류가 발생하는 경우에 사용합니다.

7. 배치

콘텐츠 영역에서 엠프티 스테이트 제공을 넓은 공간에 배치하는 경우 좌측 또는 중앙에 배치할 수 있습니다.
만약 한 화면에 여러 개의 엠프티 스테이트가 제공되는 경우(예: 대시보드인 경우)와 엠프티 스테이트를 제공하는 공간이 좁은 경우 텍스트만 제공하는 것을 권장합니다.

모바일의 경우 좁은 공간에 엠프티 스테이트를 제공하는 경우 텍스트만 제공하며, 전체 화면이나 넓은 공간에 제공하는 경우 좌측 또는 중앙에 배치할 수 있습니다.