작품 목록으로

메두사 미용실 (Medusa Salon)

그리스 신화를 테마로 한 실시간 멀티플레이어 트릭테이킹 카드게임. 몇 판을 이길지 먼저 예측하고, 그 예측을 맞히는 쪽이 이긴다.

  • 공개
  • 스택 React 19, TypeScript, Vite, Zustand, React Router, Cloudflare Workers, Durable Objects, D1, Vitest
  • 조회

개요

올림푸스를 배경으로 한 카드게임입니다. 라운드마다 "이번에 몇 판을 이길지" 를 먼저 말해두고, 그 예측을 정확히 맞힌 사람만 점수를 받습니다. 많이 이기는 게 아니라 말한 만큼 이기는 것이 목표라서, 일부러 져야 하는 순간이 생깁니다.

브라우저에서 바로 돌아가고, 폰에서 홈 화면에 추가하면 앱처럼 열립니다. 계정 없이 봇을 상대로 연습할 수 있고, 방을 만들어 나온 4자리 코드를 친구에게 보내면 실제 온라인 대전이 됩니다.

메두사 미용실의 카드 승패 관계 — 제우스는 헤라클레스를, 헤라클레스는 메두사를, 메두사는 다시 제우스를 이긴다

위 그림은 실제 화면을 찍은 것이 아니라 카드 관계를 나타낸 것입니다.

게임의 핵심

숫자카드 52장 위에 특수 카드 네 종류가 얹혀 있습니다. 그중 셋이 가위바위보처럼 물고 물립니다.

  • 제우스는 전부 이깁니다 — 단, 메두사한테만 집니다
  • 헤라클레스는 숫자카드와 메두사를 이깁니다 — 제우스한테는 집니다
  • 메두사는 숫자카드와 제우스를 이깁니다 — 헤라클레스한테는 집니다
  • 헤르메스는 항상 집니다. 여러 명이 내면 먼저 낸 사람이 이깁니다

제일 센 카드가 무조건 이기는 구조가 아니라서, 상대가 무엇을 아껴두고 있는지 읽는 재미가 생깁니다.

이야기로도 앞뒤가 맞습니다. 메두사는 눈을 마주친 상대를 돌로 만들고 그 앞에서는 신도 예외가 아니며, 그 메두사를 베는 것은 영웅의 일입니다.

주요 기능

  • 예측 → 대결 → 정산 의 라운드 구조, 기본 10라운드
  • 온라인 프라이빗 방 — 4자리 코드를 공유하면 같은 방에 묶입니다
  • 연습 게임 — 계정 없이 봇을 상대로 바로 할 수 있습니다
  • 계정과 전적 — 구글·카카오 로그인, 지난 판 기록, 친구, 코인
  • PWA — 홈 화면에 설치하면 주소창 없이 앱처럼 열립니다
  • 보너스 점수 — 헤라클레스로 메두사 잡기처럼 특정 상황에 추가 점수. 단, 예측을 맞힌 사람만 받습니다

어떻게 만들었나

React 19 · TypeScript 로 만들고, 화면은 Cloudflare Pages 에, 방과 계정을 맡는 서버는 Cloudflare Workers 에 올렸습니다. 방 하나가 서버 인스턴스 하나이고, 계정·전적·코인은 D1 에 들어갑니다.

처음부터 지킨 규칙이 하나 있습니다. 게임 규칙을 화면도 네트워크도 모르는 순수 함수로만 두는 것. 덕분에 나중에 같은 코드를 서버에서 그대로 돌릴 수 있었습니다.

서버를 직접 만든 이유는 손패를 제대로 숨기기 위해서입니다. 처음 쓰던 멀티플레이 도구는 방에 올린 값을 방 안 누구나 읽을 수 있어서, 상대 패가 안 보이는 건 순전히 화면에 안 그렸기 때문일 뿐이었습니다. 지금은 서버가 규칙을 판정하고 각자에게 자기 손패만 갈라서 보냅니다. 덕분에 방장이 나가도 남은 사람끼리 판을 이어갑니다.

아직 못 한 것

  • 빠른 매칭은 아직 봇 게임입니다. 대기 화면은 실제로 돌지만 그 뒤에 붙는 건 AI 입니다
  • 순위전처럼 결과가 계속 쌓이는 모드는 아직 없습니다