🏰 Fortress Retro
개발 스토리
레트로 포트리스 스타일 미니게임을 기획부터 배포까지 만든 과정. AI와 함께한 9단계 이터레이션 기록. Building a retro Fortress-inspired mini-game from concept to deployment — a 9-stage iteration log with AI.
📋 세 줄 요약📋 TL;DR in 3 lines
- 기획 — 포트리스 영감의 "2터치 곱셈" 메커닉 (POWER × AIM = 비거리)Concept — A "2-touch multiplication" mechanic inspired by Fortress (POWER × AIM = distance)
- 개발 — Claude 에서 React 프로토타입 → 단일 HTML 로 변환 (CDN + Babel)Dev — React prototype in Claude → single HTML via CDN + Babel
- 배포 — Netlify 호스팅 + Supabase DB · 관리자는 Table Editor 에서 랭킹 관리Deploy — Netlify + Supabase · admin manages rankings via Table Editor
제작 타임라인Timeline
게임 메커닉 설계Game Mechanic Design
포트리스 스타일 영감 → "2번의 터치를 곱해서 기록을 만든다" 는 핵심 룰 확정. 1차 터치는 3초 타이밍 파워 차지, 2차 터치는 좌우 이동 바 중앙 정확도. Inspired by Fortress → core rule: "multiply two taps to make a score." First tap = 3-second timing power charge, second tap = center-accuracy of a moving aim bar.
Claude Artifact 에서 React 로 빌드Built in React via Claude Artifact
캔버스 기반 픽셀 아트 렌더링 + 포물선 물리 시뮬레이션 + CRT 스캔라인 오버레이. 초기엔 아티팩트 내부 저장소(window.storage)로 간단히 저장.
Canvas-based pixel art + projectile physics + CRT scanline overlay. Initially saved to in-artifact window.storage.
로그인 → 플레이 → 자동 저장 구조Login → Play → Auto-save Flow
매번 점수 입력하는 불편 제거. 로그인 화면 추가(한글/영어 10자), localStorage 세션 유지, 플레이 종료 시 자동 저장.
Removed manual score entry. Added login screen (KR/EN, 10 chars), localStorage session, auto-save on play end.
배포 플랫폼 비교 분석Platform Comparison
3가지 옵션(Cloudflare D1 / Firebase / Supabase) 비교. 단일 HTML 패턴 유지 + 관리자 대시보드 편의성을 우선 → Netlify + Supabase 조합 확정. Compared 3 options (Cloudflare D1 / Firebase / Supabase). Prioritized single-HTML pattern + admin dashboard UX → picked Netlify + Supabase.
단일 HTML 파일 패키징Single-HTML Packaging
React 18 UMD + Babel Standalone + Tailwind CDN. window.storage → Supabase JS SDK 로 교체. 상수 3개만 바꾸면 누구나 복제 배포 가능한 구조.
React 18 UMD + Babel Standalone + Tailwind CDN. window.storage → Supabase JS SDK. Anyone can fork by swapping 3 constants.
Supabase 테이블 + RLS 정책Supabase Tables + RLS
scores 테이블(uuid, name, score, power, accuracy, created_at) + Row Level Security + anon 용 select/insert/delete 정책 설정.
scores table (uuid, name, score, power, accuracy, created_at) + RLS + anon policies for select/insert/delete.
Netlify 드래그앤드롭 업로드Netlify Drag-and-drop Deploy
파일명을 index.html 로 변경 후 Netlify 대시보드에 드래그. 사이트 이름 커스터마이즈로 최종 URL 완성.
Renamed to index.html, dragged into Netlify dashboard, customized site name for final URL.
검은 화면 이슈 해결Black Screen Issue Fix
초기 배포 시 빈 화면 문제. Babel Standalone 의 data-presets="react" 가 옵셔널 체이닝을 변환 못하는 이슈 → "env,react" 로 확장 + 에러 캐치 스크립트로 해결.
Initial black screen. Babel Standalone's data-presets="react" didn't handle optional chaining → expanded to "env,react" + added error-catch script.
홈페이지 통합 런칭Homepage Integration
yonchelee.com/game/ 카테고리 신설 → Fortress Retro 정식 입주. 관리자(영채)는 Supabase 대시보드에서 실시간 랭킹 모니터링. Added /game/ category to yonchelee.com → Fortress Retro officially hosted. Admin monitors rankings in real-time via Supabase.
기술 스택과 선택 이유Stack & Rationale
env,react preset 으로 최신 JS 커버.JSX runs directly in browser. env,react preset covers modern JS.배포 아키텍처Deployment Architecture
React+Babel
Postgres
핵심 교훈Key Lessons
window.addEventListener('error') 캐치 스크립트 하나로 디버깅 시간이 극적으로 줄어든다.
Silent CDN failures — Babel transform errors leave just a blank screen with no console output. A single window.addEventListener('error') catch script dramatically cuts debug time.
🏰 이제 직접 플레이해볼 차례Your turn to play
모바일·PC에서 바로 접속 가능. 로그인 후 실시간 글로벌 랭킹에 도전하세요.Instant access on mobile/PC. Log in and climb the real-time global leaderboard.
▶ Fortress Retro 플레이▶ Play Fortress Retro