[얼렁뚱땅 2주만에 OX게임 만들기] 발표 및 후기

Nochi·2025년 3월 16일

목록 보기

1/1

부제: HTML5 Canvas와 WebGL을 활용하는 게임 엔진, Phaser

약 1년 전, 회사에서 미니게임을 개발하게 되어 Phaser를 사용하게 되었고, 얼렁뚱땅 게임을 만들기 시작했습니다. 1년 정도 만들다보니 피그마로 간이 에셋을 만들고, 게임에 동작하는 부분에서는 어느 정도 익숙해졌습니다.

그러던 무렵, 프론트/모바일 반상회 회고 모임 중…

대장님께서 ‘글또 사람들 다 모아서 OX 게임을 하고 싶다!’고 해주셨습니다.

그래서 문득 온라인으로 OX 게임을 만들어보면 어떨까? 하면서 2025년 3월 2일 2시 37분 게임 기획 시작.

이 글을 읽는 분들은 Phaser가 생소할 수 있으니, Phaser에 대해서 짤막하게 소개를 하겠습니다.

Phaser

Phaser는 무엇인가?

Phaser는 HTML5 기반의 경량 2D 게임 엔진으로, JavaScript 및 TypeScript를 지원합니다. WebGL을 기본으로 활용하며, 필요시 Canvas로 폴백하는 구조로 되어 있어 빠르고 유연한 렌더링이 가능합니다.

🔹 Phaser의 주요 특징

HTML5 Canvas & WebGL을 지원하여 성능 최적화 가능
경량 엔진으로 모바일과 데스크톱에서 원활하게 실행
빠른 프로토타이핑이 가능하여 인디 개발자들에게 인기
플러그인 및 확장 기능이 풍부하여 기능 추가가 용이
오픈소스 기반으로 무료로 사용 가능하며, 활발한 커뮤니티 지원
물리 엔진(Built-in Physics) 지원 (Arcade, Matter.js, Impact.js 등)

🎯 Phaser의 한계와 3D 지원?

Phaser는 본질적으로 2D 게임 엔진이지만, 일부 3D 기능(스프라이트 변형, 원근감 적용 등)을 실험적으로 지원하고 있습니다. 2025년 로드맵에는 3D 기능 확장이 포함되어 있으나, Three.js, Babylon.js와 같은 풀 3D 엔진과는 차이가 있습니다. 3D 게임을 만들려면 별도의 라이브러리와 결합하는 것이 필요할 수 있습니다.

구글에서 Phaser라고 검색하면 쉽게 찾을 수 있습니다.

Phaser의 주요 특징 살펴보기

Phaser는 다양한 기능을 제공하는 강력한 2D 게임 엔진입니다. 이번 섹션에서는 Phaser가 가진 여러 장점 중 일부를 소개합니다.

1. 빠른 렌더링 성능

Phaser는 WebGL을 기본 지원하여 빠른 렌더링 성능을 제공합니다.

만약 WebGL을 지원하지 않는 환경이라면 자동으로 Canvas로 전환되므로,

별도의 설정 없이도 폭넓은 브라우저 환경에서 원활하게 실행됩니다.

2. Scene & Camera 시스템

Phaser에서는 Scene(씬)을 활용하여 게임의 각 단계를 독립적으로 관리할 수 있습니다.

예를 들어, 메인 화면(Scene A)과 게임 플레이(Scene B)를 분리하여 효율적인 흐름을 만들 수 있습니다.

또한 Camera 시스템을 이용하면:

✅ 화면 줌 인/아웃

✅ 부드러운 화면 이동(스크롤링)

✅ 특정 객체를 따라가는 카메라 구현

과 같은 기능을 쉽게 적용할 수 있습니다.

3. Physics 시스템

Phaser는 Arcade Physics 엔진을 내장하여 기본적인 물리 연산을 쉽게 구현할 수 있습니다.

예를 들어,

✔ 캐릭터 점프

✔ 충돌 감지

✔ 중력 적용

✔ 속도 & 가속도 조정

등의 기능을 별도의 라이브러리 없이도 Phaser 내부에서 바로 사용할 수 있습니다.

더 정밀한 물리 연산이 필요하다면?

Phaser는 Matter.js 같은 물리 엔진과도 연동이 가능합니다!

4. Tween & Animation 시스템

Phaser는 부드러운 애니메이션을 위한 Tween & Animation 기능을 제공합니다.

✅ Tween (트윈) 기능

객체의 속성을 일정한 시간 동안 부드럽게 변화시킬 수 있습니다.

예를 들어, 캐릭터가 점프할 때 위치 변화(Tween)를 사용하면 자연스러운 움직임을 연출할 수 있습니다.

✅ Animation 시스템

스프라이트 애니메이션을 활용하면 캐릭터의 걷기, 점프, 공격 모션 등을 표현할 수 있습니다.

Phaser에서는 스프라이트 시트를 기반으로 프레임을 제어할 수 있어 애니메이션 제작이 간편합니다.

Phaser로 게임 만들기

게임 만드는 법은 제가 설명하는 것보다 좋은 유튜브가 많으니 여기서 클론코딩 하면서 쉽게 만들 수 있어요!

https://www.youtube.com/watch?v=2NhPVnvlAMs

OX 게임은 어떻게 만들었나요?

Front-end

깃허브: https://github.com/ainochi-kor/ox-quiz

OX 게임의 개발에서는 프론트엔드를 모노레포(Turborepo) 구조로 관리하였으며,

두 개의 독립적인 프로젝트로 구성하였습니다.

1️⃣ console → 문제를 관리하는 관리자 웹사이트

2️⃣ ox-game → 사용자들이 플레이하는 게임 애플리케이션

각 프로젝트에서 사용한 기술 스택은 다음과 같습니다.

🛠 console (문제 관리 웹사이트)

기술 스택:

Vite → 빠른 빌드 & 개발 환경
React → UI 개발
ShadCN → 스타일링 및 UI 컴포넌트
Firebase → 사용자 인증 및 데이터 저장
React Router → 클라이언트 사이드 라우팅
Axios → API 요청
Socket.io-client → 실시간 데이터 통신
TanStack Query & Table → 데이터 관리 및 테이블 UI

💡 주요 기능:

관리자 계정으로 로그인하여 문제를 생성 및 수정
문제 목록을 조회하고 필터링
실시간 문제 업데이트

🎮 ox-game (사용자 게임 앱)

기술 스택:

Vite → 빠른 개발 환경
Phaser → 2D 게임 엔진
Firebase → 인증 및 실시간 데이터베이스
Axios → API 요청
Socket.io-client → 실시간 게임 진행

💡 주요 기능:

OX 퀴즈 UI 및 애니메이션 구현
Firebase 인증을 활용한 사용자 로그인
WebSocket을 통한 실시간 퀴즈 진행 및 결과 공유

Back-end

깃허브: https://github.com/ainochi-kor/ox-quiz-server

OX 퀴즈 서버는 NestJS를 기반으로 개발된 애플리케이션으로, 사용자가 퀴즈를 생성, 관리, 참여할 수 있도록 설계되었습니다. 이 서버는 API와 소켓 통신을 활용하여 실시간으로 동작합니다.

주요 기능:

퀴즈 관리 API:
- POST /api/quizzes - 퀴즈 생성
- GET /api/quizzes - 모든 퀴즈 조회
- GET /api/quizzes/roomlist - 퀴즈 방 목록 조회
- GET /api/quizzes/roomlist/:id - 특정 퀴즈 방 조회
- GET /api/quizzes/:id - 특정 퀴즈 조회
소켓 통신 이벤트:
- startGame - 게임 시작
- joinGame - 게임 참가
- changeImage - 캐릭터 이미지 변경
- submitAnswer - 답변 제출
- nextQuestion - 다음 문제 출제
- gameOver - 게임 종료
- updatePlayers - 참가자 목록 업데이트
- waitingForGame - 게임 시작 대기
- waitingQuizResult - 퀴즈 결과 대기
- waitingQuizNext - 다음 퀴즈 대기
- moveUser - 유저 이동
- currentQuestion - 현재 문제 정보