Lucky Latte
Lucky Vicky의 후속 프로젝트로, 점심 시간을 더 재밌게 만들기 위해 개발한 멀티플레이어 웹 게임입니다. 방 코드로 접속해 7종 미니게임을 함께 플레이하고, 커피 사는 사람을 정합니다.
Overview
프로젝트 개요
Lucky Vicky에서 점심 메뉴 결정과 후식 룰렛을 만들었지만, 게임 자체가 더 재밌으면 좋겠다는 피드백에서 시작했습니다. 호스트가 방을 만들고 참가자들이 4자리 코드로 접속하면, 7종 미니게임 중 하나를 골라 실시간으로 함께 플레이합니다.
서버가 게임 상태의 단일 진실 공급원(SSOT)으로 동작하고, 클라이언트는 렌더링만 담당하는 구조로 설계했습니다. 호스트 폰은 공유 화면, 참가자 폰은 액션 버튼만 표시하는 듀얼 스크린 UX를 적용했습니다.
Architecture
프로젝트 구조
lucky-latte/
├── client/ # Flutter Web 프론트엔드
│ ├── lib/
│ │ ├── app.dart # GoRouter + 메시지 라우팅
│ │ ├── models/ # Room, Player, GameType
│ │ ├── screens/ # 7개 화면
│ │ ├── services/ # WebSocket, LocalStorage
│ │ ├── providers/ # Riverpod 상태 관리
│ │ └── widgets/games/ # 게임별 위젯
│ └── web/ # 웹 플랫폼 파일
│
├── server/ # Dart 백엔드
│ ├── lib/
│ │ ├── server.dart # Shelf + CORS + WebSocket
│ │ ├── protocol/ # 메시지 타입 & 핸들러
│ │ ├── models/ # Room, Player, GameState
│ │ ├── services/ # ConnectionManager, RoomManager
│ │ └── games/ # 7개 게임 엔진
│ └── Dockerfile # 멀티스테이지 빌드Server-as-SSOT
모든 게임 로직은 서버에서 실행되고, 클라이언트는 상태를 수신해 렌더링만 담당합니다. 치팅 방지와 일관성을 보장하는 구조입니다.
WebSocket 실시간 통신
JSON 기반 메시지 프로토콜로 방 생성, 참가, 게임 상태를 실시간 동기화합니다. Render cold start에 대비한 90초 자동 재접속을 지원합니다.
Key Features
주요 기능
7종 미니게임
사다리 타기, 룰렛, 추천, 악어 룰렛, 달리기 경주, 주사위, 반응속도 — 각 게임마다 고유한 인터랙션과 서스펜스 연출을 제공합니다.
듀얼 스크린 UX
호스트 폰은 테이블 위 공유 화면으로 큰 애니메이션을 보여주고, 참가자 폰은 최소한의 액션 버튼만 표시합니다.
즉석 멀티플레이어
로그인 없이 4자리 방 코드와 닉네임만으로 즉시 참여합니다. 2~10명까지 지원하며, 30분 미활동 시 방이 자동 정리됩니다.
Cold Start 대응
Render 무료 티어의 15분 슬립에 대비해 3초 간격 최대 30회 자동 재접속을 시도합니다. "서버 깨우는 중..." 로딩 UI로 사용자 경험을 유지합니다.
Flow
사용 흐름
호스트가 방을 생성하면 4자리 코드가 발급됩니다
코드와 닉네임을 입력해 WebSocket으로 실시간 접속
호스트가 7종 미니게임 중 하나를 선택합니다
서버가 게임 상태를 관리하고, 각 플레이어는 자기 폰에서 액션
트로피 애니메이션과 함께 커피 사는 사람이 결정됩니다
Gallery
스크린샷
Comments
댓글
불러오는 중...