개발자가 플래시카드를 좀비 FPS, 러너 게임, 테트리스로 변환하는 통합 아키텍처를 공개했다

Context

기존 학습 앱은 게임을 보상으로만 사용해서 학습과 게임이 완전히 분리되어 있었다. 플래시카드 시스템과 게임 질문 시스템이 따로 해 중복 생성, DB 불일치, API 비용 낭비가 발생했다.

Technical Solution

• reviewCardToQuestion 함수로 카드 앞면을 질문으로, 뒷면을 정답으로 변환
• useSharedQuestionSetup 훅으로 리뷰 카드 변경 시 모든 게임의 질문 풀이 반응형 동기화
• 바닐라 Three.js로 3D 좀비 FPS 구현 (R3F 대신 세밀한 제어 유지)
• 5개 신체 부위를 정답 옵션에 매핑하는 5- 시스템 설계
• Trystero로 P2P 멀티플레이어 구현 (호스트가 좀비 시뮬레이션 소유)

Impact

별도 AI 생성 없이 질문 풀이 실시간 업데이트, API 비용 절감

Key Takeaway

학습 데이터와 게임 데이터를 동일 소스로 관리하면 별도 생성 시스템이 불필요해진다