Zero-Backend 기반의 정적 아키텍처로 구축한 25종의 역사 시뮬레이터

I Built 25 Free Historical Life Simulators. Here's What the Process Taught Me About Decision-Making.

Văn Tuấn Lê2026년 7월 1일4분beginner

AI 요약

Context

역사적 인물의 의사결정 시점의 인지적 상태를 재현하기 위해 단순 정보 전달 위주의 전기 형식을 탈피한 상호작용형 도구 필요성 대두. 사용자 경험의 몰입도를 위해 로딩 지연을 최소화하고 즉각적인 피드백을 제공하는 초경량 시스템 설계 요구.

Framework-less 아키텍처: React, Vue 등 무거운 프레임워크를 배제하고 Pure HTML/CSS/JavaScript만 사용하여 초기 렌더링 속도 극대화 및 빌드 단계 제거.
Serverless Static Design: 데이터베이스 없이 각 시뮬레이터를 독립적인 단일 HTML 파일로 구성하여 Server Call을 완전히 제거한 Zero-latency 구조 구현.
Commit-First 로직 설계: 선택지 노출 후 결과 공개 순서를 강제하는 상태 제어 로직을 통해 사용자의 사후 합리화를 방지하는 epistemic position 구현.
Client-side State Management: JavaScript 함수 내에서 closest 및 querySelectorAll을 활용한 DOM 조작으로 정답 확인, 점수 계산, 프로그레스 바 업데이트를 브라우저 메모리 내에서 즉시 처리.
비용 최적화 호스팅: 정적 파일 중심의 구조를 통해 연간 약 $20 수준의 저렴한 Shared Hosting만으로 전체 서비스 운영 가능 환경 구축.

실천 포인트

1. 최소 기능 구현 시 프레임워크 도입 전 Pure JS로 프로토타이핑 가능 여부 검토

2. 서버 통신 없이 클라이언트 사이드에서 완결 가능한 데이터 구조 설계 고려

3. UX 목적에 부합하는 상태 전이 순서(State Transition Order)를 로직에 강제하여 사용자 경험 설계

4. 정적 자산 중심의 배포 전략을 통한 인프라 비용 최적화 검토

태그