Sanity Content Lake로 구현한 시대 횡단 미스터리 게임 CHRONOS-HEIST

AI 요약

CHRONOS-HEIST는 Sanity Challenge 출품작으로, 한 금고의 세 시대 모습을 오가며 과거의 행동이 미래를 바꾸는 미스터리 게임입니다. 개발자는 방과 사물, 물리적 구조, 인과 규칙을 React 상태나 고정된 SQL 테이블에 두지 않고 Sanity Content Lake의 구조화된 콘텐츠로 모델링했습니다. 시간대는 1920년, 1970년, 2026년이며, 각 시대에는 서로 다른 장치와 분위기를 갖춘 금고가 등장합니다.

과거의 행동을 미래에 반영하는 구조

1920년 금고의 다이얼에 19-70-26을 입력해 열쇠를 얻고 북쪽 벽 틈에 숨기면, temporalAction 문서가 Sanity Content Lake에 기록됩니다. 서버 측 Causality Engine은 causalityLink 관계를 평가하고, Sanity Live Query가 변경 내용을 실시간으로 전달합니다. 페이지를 새로고침하지 않아도 1970년의 전선관에 이상 징후가 나타나고, 2026년 금고에는 숨겨진 공간이 생겨 Chronos Core Cylinder가 드러납니다.

이 데이터 모델에는 era, room, gameObject, temporalAction, causalityLink, paradox, timelineState, gameSession, player, workflowTransition 등 10개 스키마가 들어갑니다. 인과관계 그래프는 sourceObject와 targetObject, deltaType, probability를 담는 방향 그래프로 표현하며, D3.js 기반 시각화 도구를 Sanity Studio 안에 넣었습니다.

실시간 동기화와 사람의 승인

게임의 처리 단계는 과거 행동 기록, 인과관계 에이전트의 영향 분석, 미래 상태 재계산, 게임 마스터 검토, 타임라인 확정 순서입니다. 게임 마스터 센터에서는 운영자가 AI 에이전트의 신뢰도 점수를 확인하고 타임라인을 확정합니다. 글은 이를 5단계 Sanity Workflow로 설명하며, 확정된 기록은 변경할 수 없는 기준 기록으로 남깁니다.

기술 구성은 Next.js 16, Sanity Content Lake v5, next-sanity/live, Three.js, D3.js, Web Audio API, TypeScript, Tailwind CSS입니다. Next.js Server Actions와 next-sanity/live를 연결해 Sanity 변경이 완료되면 WebGL 캔버스가 숨겨진 공간을 다시 그립니다. 앱에는 Sanity 트랜잭션 왕복 지연 시간을 재는 콘솔과 클라이언트 변경 기능도 포함해, GROQ 요청 내용을 실시간으로 확인하도록 했습니다.

제작과 배포

개발자는 Google Antigravity IDE를 이용해 프로젝트를 만들었다고 설명합니다. 3D 화면의 어두운 조명 때문에 기계 모델이 잘 보이지 않던 문제는 황동 조명과 녹색 램프, 천장 조명을 더하고 CRT 효과의 어두운 스캔라인을 제거해 조정했습니다. Vercel CLI가 Next.js 16과 Turbopack 프로젝트를 정적 dist 폴더가 필요한 앱으로 판단하자, vercel.json에 framework를 nextjs로 지정해 배포 설정을 바로잡았습니다.

게임에는 360도 궤도 조작, 레이캐스팅, 레이더 미니맵, 1920년 금고 조합 잠금장치, 1970년 오실로스코프 주파수 조정 퍼즐이 들어갑니다. 개발자는 프로시저럴 오디오로 시대별 음향도 만들었다고 소개합니다.

dev.to 반응

• @garima_gupta_1ca176a8b800 — 훌륭한 작업입니다! 확실히 눈에 띄는 프로젝트네요.
• @vidisha_gupta_ — 정말 인상적인 작업입니다🔥

원문: dev.to / 번역·요약: Trawling