[바이브코딩] 온라인 빙고 게임 만들기

 

아이와 함께 놀기 위해 바이브코딩으로 온라인 빙고 게임을 만들어 봤습니다. 처음에는 종이에 손으로 그려서 만들었는데 막상 해 보니 불편한 점이 많았습니다. 집 바깥에서 늘 종이와 필기구를 가지고 다닐 수도 없고, 주제를 정해서 하면 단어를 생각해내는데 시간이 많이 걸리기도 하고, 서로 이기려다보니 자신만 아는 단어들을 사용해서 서로의 빙고판에 겹치는 것이 없는 경우도 많이 생기더군요. 이건 뭐 전투 빙고도 아니고... 그래서, 폰으로 접속해서 손쉽게 할 수 있도록 만들어 봤습니다. 

 

---

 

1. 개요

• 온라인으로 접속해서 최소 2사람 이상이 참여하는 대전하는 형태의 빙고 게임입니다.
• 게임은 주제를 정하고 그 주제에 맞는 단어들을 이용합니다. 
• 주로 폰에서 하게 될 것이므로 모바일에 맞춰 최적화되도록 합니다. 

 

2. 구현 요구사항

• 단일 HTML 게임으로 생성합니다.
• 기존 만들어둔 Template에 맞춰 진행합니다. (보일러플레이트 생성을 위한 SKILL.md를 이용함)
• 복수의 게임방 관리가 필요합니다. (사용자가 열려 있는 빙고방을 선택해서 진행할 수 있음)
  -> 초기에는 이렇게 만들어서 사용했는데, 사용해보니 사용자가 가족 한 두사람이 함께 하는 게임이라 거의 불필요한 UI가 되어 단순화하기로 했습니다. 

그림 : 게임방 목록두고 참여하도록 했던 초기 방식 예시

 

• 단어 리스트를 타이핑하고 이것을 자동으로 배치하도록 합니다.
  -> 이 방식을 적용해서 해 보니, 플레이어가 어떤 단어들을 사용할지 생각하는 과정에 시간이 많이 걸려 바로바로 게임이 진행되지 못했습니다. 온라인 빙고 게임들이 대부분 숫자를 가지고 하는 이유가 이런 이유가 아닐까 싶었습니다. 

그림 : 시도해봤던 방식 (이후 폐기)

 

• 사용 가능한 단어는 단어목록 형태로 미리 제공되며, 배치는 수동/자동을 둘 다 지원합니다. 
  • 자동인 경우, 랜덤하게 배치할 수 있도록 하고
  • 수동인 경우,  드래그 혹은 선택 후 클릭해서 배치되도록 합니다. 
• 대전 상대는 로그인 되어 있는 플레이어 목록에서 선택할 수 있도록 합니다. 
• 한쪽에서 선택하면 실시간으로 상대쪽에 표시되고, 빙고판정과 최종 승리/패패 판정이 자동화되어야 합니다.
• 승리/패배 판정 후 플레이어들의 빙고판 현황을 보여주는 기능도 포함합니다. 

 

3. 게임 구성

빙고 게임에서 필요한 것은 빙고판, 빙고판에 사용할 단어 목록들, 대전상대 초대, 그리고 상대의 선택에 따른 즉각적인 반응이라고 생각했습니다. 그러면서도 단일 HTML에서 처리하고 싶었죠. 그래서, 각각을 다음과 같이 접근했습니다. 

• 빙고판 : 5x5 (기본값)으로 하고 5개의 빙고를 먼저 완성하는 쪽이 이기는 것으로 함
• 단어 목록 : 총 7개의 카테고리로 나눴습니다. 주로 아이들이 잘 알거나 많이 사용하는 단어들이 있는 것인데, 주된 사용층에 따라 손쉽게 추가, 변경할 수 있습니다.
• 대전상대 초대 : 처음에는 한명이 생성 후 게임방 접속 링크를 생성하는 방식으로 했는데, 실제 해 보니 카톡이나 메시지로 보내고 하는 작업이 생각보다 성가셨습니다. 그래서, 로그인 되어 있는 플레이어 목록을 보여주고 그 가운데 선택해서 직접 초대하는 방식으로 변경했습니다.
• 상대 수에 대한 실시간 반응 : 온라인 대전의 특성 상 상대방에게 즉각적으로 수 반영을 해야 했습니다. 그래서, 이벤트 처리를 할 수 있도록 Firebase라는 실시간 DB를 이용합니다. (사용 후 즉각 삭제 형태면 비용 발생핮지 않습니다)

 

4. 적용 기술

 

적용된 기술을 요약하면 CDN 기반 Firebase + 순수 JavaScript + 반응형 CSS라고 할 수 있습니다. 

 

세부적으로는 다음과 같습니다. 

 

• HTML/CSS/Vanilla JavaScript
  • 순수 DOM 조작으로 화면 전환, 모달, 빙고판 렌더링을 처리하고,
  • CSS 변수, Flex/Grid, 미디어 쿼리, 100dvh, safe-area-inset 등을 사용해 모바일 대응 UI를 구성했습니다.
• Firebase
  • Firebase 모듈 CDN을 직접 import 하고,
  • Realtime Database로 방, 참가자, 빙고판, 선택된 단어, 초대, 접속 상태를 실시간 동기화합니다.
  • Anonymous Auth로 사용자별 UID를 만들고,
  • browserSessionPersistence를 써서 탭별 익명 세션 충돌을 줄이도록 되어 있습니다.
• 브라우저 API : 다음과 같은 API를 사용합니다.
  • localStorage : 사용자 ID와 최대 인원 설정 저장
  • Pointer Events : 빙고판 셀 드래그 앤 드롭 교환 기능
  • Web Audio API : 단어 선택/승리 효과음 생성
• 실시간 게임 로직
  • 방 생성/참가/퇴장, 자동 시작, 턴 계산, 단어 선택, 빙고 줄 계산, 승리 판정이 클라이언트 JS에 구현되어 있고,
  • Firebase onValue 구독과 runTransaction을 사용해 실시간 반영과 중복 선택 방지를 처리합니다.

 

5. 게임 동작

최종적으로 개발 완료된 코드로 진행한 실제 게임에서의 동작 과정은 다음과 같습니다. 플레이어 A, B가 있다고 할 경우, 다음과 같이 말이죠.

그림 : 온라인 빙고 대전 절차

 

 

• 먼저 플레이어 A와 B가 로그인합니다.
• 플레이어 A는 카테고리를 선정하고 먼저 자신의 빙고판을 완성 (랜덤 배치 선택 가능) 후 상대를 초대합니다.
• 플레이어 B는 초대에 수락하고, 자신의 빙고판을 완성합니다.
• 두 플레이어의 빙고판이 완성되면 게임이 시작됩니다. 

---

 

Firebase의 기능을 이용하니 단일 HTML만으로 제법 온라인 게임 같은 구색을 갖출 수 있었습니다. 이번 빙고게임 같이 복잡하지 않고 많은 리소스가 필요치 않은 경우라면 충분히 활용해볼만한 방식아라 생각됩니다. 다음엔 또 어디에 이 방식을 적용해볼까요? ^^