Retro Runner

프로젝트 개요

Retro Runner는 Phaser 3 게임 엔진과 TypeScript를 활용하여 제작한 2D 러너 게임입니다. 80년대 아케이드 게임의 향수를 자극하는 네온 무지개 테마와 픽셀 그래픽을 현대적인 기술로 재해석했습니다. 브라우저에서 바로 플레이할 수 있는 웹 기반 게임으로, GitHub Pages를 통해 배포되어 누구나 쉽게 접근할 수 있습니다.

게임의 핵심 메커니즘은 간단하면서도 중독성 있습니다. 플레이어는 자동으로 앞으로 달리는 캐릭터를 조작하여 끊임없이 다가오는 장애물을 피해야 합니다. 이중 점프와 빠른 낙하 기능을 활용하여 다양한 높이의 장애물을 회피하며, 시간이 지날수록 게임 속도가 빨라져 점점 더 도전적인 플레이를 경험할 수 있습니다.

개발 기간은 약 1주일로, 게임 개발의 핵심 요소들을 빠르게 구현하고 반복적으로 개선하는 데 집중했습니다. Vite를 빌드 도구로 사용하여 빠른 개발 속도를 유지했으며, TypeScript의 타입 시스템으로 게임 로직의 안정성을 확보했습니다. 완성된 게임은 60 FPS를 안정적으로 유지하며, 다양한 화면 크기에서 반응형으로 작동합니다.

🎮 게임 플레이하기

게임 컨셉 및 디자인

80년대 아케이드 감성

Retro Runner의 비주얼 디자인은 1980년대 아케이드 게임의 황금기를 향한 오마주입니다. 당시 아케이드 게임들이 가졌던 네온 색상과 기하학적 단순함을 현대적으로 재해석하여, 향수와 신선함을 동시에 제공하고자 했습니다. 딥 퍼플(#0f0f23) 배경은 어두운 아케이드 게임장의 분위기를 재현하며, 그 위에서 빛나는 네온 옐로우 플레이어와 네온 퍼플 장애물이 강렬한 대비를 이룹니다.

UI 요소들은 시안(#00ffff) 네온 색상으로 통일하여 레트로 퓨처리즘 감성을 극대화했습니다. 점수 표시, 게임 오버 메시지, 버튼 등 모든 인터페이스 요소가 같은 색상 팔레트를 따르며, 화면 전체가 하나의 일관된 비주얼 경험을 제공합니다. 이러한 색상 선택은 단순히 심미적 목적뿐만 아니라, 플레이어가 중요한 게임 요소를 빠르게 인식할 수 있도록 돕는 기능적 역할도 합니다.

미니멀리즘 게임플레이

게임 디자인에서 가장 중요하게 고려한 원칙은 "배우기 쉽고, 마스터하기 어렵다"였습니다. 플레이어는 점프와 낙하 두 가지 액션만으로 게임을 플레이하며, 별도의 튜토리얼 없이도 직관적으로 게임 방법을 이해할 수 있습니다. 복잡한 콤보나 숨겨진 메커니즘 없이, 순수하게 타이밍과 반응 속도에 집중하는 게임플레이를 제공합니다.

화면 구성 역시 미니멀합니다. 상단에 점수 표시, 중앙에 게임 플레이 영역, 그 외에는 아무것도 없습니다. 불필요한 UI 요소나 장식을 모두 제거하여 플레이어가 오직 게임에만 집중할 수 있도록 했습니다. 이러한 단순함은 게임의 난이도가 올라갈수록 더욱 빛을 발하며, 플레이어가 집중력을 유지하는 데 도움을 줍니다.

기술 스택 및 아키텍처

Phaser 3 게임 엔진

Phaser 3를 게임 엔진으로 선택한 이유는 웹 브라우저 기반 2D 게임 개발에 필요한 모든 기능을 제공하면서도 학습 곡선이 완만하기 때문입니다. Phaser는 물리 엔진, 애니메이션 시스템, 입력 처리, 사운드 관리 등 게임 개발의 핵심 요소들을 이미 구현해두어, 개발자가 게임 로직 자체에 집중할 수 있게 해줍니다.

특히 Arcade Physics 시스템은 2D 러너 게임에 이상적입니다. 중력, 속도, 가속도, 충돌 감지 등의 물리 현상을 간단한 API로 제어할 수 있어, 자연스러운 점프 궤적과 착지 동작을 쉽게 구현할 수 있었습니다. 복잡한 물리 계산을 직접 작성할 필요 없이, Phaser가 제공하는 setVelocityY()와 setGravityY() 같은 메서드만으로 만족스러운 게임플레이 느낌을 만들어낼 수 있었습니다.

Phaser 3.80 버전의 Scene 시스템을 활용하여 게임을 구조화했습니다. 메인 메뉴 씬, 게임플레이 씬, 게임 오버 씬으로 분리하여 각 씬의 책임을 명확히 했으며, 씬 간 데이터 전달을 통해 점수와 게임 상태를 관리합니다. 이러한 구조는 코드의 가독성과 유지보수성을 크게 향상시켰습니다.

TypeScript와 타입 안전성

JavaScript 대신 TypeScript를 선택한 것은 게임 개발에서 큰 이점을 가져왔습니다. 게임 로직은 본질적으로 복잡하며, 수많은 상태 변수와 이벤트 핸들러가 상호작용합니다. TypeScript의 정적 타입 시스템은 이러한 복잡성을 관리하는 데 큰 도움이 되었습니다. 플레이어 상태, 장애물 속성, 게임 설정 등 모든 데이터 구조에 타입을 정의하여, 런타임 에러를 컴파일 타임에 미리 발견할 수 있었습니다.

특히 Phaser API와 TypeScript의 조합은 강력합니다. Phaser는 공식적으로 TypeScript 타입 정의를 제공하므로, IDE의 자동 완성 기능을 최대한 활용할 수 있었습니다. this.physics.add.sprite()를 입력하면 즉시 사용 가능한 메서드와 프로퍼티 목록이 표시되어, 문서를 찾아보는 시간을 크게 줄일 수 있었습니다.

게임 상태 관리에도 TypeScript의 타입이 유용했습니다. 예를 들어 플레이어의 점프 횟수를 추적하는 jumpCount 변수는 number 타입으로 명시적으로 선언되어, 실수로 문자열이나 불린 값을 할당하는 오류를 방지합니다. 이러한 작은 안전장치들이 모여 전체 게임의 안정성을 높였습니다.

Vite 빌드 시스템

Vite를 빌드 도구로 선택한 이유는 빠른 개발 서버 시작 속도와 Hot Module Replacement(HMR) 기능 때문입니다. 게임 개발은 반복적인 테스트와 조정이 필수적이며, 코드를 수정할 때마다 빠르게 결과를 확인할 수 있어야 합니다. Vite는 ES 모듈을 활용하여 개발 서버가 즉시 시작되며, 파일을 저장하면 브라우저가 자동으로 새로고침되어 변경사항을 즉시 확인할 수 있습니다.

프로덕션 빌드에서도 Vite는 효율적입니다. Rollup을 기반으로 최적화된 번들을 생성하며, 코드 스플리팅과 트리 쉐이킹을 자동으로 수행합니다. 최종 빌드 결과물은 약 500KB로, Phaser 엔진을 포함한 크기로는 상당히 작은 편입니다. GitHub Pages에 배포할 때도 정적 파일들을 간단히 복사하기만 하면 되어 배포 과정이 매우 단순합니다.

개발 환경 설정도 간단했습니다. vite.config.ts 파일에 TypeScript와 Phaser 설정만 추가하면 되며, 복잡한 webpack 설정을 작성할 필요가 없었습니다. 이러한 단순함은 프로젝트 초기 설정 시간을 크게 단축시켰고, 게임 로직 구현에 더 많은 시간을 할애할 수 있게 해주었습니다.

핵심 게임플레이 메커니즘

이중 점프 시스템

이중 점프는 플레이어에게 추가적인 공중 제어 능력을 제공하는 핵심 메커니즘입니다. 첫 번째 점프는 지면에서만 가능하며, 두 번째 점프는 공중에서 한 번 더 상승할 수 있는 기회를 제공합니다. 이 시스템은 단순해 보이지만 게임플레이에 큰 깊이를 더합니다. 플레이어는 두 번째 점프를 언제 사용할지 전략적으로 결정해야 하며, 성급하게 사용하면 더 높은 장애물을 넘지 못할 수 있습니다.

구현은 점프 카운터 변수로 관리됩니다. 플레이어가 지면에 있을 때 jumpCount는 0으로 초기화되며, 점프 버튼을 누를 때마다 1씩 증가합니다. jumpCount가 2 미만일 때만 점프가 허용되므로, 자연스럽게 최대 2회까지만 점프할 수 있습니다. 점프 시 setVelocityY(-500)로 상향 속도를 부여하며, 이 값은 여러 차례의 플레이 테스트를 통해 최적의 느낌을 찾아 조정했습니다.

첫 번째와 두 번째 점프의 높이는 동일하게 설정했습니다. 일부 게임에서는 두 번째 점프를 약하게 만들기도 하지만, 이 게임에서는 플레이어에게 더 많은 제어권을 주기 위해 같은 높이로 유지했습니다. 이는 높은 장애물 두 개가 연속으로 나올 때 두 점프를 모두 활용하여 넘을 수 있게 하며, 게임의 전략적 요소를 강화합니다.

빠른 낙하 메커니즘

아래 방향키를 누르면 플레이어가 빠르게 낙하합니다. 이 기능은 공중에서 빠르게 지면으로 돌아와야 할 때 유용하며, 특히 낮은 장애물이 연속으로 나올 때 빠르게 착지하여 다음 점프를 준비할 수 있게 해줍니다. 빠른 낙하는 단순히 속도를 높이는 것이 아니라, 플레이어에게 추가적인 제어 옵션을 제공하여 게임플레이의 다양성을 증가시킵니다.

구현은 setVelocityY(1000)로 하향 속도를 크게 증가시키는 방식입니다. 일반 낙하의 중력 가속도보다 훨씬 빠른 속도로 떨어지므로, 시각적으로도 명확한 차이를 느낄 수 있습니다. 이 값 역시 여러 차례의 조정을 거쳤으며, 너무 빠르면 제어가 어렵고 너무 느리면 유용성이 떨어지는 균형점을 찾았습니다.

빠른 낙하 중에도 두 번째 점프를 사용할 수 있습니다. 이는 플레이어가 빠르게 낙하하다가 예상치 못한 장애물을 발견했을 때 즉시 대응할 수 있는 여지를 제공합니다. 이러한 메커니즘의 조합은 게임을 더욱 역동적으로 만들며, 숙련된 플레이어는 점프와 낙하를 유기적으로 연결하여 복잡한 장애물 패턴을 통과할 수 있습니다.

프로그레시브 난이도 시스템

게임은 시간이 지날수록 점점 어려워집니다. 이는 두 가지 방식으로 구현됩니다. 첫째, 게임 속도가 점진적으로 증가합니다. 초기 속도는 300 픽셀/초이며, 점수가 1점 오를 때마다 속도가 0.1씩 증가하여 최대 600 픽셀/초까지 올라갑니다. 이러한 가속은 플레이어가 눈치채기 어려울 정도로 점진적이지만, 장시간 플레이하면 분명히 더 빠른 반응이 요구됩니다.

둘째, 장애물 생성 빈도가 증가합니다. 게임 초반에는 장애물 사이의 간격이 넉넉하여 여유 있게 대응할 수 있지만, 점수가 올라갈수록 간격이 좁아져 연속된 장애물을 빠르게 판단하고 처리해야 합니다. 장애물 생성 간격은 2초에서 시작하여 점차 1초까지 줄어들며, 이는 Phaser.Time.TimerEvent를 활용하여 구현했습니다.

장애물의 높이는 세 가지로 분류됩니다. Low 장애물은 점프 없이 지나갈 수 있으며, Medium 장애물은 한 번의 점프로, High 장애물은 이중 점프를 활용해야 넘을 수 있습니다. 게임이 진행될수록 High 장애물의 출현 비율이 높아지며, 때로는 Medium과 High 장애물이 연속으로 나와 플레이어의 집중력과 반응 속도를 시험합니다.

충돌 감지 및 게임 오버

Phaser의 Arcade Physics 충돌 감지 시스템을 활용하여 플레이어와 장애물 간의 충돌을 처리합니다. this.physics.add.collider(player, obstacles, gameOver) 한 줄로 충돌 감지와 콜백 함수를 설정할 수 있으며, Phaser가 매 프레임마다 자동으로 충돌을 확인합니다. 이는 복잡한 충돌 계산 로직을 직접 작성할 필요 없이, 게임 로직에만 집중할 수 있게 해줍니다.

충돌이 발생하면 게임이 즉시 일시정지되고 게임 오버 화면이 표시됩니다. 최종 점수와 함께 "재시작" 버튼이 나타나며, 플레이어는 스페이스바 또는 버튼 클릭으로 새 게임을 시작할 수 있습니다. 게임 오버 시 충돌 지점에서 파티클 효과가 터져나와 시각적 피드백을 제공하며, 이는 플레이어가 왜 게임이 끝났는지 명확히 인지할 수 있게 합니다.

비주얼 및 애니메이션 시스템

Squash & Stretch 애니메이션

클래식 애니메이션의 핵심 원리 중 하나인 Squash & Stretch를 캐릭터 움직임에 적용했습니다. 플레이어가 점프할 때는 캐릭터가 세로로 늘어나고(scaleY = 1.2, scaleX = 0.8), 착지 순간에는 납작해집니다(scaleY = 0.8, scaleX = 1.2). 이러한 변형은 매우 미묘하지만 캐릭터에 생동감을 부여하며, 플레이어가 무의식적으로 캐릭터의 상태를 더 잘 인지할 수 있게 합니다.

애니메이션은 Phaser의 Tween 시스템으로 구현했습니다. 점프 시 this.tweens.add()로 스케일 변화를 애니메이션화하며, 200ms의 짧은 duration으로 빠르게 변형과 복원이 이루어집니다. ease 함수는 Quad.easeOut을 사용하여 자연스러운 가속과 감속을 표현하며, 이는 물리적으로 그럴듯한 움직임을 만들어냅니다.

이동 중에는 캐릭터가 미세하게 흔들립니다. Math.sin(time) 함수를 활용하여 주기적인 스케일 변화를 만들어, 캐릭터가 달리는 듯한 느낌을 줍니다. 이는 별도의 스프라이트 애니메이션 없이도 역동적인 움직임을 표현할 수 있는 효율적인 방법이며, 레트로 게임의 단순함과도 잘 어울립니다.

파티클 효과 시스템

착지와 충돌 순간에 네온 파티클 효과가 터져나옵니다. Phaser의 파티클 에미터를 사용하여 구현했으며, 작은 네온 색상의 파티클들이 폭발하듯 사방으로 퍼져나가는 효과를 만들었습니다. 파티클의 색상은 게임의 네온 팔레트에서 선택하여 일관된 비주얼을 유지하며, 각 파티클은 중력의 영향을 받아 자연스럽게 아래로 떨어집니다.

착지 시 파티클은 짧고 절제된 효과를 냅니다. 약 10-15개의 파티클이 작게 튀어나와 빠르게 사라지며, 이는 플레이어의 착지를 확인하는 피드백 역할을 합니다. 충돌 시에는 더 크고 화려한 폭발 효과를 만들어, 게임 오버 순간을 강조합니다. 이러한 차별화된 효과는 플레이어가 시각적으로 게임 상태를 빠르게 파악하도록 돕습니다.

파티클 효과는 게임 성능에도 신경 써서 구현했습니다. 동시에 표시되는 파티클 수를 제한하고, 수명이 다한 파티클은 자동으로 제거되어 메모리를 효율적으로 관리합니다. 또한 파티클 텍스처는 단순한 원형으로 유지하여 렌더링 부담을 최소화하면서도, 네온 효과로 충분히 인상적인 비주얼을 만들어냅니다.

네온 컬러 팔레트

색상 선택은 게임의 분위기를 결정하는 가장 중요한 요소입니다. 딥 퍼플 배경(#0f0f23)은 어두운 아케이드 게임장이나 밤하늘을 연상시키며, 네온 색상들이 더욱 밝게 빛나도록 만듭니다. 이 배경색은 눈의 피로를 줄이면서도 장시간 플레이에 적합한 어두운 톤을 제공합니다.

플레이어 캐릭터는 네온 옐로우(#FFFF00)로 설정하여 화면에서 가장 눈에 띄도록 했습니다. 이는 의도적인 선택으로, 플레이어가 빠르게 움직이는 화면에서도 자신의 캐릭터를 쉽게 추적할 수 있게 합니다. 옐로우는 시각적으로 가장 밝은 색상 중 하나이며, 퍼플 배경과의 보색 대비를 이루어 최대의 가독성을 제공합니다.

장애물은 네온 퍼플(#A855F7)로 통일하여 일관성을 유지했습니다. 이 색상은 배경보다 밝으면서도 플레이어와 구별되며, 위협적인 요소임을 직관적으로 전달합니다. UI 요소들은 시안(#00ffff)을 사용하여 게임플레이 요소와 인터페이스를 시각적으로 분리했습니다. 이러한 색상 체계는 80년대 네온 사인의 감성을 재현하면서도 현대적인 세련미를 더합니다.

개발 과정 및 의사결정

초기 프로토타입 구축

프로젝트는 가장 기본적인 러너 게임 메커니즘을 구현하는 것으로 시작했습니다. 첫 번째 목표는 "캐릭터가 자동으로 앞으로 달리고, 점프하며, 장애물과 충돌하면 게임이 끝나는" 핵심 루프를 완성하는 것이었습니다. Phaser의 예제 코드를 참고하여 기본 씬을 설정하고, 플레이어와 장애물을 화면에 표시했습니다.

초기에는 그래픽 없이 단순한 사각형으로 모든 게임 오브젝트를 표현했습니다. 이는 비주얼에 시간을 쓰기 전에 게임플레이가 재미있는지 검증하기 위함이었습니다. 물리 엔진 설정, 입력 처리, 충돌 감지 등 기술적 기반을 먼저 확립한 후, 점수 시스템과 장애물 생성 로직을 추가했습니다. 이 단계에서 이미 게임이 플레이 가능했으며, 기본적인 재미 요소가 작동하는 것을 확인할 수 있었습니다.

첫 플레이 테스트에서 발견한 가장 큰 문제는 난이도였습니다. 고정된 속도와 장애물 간격은 금방 지루해졌고, 반대로 너무 빠르면 처음부터 불가능했습니다. 이를 해결하기 위해 프로그레시브 난이도 시스템을 도입하기로 결정했습니다. 또한 단순한 점프만으로는 전략적 요소가 부족하다고 판단하여, 이중 점프와 빠른 낙하 기능을 추가하는 방향으로 설계를 수정했습니다.

게임플레이 개선 및 튜닝

이중 점프를 구현한 후 게임의 재미가 크게 향상되었습니다. 플레이어가 공중에서 추가 제어권을 갖게 되면서 더 복잡한 장애물 패턴을 시도할 수 있었고, 실수를 만회할 기회도 생겼습니다. 빠른 낙하 기능은 처음에는 없었으나, 높은 점프 후 빠르게 낮은 장애물을 처리하는 상황에서 필요성을 느껴 추가했습니다.

장애물 높이를 세 가지로 나눈 것도 중요한 결정이었습니다. 처음에는 한 가지 높이만 사용했으나, 이는 패턴이 단조로워 금방 예측 가능해졌습니다. Low, Medium, High 세 가지 높이를 도입하고 무작위로 조합함으로써, 플레이어가 매번 다른 도전에 직면하게 만들었습니다. 특히 High-High 또는 Medium-High-Medium 같은 연속 패턴은 이중 점프와 타이밍을 완벽히 활용해야만 통과할 수 있어, 숙련도에 따른 만족감을 제공합니다.

속도 증가율과 장애물 생성 빈도는 수십 번의 테스트를 거쳐 조정했습니다. 초기 버전은 너무 빠르게 어려워져 대부분의 플레이어가 30초를 넘기지 못했습니다. 반대로 너무 느린 증가는 장시간 플레이어에게 지루함을 주었습니다. 최종적으로 초반 1분은 여유 있게 시작하고, 1분 이후부터 본격적으로 어려워지는 곡선을 만들었습니다. 이는 신규 플레이어가 게임에 익숙해질 시간을 주면서도, 숙련된 플레이어에게는 도전 과제를 제공합니다.

비주얼 폴리싱

기능적으로 완성된 게임에 비주얼 효과를 입히는 단계는 가장 즐거운 작업이었습니다. 80년대 아케이드 감성이라는 컨셉을 정한 후, 네온 컬러 팔레트를 선정하고 모든 게임 오브젝트에 적용했습니다. 단순한 사각형이었던 플레이어와 장애물은 둥근 모서리와 네온 테두리를 갖춘 형태로 변신했으며, 배경에는 미묘한 그리드 패턴을 추가하여 공간감을 살렸습니다.

Squash & Stretch 애니메이션을 추가한 것은 게임의 느낌을 완전히 바꾸어 놓았습니다. 처음에는 단순히 점프 시 위로 움직이기만 했으나, 스케일 변화를 추가하자 캐릭터가 살아 움직이는 것처럼 느껴졌습니다. 이 효과는 구현하기 간단하면서도 시각적 임팩트가 크며, 많은 플레이 테스터들이 게임이 더 "부드럽고 재미있어 보인다"고 피드백했습니다.

파티클 효과는 마지막에 추가한 요소였지만, 게임의 완성도를 크게 높였습니다. 착지와 충돌 순간에 파티클이 터지면서 플레이어에게 즉각적인 피드백을 제공하며, 화면이 더욱 생동감 있게 느껴집니다. 파티클의 색상, 크기, 수명, 속도 등을 조정하는 데 많은 시간을 썼으며, 최종적으로 게임 퍼포먼스를 해치지 않으면서도 시각적으로 만족스러운 효과를 만들어냈습니다.

기술적 도전과 해결

일관된 프레임레이트 유지

웹 브라우저 게임의 가장 큰 도전은 다양한 하드웨어와 브라우저에서 일관된 성능을 보장하는 것입니다. Phaser는 기본적으로 60 FPS를 목표로 하지만, 구형 기기나 백그라운드 탭에서는 프레임레이트가 떨어질 수 있습니다. 이를 해결하기 위해 Phaser의 delta time 기반 업데이트를 활용했습니다.

모든 움직임 계산에 delta 값을 곱하여 프레임레이트에 독립적인 게임플레이를 만들었습니다. 예를 들어 obstacle.x -= gameSpeed * delta / 1000로 장애물의 이동 속도를 계산하면, 60 FPS든 30 FPS든 장애물이 동일한 실제 속도로 움직입니다. 이는 낮은 프레임레이트에서도 게임이 공정하게 플레이되도록 보장합니다.

또한 불필요한 렌더링을 최소화하기 위해 오브젝트 풀링을 적용했습니다. 장애물을 매번 생성하고 파괴하는 대신, 화면 밖으로 나간 장애물을 재사용하는 방식으로 메모리 할당을 줄였습니다. 이는 가비지 컬렉션으로 인한 프레임 드롭을 방지하며, 장시간 플레이에서도 안정적인 성능을 유지하는 데 기여했습니다.

반응형 화면 크기 대응

다양한 화면 크기에서 게임이 올바르게 표시되도록 만드는 것도 도전이었습니다. Phaser의 ScaleManager를 FIT 모드로 설정하여 게임 화면이 브라우저 윈도우에 맞게 자동으로 스케일되도록 했습니다. 이는 aspect ratio를 유지하면서도 가능한 한 큰 화면으로 게임을 표시합니다.

모바일 디바이스 대응을 위해 터치 입력도 추가했습니다. 스페이스바와 방향키 외에, 화면 탭으로도 점프를 할 수 있으며, 화면 아래쪽을 누르면 빠른 낙하가 작동합니다. 이를 위해 Phaser의 포인터 이벤트를 사용했으며, 터치 영역을 화면 상하로 나누어 직관적인 컨트롤을 제공했습니다.

세로 모드와 가로 모드 모두에서 플레이할 수 있도록 UI 요소의 위치를 동적으로 조정했습니다. 점수 표시는 화면 중앙 상단에 고정되며, 게임 오버 메시지와 재시작 버튼은 화면 크기에 관계없이 항상 중앙에 위치합니다. 이러한 반응형 설계는 플레이어가 어떤 디바이스에서든 동일한 경험을 할 수 있게 합니다.

게임 밸런싱과 플레이 테스트

적절한 난이도를 찾는 것은 게임 디자인에서 가장 어려운 부분입니다. 너무 쉬우면 지루하고, 너무 어려우면 좌절감을 줍니다. 이를 해결하기 위해 친구들과 가족에게 플레이 테스트를 요청하고, 각자의 최고 점수와 플레이 시간을 기록했습니다.

데이터 분석 결과 대부분의 신규 플레이어가 20-30초 사이에 처음 게임 오버를 경험했으며, 숙련된 플레이어는 2-3분까지 생존했습니다. 이 분포는 이상적이었습니다. 신규 플레이어가 너무 빨리 죽지 않아 게임을 이해할 시간이 있었고, 숙련된 플레이어에게는 충분한 도전 과제가 있었기 때문입니다.

피드백 중 흥미로운 점은 "한 번만 더" 증후군이었습니다. 많은 테스터들이 게임 오버 후 즉시 재시작 버튼을 눌렀으며, 연속으로 여러 번 플레이했습니다. 이는 게임의 핵심 루프가 중독성 있으며, 재시작 장벽이 낮다는 의미입니다. 이러한 긍정적 피드백을 바탕으로 난이도 곡선을 최종 확정했습니다.

성과 및 학습

프로젝트 성과

개발 기간 약 1주일 만에 완전히 플레이 가능한 게임을 완성했습니다. 이는 Phaser와 TypeScript의 조합이 얼마나 생산적인지를 보여줍니다. GitHub Pages에 배포한 후 친구들과 지인들이 플레이했으며, 많은 긍정적인 피드백을 받았습니다. 특히 80년대 아케이드 감성과 네온 비주얼이 큰 호평을 받았습니다.

게임은 60 FPS를 안정적으로 유지하며, 다양한 브라우저(Chrome, Firefox, Safari)와 디바이스(데스크톱, 태블릿, 모바일)에서 문제없이 작동합니다. 최종 빌드 크기는 약 500KB로, 모바일 네트워크에서도 빠르게 로드됩니다. 접근성 측면에서도 키보드와 터치 입력을 모두 지원하여 다양한 플레이어가 즐길 수 있습니다.

가장 긴 생존 기록은 5분 12초로, 매우 숙련된 플레이어만이 도달할 수 있는 수준입니다. 평균 플레이 시간은 약 45초이며, 대부분의 플레이어가 3-5회 정도 재도전한 후 자신의 최고 기록을 세웁니다. 이러한 지표들은 게임이 적절한 난이도 곡선과 재플레이 가치를 갖추고 있음을 보여줍니다.

게임 개발 학습

이 프로젝트는 처음으로 완성한 본격적인 게임 개발 경험이었습니다. Phaser 3 엔진의 강력함과 편리함을 체감했으며, 게임 개발에 필요한 핵심 개념들(게임 루프, 상태 관리, 물리 엔진, 애니메이션)을 실제로 구현하면서 깊이 이해하게 되었습니다. 특히 Arcade Physics를 활용한 충돌 감지와 Tween을 통한 애니메이션 구현은 매우 직관적이고 효율적이었습니다.

TypeScript를 게임 개발에 사용한 경험도 귀중했습니다. 게임 로직은 복잡하고 수많은 상태 변수가 상호작용하는데, 타입 시스템이 이러한 복잡성을 관리하는 데 큰 도움이 되었습니다. 특히 Phaser API의 타입 정의 덕분에 IDE의 자동 완성을 최대한 활용할 수 있었고, 문서를 찾아보는 시간이 크게 줄었습니다.

게임 디자인에서 가장 중요한 것은 플레이어 피드백임을 배웠습니다. 시각적 피드백(애니메이션, 파티클), 청각적 피드백(사운드, 추후 추가 예정), 촉각적 피드백(모바일에서 진동, 고려 중) 등 모든 상호작용에 명확한 반응을 제공해야 플레이어가 게임과 연결되어 있다고 느낍니다. Squash & Stretch 애니메이션과 파티클 효과가 게임의 느낌을 완전히 바꾼 것이 좋은 예입니다.

향후 개선 계획

첫 번째 우선순위는 사운드 효과와 배경음악 추가입니다. 현재 게임은 시각적으로만 완성되어 있으며, 오디오 요소가 추가되면 몰입감이 크게 향상될 것입니다. 점프, 착지, 충돌 시 효과음과 함께 80년대 스타일의 신스웨이브 배경음악을 추가할 계획입니다.

두 번째로 다양한 캐릭터 스킨을 제공하려 합니다. 플레이어가 자신의 취향에 맞는 캐릭터를 선택할 수 있게 하며, 일정 점수에 도달하면 새로운 스킨이 해금되는 진행 시스템을 도입할 것입니다. 각 스킨은 네온 색상 팔레트 내에서 다른 색상을 사용하여 시각적 다양성을 제공하면서도 게임의 일관된 감성을 유지합니다.

세 번째로 리더보드 시스템을 구현하고 싶습니다. 현재는 로컬에서만 최고 점수가 저장되지만, Firebase나 Supabase 같은 백엔드 서비스를 연동하면 전 세계 플레이어들과 점수를 경쟁할 수 있습니다. 일간, 주간, 전체 순위를 표시하고, 친구들과 점수를 공유할 수 있는 기능도 추가할 계획입니다.

네 번째로 파워업 아이템을 도입하여 게임플레이에 변화를 줄 수 있습니다. 무적 상태, 슬로우 모션, 더블 점프 파워업 등이 무작위로 나타나며, 이를 획득하면 일정 시간 동안 특별한 능력을 사용할 수 있습니다. 이는 숙련된 플레이어에게 새로운 전략적 요소를 제공하며, 게임의 재플레이 가치를 높일 것입니다.

다섯 번째로 더 다양한 장애물 패턴을 추가할 예정입니다. 현재는 고정된 높이의 장애물만 있지만, 움직이는 장애물, 연속된 플랫폼, 천장에서 떨어지는 장애물 등 다양한 유형을 도입하면 게임이 더욱 역동적이고 예측 불가능해질 것입니다. 각 장애물 유형은 고유한 회피 전략을 요구하여 플레이어의 스킬 천장을 높입니다.

프로젝트 링크

• 게임 플레이: https://qlsjtmek2.github.io/retro-runner/
• GitHub 저장소: https://github.com/qlsjtmek2/retro-runner

라이선스

MIT License