기계 속으로 — DESCENT INTO SILICON

컴퓨터 본체에서 시작해, 부품을 클릭할 때마다 점점 안으로 파고들며 컴퓨터 구조를 배우는 인터랙티브 학습 웹페이지.

본체 → 메인보드 → CPU → ALU → 가산기 → 논리게이트 → 트랜지스터 → 반도체 → 원자

✨ 특징

• 물리적 줌인 — 도식 위 부품을 누르면 그 지점을 중심으로 확대되며 안으로 들어갑니다.
• 실제 구조 도식 — 24개 부품 전부 실제 생김새/구조를 모사한 SVG (케이스 내부배치, 메인보드 PCB, CPU 다이, ALU 사다리꼴, MOSFET 단면, PN접합, 실리콘 격자 …).
• 살아있는 애니메이션 — 팬 회전, 버스를 흐르는 데이터, 트랜지스터 전류, GPU 코어 점멸, HDD 플래터, 충전 맥동.
• 깊이 게이지 — 실제 크기 눈금(10cm ↔ 1Å)으로 지금 얼마나 작은 세계인지 표시.
• 노드 47개 · 4단 학습 구조 — 본문 → 📘 전공 노트 → 📖 교재 딥다이브(접이식, 전공책 수준) → 💡 알아두면 → ✅ 확인 퀴즈. 용어 교차링크(43종)로 하이퍼텍스트 교재처럼 탐험.
• 인라인 미니랩 18종 — 읽기만 하지 않고 직접 만져봅니다.
  • 🧪 논리게이트 · 가산기 · 트랜지스터 · NAND 조립 · PN 바이어스 · 밴드갭
  • 🧪 페치-디코드-실행 · 파이프라인 · 플립플롭 · 캐시 적중/실패 · 가상 메모리 · 2진수
  • 🧪 래스터화(드래그) · 워프 발산 · 텐서 레이스 · HDD 탐색 · 발열 평형 · 평활

🚀 실행

별도 빌드 없이 정적 파일입니다.

# 아무 정적 서버로 열면 됩니다
python3 -m http.server 8000
# → http://localhost:8000

또는 index.html을 브라우저에서 바로 열어도 동작합니다.

🗂 구조

computerStructure/
├─ index.html       # 뼈대
├─ css/style.css    # "기계 속으로" 다크 테크 디자인
├─ js/
│  ├─ data.js       # 탐험 트리(콘텐츠) — 여기만 고치면 내용 변경
│  ├─ labs.js       # 인라인 미니랩 위젯
│  └─ app.js        # 네비게이션 · 줌인 연출
├─ PLAN.md          # 기획/계획서
└─ README.md

🛠 기술

순수 HTML + CSS + JavaScript (의존성 없음) · GitHub Pages 배포.

🗺 로드맵

• 24개 부품 실제 구조 도식 + 줌인 핫스팟
• 도식 애니메이션(회전·흐름·점멸)
• 미니랩: 게이트·가산기·트랜지스터·페치-디코드-실행
• 첫 방문 인트로, 깊이 게이지 눈금
• 설정 패널: 표현 모드(도식/사진), 언어(한국어/한·영)
• 미니랩 추가: 레지스터(플립플롭)
• 가지 더 깊게: GPU 코어 내부, 멀티코어 등

---

🤖 Generated with Claude Code