Github 에 올린 게임을 유저들의 최고 스코어를 기반으로 랭킹 시스템을 만드는 방법

오늘은 게임에서 유저 랭킹을 만드는 3가지 방법에 대해 알아보겠습니다.

 

1. 랭킹 시스템 개요

랭킹 시스템을 구현하려면 다음이 필요합니다:

• 스코어 데이터 저장: 유저의 최고 스코어를 저장하는 데이터베이스(DB) 또는 파일.
• 서버 또는 백엔드: 유저가 점수를 제출하고 랭킹을 조회할 수 있도록 관리.
• 클라이언트 연동: 게임에서 점수를 전송하고 랭킹을 불러오는 기능 추가.

---

2. 무료로 구현할 수 있는 방법

(1) GitHub Pages + Firebase Firestore

• GitHub Pages: 게임을 웹에서 배포하는 무료 호스팅.
• Firebase Firestore (무료 플랜): 클라우드 DB로 유저 점수를 저장.

🔥 장점: Firebase의 무료 플랜으로 월간 50,000번의 읽기 및 10,000번의 쓰기가 가능. 가볍게 운영하면 무료.

 

설치 및 구현

1. Firebase 계정 생성 (https://firebase.google.com/)
2. 새 프로젝트 생성 후 Firestore Database 활성화.
3. Firebase SDK를 게임에 추가 (JavaScript 기반).
4. 점수 저장 및 랭킹 가져오는 기능 구현.

// Firebase 초기화
import { initializeApp } from "firebase/app";
import { getFirestore, collection, addDoc, query, orderBy, limit, getDocs } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// 점수 저장
async function saveScore(username, score) {
  await addDoc(collection(db, "scores"), {
    username,
    score,
    timestamp: new Date()
  });
}

// 랭킹 가져오기
async function getLeaderboard() {
  const q = query(collection(db, "scores"), orderBy("score", "desc"), limit(10));
  const querySnapshot = await getDocs(q);
  let leaderboard = [];
  querySnapshot.forEach(doc => {
    leaderboard.push(doc.data());
  });
  return leaderboard;
}

 

🔥 무료 사용 조건: 월 50,000회 읽기, 10,000회 쓰기 무료. 작은 게임이라면 충분.

---

(2) GitHub Pages + Google Sheets (No Backend)

• Google Sheets를 데이터베이스로 사용하여 점수 저장.
• Google Apps Script로 데이터를 관리.

🔥 장점: 서버 없이 무료 사용 가능.

 

설치 및 구현

1. Google Sheets 생성.
2. Google Apps Script 추가 (Extensions → Apps Script).
3. 아래 코드를 입력하여 점수 관리 API 제작.

function doPost(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Scores");
  var data = JSON.parse(e.postData.contents);
  
  sheet.appendRow([data.username, data.score, new Date()]);
  return ContentService.createTextOutput("Success").setMimeType(ContentService.MimeType.TEXT);
}

function doGet() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Scores");
  var data = sheet.getDataRange().getValues();
  
  data.shift(); // 헤더 제거
  data.sort((a, b) => b[1] - a[1]); // 스코어 기준 정렬
  
  return ContentService.createTextOutput(JSON.stringify(data.slice(0, 10)))
    .setMimeType(ContentService.MimeType.JSON);
}

 

1. 배포 → 웹 앱으로 배포 → 모든 사용자 공개.
2. 클라이언트에서 fetch()를 사용하여 데이터 전송 및 랭킹 불러오기.

// 점수 저장
fetch("YOUR_GOOGLE_SCRIPT_URL", {
  method: "POST",
  body: JSON.stringify({ username: "player1", score: 100 }),
  headers: { "Content-Type": "application/json" }
});

// 랭킹 불러오기
fetch("YOUR_GOOGLE_SCRIPT_URL")
  .then(res => res.json())
  .then(data => console.log(data));

 

🔥 무료 사용 조건: Google Sheets API는 100만 개의 셀까지 무료.

---

(3) GitHub Pages + Supabase

• Firebase와 비슷하지만 PostgreSQL 기반 무료 데이터베이스 제공.
• 무료 플랜으로 월 50,000 요청 제공.

🔥 장점: SQL 기반으로 Firebase보다 유연한 데이터 관리.

 

설치 및 구현

1. Supabase 가입 후 프로젝트 생성.
2. Database → Table 생성 (컬럼: id, username, score, created_at).
3. API 키를 이용해 데이터를 추가 및 조회.

import { createClient } from "@supabase/supabase-js";

const supabase = createClient("YOUR_SUPABASE_URL", "YOUR_SUPABASE_ANON_KEY");

// 점수 저장
async function saveScore(username, score) {
  await supabase.from("scores").insert([{ username, score }]);
}

// 랭킹 조회
async function getLeaderboard() {
  let { data } = await supabase.from("scores").select("*").order("score", { ascending: false }).limit(10);
  return data;
}

 

 

🔥 무료 사용 조건: 50,000 요청/월 무료.

---

3. 추천 방법

방법무료 한도난이도특징

방법	무료 한도	난이도	특징
Firebase Firestore	읽기 50,000/월, 쓰기 10,000/월	중간	빠른 응답 속도
Google Sheets	거의 무제한	쉬움	서버 없이 가능
Supabase	50,000 요청/월	중간	SQL 지원

 

추천:

• Firebase: 빠른 속도, 쉽고 강력함.
• Google Sheets: 트래픽이 적다면 서버 없이 가능.
• Supabase: SQL을 다룰 줄 안다면 강력한 선택.

---

4. 결론

• GitHub Pages에서 게임을 배포하고, 무료 DB(Firebase, Google Sheets, Supabase)를 활용하면 랭킹 시스템을 무료로 구축 가능.
• Firebase는 간편하고, Google Sheets는 설정이 쉽고, Supabase는 SQL을 지원해 확장성 높음.