3D 개념 설명 페이지

처음 배우는 사람이 "무엇이 어디서 막히고, 어디로 흐르고, 언제 생기고 사라지는지"를 눈으로 확인하게 만드는 것이 목표다. 글만으로는 잡히지 않는 구조(층, 경계, 흐름, 수명)를 모형으로 보여 주고, 버튼으로 그 일을 직접 일으켜 보게 한다. 모형은 장식이 아니라 설명의 절반이다.

결과물

• 단일 HTML 파일. three.js r170과 웹폰트를 CDN에서 받으므로 열 때 인터넷이 필요하다. 빌드는 없다.
• 왼쪽: 제목, 도입, 번호 붙은 장, 용어 정리, 출처. 오른쪽: 고정된 3D 무대(현재 장 제목, 시점 되돌리기, 자동 실행 스위치, 의미 색 범례).
• 스크롤해서 화면 가운데를 지나는 장의 장면으로 바뀐다. 장마다 버튼 하나와 결과 문장이 있다. 무대 오른쪽 위의 "자동 실행" 스위치를 켜면 읽고 있는 장의 동작이 반복 재생된다(기본은 꺼짐, 켠 상태는 브라우저에 기억).
• 완성 예시: assets/example-agent-sandbox.html (AI 에이전트 코드 샌드박스의 격리 방식, 10장). 비슷한 장면이 필요하면 이 파일에서 먼저 찾는다.

작업 순서

references/preferences.md가 있으면 먼저 읽는다. 겹치는 항목은 이 문서의 기본값보다 preferences를 따른다. 없으면 기본값을 쓴다.