데블스플랜2의 수식 피라미드 데스매치를 보고 친구들과 같이 하면 재밌겠다는 생각에 직접 만들어본 프로젝트다. 바이브코딩으로 빠르게 개발하고, 피드백을 받아 빠르게 개선해나간 경험을 정리해본다.

서비스 링크: 수식 피라미드

프로젝트 개요

수식 피라미드는 10개의 숫자 타일 중 3개를 선택해 사칙연산으로 목표 숫자를 만드는 게임이다.

• 멀티플레이어 지원: 친구들과 방을 만들어 실시간으로 대결
• 솔로 랭킹 모드: 혼자서 점수를 올려 전체 순위에 도전
• 실시간 채팅: 글로벌 채팅으로 다른 유저들과 소통
• 다국어 지원: 한국어/영어 지원

기술 스택

이 프로젝트는 바이브코딩을 활용해 빠르게 개발했다. AI 코딩 어시스턴트와 대화하며 코드를 작성하는 방식으로, 아이디어에서 MVP까지 빠르게 도달할 수 있었다.

Frontend

• Next.js 15 (App Router, Turbopack)
• React 19
• TypeScript
• Tailwind CSS 4
• Lucide React (아이콘)

Backend & Database

• Firebase Realtime Database: 실시간 게임 상태 동기화
• Firebase Firestore: 랭킹 데이터 저장
• Firebase Auth: 익명 인증

배포

• Vercel: 자동 배포 및 호스팅

프로젝트 구조

src/
├── app/                    # Next.js App Router
│   ├── page.tsx           # 메인 페이지 (방 목록, 랭킹)
│   └── room/[id]/         # 게임 방 페이지
├── components/            # React 컴포넌트
│   ├── GameRoom.tsx       # 게임 플레이 UI
│   ├── ChatBox.tsx        # 실시간 채팅
│   ├── RankingModal.tsx   # 솔로 플레이 모달
│   └── RoomList.tsx       # 활성 방 목록
├── hooks/
│   ├── useGame.ts         # 게임 로직 훅 (Firebase 연동)
│   └── useLanguage.ts     # 다국어 지원 훅
├── lib/
│   ├── firebase.ts        # Firebase 설정
│   ├── gameLogic.ts       # 게임 핵심 로직
│   └── ranking.ts         # 랭킹 시스템
├── i18n/                  # 다국어 번역 파일
└── types/                 # TypeScript 타입 정의

핵심 게임 로직

게임의 핵심은 10개의 타일 중 3개를 선택해 목표 숫자를 만드는 것이다. 각 타일은 연산자(+, -, ×, ÷)와 숫자의 조합으로 구성된다.

// 사칙연산 우선순위에 따른 계산
// 예: [+5, ×2, -3] -> (5 × 2) - 3 = 7
export const calculatePlayerMove = (tiles: BoardTile[]): number => {
  // 첫 번째 타일의 연산자는 무시하고 값을 초기값으로 사용
  // 곱셈/나눗셈 우선 처리 후 덧셈/뺄셈 수행
  // ...
};

가능한 모든 정답 조합을 미리 계산해두고, 플레이어가 정답을 제출하면 서버에서 검증한다. 같은 타일 조합이라면 순서가 달라도 동일한 정답으로 처리된다.

개발 과정: 빠른 MVP와 점진적 개선

1단계: 핵심 기능 구현 및 배포

처음에는 친구와 방 만들어서 게임하기 기능만 구현해서 배포했다. 최소한의 기능만으로 빠르게 서비스를 오픈하고, 친구들에게 공유해 실제 피드백을 받았다.

2단계: 피드백 기반 개선

친구들의 피드백을 받아 다음 기능들을 빠르게 추가했다:

• 랭킹 시스템: 솔로 플레이어를 위한 점수 기록 및 순위
• 실시간 채팅: 게임 외 소통을 위한 글로벌 채팅
• 버그 수정: 동시 접속 시 발생하는 동기화 이슈 해결
• UI/UX 개선: 모바일 대응, 애니메이션 추가

3단계: 안정화

게임의 안정성을 위한 기능들을 추가했다:

• 플레이어 연결 해제 시 자동 정리 (onDisconnect)
• 빈 방 자동 삭제
• 랭킹 점수 감소 시스템 (매일 1점씩 감소해 최신 기록 우대)

바이브코딩으로 얻은 팁

이번 프로젝트를 통해 바이브코딩에서 몇 가지 유용한 팁을 얻었다:

1. MVP 우선: 완벽한 코드보다 동작하는 코드가 먼저다. 빠르게 배포하고 피드백을 받자.
2. 작은 단위로 요청: 한 번에 큰 기능을 요청하기보다, 작은 단위로 나눠서 요청하면 품질이 높아진다.
3. 맥락 유지: 프로젝트 구조와 기존 코드 스타일을 AI에게 충분히 설명하면 일관된 코드가 나온다.
4. 테스트는 직접: AI가 생성한 코드도 반드시 직접 테스트해야 한다. 특히 엣지 케이스에서 문제가 발생하기 쉽다.

🚨 보안 이슈: 바이브코딩의 위험성

여기서 중요한 교훈을 얻었다. 바이브코딩만으로 서비스를 만드는 것은 위험할 수 있다.

Firebase Realtime Database의 읽기/쓰기 권한을 개발 편의상 모두 열어둔 상태로 배포했는데, 어떤 사용자가 이를 악용해 랭킹 점수를 임의로 수정하는 일이 발생했다. 클라이언트에서 Firebase로 전송되는 패킷 내용을 수정해 자신의 점수를 마음대로 조작한 것이다.

// ❌ 위험한 보안 규칙 (개발 중 사용)
{
  "rules": {
    ".read": true,
    ".write": true
  }
}

이 문제를 발견한 후 즉시 Firebase 콘솔에서 보안 규칙을 수정했다:

// ✅ 수정된 보안 규칙
{
  "rules": {
    "rooms": {
      ".read": true,
      "$roomId": {
        ".write": "auth != null"
      }
    },
    "rankings": {
      ".read": true,
      ".write": "auth != null && newData.child('score').val() <= 100"
    }
  }
}

AI 코딩 어시스턴트는 기능 구현에는 뛰어나지만, 보안 관련 설정은 개발자가 직접 검토하고 이해해야 한다. 특히 데이터베이스 권한, 인증, 입력 검증 같은 부분은 꼼꼼히 확인해야 한다.

성과: Analytics 결과

6월 한 달간의 Google Analytics 결과:

생각보다 많은 사람들이 게임을 즐겨줬고, 특히 세션당 15분 이상이라는 체류 시간이 인상적이었다. 친구들과 함께 여러 라운드를 플레이하면서 시간을 보내는 패턴이 많았던 것 같다.

랭킹 경쟁도 활발하게 이루어졌고, 채팅을 통해 모르는 사람들끼리도 게임을 즐기는 모습을 볼 수 있었다.

회고 및 다음 단계

데블스플랜2를 보고 "이거 만들어볼까?"라는 가벼운 생각에서 시작해, 실제로 사람들이 즐기는 서비스를 만들어낸 경험이었다. 바이브코딩 덕분에 아이디어에서 서비스까지 빠르게 도달할 수 있었지만, 동시에 보안 같은 중요한 부분은 개발자의 직접적인 검토가 필수라는 것도 배웠다.

• 잘한 점

  • MVP 우선 전략으로 빠른 피드백 사이클 확보
  • Firebase Realtime Database를 활용한 실시간 동기화 구현
  • 다국어 지원으로 글로벌 접근성 확보

• 아쉬운 점

  • 초기 보안 설정 미흡으로 랭킹 조작 발생
  • 테스트 코드 부재
  • 모니터링/로깅 시스템 미구축

• 개선 방향

  • 서버 사이드 검증 강화 (Cloud Functions 도입)
  • 더 다양한 게임 모드 추가
  • 리플레이 기능 구현

직접 플레이해보고 싶다면: 수식 피라미드