Pyodide와 Three.js 기반의 Zero-Backend 클라이언트 사이드 코딩 플랫폼 구현

Context

기존 코딩 교육 플랫폼의 정적인 학습 구조로 인한 낮은 학습 유지율 문제 발생. 즉각적인 시각적 피드백 부재에 따른 학습 동기 저하 및 텍스트 기반 문법 진입 장벽이라는 한계점 식별.

Technical Solution

• Pyodide를 통한 WebAssembly 기반 Python 런타임 구현으로 서버 없는 브라우저 내 코드 실행 환경 구축
• Three.js 기반 3D 렌더링 엔진을 활용하여 코드 실행 결과의 즉각적인 시각적 피드백 루프 설계
• Block-Based Coding에서 텍스트 코딩으로 이어지는 단계적 전이 구조를 통한 인지 부하 최소화
• Ace Editor 도입으로 구문 강조 및 에러 피드백을 제공하는 통합 개발 환경(IDE) 경험 구현
• GitHub Pages 기반 Static Site 호스팅 전략으로 백엔드 의존성을 제거한 고가용성 아키텍처 채택
• 모든 로직의 Client-side 처리를 통한 네트워크 지연 시간 제거 및 오프라인 실행 가능성 확보