
거대 지성체에게 쫓기며 무너지는 도시를 달리는 3D 게임을 만들었어요
뒤돌아보면 죽습니다. 파수꾼이 부수는 도시를 앞으로만 질주하는 무상태 3D 추격 서바이벌이에요.
자랑 포인트
- Three.js·Rapier 물리로 굴러가는 3D 추격 — 거인 파수꾼의 내리찍는 발을 좌우로 피하며 생존해요
- 시드(?seed=)로 코스가 그대로 재현돼서, 친구에게 링크로 같은 코스를 던져 기록을 겨룰 수 있어요
- 서버·로그인 없이 클라이언트 100%, 최고 기록은 localStorage에 저장됩니다
무너지는 도시를 앞으로만 달리는 게임이 만들고 싶었어요. 뒤에서 뭔가 거대한 게 쫓아오고, 돌아보면 죽는 그런 긴장감이요. 그래서 나온 게 콜로서스 런입니다. 도시가 스스로 세운 거대 지성체 '파수꾼'이 깨어나서, 그게 부수는 도시를 뚫고 도망치는 3D 추격 서바이벌이에요.

사실 처음 기획은 흔한 '등 뒤 추격 카메라 + 전방 장애물 피하기'였어요. 근데 만들어서 돌려보니까 영 재미가 없더라고요. 쫓아오는 놈이 등 뒤에 있으니까 안 보이고, 그냥 앞으로 달리기만 하는 러너 게임이랑 다를 게 없었어요. 그래서 카메라를 확 뒤집었습니다. 파수꾼을 정면으로 조망해서 거인이 화면을 꽉 채우게 하고, 핵심 위험을 '내리찍는 발'로 바꿨어요. 바닥에 그림자로 착지 지점이 예고되면 그걸 좌우로 피하는 거죠. 이 한 번의 전환으로 게임이 완전히 달라졌습니다. 공포의 대상이 눈앞에 보이니까 긴장감이 생기더라고요.

물리는 Rapier로 굴렸어요. 발에 밟히거나 무너지는 구조물에 부딪히면 끝이고, 얼마나 멀리 갔는지 거리(m)로 기록이 남습니다. 위 화면처럼 죽으면 "몇 m 생존"이 뜨는데, 이걸 스크린샷으로 찍어서 "나 이만큼 갔다" 자랑하라고 만든 거예요. 재밌는 건 코스가 시드(seed) 기반이라는 점이에요. 같은 시드 링크를 열면 똑같은 코스가 그대로 재현돼서, 친구한테 "이 코스 나보다 더 가봐" 하고 링크를 던질 수 있습니다.

기술 스택은 Next.js(App Router)에 TypeScript, 3D는 Three.js를 React Three Fiber로 올렸고 물리는 Rapier예요. 서버는 아예 없고 클라이언트 100%라, 최고 기록이나 설정은 전부 localStorage에 저장됩니다. 모바일에서도 좌우 드래그·스와이프로 조작되게 맞췄고요.
발 피하는 타이밍을 잡는 게 생각보다 미묘했어요. 그림자가 너무 일찍 떠도 긴장이 안 되고, 너무 늦게 떠도 피할 수가 없어서 "불공평하다" 소리가 나오거든요. 바닥 그림자가 커지는 속도랑 실제 발이 내리찍히는 순간 사이의 간격을, 돌려보고 조이고 다시 돌려보고를 수십 번 반복하면서 "아 이 정도면 반사신경으로 피할 수 있다" 싶은 지점을 찾았습니다. 대시(Shift)로 위기 순간을 한 번 빠져나갈 수 있게 해둔 것도, 테스트하다가 "여기서 한 번만 더 가속할 수 있으면 살 텐데" 싶은 순간이 자꾸 나와서 넣은 거예요.
머리 복잡할 때 생각 비우고 달리기 좋습니다. 처음엔 다들 몇 초 못 버티고 발에 밟히는데, 그 맛에 또 '같은 코스 재도전'을 누르게 돼요.