Empty State
빈 상태
목록이나 작업 공간에 현재 내용이 없으면 빈 상태가 나타납니다. 이유를 설명하고 유용한 다음 단계를 제공합니다.
Save a guide to keep the patterns your team uses most within reach.
실제 예시
새로운 프로젝트에는 연구가 없으며, 소유자는 연구를 생성할 수 있습니다. 페이지에는 이것이 명확히 표시되어 있으며, 가치를 설명하고 'Create study'를 제공합니다. 검색 결과는 쿼리를 변경하는 데 도움을 줄 필요가 없으며, 처음 사용 시 환영 문구가 아닙니다.
주요 부분
- 01비어 있는 이유
- 02문맥 설명
- 03유효한 다음 단계
사용할 때
이유가 처음 사용, 삭제된 데이터, 필터, 권한 또는 실패인지 확인한 후 이 용어를 사용하십시오.
다음 경우에는 사용하지 마세요
데이터가 로딩 중이거나 오류가 숨겨져 있을 때, 밝고 빈 자리 표시자를 보여주지 마세요.
코드에서 사용된 이름
zero-content reason → explanation + next action 출시하기 전에
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome：Complete the task with 빈 상태 (Empty State)。 User context：새로운 프로젝트에는 연구가 없으며, 소유자는 연구를 생성할 수 있습니다. 페이지에는 이것이 명확히 표시되어 있으며, 가치를 설명하고 'Create study'를 제공합니다. 검색 결과는 쿼리를 변경하는 데 도움을 줄 필요가 없으며, 처음 사용 시 환영 문구가 아닙니다. Recommended pattern：빈 상태 (Empty State)。 Why it fits：이유가 처음 사용, 삭제된 데이터, 필터, 권한 또는 실패인지 확인한 후 이 용어를 사용하십시오. Do not use it when：데이터가 로딩 중이거나 오류가 숨겨져 있을 때, 밝고 빈 자리 표시자를 보여주지 마세요. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary)：해당 출처에 대해 공식적인 것입니다. 다른 플랫폼이나 팀은 그 용어를 다른 방식으로 사용할 수 있습니다. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
이 요청을 확인하세요
Review how 빈 상태 (Empty State) is used now. Definition: 목록이나 작업 공간에 현재 내용이 없으면 빈 상태가 나타납니다. 이유를 설명하고 유용한 다음 단계를 제공합니다. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.