알림 센터 및 이벤트
1) 목적
알림 센터는 동작 흐름을 방해하지 않으면 서 시스템과 사용자 간의 피드백을 제공합니다. 비동기식 이벤트 (베팅, 트랜잭션, 보너스, KYC 상태) 를 캡처하고 알림을보고 필터링하고 관리 할 수있는 단일 장소를 제공합니다.
주요 원칙:- 방해받지 않고 알리십시
- 복제하지 않고 우선 순위를 정하십시오
- 그들이 적절한 곳에서 행동을 취하십시
2) 알림의 종류 및 해당 응용 프로그램
3) 우선 순위 및 중요도 수준
1. 중요 (오류, 실패, 보안) -즉시주의가 필요합니다 (모달/배너).
2. 중요 (결제, 내기, 현금 인출) -알림 센터의 토스트 + 항목.
3. 정보 (뉴스, 보너스) -배지 및 테이프.
4. 소셜 (친구, 채팅, 토너먼트) -UI를 차단하지 않는 그룹화 된 알림.
UX 규칙: "화면 당 하나 이하의 활성 알림".
더 많은 것이 있으면 "3 개의 새로운 이벤트" 를 결합하십시오.
4) 알림 센터 아키텍처
4. 1 이벤트 소스
백엔드 → 이벤트 버스 → 알림 서비스 → UI.
이벤트는 '유형', '심각도', '컨텍스트', 'ttl', 'user' 로 분류됩니다.
'알림 _ 상점' (Redis + DB) 에 보관되었습니다.
4. 2 클라이언트 흐름
WebSocket/SSE 계정을 실시간으로 사용합니다.
지역 상태 → 10-20 알림의 게으른로드.
사용자의 동의하에 선택 사항 인 API (모바일/브라우저) 를 푸시하십시
4. 3 데이터 모델 (예)
json
{
"id": "n12345",
"type": "deposit_success",
"severity": "info",
"title": "Replenishment successful,"
"message": "You made 500 ₴ through Papara,"
"timestamp": "2025-11-03T19:20:00Z",
"context": { "transactionId": "tx123" },
"read": false,
"action": {"label": "View," "url": "/wallet/history "}
}5) UI 구성 요소
5. 아이콘과 배지 1 개
읽지 않은 숫자를 보여줍니다 ('계정 99').
클릭하면 패널/알림 센터를 엽니 다.
'aria-label = "새로운 알림이 있습니다"'; 0- 'aria-hidden = "참"'.
5. 2 알림 패널
카드 목록: 아이콘 → 제목 → 짧은 텍스트 → 시간 → CTA.
상태: 아카이브에서 다운로드한 새, 읽기, 전송 오류.
날짜 별 그룹: 오늘, 어제, 이전.
5. 3 알림 카드
html
<article class="notif new" role="article">
<div class="icon success"></div>
<div class="content">
<h4> Replenishment successful </h4>
<p> 500 ₴ via Papara </p>
<time datetime =" 2025-11-03T19: 20"> 5 min ago </time>
</div>
<button class =" icon" aria-label = "Delete"> </button>
</article>6) 국가와 행동
새로운: 컬러/배경 플레이트로 강조 표시됩니
읽기: 창백한; 배지가 없습니다.
오류: 아이콘 + 재시도.
시스템: 삭제되지 않고 보관되었습니다.
- 스 와이프 (모바일) → 삭제/읽기.
- 버튼: "더 많은", "반복", "숨기기".
- 대량 행동: 모두 읽고, 모두 지우십시오.
7) 시각적 원칙
알림에서 최대 3 줄의 텍스트.
제목은 대담하고 최대 50 자입니다.
- 성공-녹색/' 악센트 성공 '
- 오류 - 빨간색/' 악센트 위험 '
- 정보-파란색/' 악센트 정보 '
- 주의-오렌지/' 악센트 워닝 '
- AA를 대조하면 그림자가 최소입니다.
- 애니메이션: 일정한 움직임없이 페이드/슬라이드
8) 타이밍 및 디스플레이
토스트: 3-5 초, 호버링시 일시 정지.
배너: 행동 전에.
배지: 지금까지 읽지 않은 것이 있습니다.
받은 편지함: TTL 스토리지 (예: 14-30 일).
화면 초점이 손실되면 자동 닫기-조심스럽게 (중요한 상태를 잃지 마십시오).
9) A11y 및 키보드
토스트에는 'role = "상태" (또는 오류에 대한' 경고 ') 가 있습니다.
알림 센터- 'aria-label =' 알림 센터 '와 함께' role = "region" '.
화살표 탐색 및 탭/시프트 + 탭을 지원합니다.
VoiceOver: 추가 될 때 새 알림을 읽습니다 ('aria-live =' polite '').
토스트가 중요한 경우에만 포커스가 나타날 때 "점프" 하지 않습니다.
10) 성능
게으른 적재 및 페이지 매김 (각각 20-30).
(PHP 3 = 3.0.6, PHP 4)
웹 소켓 재 연결 + 백오프.
'변환/불투명도' 에서만 애니메이션.
11) iGaming 시나리오
11. 1 베팅 및 현금 인출
"베팅 수락", "계수 변경", "캐쉬 아웃 완료" -토스트 + 테이프 녹음.
오류가 발생한 경우 - 토스트 "설치 실패", 재시도 기능이 있습니다.
11. 2 지불
"보충 성공" → 토스트.
프로세스 → 테이프 항목, ETA 및 추가 버튼의 출력.
PSP 오류 → 빨간 토스트 + CTA 재시도.
11. 3 보너스 및 프로모션
홈 화면에 배너: "New Tournament", "Deposit Bonus".
알림 센터는 모든 프로모션의 역사를 저장합니다.
마케팅 유형을 숨기거나 취소하는 기능.
11. 4 KYC 및 안전
확인이 완료 될 때까지 지속적인 배너.
"KYC 확인" → 녹색 토스트 + 아카이브 테이프.
"문서 만료" → 알림 + CTA 업데이트.
12) 메트릭
CTR 알림 (유형별).
기각 율 (조치없이 얼마나 폐쇄되었는지).
읽지 않은 사람이 읽을 시간을 계산합니다.
배송 성공률 (실시간 실시간).
이벤트와 쇼 사이의 대기 시간 (대상
웹 소켓/푸시 전송시 오류/재시도 속도.
13) 반 패턴
각 이벤트에서 소리와 팝업.
예측할 수없는 자동 닫기 타이머.
동일한 알림을 반복하십시오
원인이없는 화면 보호기 ("확인", "재부팅").
알림을 마케팅 스팜으로 사용합니
14) 디자인 시스템 토큰
json
{
"toast": {
"durationMs": 4000,
"maxWidth": 400,
"gap": 12,
"radius": 10,
"shadow": "var(--elev-3)"
},
"badge": {
"size": 18,
"color": "var(--accent-info)"
},
"panel": {
"width": 380,
"radius": 12,
"gap": 8,
"padding": "12 16"
},
"a11y": {
"ariaLive": "polite",
"contrastAA": true
}
}15) QA 체크리스트
기능성
- 실시간 전달
- 이벤트 후 토스트가 10ms로 표시됩니다.
- 센터가 동기화됩니다 (읽기/읽지 않음).
- 대량 "모든 것을 읽으십시오" 작동합니다.
UX
- 한 번에 하나 이하의 토스트.
- 알림 수명이 최적입니다 (3-5 초).
- 중요한 알림은 계속 보류 중입니다
- 텍스트는 3 줄, CTA는 1 행입니다.
A11y
- 역할 = "상태" '/' aria-live '가 정확합니다.
- 화살표 및 탭 탐색이 작동합니다.
- AA를 대조하십시오.
성능
- 페이지와 게으른로드.
- > 100 알림에서 프리즈가 없습니다.
- 데이터 압축 및 렌더링 지연.
16) 설계 시스템의 문서
"Toast", 'NotificationItem', 'NotificationCenter', 'BadgeIndicator'.
가이드: 알림 우선 순위, TTL, 그룹화, 카피 라이팅.
패턴: 인스턴트 이벤트를위한 토스트, 중요한 배너, 역사의 중심.
갤러리 수행/수행 금지: "스팜 알림" vs "진정 인식".
간략한 요약
알림 센터는 이벤트받은 편지함이 아니라 신뢰와 투명성의 아키텍처입니다. 잘 설계된 알림은 제어 감각을 만듭니다. 중요한 모든 것이 전달되고 손실되지 않으며 소음이 억제됩니다. 이것은 iGaming에 중요합니다. 사용자가 게임에서 방해받지 않고 베팅, 지불 및 상태를 확인하는 것이 중요합니다.