Next.js와 Pure SVGs, JSON-LD를 활용한 교육용 수학 게임 만들기
Source: Dev.to
소개
안녕하세요 DEV 커뮤니티! 👋
최근에 제 웹 아케이드인 7x.games에 새로운 교육용 게임인 Fraction Math Master를 추가했습니다.
보통 개발자들이 웹 게임을 만든다고 하면 바로 Canvas, WebGL, 혹은 Phaser 같은 엔진을 떠올립니다. 하지만 교육용 퍼즐 게임에는 그 정도가 과잉일 때가 많죠. 저는 순수 React, Tailwind CSS, 그리고 SVG만을 사용해 매우 인터랙티브하고 빠르며 SEO‑최적화된 수학 게임을 어떻게 만들었는지 공유하고 싶었습니다.
1. SVG 수학으로 동적인 “피자 조각” 그리기
아이들은 분수를 시각적으로 배울 때 가장 잘 이해합니다. 저는 분모에 해당하는 원을 원하는 만큼 조각으로 나누고, 그 중 일부(분자)를 색칠해서 보여줄 방법이 필요했습니다.
무거운 이미지 파일을 로드하는 대신, 기본 삼각법을 이용해 SVG 경로를 실시간으로 생성하는 FractionCircle React 컴포넌트를 만들었습니다.
각 조각의 각도 ((2 * Math.PI) / denominator)를 계산하고, Math.cos와 Math.sin을 사용해 정확한 SVG 호를 그렸습니다.
// Simplified snippet of the SVG math
const cx = size / 2;
const cy = size / 2;
const r = size / 2 - 8;
const sliceAngle = (2 * Math.PI) / den;
const startAngle = -Math.PI / 2 + i * sliceAngle;
const endAngle = startAngle + sliceAngle;
const x1 = cx + r * Math.cos(startAngle);
const y1 = cy + r * Math.sin(startAngle);
const x2 = cx + r * Math.cos(endAngle);
const y2 = cy + r * Math.sin(endAngle);
// Draw the wedge!
const path = `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${largeArc} 1 ${x2} ${y2} Z`;순수 SVG이기 때문에 모바일 화면에서도 완벽히 스케일링되고, 파일 용량도 바이트 단위에 불과합니다. 또한 사용자가 정답을 맞췄을 때 transform: scale(1.03) 같은 부드러운 팝 애니메이션을 손쉽게 추가할 수 있었습니다.
2. “무한 while 루프” 함정 피하기
게임은 동적으로 다중 선택형 질문을 생성합니다(예: “2/4와 동등한 분수를 찾으세요”).
초기에는 무작위 오답을 만들기 위해 while 루프를 사용했습니다:
- 무작위 분수를 생성한다.
- 정답과 같다면 버리고 다시 루프한다.
버그: 난이도 제한이 빡빡할 때(예: 최대 분모가 6인 Easy Mode) 가능한 고유 오답이 부족해 무한 루프에 빠져 브라우저가 멈추고 탭이 크래시되었습니다.
해결책: 결정적 배열 생성기
무작위 숫자를 “추측”하는 대신, 난이도 제한 내에서 가능한 모든 오답을 즉시 계산하고, 풀을 섞은 뒤 상위 3개만 반환하는 헬퍼 함수를 작성했습니다.
// Pre‑generate valid wrong answers to avoid infinite loops
function getSafeWrongs(correctN, correctD, count, maxD) {
const correctVal = correctN / correctD;
const pool = [];
for (let d = 2; d
{children}
);
}🎮 결과
그 결과, 외부 자산이 전혀 필요 없는 빠르고 반응성이 뛰어나며 고도로 인터랙티브한 교육용 게임이 완성되었습니다. 게임 모드는 다섯 가지(Identify, Compare, Equivalent, Simplify, Add/Sub)와 콤보‑스트릭 시스템을 제공합니다.
여기서 직접 체험해 보세요: 7x.games에서 Fraction Math
2D 웹 게임을 만들 때 여러분이 선호하는 스택은 무엇인가요? 항상 Canvas를 사용하시나요, 아니면 더 간단한 메커니즘을 위해 React/DOM 요소를 활용하시나요? 의견을 알려주세요!