| # | 상태 | 패턴 | 필수 구성 | 규칙 | 적용 화면 |
|---|
| 1 | 빈 상태 | full-area | 아이콘 + 제목 + 다음 행동 1개 + CTA | “데이터가 없습니다”로 끝내지 않고 반드시 다음 행동을 제시. 필터 결과가 0건인 경우는 별도 문구(“조건에 맞는 결과가 없어요 — 필터 초기화”)로 구분 — 진짜 빈 것과 필터로 비어 보이는 것은 대응이 다르다 | 시그니처·룰렛·위젯 목록, /me 인벤토리·즐겨찾기, 소속 계정 목록, 알림 센터, 후원 내역 |
| 2 | 로딩 | skeleton | 실제 레이아웃과 동일한 골격 블록 | 스피너를 쓰지 않는다 — 목록·카드·테이블은 최종 레이아웃과 같은 형태의 스켈레톤. 200ms 미만에 끝나는 응답은 아무것도 표시하지 않음(깜빡임 방지). 버튼 자체의 처리 중 상태만 인라인 스피너 허용 | 라이브 허브, 후원 내역, 테마 갤러리, 대시보드 통계 |
| 3 | 에러(조회) | full-area | 아이콘 + 제목 + 오류 코드·시각 + 재시도 + 고객센터 | 기술 메시지를 그대로 노출하지 않되 오류 코드와 발생 시각은 반드시 표기(CS 대응에 필요). 재시도는 지수 백오프, 3회 실패 후 자동 재시도 중단 | 전 조회 화면 공통 |
| 4 | 실시간 연결 끊김 | banner + 기존 화면 유지 | 배너 + 마지막 갱신 시각 + 자동 재연결 안내 | 화면을 비우지 않는다 — 이미 받은 데이터는 그대로 두고 상단 배너로만 알린다. 복구 시 누락분을 created_at 기준으로 채워 넣고 “+N건 반영됨” 토스트. 방송 중에 쓰는 화면이라 화면이 사라지는 게 가장 위험 | §02 후원 내역(실시간), 리모컨, 배틀 콘솔, 알림 큐 |
| 5 | 결제 실패 | modal | 실패 사유 + “차감되지 않았음” 명시 + 대체 수단 | §00 캐시 모델대로 결제→충전→차감이 한 트랜잭션이라 부분 성공이 없다. 이 사실을 문구로 반드시 알려 “돈만 나갔다”는 오인을 막는다. 사유는 PG 응답을 사용자 언어로 매핑(한도 초과·잔액 부족·카드 정지·인증 실패·네트워크) | §01 후원 페이지 전 탭, 캐시 충전, 구독 결제 |
| 6 | 권한 없음 | full-area | 잠금 아이콘 + 왜 막혔는지 + 대체 경로 | 3가지 원인을 문구로 구분한다 — ⓐ 매니저 권한 범위 밖(account_managers.scope) ⓑ 소속사 편입 계정이라 정산 메뉴 자체가 없음 ⓒ 유료 구독 미가입(subscription_plans.features). ⓒ만 “구독하기” CTA를 노출하고 ⓐⓑ는 대체 경로만 안내 | §08 정산·소속사 관리, §04 시그니처 빙고판, 계정설정 |
| ⑦~⑫ 저장 · 확인 · 뷰포트 — v2.31 신규 |
| 7 | 저장 상태 | 4상태 | 미저장 / 저장 중 / 완료 / 실패 | 저장 실패를 반드시 구현한다 — 저장했다고 믿었는데 반영이 안 된 상태가 가장 위험한 사고 유형이다. 실패 시 저장 바를 닫지 않고 경고색으로 유지하고 변경 내용도 보존한다. 저장 중에는 버튼을 비활성해 중복 클릭을 막는다 | "저장하지 못했습니다" |
| 8 | 확인 L1 | modal | 위젯 삭제, 프리셋 삭제, 채널 연결 해제, 이력 초기화, 룰렛 확률판 삭제 | 기본 포커스는 [취소] — Enter가 파괴 쪽으로 떨어지지 않게 한다. 방송 중이면 🔴 LIVE 문구와 "시청자 화면에서 즉시 사라집니다"를 덧붙이고, OBS 소스 정리 안내도 함께 노출 | — |
| 9 | 확인 L2 | modal + text | 소속 해제, 계정 공유 해제, 정산 등록 정보 삭제, 크루 해체 | 대상명을 정확히 입력해야 실행 버튼이 활성화된다. 되돌릴 수 없고 금전이 걸린 액션에만 쓴다 — 남용하면 L1의 무게가 같이 가벼워진다 | "(주)미디어컬처" |
| 10 | 되돌리기 L0 | toast 5초 | 목록 항목 제거, 알림 삭제, 즐겨찾기 해제, 숨김 닉네임 제거 | 가벼운 액션은 다이얼로그로 막지 않고 즉시 실행 + 5초 되돌리기. 단 방송 중에는 L1으로 승격한다(§00 위험도 규격) | "되돌리기 (5)" |
| 11 | 리모컨 OFF | banner | 위젯 설정 화면 상단 | 위젯의 "사용하기"는 ON인데 리모컨 토글이 OFF라 송출되지 않는 상태. "설정은 했는데 화면에 안 나온다"는 대표 문의 상황이라 화면에서 바로 알려주고 [리모컨에서 켜기] 바로가기를 준다(§00 리모컨 마스터 원칙) | — |
| 12 | 뷰포트 | 정책 표 | 영역별 대응 범위 | 도너 화면은 모바일 우선, 스튜디오는 데스크톱 전용. 리모컨만 예외로 모바일 필수 — 방송 중 PC가 OBS로 점유된 상태에서 폰으로 끄는 것이 유일한 대응 수단이기 때문(§11 뷰포트 정책) | 375 / ≥1280 |
| 13 | 승인됨 · 반영 확인 중 v2.46 | full-area | 경고색 아이콘 + 승인번호·금액·승인시각 + 안내 2줄 + [내역 보기]·[고객센터] | “실패”라고 쓰지 않는다 — 승인은 성공했고 실패한 것은 우리 쪽 반영이다. 재시도 버튼을 두지 않는다(이중 결제 위험을 도너에게 넘기는 것). 승인번호를 노출해 카드 명세서와 대조할 수 있게 한다. 10초 간격 3회 폴링 후 멈추고 알림 안내로 남긴다 — 이탈해도 상태는 서버에 남고 대사 배치가 끝낸다 | 캐시 충전, 잔액 부족 후원(결제 동반), 구독 결제 |