02. 물리 버그 잡기

게임 엔진의 물리 시스템에 숨어 있는 미묘한 버그를 Kiro와 함께 추적하고, AI를 단순 실행기가 아닌 사고의 동반자로 활용하는 법을 배웁니다.

이전 모듈에서는 주로 HTML과 CSS를 다듬는 작업을 했다면, 이번 모듈에서는 한 단계 더 깊이 들어가 게임 엔진의 핵심 JavaScript 코드를 살펴봅니다. 시작하기 전에 ../00-setup의 안내에 따라 게임이 로컬에서 실행되고 있는지 확인하세요.

Step 1. 문제 상황 파악하기

플레이어들이 흥미로운 제보를 보내왔습니다. 가끔 물리 시뮬레이션이 폭주해서 화면 위의 아이템들이 어이없을 정도로 높이 튀어 오른다는 것입니다. 한 사용자가 보내준 녹화 영상을 먼저 살펴보겠습니다.

아이템이 비정상적으로 크게 튀어 오르는 물리 버그 재현 화면
탭을 전환했다가 돌아오면 오브젝트가 폭주하듯 튀어 오르는 현상

Step 2. Kiro에게 원인 분석을 맡기기

증상을 그대로 설명하는 것이 가장 좋은 출발점입니다. 다음과 같은 프롬프트를 그대로 입력해 보세요.

When something is moving or colliding, and the player tabs out then back in, the items do a tremendous bounce. Players report "items go haywire".

Kiro는 프로젝트 파일을 훑은 뒤 원인 코드를 짚어 줍니다. 답변 일부를 옮기면 다음과 같습니다.

"The problem is in the physics-system.ts file. When a user tabs out and back in, the lastTimestamp value becomes stale"

요지는 이렇습니다. 브라우저 탭이 비활성 상태가 되면 requestAnimationFrame 루프가 일시 중단되고, 다시 활성화되는 순간 lastTimestamp가 한참 전 시점에 머물러 있게 됩니다. 그 결과 새로 계산된 deltaTime이 ms 단위가 아니라 수 초 단위까지 부풀려진 채 물리 계산에 들어가면서, 속도와 위치가 한꺼번에 폭발적으로 누적되는 것이죠.

Tip. 버그 리포트는 사용자의 표현 그대로 전달하는 편이 도움이 됩니다. "haywire" 같은 단어도 모델이 맥락을 파악하는 단서가 됩니다.

Step 3. 더 깊이 파고들기

Kiro는 보통 한두 줄짜리 빠른 패치를 곧장 제안합니다. 하지만 거기서 멈추지 말고, 다른 가능성을 함께 열어보는 것이 좋습니다.

  1. 첫 번째 수정안이 제시되면 바로 적용하지 말고 그대로 둡니다.
  2. 이어서 다음 프롬프트를 던집니다.

    What other potential solutions or mitigations should I consider?

  3. Kiro가 document.visibilityState 감지, deltaTime 상한 클램핑, 누락된 프레임 보정 등 대안적인 접근들을 늘어놓는 것을 확인합니다.

Step 4. 한 발 더 들어가기

이제 모델의 컨텍스트가 물리 시스템 쪽에 충분히 맞춰져 있습니다. 이 흐름을 활용해 같은 파일에서 추가로 개선할 만한 지점이 있는지 물어보세요.

Do you see anything else that looks like it could be improved?

의외로 처음 답변에는 등장하지 않았던 잠재적 이슈, 예컨대 수치 적분 방식의 안정성이나 충돌 해결 순서 같은 부분이 따라 나오기도 합니다.

Tip. 대형 언어 모델은 폭넓은 지식을 가지고 있지만, 그것을 끌어내는 일은 사람의 몫입니다. 첫 답변에 만족하지 말고 "왜?", "또 뭐가 있지?", "그러면 그 다음은?" 같은 질문을 계속 던져 보세요.

핵심 정리

AI를 단순한 작업 실행기로만 쓰면 그 가치의 일부만 활용하는 셈입니다. 코드 한 줄을 고치는 것을 넘어, 내가 놓치고 있던 부분을 짚어 주는 사고의 파트너로 삼을 때 진짜 효과가 드러납니다. physics-system.ts의 lastTimestamp 문제를 해결하는 동시에, 같은 코드 안에 숨어 있는 다른 약점까지 함께 정리해 보세요.