Chasing the Sun: Building a 3D AI-Powered Solstice Runner with React Three Fiber
My submission for the June Solstice Game Jam: A 3D endless runner where you chase the sun with React Three Fiber and the Gemini API.
개요 #
1년 중 해가 가장 긴 날, 결코 지지 않는 태양을 향해 끝없이 달린다. 개발자 S M Tahosin이 6월 하지 게임잼(June Solstice Game Jam)에 출품한 Solstice Runner는 이런 콘셉트의 3D 엔드리스 러너다. 브라우저 위에서 돌아가는 3D 월드를 React Three Fiber로 구현하고, 장애물과 대사를 미리 박아두는 대신 Google의 Gemini API가 매 순간 새로운 로직 퍼즐을 만들어내도록 설계했다.
핵심 목표는 한 문장으로 정리된다. 액션과 지능형 로직을 자연스럽게 섞은, 빠른 템포의 3D 웹 경험을 만든다는 것이다.
어떤 게임인가 #
플레이어는 화사한 3D 세계를 달리며 장애물을 피하고, 그때그때 생성되는 환경과 상호작용한다. 단순히 앞으로만 달리는 흔한 러너로 끝내고 싶지 않았다는 게 제작자의 설명이다. 그래서 게임은 하지를 기념하듯 절대 저물지 않는 태양을 향해 계속 전진하게 만들고, 달리는 도중 앨런 튜링에서 영감을 받은 즉석 논리 퍼즐을 풀게 한다.
처음 출발점은 단순한 질문 하나였다.
만약 하지가 논리에 이끌리는, 시간과의 경주라면 어떨까?
배포된 게임에서는 3D 장애물 코스 달리기, 실시간으로 생성되는 AI 대화 경험, 튜링에서 영감을 얻은 로직 노드와의 반사신경 대결을 직접 해볼 수 있다. GitHub Pages로 호스팅되어 브라우저에서 바로 플레이할 수 있고, 짧은 게임플레이 영상과 소스 코드도 공개되어 있다.
사용한 기술 스택은 다음과 같다.
- React — UI와 애플리케이션 상태 관리
- React Three Fiber / Three.js — 3D 렌더링 파이프라인과 게임 월드 전체
- Vite — 빠른 개발 및 빌드 도구
- Google AI API (Gemini) — 실시간 상호작용과 로직 생성
- Tailwind CSS — HUD 오버레이 스타일링
어떻게 만들었나 #
제작자는 가장 먼저 핵심 렌더링 루프부터 잡았다. "씬 렌더링 → 이동 처리 → AI 로직 생성 → 장애물 회피"로 이어지는 흐름이다. 브라우저에서 3D 이동이 자연스럽게 느껴지는 수준에 도달한 뒤에야 나머지 요소를 하나씩 얹었다.
브라우저에서 3D 월드 굴리기 #
가장 큰 난관은 브라우저에서 3D 성능을 매끄럽게 뽑아내는 일이었다. 순수 Three.js만 쓰면 보일러플레이트가 많이 필요한데, 그래서 React Three Fiber를 선택했다. 3D 메시와 조명, 카메라를 평범한 React 컴포넌트처럼 다룰 수 있어 개발 속도가 크게 빨라졌다. 환경 조명은 하지의 분위기를 살리려고 따뜻하고 밝은 톤으로 잡았다.
Photo by Nadine Ginzel on Pexels
Gemini API를 게임 마스터로 #
장애물이나 대사 시퀀스를 코드에 직접 박아두는 대신, Google AI API를 "게임 마스터"로 썼다. 플레이어가 특정 체크포인트에 닿을 때마다 게임이 현재 상태를 API에 보내고, API는 고유한 로직 챌린지와 서사 텍스트를 돌려준다. API 호출이 게임의 렌더 루프를 막지 않도록 다듬는 데 시간이 좀 걸렸지만, 결과적으로 매번 다르게 반응하는 게임이 나왔다.
앨런 튜링에게 바치는 헌사 #
6월은 앨런 튜링이 태어난 달이기도 하다. 제작자는 이 점을 살려 튜링을 향한 헌사를 게임에 녹였다. 달리는 도중 마주치는 논리 체크포인트는 "튜링 게이트(Turing Gates)"라는 이름이 붙어 있다. 패턴 인식이나 단순한 이진 판단 같은 빠른 사고를 요구하고, 이를 통과해야 계속 달릴 수 있다.
| 기능 | 콘셉트 | 동작 방식 |
|---|---|---|
| 튜링 게이트 | 로직 노드 | AI가 생성한 논리 퍼즐을 풀어야 안전하게 통과 |
| 끝나지 않는 하루 | 6월 하지 | 조명이 영원히 골든아워 상태로 유지 |
출품 부문 #
이 프로젝트는 **최고의 Google AI 활용(Best Google AI Usage)**과 최고의 앨런 튜링 헌정(Best Ode to Alan Turing) 두 부문에 출품됐다. Gemini API가 핵심 동적 대화와 로직 생성을 맡아 매 플레이가 고유하게 느껴지도록 했고, 튜링 게이트를 헤쳐 나가는 핵심 메커니즘은 컴퓨팅과 지능 분야에 남긴 튜링의 유산에 대한 직접적인 오마주 역할을 한다.
제작자는 3D 웹 게임과 생성형 AI를 섞는 시도에 대한 의견, 그리고 직접 플레이한 최고 기록을 댓글로 나눠 달라며 글을 맺었다.
이 글은 위 출처를 바탕으로 한국 독자를 위해 재작성한 기사입니다. 원문의 사실과 수치에 근거하며, 별도의 견해를 포함하지 않습니다.