나는 Astro, React, 그리고 Open Data를 사용하여 Marvel Rivals용 전술 도구를 만들었습니다

발행: 6일 전 (2026년 2월 2일 오후 05:02 GMT+9)

4 분 소요

원문: Dev.to

Source: Dev.to

안녕하세요, 개발자와 게이머 여러분! 👋
최근에 Marvel Rivals를 많이 플레이하고 있습니다. 정말 뛰어난 히어로 슈터인데, 경쟁적인 플레이어(이면서 개발자)로서 뭔가 부족함을 느꼈습니다.

게임 내 스코어보드는 데미지와 힐량을 알려주지만, 매크로 전략은 알려주지 않죠.

“우리 팀에 충분한 실드 파괴가 있나요?”
“첫 번째 전투를 강제할 수 있는 가장 빠른 궁극기는 누가 가지고 있나요?”
“우리 팀의 파워 스파이크는 적 팀에 비해 언제인가요?”

그래서 이 문제를 해결하기 위해 도구를 만들기로 했습니다.

Meet Rivals Victory

🛠️ The Tech Stack

Framework

Astro (정적 사이트 생성 및 완벽한 SEO를 위해).

Interactivity

React (“Islands Architecture”를 사용한 계산기).

Styling

Tailwind CSS.

Data

JSON (맞춤형 데이터셋).

Deployment

Cloudflare Pages.

💡 Key Features

Ultimate Economy Calculator

가장 모델링하기 어려운 부분이었습니다. 고수준 플레이에서는 Ultimate Economy가 경기 흐름을 좌우합니다. 팀 구성을 받아 평균 템포를 계산하는 React 컴포넌트를 만들었습니다.

Hulk (600 비용): 매우 빠른 템포. 초반에 전투를 강제합니다.
Adam Warlock (5000 비용): 매우 느림. 승리 조건이지만, 지연이 필요합니다.

이 차이를 시각화함으로써 플레이어는 공격적으로 플레이할지, 방어적으로 플레이할지 판단할 수 있습니다.

The Mechanic Finder (Drafting Tool)

일반적인 역할(Vanguard/Duelist)로 필터링하는 대신, 유틸리티 기반 태깅 시스템을 만들었습니다. 데이터를 구조화하여 다음과 같은 전술적 질문에 답할 수 있게 했습니다:

“Iron Man을 카운터하기 위해 Hitscan이 필요합니다.”
“Venom을 멈추려면 Stun이 필요합니다.”

🔓 Open Sourcing the Data

데이터셋을 별도의 GitHub 저장소에 공개하여 여러분이 Discord 봇, 분석 도구, 앱 등에 자유롭게 사용할 수 있도록 했습니다.

GitHub 저장소: marvel-rivals-data (실제 링크로 교체)

다음은 데이터 구조(heroes.json)의 일부 예시입니다:

{
  "id": "hulk",
  "name": "Hulk",
  "ultimateCost": 600,
  "tags": ["tank", "shieldBreaker", "fastTempo"]
}

전체 JSON 파일은 다음에서 호스팅됩니다:
https://cdn.jsdelivr.net/gh/rivalsvictory-assets/rivalsvictory-assets@main/data/heroes.json

🚀 What’s Next?

매치업별 팁 (예: “Punisher vs Storm 플레이 방법”).
맵별 시너지 가이드.

게임 데이터에 관심이 있는 게이머이든 개발자이든, 여러분의 피드백을 기다립니다!

실제 사이트: https://rivalsvictory.com
GitHub 데이터: JSON 여기서 받기 (실제 링크로 교체)

읽어 주셔서 감사합니다! 코딩과 게임을 즐기세요. 🎮