Draw a Digit and Watch the Neural Network Think in Real Time

개요

개발자가 사용자가 직접 그린 숫자를 실시간으로 인식하고, 신경망 내부의 신호 흐름을 시각화하는 도구를 제작했다. 이 도구는 브라우저에서 직접 실행되며, 실제 CNN 모델이 작동하는 과정을 보여준다.

주요 내용

* 실시간 인터랙티브 시각화: 사용자가 손가락이나 마우스로 숫자를 그리면, Convolutional Neural Network (CNN)가 실시간으로 이를 인식하고 그 과정에서 발생하는 내부 신호 흐름을 여러 방식으로 시각화한다.
* 세 가지 시각화 방식:
* Dial-style Heatmap: 0부터 9까지의 숫자를 전화기 다이얼 형태로 배열하고, 각 숫자에 대한 네트워크의 예측 신뢰도를 색상 강도로 실시간 표시한다.
* Network Diagram: 입력층부터 출력층까지 각 노드와 연결선이 신호 강도에 따라 주황색으로 빛나며, 신호가 이동하는 경로를 추적할 수 있다.
* CNN Input Preview: 사용자가 그린 이미지가 네트워크가 '보는' 28x28 픽셀로 다운스케일링되는 과정을 보여준다.
* 실제 CNN 동작: 시뮬레이션이나 재현이 아닌, 27,690개의 파라미터를 가진 실제 CNN 모델이 브라우저에서 직접 실행되며, 컨볼루션, ReLU 활성화, 맥스 풀링, 완전 연결 계층 연산이 중간값과 함께 시각화된다.
* 개발 동기: 이전 Transformer Emulator 프로젝트가 사전 계산된 결과를 '보는' 경험이었다면, 이번 프로젝트는 사용자가 직접 그림을 그려 AI의 즉각적인 반응을 '느끼는' 경험을 제공하고자 했다.
* 작동 파이프라인: 사용자가 숫자를 그리는 동안, 캔버스 입력은 28x28 픽셀로 다운스케일링 및 전처리(바운딩 박스 탐지, 중심 정렬)되며, 순수 JavaScript로 구현된 CNN 모델이 추론을 수행한다. 이후 중간 활성화 값이 시각화 업데이트에 사용된다.
* 학습 내용:
* CNN은 숫자 인식 과정에서 인간의 직관과 유사한 '망설임'을 보인다.
* MNIST 데이터셋에 맞는 전처리(바운딩 박스 탐지, 중심 정렬)가 인식 정확도에 결정적인 영향을 미친다.
* 적절한 아키텍처(컨볼루션)를 사용하면 적은 파라미터로도 높은 정확도를 달성할 수 있다. (27,690 파라미터로 98.04% 정확도)
* 기술 스택:
* 훈련: Python / pure NumPy (PyTorch 미사용, 역전파 직접 구현)
* 추론: Vanilla JavaScript (브라우저 내 실행)
* 시각화: SVG + Canvas + CSS
* 모델 아키텍처: Conv(5x5, 8ch) → ReLU → MaxPool(2) → Conv(3x3, 16ch) → ReLU → MaxPool(2) → Flatten(400) → FC(64) → ReLU → FC(10) → Softmax
* 다국어 지원: 일본어와 영어를 지원하며, 브라우저 설정에 따라 자동 감지되거나 URL 파라미터를 통해 언어 설정을 변경할 수 있다.

시사점

이 도구는 복잡한 신경망의 내부 작동 방식을 시각적으로 체험하게 함으로써, AI 학습에 대한 직관적인 이해를 돕고 기술의 원리를 직접 느껴볼 수 있는 교육적이고 인터랙티브한 경험을 제공한다.