GPU 가속 애니메이션과 Deterministic Timing 기반의 NN 시각화 구현

Context

수식 중심의 Neural Network 학습 설명 방식이 갖는 직관성 부족 문제 해결 필요. 데이터 흐름의 방향성과 Loss 변화를 실시간으로 시각화하여 학습 메커니즘의 직관적 이해를 돕는 인터랙티브 모델 설계 요구.

Technical Solution

• GPU-friendly CSS Transform 기반의 Framer Motion 채택으로 SVG Attribute 조작 시 발생하는 렌더링 Stuttering 현상 해결
• Forward Pass(Left to Right)와 Backpropagation(Right to Left)의 데이터 흐름을 레이어 소스/타겟 스왑 로직으로 엄격히 구분하여 구현
• Loss 값의 임계치(0.15, 0.40)에 따른 Output Node의 Dynamic Coloring을 통해 학습 상태를 시각적 피드백으로 연결
• setInterval의 누적 오차를 보정하기 위해 Start Timestamp 기준의 Drift-corrected Timing Loop를 설계하여 실행 시간의 일관성 확보
• Web Audio API를 활용하여 데이터 이동과 동기화된 합성음을 생성함으로써 다감각적 피드백 시스템 구축