아바타, 상태 및 존재

1) 아바타의 역할 및 UX 상태

• 인식 보장 (목록, 채팅, 테이블);
• 즉각적인 존재 피드백 제공 (온라인/오프라인);
• 인터페이스의 활기 감을 만듭니다 (특히 실시간 게임, PvP, 채팅).
• 플레이어 간의 상호 작용에 대한 신뢰와 참여를 증

2) 타이폴로지

3) 차원과 모양

32 px-최소 크기 (목록, 테이블, 채팅).
40-48 px-프로필, 카드, 내비게이션 패널.
64-96 px-대형 프로파일 블록, 스트림 룸.
모양: 브랜드/운영자를위한 라운드-표준, 정사각형.
반경: 원의 경우 '50%' 또는 소프트 사각형의 경우 '8-12 px'.

4) 로딩 및 폴백

• 서버의 리소스 및 최적화 (예: 128, 256, 512 px).
• 부재 중-초기 아바타: 이름의 첫 글자, 팔레트의 배경.
• 사용자 아이콘으로 가짜 자리 표시자를 불러오는

html
<img class="avatar" src="/u/123/avatar.jpg" alt="Аватар игрока Alex" onerror="this.src='/assets/avatar-fallback.png'">

5) 컬러 팔레트 및 배경

이름 해시로 배경의 자동 생성: 안정적이지만 고유 한 색상.
배경과 이니셜 사이의 AA를 대조하십시오.
어두운 테마를 위해-15-20% 디밍.
임의의 "유독 한" 조합을 피하십시오. 팔레트를 6-10 톤으로 제한합니다.

6) 존재 표시

6. 1 기본 상태

6. 2 활동 수준 존재

또한 동작을 보여줄 수 있습니다

"놀이"

"내기를 만든다"

"토너먼트에서"

"절망에"

6. 3 기술 구현

WebSocket을 통해 30 초마다 '하트 비트' 를 보냅니다.
신호> 60 초 → '오프라인' 이없는 경우.
활성화되면 (스크롤, 클릭, 베팅) '온라인' 상태 → 업데이트됩니다.
스토리지에서: TTL 120 sec (Redis/Realtime API).

7) 디스플레이 패턴

7. 1 사용자 목록에서

오른쪽 아래 모서리 (8-10 px) 에 점이있는 아바타 + 상태.
툴팁: "온라인 "/" 마지막 로그인 5 분 전".

7. 채팅 중 2

아바타 + 닉네임 + 미니 존재 ('온라인/오프라인').
마지막 메시지와 시간.
소켓 이벤트 'user _ presence' 를 통한 동기화.

7. 리더 보드에서 3

아바타 + 이름 + 레벨/순위.
호버 → 미니 프로필 (마지막 활동, 국가, 승리).

7. 4 플레이어 카드 (PvP/Live)

큰 아바타 (64-80 px).
라이브 상태: "게임에서", "일시 정지 중", "상대를 기다리는 중".
뇌졸중 색 = 상태 ('테두리 색' var).

8) 가용성 (A11y)

상태를 배경으로 대조하려면 AAA를 대조하십

이름과 상태가 'alt': "Alex Player Avatar-Online".
상태-색상뿐만 아니라 텍스트 중복.
상태가 변경 될 때 'aria-live = "polite"'.
깜박이는 표시등을 사용하지 마십시오.

9) 상태 및 오류 다운로드

로딩: 프레임이없는 회색 원/골격.
오류: 대체 아이콘 + "아바타로드되지 않음" 프롬프트.
빈: 초기 또는 시스템 자리 표시자.

10) 개인 정보 보호

게스트 계정에는 존재가 숨겨져 있습니

사용자는 존재를 제어해야합니다 (온/오프).
설정: "온라인 상태 표시 "/" 마지막 활동 표시".
PvP에서는 정확한 시간없이 "사용 가능/바쁜" 만 표시 할 수 있습니다.

11) 존재 API의 구현

json
{
"userId": "u123",
"presence": "online",
"activity": "playing",
"lastSeen": "2025-11-03T18:52:00Z"
}

• 채널 '/present/{ userID} '을 구독하십시오.
• 소켓을 통한주기적인 핑/퐁.
• TTL을 통한 자동 상태 업데이트.

js socket.on('presence:update', data => {
document.querySelector(`#u${data.userId}.status`).dataset.state = data.presence;
});

12) iGaming의 세부 사항

라이브 게임: 상태 "방 번호 12", "딜러를 기다리는 중", "배포가 진행 중"

토너먼트: 참가 배지, 최종 타이머.
협동 PvP: 상대 발견/비활성 활동.
소셜 피드: 미니 배지 토너먼트 또는 VIP 레벨의 아바타.
베팅은 온라인으로 바쁩니다.

13) 측정 및 성능

존재 대기 시간: 이벤트에서 UI 업데이트까지 1 초

하트 비트 성공률: 99% 이상.
클라이언트의 CPU로드: 1000 업데이트/분에서 자동으로 5%.
TTL 정확도: 사용자는 출시 후 온라인으로 "매달리지" 않습니다.

메모리 누출 테스트: 서명되지 않은 청취자 제거

14) 안티 패턴

'alt' 가 없거나 배경이없는 아바타 - UI의 "hool".
상태 색상 만 (텍스트/툴팁 없음).
번쩍이는 점/펄스 링-성가신.
업데이트 제한 → 웹 소켓 과부하.
가장 가까운 두 번째 (개인 정보 침해) 에 "마지막으로 본" 을 표시합니다.
동일한 그리드에서 아바타의 다른 형식/비율.

15) 디자인 시스템 토큰 (예)

json
{
"avatar": {
"sizes": { "xs": 24, "sm": 32, "md": 40, "lg": 64 },
"radius": { "circle": "50%", "square": 8 },
"border": { "width": 2, "color": "var(--bg-elevated)" }
},
"presence": {
"dotSize": 10,
"gap": 2,
"colors": {
"online": "#00C853",
"idle": "#FFD600",
"busy": "#D32F2F",
"offline": "#9E9E9E"
}
},
"motion": {
"updateMs": 150,
"fadeMs": 120
},
"a11y": {
"contrastAA": true,
"textLabel": true
}
}

16) QA 체크리스트

UI

• 치수와 반지름은 일관성이 있습니다. 아바타 중심.
• 대조 AA; 순수한 색상 상태가 없습니다.
• Folback 초기보고 읽으십시오.
• 툴팁 또는 텍스트 상태가 있습니다.

존재

• 이벤트 후 1 초 후에 상태가 업데이트됩니다.
• 재 연결하는 동안 오프라인 → 온라인이 정확합니다.
• 스파이크 없음 (이벤트 중복 제거).
• 유휴 (유휴> 5 분) 가 고려됩니다.

프라이버시

• 존재 설정이 작동합니다.
• 마지막으로 몇 분/시간으로 반올림했습니다.
• 불필요한 활동 공개는 없습니다 (예: 베팅).

성능

• 하트 비트는 안정적이며 WebSocket은 백오프와 자동 재 연결됩니다.
• 1000 개의 업데이트로 메모리 누출이 없습니
• 표시 될 때 TTFF λ100 ms.

17) 설계 시스템의 문서

'아바타', '프레젠시도 트', '사용자 카드', '활성화 배지', '실제 상태'.
패턴: "대체 아바타", "상태 포인트", "실시간 업데이트 존재", "개인 모드".
토큰: 크기, 색상, 반경, TTL 업데이트, 대비.
Do/Do n 't: 텍스트가없는 색상 (하지 않음), 하나의 목록에있는 원형 및 사각형 모양, 안정적인 치수 및 스트로크 (하지 않음).

간단한 요약

아바타와 지위는 장식 요소 일뿐만 아니라 사용자와 시스템 간의 통신 언어입니다. 일관된 색상, 읽을 수있는 캡션, 올바른 동기화 및 개인 정보 보호에 대한 존중은 iGaming에서 특히 중요한 "살아있는" 공간을 만듭니다. 경기장, 토너먼트, 라이브 채팅 또는 친구와 베팅 할 때. 존재는 인터페이스를 역동적이고 인간적으로 만들지 만 정보 내용과 침묵의 균형으로 만 가능합니다.