공개용 정리본: 1차 제출본(도면 좌표·과업명 제거)으로 새 이력 시작 (SPEC 34장)

- 정리는 코치 세션이 저장소 밖 도구로 수행, 하이쿠 세션이 커밋.
- 옛 81커밋은 로컬에만 보존. 기록은 evidence/gitlog_v1.txt.
- F13 기준 변경: .gitignore 에 private/*.dwg·private/full.dxf 제외 (SPEC 34장 끝 문장).
- check.sh 결과: 결과: PASS 151 / FAIL 0 / SKIP 3 (검사 범위 F01~F46)

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>

guide/control.html

@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="ko">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>구동 설명서 — 조작</title>
+<link rel="stylesheet" href="guide.css">
+</head>
+<body>
+<nav class="top"><a class="back" href="../index.html">← 3D 화면으로 돌아가기</a></nav>
+<main>
+<h1>조작 — 화면 구성과 마우스</h1>
+<h2>화면 구성</h2>
+<table>
+<tr><th>자리</th><th>내용</th></tr>
+<tr><td>왼쪽 칸</td><td>도면. 그림 위에 마우스를 올리면 누를 수 있는 곳에 노란 테두리가 뜬다.</td></tr>
+<tr><td>가운데 막대</td><td>좌우로 끌면 두 칸의 폭이 바뀐다(창 폭의 15%~85%).</td></tr>
+<tr><td>오른쪽 칸</td><td>3D 모델. 왼쪽 위에 「선택: …」 글자.</td></tr>
+<tr><td>오른쪽 칸 오른쪽 위 버튼</td><td>「구동 설명서」(이 설명서) · 「처음 화면」 · 「사람 ❚❚ / ▶」(두 사람 멈춤·다시 움직임)</td></tr>
+</table>
+<h2>3D 칸</h2>
+<table>
+<tr><th>동작</th><th>결과</th></tr>
+<tr><td>왼쪽 버튼으로 좌우 끌기</td><td>세로축을 중심으로 돈다</td></tr>
+<tr><td>왼쪽 버튼으로 위아래 끌기</td><td>기울기가 바뀐다. 위로 끌면 옆에서 보는 쪽, 더 끌면 아래에서 올려다본다</td></tr>
+<tr><td><b>오른쪽 버튼으로 끌기</b> (또는 Shift + 왼쪽 끌기)</td><td>화면을 옮긴다. 마우스를 끈 만큼 모델이 따라온다</td></tr>
+<tr><td>휠</td><td><b>마우스가 가리키는 자리</b>를 중심으로 확대·축소(0.5~40배, 한 칸에 10%)</td></tr>
+<tr><td>더블클릭 또는 「처음 화면」</td><td>처음 등각 화면으로 돌아간다</td></tr>
+<tr><td>「사람 ❚❚ / ▶」</td><td>두 사람을 멈추거나 다시 움직인다</td></tr>
+</table>
+<p>계단과 사람은 슬래브 구멍 사이로 보인다. 옆에서 보려면 왼쪽 버튼으로 위로 끌어 기울기를 낮춘다(벽은 반투명이다).</p>
+<h2>도면 칸</h2>
+<table>
+<tr><th>동작</th><th>결과</th></tr>
+<tr><td>휠</td><td>마우스가 있는 자리를 중심으로 확대·축소(0.5~40배). 확대해도 선은 얇게 유지된다</td></tr>
+<tr><td>끌기</td><td>도면을 옮긴다</td></tr>
+<tr><td>그림 누르기</td><td>그 부재를 선택한다. 도면 영역과 3D 부재가 노랗게 표시된다(아래 표)</td></tr>
+<tr><td>빈 곳 누르기</td><td>선택을 푼다</td></tr>
+</table>
+<h2>도면 연결 표</h2>
+<p>도면의 단면도와 평면도는 1 도면단위 = 1,000mm 축척이라, 3D 부재의 위치를 그대로 도면 위치로 바꿔 누를 자리를 만들었다.</p>
+<table>
+<tr><th>도면 그림</th><th>누르는 곳</th><th>3D 에서 표시되는 것</th></tr>
+<tr><td rowspan="8">단면 A-A (왼쪽 판, 오른쪽 판의 생략 단면 포함)</td><td>층마다 있는 슬래브 띠 / 슬래브 사이</td><td>그 층 슬래브 / 그 층 계단 1런</td></tr>
+<tr><td>양쪽 벽 띠</td><td>벽체</td></tr>
+<tr><td>맨 위 두꺼운 띠 / 그 위 목</td><td>상부 슬래브 / 맨홀 목</td></tr>
+<tr><td>위쪽 왼편 상자 / 위쪽 가운데 상자</td><td>분기구 전체 / 환기구 덕트 전체</td></tr>
+<tr><td>1B 위 사다리</td><td>위쪽 사다리</td></tr>
+<tr><td>19B 슬래브 위 얇은 띠</td><td>19B 패드</td></tr>
+<tr><td>맨 아래 왼쪽 칸 / 가운데 세운 벽 / 오른쪽 칸 / 오른쪽 벽 사다리</td><td>집수조 / 월류벽 / 침사조 / 바닥 사다리</td></tr>
+<tr><td>맨 아래 두꺼운 띠 / 그 밑 얇은 띠</td><td>하부 슬래브(20B) / 바닥콘크리트</td></tr>
+<tr><td>단면 B-B (왼쪽 판, 생략 단면)</td><td>슬래브·계단·벽</td><td>단면 A-A 와 같음. 4B~15B 생략 구간은 연결 없음</td></tr>
+<tr><td>평면도, 평면도 2</td><td>원 안 / 맨홀 목 / 분기구 / 환기구 덕트·환기탑 / 원 고리 / 4시 방향 터널(평면도는 30.3° 돌려 그린 그림)</td><td>상부 슬래브 / 맨홀 목 / 분기구 전체 / 환기구 전체 / 벽체 / TBM 터널</td></tr>
+<tr><td>중간슬래브 (홀수층)·(짝수층)·(18B)</td><td>원 안</td><td>그 슬래브들 한 번에 (홀수 9장, 짝수 8장, 18B)</td></tr>
+<tr><td>중간슬래브 (19B)</td><td>원 안 / 침사구 / 3시 방향 터널</td><td>19B 슬래브와 패드 / 바닥 사다리 / TBM 터널</td></tr>
+<tr><td>하부슬래브 (20B)</td><td>원 안 / 왼쪽 칸 / 세운 벽 / 오른쪽 칸 / 사다리</td><td>하부 슬래브 / 집수조 / 월류벽 / 침사조 / 바닥 사다리</td></tr>
+<tr><td>모든 평면</td><td>원 고리</td><td>벽체</td></tr>
+</table>
+<p>무엇을 보면 좋은지는 <a href="purpose.html">목적</a>, 여는 방법은 <a href="run.html">구동</a>에 있다.</p>
+</main>
+<nav class="pager"><a href="run.html">← 이전: 구동</a><a href="index.html">목차</a><span></span></nav>
+</body>
+</html>

guide/guide.css

@@ -0,0 +1,13 @@
+body { margin: 0; font-family: "Malgun Gothic", sans-serif; background: #f7f7f5; color: #222; line-height: 1.6; }
+nav.top { background: #333; padding: 10px 24px; }
+nav.top a.back { color: #ffd400; text-decoration: none; font-weight: bold; }
+main { max-width: 760px; margin: 0 auto; padding: 16px 24px 32px; }
+h1 { font-size: 26px; border-bottom: 2px solid #333; padding-bottom: 6px; }
+h2 { font-size: 18px; margin-top: 28px; }
+.lock { color: #8a3b00; background: #fff4e0; padding: 6px 10px; border-radius: 4px; font-size: 14px; }
+table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 14px; }
+th, td { border: 1px solid #ccc; padding: 6px 8px; text-align: left; vertical-align: top; }
+th { background: #eaeaea; }
+a { color: #0b5cad; }
+ul.toc { font-size: 17px; }
+nav.pager { display: flex; justify-content: space-between; border-top: 1px solid #ccc; margin: 0 auto; max-width: 760px; padding: 12px 24px 24px; }

guide/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="ko">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>구동 설명서 — 목차</title>
+<link rel="stylesheet" href="guide.css">
+</head>
+<body>
+<nav class="top"><a class="back" href="../index.html">← 3D 화면으로 돌아가기</a></nav>
+<main>
+<h1>구동 설명서</h1>
+<p>원형 수직구 3D 뷰어를 처음 쓰는 사람을 위한 설명서다. 위에서부터 차례로 읽으면 된다. 쪽마다 맨 위의 「← 3D 화면으로 돌아가기」로 언제든 3D 화면에 돌아간다.</p>
+<ul class="toc">
+<li><a href="purpose.html">목적</a> — 이 화면으로 무엇을 보나, 3분 따라 하기</li>
+<li><a href="run.html">구동</a> — 여는 방법, 잘 안 열릴 때</li>
+<li><a href="control.html">조작</a> — 화면 구성, 3D·도면 마우스 조작, 도면 연결 표</li>
+</ul>
+</main>
+</body>
+</html>

guide/purpose.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="ko">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>구동 설명서 — 목적</title>
+<link rel="stylesheet" href="guide.css">
+</head>
+<body>
+<nav class="top"><a class="back" href="../index.html">← 3D 화면으로 돌아가기</a></nav>
+<main>
+<h1>목적 — 이 화면으로 무엇을 보나</h1>
+<p>이 웹은 전력구 공사의 <b>원형 수직구</b> 일반도 한 장을 3D 로 보여 준다. 왼쪽에는 도면, 오른쪽에는 3D 모델이 나오고, 도면의 그림을 누르면 3D 에서 그 부재가 노랗게 표시된다.</p>
+<p>3D 데이터는 도면(DWG)에서 도구가 읽어 만든다. 손으로 만든 정답 모델(<code>answer.html</code>)과 부재마다 같은지 검사로 확인했다.</p>
+<p>주황색 사람 두 명 — 지하시설물에 들어갈 때는 2명 이상이 조를 이루어 이동해야 한다 — 이 시설물 계획 중 유지관리 동선계획을 따라 1B 와 19B 사이 계단을 오르내리는 과정을 보여 준다.</p>
+<h2>화면에서 읽을 수 있는 것</h2>
+<ul>
+<li><b>위</b>: 지표 아래 1.5m 의 상부 슬래브와 맨홀 목 2개, 서쪽(서북서)으로 나간 분기구, 남쪽으로 나가 동쪽으로 꺾여 환기탑에 닿는 환기구(강제) 덕트</li>
+<li><b>몸통</b>: 외경 11m(내경 9.7m) 원통, 중간 슬래브 19장(1B~19B). 슬래브마다 계단·케이블 slot·펌프 배출구·전기 배선구 구멍과 방호 난간이 있고, 홀수층과 짝수층은 구멍 자리가 반대다</li>
+<li><b>계단</b>: 경사판 위에 단이 올라간 콘크리트 계단 18런. 밑면이 경사져 있고 계단 아래는 빈 공간이다. 층마다 방향이 바뀐다</li>
+<li><b>사다리와 관</b>: 1B 위로 올라가는 사다리 2개(분기구 쪽 벽·가운데 맨홀), 환기구 쪽 벽 사다리와 환기탑 안 사다리, 19B 침사구 아래 사다리, 바닥까지 내려가는 펌프 배출관</li>
+<li><b>바닥</b>: 19B 에서 계단과 나란한 방향(평면도로는 4시 방향)으로 나가는 TBM 터널(내경 2.6m, 터널 바닥 패드 = 19B 패드 높이), 하부 슬래브 위의 월류벽과 그 양쪽 집수조·침사조. 물은 터널 → 침사조 → 월류벽을 넘어 → 집수조 → 펌프 배출관으로 흐른다</li>
+</ul>
+<h2>3분 따라 하기</h2>
+<ol>
+<li><a href="run.html">여는 방법</a>대로 화면을 연다. 처음에는 위에서 비스듬히 내려다보는 등각 화면이고, 두 사람이 이미 움직이고 있다.</li>
+<li>3D 칸 맨 위에 마우스를 두고 <b>휠을 위로</b> 굴린다. 상부 슬래브, 분기구, 환기구 덕트와 환기탑이 보인다.</li>
+<li>왼쪽 도면의 평면도에서 분기구를 누른다. 3D 에서 분기구 전체가 노랗게 바뀐다. 환기구 덕트도 눌러 본다.</li>
+<li>「중간슬래브 (홀수층)」 원을 누른다. 1B, 3B, … 17B 9장이 노랗게 바뀐다. 도면의 구멍·난간 모양과 3D 를 비교한다.</li>
+<li><b>오른쪽 버튼으로 끌어</b> 아래로 내려가며 슬래브 구멍 사이로 계단과 두 사람을 본다. 맨 아래에서 터널과 월류벽, 집수조·침사조를 본다.</li>
+<li>3D 칸 오른쪽 위 「처음 화면」으로 돌아간다.</li>
+</ol>
+<p>마우스 조작과 도면 연결 표는 <a href="control.html">조작</a>에 있다.</p>
+</main>
+<nav class="pager"><span></span><a href="index.html">목차</a><a href="run.html">다음: 구동 →</a></nav>
+</body>
+</html>

guide/run.html

@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="ko">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>구동 설명서 — 구동</title>
+<link rel="stylesheet" href="guide.css">
+</head>
+<body>
+<nav class="top"><a class="back" href="../index.html">← 3D 화면으로 돌아가기</a></nav>
+<main>
+<h1>구동 — 여는 방법</h1>
+<h2>여는 방법</h2>
+<ol>
+<li><code>drawing3d-web</code> 폴더의 <code>index.html</code> 을 더블클릭한다. 서버도 인터넷도 필요 없다.</li>
+<li>브라우저는 Chrome 또는 Edge 를 쓴다.</li>
+<li>보이는 3D 와 왼쪽 도면은 <b>도면(DWG)에서 도구가 만든 것</b>이다 — 3D 데이터 <code>model_extracted.js</code>, 도면 그림 <code>private/drawing_gen.svg</code>. 제출 압축에 들어 있다.</li>
+<li>손으로 만든 정답 모델과 견주어 보려면 <code>answer.html</code>(정답지 화면)을 연다. 왼쪽은 원본 도면 그림(CAD 에서 내보낸 SVG) <code>private/drawing.svg</code> 이다. 두 화면은 같은 모양이어야 한다 — 다르면 검사(<code>check.sh</code>)가 먼저 알려 준다.</li>
+</ol>
+<h2>도면에서 다시 만들기</h2>
+<p>도면이 바뀌면 WSL(Ubuntu)에서 한 줄로 다시 만든다. 준비: GNU LibreDWG 0.14(설치는 <code>README.md</code> 「변환 패키지」).</p>
+<ol>
+<li>원본 DWG 를 <code>private/drawing.dwg</code> 로 둔다.</li>
+<li><code>bash tools/make_model.sh</code> 를 실행한다. DWG → DXF → 그림 범위 → SVG·3D 데이터가 차례로 만들어진다.</li>
+</ol>
+<table>
+<tr><th>형식</th><th>파일</th><th>쓰임</th></tr>
+<tr><td>DWG</td><td><code>private/drawing.dwg</code></td><td>설계도면을 주고받는 원본(바이너리)</td></tr>
+<tr><td>DXF</td><td><code>private/full.dxf</code> → <code>private/drawing.dxf</code></td><td>글자로 된 도면. 전체에서 <code>tools/views.json</code> 의 그림 상자만 남겨 추출 도구가 읽는다</td></tr>
+<tr><td>SVG</td><td><code>private/drawing_gen.svg</code></td><td>웹 왼쪽 칸에 보이는 도면 그림</td></tr>
+<tr><td>JS</td><td><code>model_extracted.js</code></td><td>3D 데이터. 도면에 없는 사다리 위치·배관·색은 <code>tools/design_rules.json</code></td></tr>
+</table>
+<p>규칙은 이 도면 한 장에 맞춘 것이다. 다른 수직구 도면에 쓰려면 그림 상자(<code>tools/views.json</code>)를 바꾸고 검사로 결과를 확인해야 한다.</p>
+<h2>잘 안 열릴 때</h2>
+<table>
+<tr><th>증상</th><th>할 일</th></tr>
+<tr><td>왼쪽에 「도면 파일 없음」</td><td>안내에 나온 파일(<code>private/drawing_gen.svg</code>, 정답지 화면은 <code>private/drawing.svg</code>)이 있는지 본다. 없으면 <code>bash tools/make_model.sh</code> 로 만든다. 3D 는 도면 없이도 동작한다.</td></tr>
+<tr><td>화면이 비어 있다</td><td>압축을 푼 폴더 안의 <code>index.html</code> 을 열었는지 본다(압축 파일 안에서 바로 열면 다른 파일을 못 읽는다).</td></tr>
+<tr><td>화면이 느리다</td><td>3D 칸 오른쪽 위 「사람 ❚❚」로 두 사람을 멈추면 가벼워진다.</td></tr>
+</table>
+<p>연 다음에 할 일은 <a href="control.html">조작</a>과 <a href="purpose.html">3분 따라 하기</a>에 있다.</p>
+</main>
+<nav class="pager"><a href="purpose.html">← 이전: 목적</a><a href="index.html">목차</a><a href="control.html">다음: 조작 →</a></nav>
+</body>
+</html>