AI를 엔지니어링 파트너로 활용해 주말에 3D Endless Runner 게임을 만든 방법

Source: Dev.to

아이디어: 제품 비전 우선

• 3레인 이동 (왼쪽 / 중앙 / 오른쪽)
• 점프 + 슬라이드 메커니즘
• 점진적인 난이도 곡선
• 경쟁을 촉진하는 글로벌 리더보드
• 모바일‑우선 컨트롤 (엄지손가락 친화적)

저는 깊은 게임 엔지니어링 경험이 없었어요 — 바로 그때 AI가 도움이 되었습니다.

빌드: AI를 주니어 엔지니어처럼 다루기

명확한 요구사항이 영리한 프롬프트보다 우수

스프린트 기반 반복 (한 번에 큰 빌드가 아니라)

사용자 피드백 → 제품 인사이트 → 코드 변경. 여기서 PM 사고가 가장 중요한 역할을 했습니다.

Feedback

• “와이어 장애물이 내가 뛰어넘을 수 있을 것처럼 보여요.”
  버그가 아니라 UX 불일치입니다. 수정은 시각적 암시였으며, 논리가 아닙니다.

기술 스택 (단순함을 위한 설계)

• 프론트엔드: Vanilla JavaScript + Three.js (WebGL)
• 백엔드: Node.js HTTP 서버
• 데이터베이스: PostgreSQL (리더보드 영속성)
• 호스팅: Replit (dev + prod)

React 없음. 번들러 없음. 과도한 엔지니어링 없음. 단순함이 더 빠르게 배포되었습니다.

AI가 PM으로서 나에게 바꾼 것

AI는 마법이 아니다 — 팀원이다

AI는 다음에 반응했다:

• 명확한 요구사항
• 정의된 성공 기준
• 구조화된 피드백

익숙하지? 그것이 바로 제품 업무다.

도메인 지식은 여전히 중요하다

• 난이도가 공정하게 느껴지는 이유
• 모바일 컨트롤을 재배치해야 하는 이유
• 장애물이 위험을 시각적으로 전달하는 방법

AI는 실행한다. PM은 결정한다.

속도가 진정한 돌파구다

몇 달이 걸렸을 학습이 주말 한 번에 끝났다. AI가 엔지니어를 대체해서가 아니라, 내가 무엇을 만들지에 집중하고 AI가 어떻게 만들지를 담당했기 때문이다.

결과 (현재까지)

• 빌드 시간: ~20 시간
• 코드베이스: ~2,000 라인
• 리더보드 플레이어: 1주 차에 50명 이상
• 반복 횟수: 피드백에 기반한 5개의 주요 버전
• 결과: 출시된 제품

직접 해보세요

🎮 게임을 플레이하세요: your link here

아이디어가 머릿속에만 있는 PM이라면—이것이 당신에게 주는 신호입니다. 제품 비전과 실제 작동 소프트웨어 사이의 격차가 그 어느 때보다 좁아졌습니다.

부록: 엔지니어를 위한 기술 심층 분석

3D 렌더링 아키텍처 (Three.js)

게임은 고정된 플레이어를 사용하고, 세계가 카메라 쪽으로 이동하도록 하여 무한 러너 착시 효과를 만듭니다.

// Object pooling for obstacles
function updateObstacles(delta) {
  if (obstacle.position.z > 10) {
    obstacle.position.z = -SPAWN_DISTANCE;
    obstacle.position.x = lanes[Math.floor(Math.random() * 3)];
  }
}

이렇게 하면 물리 연산이 단순해지고 불필요한 변환을 피할 수 있습니다.

충돌 감지 (성능 우선)

메시 충돌 대신 바운딩 박스를 사용합니다:

function getPlayerBoundingBox() {
  if (isSliding) {
    return slidingBox; // 히트박스를 동적으로 축소
  }
  return standingBox;
}

간단하고 성능이 뛰어납니다.

속도 진행 곡선 (버그 → 인사이트 → 수정)

// New (consistent) linear scaling with a cap
const speed = Math.min(BASE_SPEED + level * SPEED_INCREMENT, MAX_SPEED);

예측 가능한 난이도 조절을 제공합니다.

모바일 터치 컨트롤 (UX 중심)

button {
  position: fixed;
  /* 엄지손가락에 닿기 쉬운 위치, 실수 스크롤 방지, 지연 없음 */
}

button.addEventListener('touchstart', e => {
  // 점프 또는 슬라이드 처리
});

리더보드 영속성 (Postgres)

IF NOT EXISTS (SELECT 1 FROM leaderboard WHERE user_id = $1)
   INSERT INTO leaderboard (user_id, score) VALUES ($1, $2);
ELSE IF $2 > (SELECT score FROM leaderboard WHERE user_id = $1)
   UPDATE leaderboard SET score = $2 WHERE user_id = $1;

개인 최고 점수만 업데이트되며, 리더보드 스팸을 방지합니다.

주간 리셋 (경쟁 시즌)

TRUNCATE leaderboard;

성능 최적화

• 반복되는 에셋에 대한 지오메트리 인스턴싱
• 프러스텀 컬링 (Three.js 기본 제공)
• 텍스처 아틀라싱
• requestAnimationFrame 기반 루프

function animate() {
  if (!isPaused) {
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
  }
}

파일 구조

빌드 단계가 없습니다. 번들러도 없습니다. 바로 동작하는 코드만 있습니다.

Final Thought

AI는 엔지니어링을 대체하지 않았다. 아이디어와 실행 사이의 거리를 좁혔다 — 특히 시스템, trade‑offs, 그리고 결과를 생각하는 방법을 이미 알고 있는 사람들에게. 당신이 PM, 디자이너, 혹은 “언젠가 만들겠다”고 기다려온 빌더라면 — 그 날은 지금이다.