ESC 닫기

K-BINGO 글로벌 LIVE 멀티플레이어 고도화

개요

K-BINGO를 전세계가 실시간으로 함께하는 플랫폼으로 고도화. Socket.io 멀티플레이어, 모바일 참가자 뷰, 신규 테마 2종, 다국어 UI 구현.

무엇을 했는지

1. 실시간 멀티플레이어 (Socket.io)

• kbingo-server.js에 Socket.io 통합 (http.createServer + io)
• 호스트: 방 생성 → 6자리 룸코드 → 참가자 대기 → 추첨 브로드캐스트
• 참가자: 룸코드 입장 → 5×5 카드 자동 생성 → 실시간 추첨 수신 → 마킹 → 빙고 선언
• 이벤트: host:create/start/draw/end, player:join/mark/bingo, room:draw/bingo/ended
• 룸 자동 정리 (3시간 만료, 호스트 연결 해제 시 종료)
• REST API: GET /api/rooms/:code (방 상태 조회)

2. 모바일 참가자 뷰 (player.html)

• URL: kbingo.crowny.org/play 또는 /play/ROOMCODE
• 모바일 퍼스트 반응형 디자인
• 입장 화면: 룸코드 입력 + 닉네임 + 언어 선택
• 게임 화면: 5×5 카드, 호출된 항목 자동 하이라이트 (주황 점멸)
• 탭하여 마킹, 빙고 라인 자동 감지, BINGO 버튼 활성화
• 콜 배너: 최신 추첨 항목 실시간 표시 (이모지+텍스트+카테고리)
• 위너 오버레이 + 컨페티 애니메이션

3. 다국어 UI (4개 언어)

• 한국어(ko), English(en), 日本語(ja), 中文(zh)
• player.html에 언어 전환 버튼
• I18N 객체로 모든 UI 텍스트 관리

4. 신규 테마 2종

K-드라마 빙고 (75항목)

• D (Drama/히트작): 오징어게임, 눈물의여왕, 사랑의불시착 등 15작품
• R (Role/캐릭터): 독고진, 성기훈, 전지현, 마동석 등 15인
• A (Award/수상): 에미상, 칸영화제, 넷플릭스1위 등 15성과
• M (Music/OST): 봄날, Beautiful, Stay With Me 등 15곡
• S (Spot/촬영지): 남이섬, 주문진해변, 강릉 등 15곳

K-뮤직 빙고 (75항목)

• K (K-Pop/아이돌): BTS, 블랙핑크, 뉴진스 등 15팀
• M (Melody/명곡): Dynamite, Gangnam Style, Ditto 등 15곡
• U (Unique/장르): K-Pop, 트로트, 발라드 등 15장르
• S (Stage/무대): MAMA, 코첼라, 잠실주경기장 등 15무대
• C (Culture/문화): 팬덤, 응원봉, 포토카드 등 15문화

5. 호스트 뷰 업데이트

• kbingo.html 시작화면에 5개 테마 카드 + LIVE 멀티플레이 버튼
• LIVE 셋업 화면 (테마/제목/부제목 설정 → 방 만들기)
• 게임 중 라이브 패널 (룸코드, 참가자수, URL 표시)
• 인쇄카드 테마 셀렉트에 kdrama, kmusic 추가
• Socket.io 클라이언트 연결 (추첨 시 자동 브로드캐스트)

6. 한선씨 동반

• 한선씨/라이브빙고.한선 — 룸코드생성, 참가자카드생성, 빙고체크(12줄), 5테마 목록
• 컴파일 성공 (hanseonc_high → 1,799 큐브)

아키텍처

[호스트 브라우저]          [서버 7762]           [참가자 모바일]
kbingo.html    ←Socket.io→ kbingo-server.js ←Socket.io→ player.html
 └ 전광판 5×15              └ Room 관리              └ 5×5 카드
 └ 추첨 + TTS               └ 카드 생성              └ 자동 마킹
 └ LIVE 패널                 └ 빙고 검증              └ 빙고 선언

관련 파일

• /Users/ef/crowny-play/kbingo-server.js — Socket.io 멀티플레이어 서버
• /Users/ef/crowny-play/src/kbingo/engine.js — 5테마 데이터 (375항목)
• /Users/ef/crowny-play/public/kbingo.html — 호스트 SPA (LIVE 모드)
• /Users/ef/crowny-play/public/player.html — 참가자 모바일 SPA (다국어)
• /Users/ef/crowny-play/한선씨/라이브빙고.한선 — 동반 코드
• /Users/ef/crowny-play/CLAUDE.md — v0.3.0 업데이트

테마 현황

테마	항목수	카테고리
숫자	75	B/I/N/G/O (1~75)
K-한글	75	ㄱ/ㄴ/ㅁ/ㅅ/ㅇ (고유어)
K-컨텐츠	75	먹거리/볼거리/즐길거리/자랑거리/누릴거리
K-드라마	75	히트작/캐릭터/수상/OST/촬영지
K-뮤직	75	아이돌/명곡/장르/무대/문화

잔여 이슈

• QR 코드 자동 생성 (룸코드 → QR → 대형 스크린 표시)
• 참가자 카드 인쇄 기능 (player.html에서)
• 호스트↔참가자 채팅
• 글로벌 리더보드 (국가별)
• PWA 지원 (오프라인 캐싱)