받은 키워드 피드백 UX 개선 검토

[soohyunme]

배경

/demo/play/game에서 받은 키워드를 빙고판 중앙 오버레이로 보여주는 방식이 현재 실제 사용자 빙고 화면의 전역 토스트 방식보다 맥락 전달이 더 명확해 보입니다.

현재 실제 사용자 빙고 화면은 키워드 수신 시 전역 토스트를 띄우고, 새로 채워진 보드 칸에 is-new, is-animated, is-latest 기반 애니메이션을 적용합니다. 반면 데모 화면은 받은 키워드가 빙고판에 반영된다는 점을 보드 중앙 오버레이로 직접 보여줍니다.

검토할 방향

• 실제 사용자 빙고 화면에서도 받은 키워드는 빙고판 근처 또는 빙고판 중앙 오버레이로 안내하는 방식 검토
• 보낸 키워드 피드백과 받은 키워드 피드백의 UI 역할 분리
  • 보낸 키워드: 전송 완료 확인
  • 받은 키워드: 내 보드에 반영되는 변화 안내
• 받은 키워드 중 이미 보드에 있거나 이미 채워진 키워드를 별도로 구분하는 표현 검토
• 새로 채워진 키워드와 이미 있던 키워드를 다른 chip 스타일, 라벨, 또는 그룹으로 분리하는 방안 검토

고려할 상태

• 새로 채워진 키워드
• 받았지만 이미 채워져 있어 추가 변화가 없는 키워드
• 받은 키워드 중 내 보드에 없는 키워드가 있을 경우의 안내
• 빙고 줄 완성 또는 목표 달성 오버레이와의 우선순위
• 모바일 화면에서 보드 중앙 오버레이가 과도하게 화면을 가리지 않는지

제안 작업

1. 키워드 수신 UX 패턴 리서치
2. 실제 사용자 빙고 화면의 현재 토스트/보드 애니메이션 흐름 정리
3. 데모 화면의 보드 중앙 오버레이를 실제 사용자 화면에 적용할 수 있는지 UX 비교
4. new, already_marked, not_on_board 같은 키워드 상태 표현안 설계
5. 모바일/데스크톱 시각 QA 후 실제 화면 적용 여부 결정

완료 기준

• 받은 키워드 피드백의 위치와 표현 방식이 결정된다.
• 새로 반영된 키워드와 이미 있던 키워드를 사용자가 구분할 수 있다.
• 보드 업데이트, 빙고 줄 완성, 목표 달성 피드백이 서로 충돌하지 않는다.
• 모바일과 데스크톱에서 모두 확인 가능하다.