공포 게임의 로직을 리버스 엔지니어링해 오픈소스 엔딩 계산기를 만들었다 (Astro + Tailwind)

Source: Dev.to

The Problem: Hidden Game Mechanics 🕵️‍♂️

저는 최근 인디 호러 RPG Dead Plate(RachelDrawsThis 제작)에 빠져버렸습니다. 식인 요리사를 위해 일하는 웨이터에 관한 환상적인 게임이지만, 한 가지 큰 불만이 있습니다: 불투명한 RNG.
게임은 Suspicion과 Affinity 같은 숨겨진 스탯에 의존합니다. 처음 10분 안에 대사를 하나 잘못 선택하면, 한 시간 뒤에 True Ending을 볼 수 없게 됩니다.

50페이지에 달하는 텍스트 공략을 번갈아 가며 읽는 데 지쳤습니다. 실시간으로 내 스탯을 추적해줄 도구가 필요했죠. 그래서 직접 만들었습니다.

HorrorHub – Interactive Ending Calculator & Character Database

게임의 의사결정 트리를 역공학하고 HorrorHub라는 인터랙티브 엔딩 계산기와 캐릭터 데이터베이스를 만들었습니다.

• Live Demo: https://deadplate.net
• Source Code: https://github.com/Causalzap/dead-plate-interactive-matrix

UI는 게임의 어두운, 거친 미학에 맞게 스타일링했으며, PC에서 플레이하면서 모바일 사용에 최적화되었습니다.

Technical Stack

Framework – Astro

Island Architecture를 제공하는 Astro를 선택했습니다. 사이트의 대부분(스토리 페이지, 캐릭터 소개)은 정적 HTML(JS 없음)로 구성돼 있어 매우 빠릅니다.

Styling – Tailwind CSS v4

Tailwind 덕분에 복잡한 그라디언트와 다크 모드 로직을 갖춘 “Classified Archives” 스타일을 신속하게 프로토타이핑할 수 있었습니다.

State Management

계산기 부분은 필요한 곳에만 주입된 간단한 바닐라 JS 로직을 사용했습니다.

Data Structure

모든 경로를 하드코딩하는 대신, 게임 로직을 JSON 구조로 매핑했습니다. 아래는 간소화된 예시입니다:

{
  "event_id": "day_3_fridge",
  "choices": [
    {
      "text": "Check the freezer",
      "effect": { "suspicion": +10, "item": "key_fragment" }
    },
    {
      "text": "Ignore it",
      "effect": { "suspicion": -5 }
    }
  ]
}

계산기는 이 JSON 트리를 순회하면서 의심 점수를 합산해 플레이어가 받을 네 가지 엔딩 중 어느 쪽인지 예측합니다.

Open Source Data 🤝

게임 데이터는 누구나 접근할 수 있어야 한다고 생각합니다. Dead Plate 전체 JSON 데이터셋을 GitHub에 오픈소스로 공개했습니다. 위키, AI 에이전트, 기타 프로젝트에 자유롭게 활용하세요.

• Repository: https://github.com/Causalzap/dead-plate-interactive-matrix

What’s Next?

다른 메카닉이 복잡한 호러 게임들(예: The Freak Circus)을 위한 허브로 확장할 계획입니다.

Astro 개발자이거나 인디 호러 팬이라면 UI나 코드 구조에 대한 피드백을 언제든 환영합니다.

읽어 주셔서 감사합니다! 💀

엔딩 계산에 버그를 발견하면 GitHub에 이슈를 열어 주세요.

Tags: #astro #javascript #opensource #gamedev