coastdigitalgroup/coastai-skills

빈 상태 시스템

목적

빈 상태 시스템은 표시할 데이터가 없을 때 나타나는 화면이나 컴포넌트를 설계하기 위한 프레임워크를 제공합니다. 빈 화면이나 일반적인 "결과 없음" 메시지를 보여주는 대신, 이 시스템은 빈 상태를 온보딩, 교육 및 능동적 발견의 기회로 활용합니다. 잠재적인 막다른 지점을 생산적인 순간으로 전환하여 사용자의 모멘텀을 유지하고 시스템의 유용성을 명확히 합니다.

사용 사례

• 첫 실행 경험: 사용자가 처음 로그인하여 아직 콘텐츠를 생성하지 않은 경우 (예: 빈 대시보드 또는 프로젝트 목록).
• 검색 결과: 사용자의 검색어와 일치하는 결과가 없는 경우.
• 필터링: 활성화된 필터 조합으로 인해 결과 그리드가 비어 있는 경우.
• 빈 컨테이너: 빈 장바구니, 비워진 알림 센터, 또는 새로운 즐겨찾기 목록과 같은 특정 UI 요소.
• 오류 상태: 권한 또는 연결 문제로 인해 콘텐츠를 불러오지 못하는 경우 (부차적 사용 사례).

사용하지 말아야 할 경우

• 로딩 상태: 콘텐츠가 곧 나타날 것으로 예상되는 경우 스켈레톤 화면이나 스피너를 사용하세요.
• 영구적인 "죽은" 페이지: 깨진 링크나 삭제된 리소스에는 404 페이지를 사용하세요.
• 부분 콘텐츠: 일부 데이터는 있지만 제한적인 경우, 빈 상태 대신 표준 레이아웃 패턴을 사용하세요.
• 수동적 배경: 의도적으로 비어 있게 디자인된 섹션 (예: 여백 또는 장식용 공백)에는 사용하지 마세요.

입력값

1. 빈 시나리오 유형: 사용자가 직접 비운 상태(성공), 첫 실행 상태(온보딩), 또는 검색 실패(발견)인가요?
2. 사용자 의도: 사용자는 무엇을 달성하거나 찾으려고 했나요?
3. 핵심 가치 제안: 현재 누락된 콘텐츠의 주요 이점은 무엇인가요?
4. 사용 가능한 작업: 사용자를 위한 "단일 최적의 다음 단계"는 무엇인가요?

출력값

1. 빈 상태 청사진: 일러스트레이션, 헤드라인, 본문 카피 및 기본 CTA를 포함한 구조적 정의.
2. 컨텍스트 로직: 빈 상태가 트리거되어야 하는 시기와 위치에 대한 규칙.
3. 발견 전략: 빈 공간을 채우기 위한 추천 콘텐츠 또는 교육 팁에 대한 제안.

워크플로

1. 빈 트리거 식별

상태가 비어 있는 이유를 파악하세요. 이를 분류하여 적절한 어조를 선택합니다:

• 첫 실행 (교육): 첫 번째 "생성" 작업을 장려합니다.
• 사용자 정리 (긍정): 완료를 알립니다 (예: "모든 것이 처리되었습니다!").
• 검색/필터 (도우미): 검색을 확장하거나 방향을 전환할 방법을 제공합니다.

2. 시각적 계층 구조 설정

빈 상태를 "3점 규칙"(빈 상태에 맞게 수정)을 사용하여 구성합니다:

• 앵커 (시각적): 어조를 설정하는 방해되지 않는 아이콘 또는 일러스트레이션.
• 컨텍스트 (메시징): 왜 비어 있는지 설명하는 명확한 헤드라인과 이를 변경하는 방법을 설명하는 본문 카피.
• 타겟 (CTA): 콘텐츠 생성을 트리거하거나 필터를 재설정하는 기본 버튼.

3. 행동 중심 카피 작성

• 헤드라인: 구체적으로 작성하세요. "항목 없음" 대신 "아직 생성한 프로젝트가 없습니다."를 사용하세요.
• 본문: 가치를 제공하세요. "프로젝트는 작업을 구성하는 데 도움이 됩니다. 첫 번째 프로젝트를 만들어 시작하세요."
• CTA: 혜택 중심의 동사를 사용하세요. "프로젝트 생성" 또는 "무료 체험 시작".

4. 발견 경로 제공 (보조 작업)

직접적인 "생성" 작업이 없는 경우 (검색과 같은 경우), 대안을 제공하세요:

• 재설정: 모든 필터를 지우는 링크.
• 제안: 인기 카테고리 또는 "혹시 ...을(를) 찾으셨나요?" 제안.
• 교육: 문서 또는 비디오 튜토리얼 링크.

5. 기술적 제약 조건 정의

• 반응형: 작은 뷰포트에서도 빈 상태가 중앙에 위치하고 읽기 쉽도록 보장합니다.
• 접근성: 동적으로 나타날 때 상태가 알려지도록 적절한 ARIA 역할 (예: role="status")을 사용합니다.

결정 규칙

• 하나의 행동 원칙: 잠재적인 혼란 상황에서 사용자를 압도하지 않도록 정확히 하나의 기본 작업에 집중하세요.
• 유머보다 공감: 약간의 개성은 괜찮지만, 명확성과 도움을 최우선으로 하세요. 해결책을 숨기는 "영리한" 카피는 피하세요.
• 직접 vs. 간접:
  • 사용자가 해결할 수 있는 경우 (예: 첫 실행), 기본 CTA를 사용하세요.
  • 사용자가 해결할 수 없는 경우 (예: 검색 실패), 제안 또는 재설정 링크를 사용하세요.
• 이미지 관련성: 특정 컨텍스트를 강화하는 일러스트레이션을 사용하세요 (예: 검색에는 돋보기, 파일에는 폴더).

제약 조건

• 접근성: 빈 상태 일러스트레이션은 aria-hidden="true"를 사용하거나 순수 장식용이어야 합니다. 텍스트는 WCAG AA 대비 비율을 충족해야 합니다. 기본 CTA와 모든 보조 링크/버튼은 WCAG 2.2 SC 2.5.8 (최소 24x24px 타겟 크기)을 충족해야 합니다.
• 크기: 빈 상태는 대체하는 실제 콘텐츠의 컨테이너 너비를 초과해서는 안 됩니다.
• 일관성: 패턴 인식을 구축하기 위해 사이트 전체의 모든 빈 상태에 동일한 시각적 스타일과 레이아웃을 사용하세요.

일반적인 실패 패턴

• "죽은 길": 사용자에게 무언가가 비어 있다고 알리면서도 해결 방법을 알려주지 않습니다.
• 과잉 디자인: 기본 CTA에서 주의를 분산시키는 복잡하고 무거운 일러스트레이션을 사용합니다.
• 부정적 어조: 오류나 실패처럼 들리는 언어를 사용합니다 (예: "검색 실패!").
• 일반적 카피: 검색부터 첫 번째 온보딩까지 모든 것에 "결과 없음"을 사용합니다.
• 모바일 오버플로: 데스크톱에서는 멋져 보이지만 모바일에서 CTA를 보기 위해 세로 스크롤이 필요한 디자인.

검증 기준

• 빈 상태가 나타나는 이유를 명확히 설명합니다.
• 명확하고 실행 가능한 기본 CTA 또는 "재설정" 경로가 있습니다.
• 시각적 계층 구조가 시각적 요소에서 CTA로 시선을 이끕니다.
• 어조가 컨텍스트(온보딩 vs. 검색 실패)와 일치합니다.
• 상태에 접근성이 확보되었습니다 (대비, 키보드 탐색, role="status" 또는 동등한 라이브 리전을 통한 스크린 리더 알림).
• 기본 CTA가 WCAG 2.2 SC 2.5.8 (24x24px 최소 타겟 크기)을 충족합니다.
• 레이아웃이 반응형이며 부모 컨테이너 내에서 중앙에 배치됩니다.