걸어서 배우는 사내 AI 구조 — 구독형 SaaS 를 쓰는 것과 우리 계정 안에 직접 짓는 것(Bedrock)이 무엇이 어떻게 다른지를, 비개발 사무직이 3D 도시를 직접 걸어 다니며 배우는 웹 교육입니다.
브라우저만 있으면 됩니다. 설치도, 로그인도, 빌드도 없습니다.
▶ 바로 시작하기
내용 버전 1.11.0 · Three.js 0.185.1 · GSAP 3.15.0
도시를 여섯 지구로 나누고, 순서대로 걸으면 이야기가 이어집니다.
순서의 출처는 src/world/layout.js 의 LEARN_ORDER 한 곳입니다.
| 지구 | 여기서 알게 되는 것 | |
|---|---|---|
| ① | 골목 | 남의 서비스를 빌려 쓴다는 게 무슨 뜻인가 (가게 열 곳) |
| ② | 구독 타워 | 들어갈 수 있는 4층 건물. 층마다 구독의 층위가 다르다 |
| ③ | 베드락 지구 | 우리 계정 안에 직접 짓는 길. 게이트에서 ①→⑩ 까지 바닥 띠를 따라간다 |
| ④ | 조작실 | 손잡이를 실제로 돌려 보는 곳 |
| ⑤ | 비용 전망대 | 같은 일을 시켰을 때 두 방식의 값이 어떻게 갈라지는가 |
| ⑥ | 수료식장 | 배운 것을 확인하고 수료 코드를 받는다 |
만질 수 있는 지점은 67곳입니다 — 정해진 지점 51곳과, 말을 걸면 한 줄씩 하는 지나가는 사람 16명.
여섯 지구 말고도 광장과 두 지구 사이 길 위에 정보보호 검문소가 하나씩 있습니다. 같은 자료를 두 경로로 보내 보면 어느 것의 답이 달라지는지가 보입니다 — 오가며 지나게 됩니다.
빌드 단계가 없습니다. index.html 이 그대로 배포본입니다.
Three.js 와 GSAP 은 importmap 으로 CDN 에서 직접 불러옵니다.
브라우저는 file:// 로 열린 ES 모듈을 막으므로, 로컬에서 볼 때는
정적 서버 하나만 띄우면 됩니다.
# 아무거나 하나
python -m http.server 8000
npx serve .그리고 http://localhost:8000 을 엽니다.
| 붙이는 값 | 하는 일 |
|---|---|
?teach |
강사 모드 — 아래를 보세요 |
?noweld |
정적 메시 합치기를 끈다 (물체를 하나씩 집어 보고 싶을 때) |
?nocull |
화면 밖 컬링을 끈다 (경계 상자를 재려면 둘 다 필요하다) |
여러 사람 앞에서 이 도시를 띄워 놓고 설명할 때 씁니다.
주소 끝에 ?teach 를 붙였을 때만 켜지고, 학습자 화면에는 흔적도 없습니다.
| 키 | 하는 일 |
|---|---|
T |
지점 목록 — 67곳 전부, 배우는 차례대로. 고르면 그 앞에 섭니다 |
. , |
다음 / 앞 박자. 발표용 리모컨의 다음·이전 단추(PageDown/PageUp)도 그대로 먹습니다 |
B |
발표용 큰 글씨 — 빔으로 쏠 때 뒷줄에서 읽히는 크기 |
R |
30초 요약 투어 — 여섯 지구를 차례로. 시작이나 마무리에 |
「움직임 줄이기」를 켜 두면 투어가 날지 않고 여섯 장면을 즉시 끊어 보여 줍니다.
대부분의 수정은 코드를 안 건드려도 됩니다.
| 고치고 싶은 것 | 여는 파일 |
|---|---|
| 화면에 나오는 모든 글 | src/i18n/ko.js (골목·NPC·행인은 ko-*.js) |
| 모델 목록과 성능 표기 | config/models.js |
| 값 계산과 단가 | config/pricing.js |
| 사내 데이터 취급 규칙 | config/data-rules.js |
| 신청 창구 · 담당 팀 · 신청 경로 | config/contact.js ← 배포 전에 꼭 바꾸세요 |
| 업무 예시 | config/workspace.js |
| 내용 버전 (수료 코드에 섞여 들어간다) | config/version.js |
자세한 설명은 docs/EDITING_GUIDE.md 에 있습니다.
이어받아 작업할 때는 이 순서로 읽으세요.
docs/TEACHING_SPEC.md— 1.11.0. 강사 모드, 검문소 둘, 접근 안내판, 골목 순서docs/SWEEP_SPEC.md— 1.10.0. 타워 층별 배치, 베드락 순서, 검사기의 사각지대docs/BUILD_REPORT.md— 무엇이 있고 무엇이 없는지, 판별 근거까지docs/CITY_LIFE_SPEC.md§7·§8 — 1.9.0 다섯 가지, 반증표 포함docs/INSPECTION_SPEC.md§8 — 47곳을 직접 조작하며 찾은 것docs/PROPS_TEXT_SPEC.md§6·§9 — 주변 사물과 글씨docs/NATURALISM_SPEC.md의RESULT— 항목별 판정과 아직 안 한 것docs/POLISH_SPEC.md의RESULT— 1.6.0
그 밖에 EDUCATION_SPEC(교육 설계),
PERFORMANCE_SPEC(성능 예산),
VISUAL_QUALITY_SPEC,
IMPROVEMENT_SPEC,
AI_ARCHITECTURE_CITY_PROMPT(최초 설계서).
검사 도구(
qa/)와 그 사진(shots/)은 이 저장소에 없습니다. 문서 곳곳이qa/facing.js같은 이름으로 근거를 가리키는데, 그건 작업자 PC 에 있는 검사기들입니다.
index.html 배포본. 이거 하나가 진입점이다
config/ 내용 설정 — 코드 몰라도 고칠 수 있는 값들
src/
main.js 부팅과 프레임 루프
core/ 카메라·입력·상호작용·저장·소리·품질 단계
world/ 도시를 짓는 곳. layout.js 가 좌표의 유일한 출처
machines/ 만질 수 있는 기계 — 누르면 무슨 일이 벌어지는지
sequences/ 오프닝·비교·수료 같은 연출
ui/ HUD·카드·대사·대체 화면
shaders/ 셀 셰이딩과 하늘
i18n/ 화면에 나오는 모든 글
docs/ 설계서와 완성 보고
WebGL2 를 쓰는 최신 크롬·엣지·파이어폭스·사파리.
WebGL 을 못 쓰면 src/ui/fallback.js 가 읽을 수 있는 대체 페이지를 대신 보여 줍니다.