피드로 돌아가기
THE LONGEST DAY
Dev.toDev.to
Frontend

Zero-Dependency 기반 Vanilla JS 단일 파일 아키텍처 구현

THE LONGEST DAY

Isaac Sam2026년 6월 9일5beginner

Context

프레임워크나 빌드 단계 없이 브라우저 환경에서 즉시 실행 가능한 고성능 내러티브 게임 구현 필요. 외부 에셋 로딩에 따른 네트워크 지연과 의존성 관리 비용을 제거한 경량 구조 설계 지향.

Technical Solution

  • 데이터 기반 스토리 엔진 설계를 통한 STORY 배열 내 장면 데이터 객체화 및 renderStep() 함수를 통한 상태 기반 렌더링 구조 구현
  • requestAnimationFrame 루프와 <canvas> API를 결합하여 챕터별 테마에 따른 파티클 및 그라데이션 배경의 실시간 동적 렌더링 처리
  • Web Audio API를 활용한 Pure JavaScript 합성 방식의 절차적 오디오 생성 엔진 구축으로 오디오 파일 로딩 오버헤드 제거
  • Caesar Cipher 로직의 직접 구현을 통한 인풋 검증 및 상태 피드백 시스템 설계
  • 단일 index.html 내 HTML/CSS/JS 통합 구조를 통해 배포 복잡도를 최소화한 Self-contained 아키텍처 채택

- 에셋 로딩 최적화를 위해 Web Audio API 기반의 Procedural Audio 생성 검토 - 단순 상태 전이 구조의 앱 설계 시 데이터 객체 배열 기반의 스토리 엔진 패턴 적용 - 빌드 도구 없는 Vanilla JS 환경에서 Canvas API를 통한 고성능 시각 효과 구현 가능성 확인

원문 읽기