신경망의 역전파(Backpropagation) 알고리즘을 눈으로 직접 확인하며 학습할 수 있는 인터랙티브 플랫폼입니다.
- 엣지 클릭 한 번으로 ∂L/∂w 수식 자동 생성
- 입력층 → 은닉층 → 출력층까지의 기울기 흐름 추적
- LaTeX 스타일 수식으로 체인 룰 분해
- 엣지 색상: 파랑(음수) / 빨강(양수) 기울기
- 엣지 두께: 기울기 크기에 비례
- 노드 색상:
- 순전파 시: 활성화 크기 히트맵
- 역전파 시: 델타(δ) 크기 히트맵
- Forward → Backward → Update 3단계 순환
- 각 단계마다 다른 시각화 제공
- 1 Step씩 또는 자동 실행 모드
- ✅ Healthy: 정상적인 학습
⚠️ Vanishing: 기울기 소실 감지- 🔥 Exploding: 기울기 폭발 경고
- 데이터셋: Linear, XOR, Moon
- 노이즈: 0 ~ 0.3
- 은닉층 노드: 1 ~ 6개
- 활성화 함수: ReLU, tanh
- 학습률: 0.01 ~ 1.0
npm installnpm run dev브라우저에서 http://localhost:3000 접속
npm run build
npm startdeeplearning-sample1/
├── app/
│ ├── backprop/page.tsx # 메인 페이지 (/backprop)
│ ├── page.tsx # 홈 (리다이렉트)
│ └── layout.tsx # 루트 레이아웃
├── components/
│ ├── backprop/
│ │ ├── BackpropPlayground.tsx # 메인 오케스트레이터
│ │ ├── GraphCanvas.tsx # SVG 신경망 시각화
│ │ ├── DatasetPreview.tsx # 2D 데이터 플롯
│ │ ├── FormulaBlock.tsx # 수식 표시
│ │ ├── TipsBadge.tsx # 기울기 건강도 배지
│ │ └── LossSparkline.tsx # 손실 변화 차트
│ └── ui/ # shadcn/ui 컴포넌트
├── lib/
│ ├── backprop/
│ │ ├── types.ts # 타입 정의
│ │ ├── utils.ts # 수학 유틸리티
│ │ ├── dataset.ts # 데이터셋 생성
│ │ └── network.ts # 신경망 로직
│ └── utils.ts # shadcn 유틸리티
├── public/ # 정적 파일
└── package.json
목표: 비선형 분리 데이터를 학습시켜 역전파의 필요성 이해
- 데이터셋을 XOR로 선택
- 은닉층 3개, ReLU, 학습률 0.5 설정
- "1 Step 학습" 버튼 클릭하며 단계별 관찰
- Forward: 활성화가 어떻게 전파되는지
- Backward: 기울기가 역방향으로 흐르는지
- Update: 가중치가 어떻게 변하는지
- 엣지 클릭 → 체인 룰 수식 확인
- "자동 실행" → 정확도 90%+ 달성 관찰
배우는 것: 은닉층이 없으면 XOR를 풀 수 없는 이유
목표: 부적절한 하이퍼파라미터가 학습에 미치는 영향 이해
- 은닉층 6개, 학습률 1.0 설정
- "자동 실행" 클릭
- 🔥 Exploding Gradient 경고 확인
- 손실 차트가 불안정하게 진동하는 것 관찰
- 학습률을 0.1로 낮춤
- ✅ Healthy 상태로 안정화 확인
배우는 것: 학습률이 너무 크면 발산하는 이유
목표: ReLU vs tanh의 학습 특성 비교
- ReLU로 XOR 학습 (100 epoch)
- 손실 변화와 학습 속도 기록
- "초기화" 클릭
- tanh로 변경 후 동일하게 학습
- 두 함수의 기울기 흐름 비교
배우는 것: 활성화 함수에 따른 기울기 소실 차이
- Next.js 15 - App Router, Turbopack
- TypeScript 5 - 타입 안전성
- React 19 - 최신 React 기능
- TailwindCSS 4 - 유틸리티 CSS
- shadcn/ui - 재사용 가능한 컴포넌트
- Pure TypeScript - 외부 ML 라이브러리 없음
- 순수 수학 연산으로 구현 (교육 목적)
// 은닉층
z1 = X @ W1 + b1
a1 = σ(z1) // ReLU or tanh
// 출력층
z2 = a1 @ W2 + b2
ŷ = sigmoid(z2)
// 손실
L = -(y log(ŷ) + (1-y) log(1-ŷ))// 출력층 기울기
dz2 = ŷ - y
dW2 = a1^T @ dz2 / N
db2 = mean(dz2)
// 은닉층 기울기
dz1 = (dz2 * W2^T) ⊙ σ'(z1)
dW1 = X^T @ dz1 / N
db1 = mean(dz1, axis=0)W1 -= lr * dW1
b1 -= lr * db1
W2 -= lr * dW2
b2 -= lr * db2색상 = v >= 0 ? "빨강" : "파랑"
두께 = 1.5 + 5.5 * sqrt(|v| / max_gradient)
투명도 = 선택됨 ? 1.0 : 0.9순전파 시:
색상 = hsl(120, 50%, 65 - 35 * activation)
// 활성화가 클수록 진한 녹색역전파 시:
색상 = hsl(280, 60%, 60 - 30 * delta)
// 델타가 클수록 진한 보라색이 플레이그라운드를 통해 다음을 눈으로 직접 확인할 수 있습니다:
-
✅ 체인 룰의 시각화
- ∂L/∂w가 어떻게 연쇄적으로 계산되는지
- 각 층의 기울기가 어떻게 곱해지는지
-
✅ 기울기 흐름
- 출력층에서 입력층으로의 역방향 전파
- 각 가중치가 손실에 얼마나 기여하는지
-
✅ 학습 과정
- 가중치가 실시간으로 업데이트되는 과정
- 손실이 감소하며 정확도가 올라가는 과정
-
✅ 기울기 문제
- Vanishing: 기울기가 0에 가까워지는 현상
- Exploding: 기울기가 폭발적으로 커지는 현상
현재는 기본 기능만 구현되어 있습니다. 다음 기능을 추가할 수 있습니다:
- 결정경계 히트맵 - 2D 공간에서 분류 경계 시각화
- 옵티마이저 비교 - SGD, Momentum, Adam
- 배치 정규화 - Batch Normalization 효과 관찰
- 더 깊은 네트워크 - 3-4층 네트워크 지원
- KaTeX 렌더링 - 수식을 더 예쁘게 표시
- 실험 저장/공유 - 파라미터 세트 북마크
- 타임라인 리플레이 - 학습 과정 재생
- 가중치 초기화 비교 - Xavier vs He vs Uniform
- Neural Networks and Deep Learning - Michael Nielsen
- 3Blue1Brown - Neural Networks - 시각적 설명
- CS231n: Convolutional Neural Networks - Stanford 강의
- Backpropagation Calculus - 3Blue1Brown
MIT License
이슈나 PR은 언제든 환영합니다!
버그 리포트나 기능 제안:
- GitHub Issues에 등록
- 상세한 재현 방법 포함
이 프로젝트는 딥러닝을 배우는 모든 분들께 역전파 알고리즘의 직관을 제공하기 위해 만들어졌습니다.
Made with ❤️ for Deep Learning Education
질문이나 제안사항이 있으시면 이슈를 등록해주세요.