구글 안티그라비티로 추억의 게임 만들기 후기

제가 초등학생일 때 사촌 형네 집에 명절이라 갔었는데요. 형네는 486 PC가 있었어요. 그때 제 동생이랑 3명이서 키보드 하나를 나눠서 3인 플레이를 했던 게임이 있습니다. 이 게임이 1991년 고전 명작이라 불리는 Triad 1991이라고 하는데요. 기억이 안 나서 LLM을 통해 찾아냈습니다. 한 번 따라 만들어보려고 자료를 수집해서 기획서를 만들었고요.

재해석한 게임을 구글 안티그라비티를 이용해서 만들었는데요. 게임 이름도 안티그라비티라고 이름을 지었어요.

재해석 게임 ‘안티그라비티(Anti-Gravity)’ 상세 기획서 작성

[배경 및 컨셉]

본 게임은 1991년작 MS-DOS 게임 《Triad》의 정신적 계승작인 2D 탑다운 대전 슈팅 게임 ‘안티그라비티(Anti-Gravity)’이다. 고전의 ‘성장과 난투’라는 재미를 유지하면서, 현대적인 물리 엔진과 ‘무중력/반중력’ 테마를 결합한 게임 기획서.


1. 게임 개요 (Game Overview)

  • 타이틀: 안티그라비티 (Anti-Gravity)
  • 장르: 2D 탑다운 액션 슈팅 / 로컬 및 온라인 대전
  • 핵심 타겟: 레트로 슈팅 게임 팬, 친구들과의 로컬 멀티플레이를 즐기는 유저
  • 플랫폼: PC (Steam), 모바일, 웹(HTML5)

2. 핵심 게임 메커니즘 (Core Gameplay)

  • 에너지 기반 전투: 모든 무기는 고유의 에너지 소모율(Rate)을 가짐. 에너지가 고갈되면 ‘과부하’ 상태가 되어 기본 무기만 사용 가능하므로 전략적 사격이 필수.
  • 도탄 시스템(Ricochet): 탄환은 벽면에 최대 2회 도탄되며 3회 충돌 시 소멸. 이를 이용한 각도 계산 사격이 중요함.
  • 단일 화면 난투: 분할 화면 없이 한 화면 내에서 최대 3~4인이 격돌하는 컴팩트한 전장.

3. 데이터 기반 시스템 (Data Specs)

A. 무기(Weapon) 라인업

명칭가격에너지 소모특징
Small Shot기본1.0빠른 연사력, 낮은 대미지
Twin Shot$1,5001.8평행하게 두 발 발사
Blaster$3,5003.5대형 탄환, 넓은 판정
Laser$6,0005.0즉시 타격, 최고 관통력
Homing Missile$8,5007.590% 이상의 유도 성능, 파괴적 위력

B. 기체(Chassis) 업그레이드 및 진화

업그레이드 시 성능 향상과 함께 외형(삼각형 → 다각형 → 복잡한 메카닉)이 변함.

  • Engine (Speed): 이동 속도 및 가속도 (Level 1: 1.2x / Level 2: 1.5x / Level 3: 2.0x)
  • Battery (Capacity): 최대 에너지 용량 (Level 1: 100 / Level 2: 250 / Level 3: 500)
  • Armor (HP): 내구도 증가 (Level 1: 100 / Level 2: 300 / Level 3: 600)

4. 경제 및 보상 시스템 (Economy)

  • 라운드 보상: 승리자($1,000~$2,500), 생존 패배자($500), 사망자($100) 지급.
  • 상점 시스템: 라운드 사이 쉬는 시간에 무기 교체 및 기체 강화 가능. 사망 시 장착 무기가 초기화되는 리스크(Hardcore Mode) 고려.

5. 비주얼 및 연출 (Art Direction)

  • 그래픽 스타일: 네온 컬러의 사이버네틱 2D 벡터 아트 또는 고품질 픽셀 아트.
  • 이펙트: 무중력 상태를 표현하는 부드러운 관성 이동 효과, 탄환 충돌 시 화려한 파티클.

6. ‘안티그라비티’만의 차별화된 특수 능력 (Special Abilities)

게임의 핵심 테마인 ‘무중력/반중력’을 활용하여 전황을 뒤집을 수 있는 액티브 스킬을 기체당 1개씩 장착할 수 있도록 합니다. (에너지를 대량 소모)

  • 특수 능력 1: 중력장 왜곡 (Gravity Well / Blackhole)
    • 효과: 조준한 위치에 3초간 소형 블랙홀을 생성합니다.
    • 전략적 활용: 주변의 적 기체를 천천히 끌어당겨 이동을 방해하고, 화면 내에 날아다니는 모든 탄환(특히 적의 유도 미사일)의 궤도를 블랙홀 중심으로 휘어지게 만듭니다. 적을 구석에 몰아넣거나 위기 상황에서 회피용 방패로 사용합니다.
  • 특수 능력 2: 반중력 펄스 (Anti-Gravity Pulse)
    • 효과: 기체 중심으로 강력한 반중력 파동을 원형으로 방출합니다.
    • 전략적 활용: 다가오는 적의 총알을 즉시 반대 방향으로 튕겨내며(반사 데미지 적용), 근접한 적 기체를 화면 끝 벽으로 강하게 밀쳐냅니다. 관성 제어가 어려운 게임 특성상, 벽에 강하게 충돌한 적은 추가 데미지를 입습니다.

7. 조작 스키마 (Control Schema)

과거의 1키보드 3인용 감성을 지원하는 ‘클래식 모드’와 현대적인 ‘트윈 스틱 슈터’ 방식을 모두 지원합니다.

  • 현대적 조작 (키보드 + 마우스)
    • 이동 (이동 벡터 생성): W, A, S, D (관성이 적용되어 미끄러지듯 이동)
    • 조준: 마우스 커서 방향
    • 기본 사격: 마우스 좌클릭 (누르고 있으면 연사, 에너지 소모)
    • 특수 능력: 마우스 우클릭 또는 Space Bar
    • 역분사 (Brake): Shift 키 (진행 반대 방향으로 추진력을 내어 급제동)
  • 게임패드 (트윈 스틱 컨트롤)
    • 이동: 왼쪽 아날로그 스틱 (L-Stick)
    • 조준: 오른쪽 아날로그 스틱 (R-Stick)
    • 기본 사격: RT (Right Trigger) 또는 R2
    • 특수 능력: LT (Left Trigger) 또는 L2
    • 역분사 (Brake): A 버튼 (Xbox) / X 버튼 (PS)
  • 클래식 로컬 멀티플레이 (1키보드 2~3인용 설정 시)
    • 1P: ESDF (이동) / Q (사격) / W (특수)
    • 2P: 방향키 (이동) / Enter (사격) / Shift (특수)

8. 싱글 플레이어 캠페인 모드 (초보자 튜토리얼 및 연습)

멀티플레이 난투에 진입하기 전, 조작감(관성)과 무기 특성을 익힐 수 있는 로그라이트(Rogue-lite) 방식의 캠페인입니다.

  • Phase 1: 비행 아카데미 (튜토리얼)
    • 목표: 정지된 표적 맞추기, 도탄(벽 쿠션)을 이용해 장애물 뒤의 적 맞추기, 역분사로 좁은 구역 정지하기.
  • Phase 2: 소행성 방어전 (웨이브 서바이벌)
    • 구조: 사방에서 몰려오는 AI 드론(단순한 도형 형태)을 파괴하며 생존.
    • 성장: 매 웨이브 종료 시 상점이 열리며, AI를 잡고 모은 돈으로 무기를 바꾸거나 기체를 업그레이드하여 다음 웨이브에 대비.
  • Phase 3: 보스전 (거대 도형의 습격)
    • 특징: 거대한 다각형(Octagon 등) 보스와의 1:1 대결. 보스는 Laser나 Homing Missile 등 상위 무기를 사용하므로, 플레이어는 도탄 시스템과 특수 능력을 극한으로 활용해 공략해야 함. 사망 시 첫 웨이브부터 다시 시작(자금 일부 보존).

9. 구현을 위한 기술적 로드맵 (Unity / Godot 기준)

게임 엔진을 활용한 개발 4단계 가이드입니다.

Step 1: 핵심 물리 엔진 세팅 (관성 및 도탄)

구현: 2D 물리 엔진(Unity: Rigidbody2D / Godot: RigidBody2D)을 사용합니다. 마찰력(Linear Drag/Friction)을 0에 가깝게 설정하여 우주 공간의 미끄러짐을 구현합니다.

도탄 로직: 탄환이 벽 콜라이더(Collider)에 부딪힐 때 입사각과 반사각을 계산해 튕겨 나가게 하고, 충돌 횟수(Bounces) 변수를 두어 3회가 되면 Destroy() 하도록 스크립팅합니다.

Step 2: 오브젝트 풀링 (Object Pooling) 및 무기 시스템

구현: 수많은 총알이 발사되므로 메모리 최적화를 위해 오브젝트 풀링을 필수 적용합니다.

데이터 구조: 무기 데이터(가격, 에너지 소모량, 속도 등)는 Unity의 ScriptableObject나 Godot의 Resource 파일로 분리하여 기획자가 수치를 쉽게 밸런싱할 수 있게 만듭니다.

Step 3: 유도 미사일 및 특수 능력 알고리즘

Homing Missile: 발사된 후 Update() 문에서 배열 내 가장 가까운 적(Tag=”Player”)을 지속적으로 탐색(Vector2.Distance)하고, 적을 향해 부드럽게 회전(Slerp 또는 Lerp)하며 추진력을 더하는 로직을 작성합니다.

Step 4: 게임 루프(State Machine) 및 로컬 멀티플레이

루프 제어: 로비(Lobby) -> 전투(Battle) -> 결과/정산(Result) -> 상점(Shop) -> 전투로 이어지는 게임 상태 머신을 구축합니다.

입력 시스템: Unity의 New Input System을 사용하여 하나의 PC에 여러 대의 게임패드와 키보드를 독립적인 플레이어(Player Input)로 할당하는 작업을 진행합니다.

Anti-Gravity 구현 계획서

1. 목표 설명 (Goal Description)

물리 기반의 관성 이동, 도탄(Ricochet) 전투, 그리고 네온 사이버네틱(Neon-Cybernetic) 미학을 결합한 2D 탑다운 슈팅 게임 “Anti-Gravity”를 개발합니다. 이 게임은 PC 및 웹 플랫폼을 타겟으로 하며, 로컬 멀티플레이어를 지원합니다.

2. 핵심 기능 (Key Features)

  • 물리 엔진: 관성 기반의 이동 시스템 및 벽에 튕기는 총알(도탄) 구현.
  • 전투 시스템: 에너지 관리 시스템 및 다양한 무기 유형 (Small, Twin, Blaster, Laser, Homing) 제공.
  • 특수 능력: 중력 조작 메커니즘 (블랙홀/끌어당기기, 척력/밀어내기).
  • 멀티플레이어: 단일 화면에서 즐기는 로컬 협동(Co-op) 또는 대전(Versus) 모드.

3. 기술 스택 (Technical Stack)

  • 언어: HTML5, CSS3, JavaScript (ES6+).
  • 렌더링: 성능과 유연성을 위해 HTML5 Canvas API (2D Context) 사용.
  • 오디오: Web Audio API.
  • 입력: Gamepad API + 키보드/마우스 리스너.

4. 아키텍처 (Architecture)

  • 게임 루프: 부드러운 업데이트를 위해 requestAnimationFrame 활용.
  • 단순화된 ECS (엔티티 컴포넌트 시스템):
    • Entity: 모든 게임 오브젝트의 기본 클래스.
    • Component: 물리(Physics), 렌더링(Render), 무기(Weapon), 입력(Input) 등.
    • System: 물리 시스템, 렌더링 시스템, 충돌 감지 시스템.
  • 상태 관리: 단순 상태 머신 (Menu -> Game -> Pause -> GameOver).

5. 제안된 신규 파일 구조

분류파일명역할
루트 디렉토리index.html게임 진입점 (Entry point)
style.css캔버스 컨테이너 및 UI 스타일링
main.js게임 초기화 및 메인 루프 실행
소스 (js/)Engine.js코어 엔진 클래스
Input.js입력 처리 핸들러
Physics.js물리 연산 로직
Renderer.js그리기 로직 담당
Entity.js기본 게임 오브젝트 클래스
Player.js플레이어 전용 로직
Weapon.js무기 상태 및 발사 로직
Projectile.js투사체(총알) 로직

6. 검증 계획 (Verification Plan)

자동화 테스트

  • 시각적/상호작용 중심의 게임 특성상, 단위 테스트보다는 JS 문법 검사(Linting) 및 수동 테스트를 통한 ‘게임의 느낌(Feel)’ 확인에 집중합니다.

수동 검증 항목

  1. 이동 테스트: 함선이 관성에 따라 적절히 가속 및 감속하는지 확인.
  2. 충돌 테스트: 총알이 벽면에 부딪혔을 때 정확한 각도로 튕겨 나가는지 확인.
  3. 입력 테스트: 게임패드와 키보드 입력이 함선을 정확히 제어하는지 확인.
  4. 시각 효과 테스트: 네온 스타일의 그래픽과 파티클 효과가 정상적으로 렌더링되는지 확인.

Anti-Gravity – 개발 작업 목록

업데이트 후에는 자기가 개발 단계를 직접 만들어서 구현하는데, 깜짝 놀랐어요. 지난 달에는 이런 기능이 없었는데요. 아래 내용은 PM이 일정을 잡아주면 기획과 개발 팀장이 일정에 맞춰 잡아주는 건데, 대박입니다. 기획 영역도 이제 커버하기 시작하네요.

1단계: 프로젝트 설정 및 코어 엔진

  • 프로젝트 구조 초기화: d:\bibe_coding\Anti-Gravity 경로에 HTML5 Canvas + JS 구조 설정
  • 게임 루프 구현: 프레임 업데이트 및 델타 타임(delta time) 처리
  • 입력 핸들링 구현: 키보드 및 마우스 입력 처리
  • 물리 엔진 구현: 속도(Velocity), 가속도(Acceleration), 마찰력(Friction) 로직
  • 렌더러 구현: Canvas 그리기 기능 담당

2단계: 플레이어 및 이동

  • Player 클래스 생성: 삼각형 형태의 함선 제작
  • 관성 기반 이동 구현: 추진(Thrust) 및 드리프트(Drift) 메커니즘
  • 마우스 에이밍 구현: 마우스 방향에 따른 기체 회전
  • 경계 충돌 구현: 벽면에 부딪힐 때 튕겨나가는 로직

3단계: 전투 시스템

  • Projectile 클래스 구현: 총알(Bullets) 제작
  • 사격 메커니즘 구현: 발사 재사용 대기시간(쿨타임) 및 에너지 소모 설정
  • 도탄(Ricochet) 로직 구현: 총알이 벽에 맞고 튕겨나가는 효과
  • 무기 시스템 구현: 트윈 샷(Twin Shot) 등 무기 종류별 데이터 구조 설계

4단계: 특수 능력

  • 중력 우물(Gravity Well) 구현: 적들을 끌어당기는 블랙홀 능력
  • 반중력 펄스(Anti-Gravity Pulse) 구현: 적들을 밀쳐내는 능력
  • 능력-에너지 시스템 통합: 특수 능력 사용 시 에너지 소모 연동

5단계: 게임플레이 로직 (적 및 웨이브)

  • Enemy 클래스 구현: 기본 AI 추적 로직 적용
  • 웨이브 매니저(WaveManager) 구현: 적 웨이브 생성 및 관리
  • 충돌 감지 구현: 총알-적, 적-플레이어 간의 충돌 판정
  • 점수 시스템 구현: 적 처치 시 점수 획득 로직

6단계: 게임 루프 및 UI 다듬기

  • 게임 오버 상태 및 재시작 구현
  • HUD 개선: 체력 바, 에너지 바, 웨이브 표시기 추가
  • 시각 효과 추가: 파티클 효과, 화면 흔들림(Screen Shake) 등

7단계: 상점 및 성장 요소 (선택 사항)

  • 상점 UI 구현: 웨이브 사이의 정비 시간 설정
  • 업그레이드 시스템 구현: 속도, 무기 강화, 에너지 용량 증가 등

개발 과정에 맞춰 진행하는데요. 플레이어 비행체가 나와야 하는데, 아무것도 없어서 버그부터 시작합니다.

HTML 기반 게임의 문제점이 수정해도 브라우저 캐시 때문에 반영이 안 되는 경우가 많은데요. 이 문제를 많이 겪을 텐데 처음부터 처리해주면 안 될까 싶네요. 에러 메시지 기능이 나오는 걸 체크해서 캐시 문제라는 걸 알아내더라고요.

이번에는 마우스를 따라 플레이어의 비행체 방향이 바뀌어야 하는데요. 위쪽은 잘 되는데, 아래쪽은 잘 안 되는 버그가 있었습니다.

처음에는 고쳤다고 했으나 고쳐지지 않았고요. 그 다음에는 선을 그어주더라고요.

3번째에 x, y 좌표를 보여주면서 y좌표가 1000까지 가는지 물어봤는데요. 제가 확인해보니 650~730 정도까지만 내려가서 알려줬더니 이번에는 고쳐졌습니다.

적과 접촉하면 HP 감소가 일어나는지 물어봤는데요. 잘 작동했습니다. 다만 잘 나오던 UI가 갑자기 뭉쳐서 나타났습니다. 버그가 생겨서 다시 해결을 요청했어요.

이제 그럴듯하게 엔진 구현이 끝났어요. 마우스 오른쪽 버튼을 누르면 광범위 폭탄도 가능해요.

게임 오버 패널과 UI 겹침 문제를 수정했습니다.

시각 효과(Visual Effects)를 추가했습니다.

게임의 타격감을 높이기 위해 파티클 시스템(Particle System)을 구현했습니다. 이제 다음과 같은 효과를 볼 수 있습니다:

  1. 적 폭발: 적을 처치하면 파편이 튀며 폭발합니다.
  2. 피격 효과: 총알이 적에게 맞거나, 플레이어가 적과 부딪히면 스파크가 튑니다.
  3. 부스터 효과: 이동할 때 기체 뒤에서 불꽃(추진체)이 뿜어져 나옵니다.
  4. 플레이어 사망: 게임 오버 시 플레이어 기체가 산산조각 납니다.

그런데 시각적인 느낌이 전혀 안 나고 폭파감도 전혀 없어서 이건 나중에 손을 봐야겠다는 생각이 들었습니다.

에너지 밸런스를 조정했습니다.

  1. 기본 공격 (왼쪽 클릭): 에너지 소모량을 3배(1.0 -> 3.0)로 늘렸습니다. 이제 난사하면 에너지가 바닥납니다.
  2. 특수 기술 (오른쪽 클릭): 에너지 소모량을 20 -> 30으로 늘리고, 재사용 대기시간(쿨다운)을 1초 -> 2초로 늘렸습니다. 이제 연속으로 계속 쓸 수 없습니다.
  3. 에너지 회복 속도: 기존보다 5배 느리게(0.5 -> 0.1) 차오르도록 너프했습니다.

웨이브가 끝날 때마다 상점이 나옵니다.

레벨 디자인 및 밸런싱을 하려고 하니 너무 번거로워요. 엑셀 툴을 만들어서 연동하는 게 좋을 것 같은데, 나중에 연동해봐야겠습니다.

개발 모드 버튼을 만들었어요. 웨이브 5단계마다 나오는 보스전으로 바로 갈 수 있는 버튼, 무적 모드, 에너지 무적 모드를 만들었는데요. 영어로 GOD이라고 쓴 거 보고 대단하다는 생각이 들었습니다.

보스가 왜 죽는지 추적하는 코드를 심었습니다. 보스가 생성되자마자 누군가에게 살해당하는 것 같습니다. 이번에 "SPAWN BOSS"를 누르면, "BOSS DELETED! Trace: …" 라는 메시지가 뜰 수 있습니다. 그 메시지(Trace 부분)를 알려주시면 범인을 바로 체포할 수 있습니다. (예: at Engine.checkCollisions, at Enemy.update 등) 확인 부탁드립니다!

보스전 진입 버튼을 누르면 버그가 있어서 보스가 죽어 버리는데요. 계속 못 찾더니 누가 죽인다고 하네요. ㅋㅋㅋ 너무 웃기네요. 그래서 누가 죽이는지 찾아야 하는데요.

범인을 잡았습니다! 원인은 "팀킬"이었습니다.
로그 분석 결과:
보스는 생성되자마자 8방향으로 탄막을 쏩니다. (자신의 몸 중심에서 반경만큼 떨어진 곳에서)
그러나 게임 엔진은 "누가 쏜 총알인지" 구분하지 않았습니다.
그래서 보스가 쏜 8발의 총알이 생성되자마자 보스 자신에게 명중해버렸습니다.
8발 * 데미지 10 = 80 데미지가 즉시 들어가서 보스가 비명횡사했습니다.

진짜 사람이랑 대화하는 느낌이에요. 보스는 시작하자마자 탄막 8발을 쏜다고 하는데요. 보스 덩치가 있다 보니 미사일이 겹치나 봅니다. 그래서 자기한테 데미지를 입히나 봅니다. 여하튼 이 부분에서만 버그 수정을 20번 넘게 한 것 같아요. 버그를 계속 못 잡더라고요.

드디어 보스전에 진입했습니다. 보스에 대한 정의는 제가 하지 않았는데요. 기발하게 보스를 만들어줬어요. 그런데 몸통이 따로 움직이고 있어서 버그 수정을 요청했어요.

만들고 나서

반나절 만에 프로토타입이 가능했던 점에서 놀랐습니다. 가장 고무적인 건 다 만들 수 있겠다는 생각이 들었습니다. 클로드 코드 이전에는 무언가를 만들기 위해서는 최소 기획, 게임, 개발 3개 분야의 전문가가 모여야 했는데요. 간혹 기획, 개발, 디자인을 하는 천재 개발자가 있었는데요. 지금 그 천재의 영역을 AI가 해주고 있다는 느낌이 들었습니다.

이제 보스 몸통과 다리를 합쳤습니다. 하나 만들고 나니 뿌듯하네요. 다만 엔진은 게임 개발의 10%도 안 됩니다. 프로토타입을 만들어도 그 다음이 산넘어 산입니다. 재미 요소를 찾아내고 직접 녹여내는 작업이 50%라고 저는 생각하고요. 가장 중요한 건 실제로 플레이하면서 게임에 몰입할 수 있게 레벨 디자인을 해줘야 하는데요. 이걸 어떻게 AI한테 시킬 수 있는지는 고민을 해봐야 할 것 같아요. 게임의 승패 요소는 AI한테 레벨 디자인을 어떻게 시켜서 플레이어의 몰입도를 끌어내는지가 관건일 것 같아요. 이 부분이 40%는 됩니다. 여하튼 재미있었지만, 다음 노가다 기본 작업이 남다 보니 진이 빠지기 시작했습니다.

보스 호위대도 나오고 레이저 빔도 쏘는 풀 강화 보스전이 구현되었습니다. 100레벨 정도로 보입니다.

  1. 배경 음악(BGM): 게임 화면을 아무데나 한 번 클릭하면 신나는 Synthwave 비트가 시작됩니다.
  2. 효과음(SFX):
    • 발사음: 뿅뿅거리는 레이저 소리
    • 폭발음: 적 파괴 시 콰광!
    • 피격음: 맞았을 때 틱틱거리는 소리

마지막으로 배경음과 효과음도 넣었습니다. 어릴 적 레트로 비트음으로 만들었더라고요. 정말 대단하네요.

만들고 나서

만약 AI 코드 개발이 안티그라비티만 있었다면 천재 소리를 들었겠지만, 이미 클로드 코드가 있죠. 그래서 비교를 안 할 수가 없는데요. 보통 3번의 반복 지시로 해결이 되어야 하는데요. 안티그라비티는 3번을 넘어서도 개선이 안 되는 부분이 은근 많아서 시간을 너무 잡아먹더라고요. 위에 보스전은 20번 넘게 버그 수정을 반복했습니다. 왜 사람들이 실무에는 클로드 코드를 쓰는지 알 것 같아요. 어쩔 수 없이 비교를 할 수밖에 없었습니다.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *