의존성 없는 Vanilla JS 기반 무한 캔버스 렌더링 엔진 설계

Context

프레임워크 오버헤드로 인한 렌더링 성능 저하 문제 발생. 외부 서버 텔레메트리에 의존하는 데이터 보안 취약성 상존. 설치 과정과 서버 설정의 복잡도로 인한 초기 진입 장벽 존재.

Technical Solution

• Vanilla JavaScript와 HTML5 Canvas API를 직접 제어하여 프레임워크 오버헤드를 제거한 고성능 렌더링 구조
• 브라우저 LocalStorage를 활용한 세션 상태 자동 저장 및 로컬 데이터 지속성 확보
• 캔버스 전체 데이터를 암호화된 .json 페이로드로 컴파일하는 양방향 직렬화 설계
• 고해상도 .png 파일 렌더링 기능을 통한 시각적 데이터 추출 방식 구현
• GitHub Pages 기반 정적 호스팅으로 서버 설정 없는 즉각적인 배포 환경 구축
• Light/Dark Mode 전환 기능을 통한 사용자 시각 피로도 최적화 설계

Key Takeaway

불필요한 추상화 계층을 제거하고 브라우저 기본 API를 최적화하여 런타임 성능과 보안성을 동시에 확보하는 Lean Architecture의 중요성.