feat(가이드): B03 파일입력 가이드 글 9 · 그림 9 · 장면 목록(PLAN 540-1 · 요구 359 · 360)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-26 09:21:58 +09:00
parent 30518a03f9
commit 9bf63d00e0
19 changed files with 553 additions and 11 deletions
@@ -1,9 +1,39 @@
-# 파일입력 설명서
+# 파일입력

-## 이 화면에서 하는 일
+계획노선 파일과 지형(라이다) 파일을 올려, 이후 설계의 바탕 자료를 만듦.
+
+## 여는 길
+
+- 프로젝트를 만들면 자동으로 열림.
+- 이미 만든 프로젝트는 대시보드 [프로젝트] 표의 단계 막대에서 「파일입력」 누름.
+
+![화면 한눈에](B03_00_overview.webp)
+
+## 화면 구역
+
+| 번호 | 구역 | 하는 일 |
+| --- | --- | --- |
+| 1 | 왼쪽 패널 | 지금 단계(파일입력)와 프로젝트 이름 · 진행 안내 글 · 접기 손잡이 · [?] 도움말 |
+| 2 | [입력 파일 선택] 칸 | 파일을 끌어다 놓거나 눌러서 한꺼번에 고름 |
+| 3 | [임시 보관함] | 대시보드에 미리 올려 둔 자료를 가져옴 |
+| 4 | [파일 업로드] | 고른 파일을 서버로 올림 |
+| 5 | [LAS 없이 설계 (도엽등고선 기반)] | 라이다 없이 도엽 등고선으로 지형을 만드는 선택 |
+| 6 | [계획노선 자료] | 노선 도형 · 색인 · 속성 · 인코딩 · 좌표계 카드 다섯 |
+| 7 | [지형 자료 (LAS)] | 포인트클라우드 · 지형 좌표계 · 래스터 좌표 · 지형 래스터 카드 넷 |
+
+![왼쪽 패널](B03_08_left_panel.webp)
+
+왼쪽 패널 그림 번호 — ① 단계 이름 · ② 패널 접기 손잡이 · ③ [?] 도움말. 이미 끝난 프로젝트는 「필수 파일 업로드와 지표면 분석이 모두 완료된 프로젝트입니다. 파일을 다시 올리면 기존 결과가 교체됩니다.」 안내가 패널에 보임.

 ## 작업 순서

-## 버튼
+1. 파일을 끌어다 놓거나 [입력 파일 선택] 으로 고름 → [파일 올리기](B03/01_파일_올리기).
+2. 카드마다 파일이 맞게 들어갔는지 확인 → [카드 읽는 법](B03/02_카드_읽는_법).
+3. 대시보드에 올려 둔 자료가 있으면 [임시 보관함] 으로 → [임시 보관함에서 가져오기](B03/03_임시_보관함에서_가져오기).
+4. 산림청 예정노선을 쓰면 [예정노선에서 가져오기] → [예정노선 가져오기](B03/04_예정노선_가져오기).
+5. 라이다가 없으면 [LAS 없이 설계] → [LAS 없이 설계](B03/05_LAS_없이_설계).
+6. [파일 업로드] → 분석이 끝나면 전처리 화면으로 자동 이동 → [B04](B04/00_설명서).

-## 주의할 점
+> 주의: 이미 끝난 프로젝트에 파일을 다시 올리면 기존 분석 결과가 새 파일로 교체됨.
+
+> 참고: 어떤 파일이 필요한지는 [필요한 파일](B03/10_필요한_파일) 참고.
@@ -0,0 +1,34 @@
+# 파일 올리기
+
+계획노선 · 지형 파일을 고르고 서버로 올림.
+
+## 여는 길
+
+- 파일입력 화면 위쪽 [입력 파일 선택] 칸과 [파일 업로드] 단추.
+
+![올리기 줄](B03_01_pick_row.webp)
+
+그림 번호 — ① [입력 파일 선택] 칸 · ② [임시 보관함] · ③ [파일 업로드] · ④ [LAS 없이 설계 (도엽등고선 기반)].
+
+## 단계
+
+| 단계 | 할 일 |
+| --- | --- |
+| 1 | 컴퓨터의 파일들을 [입력 파일 선택] 칸 위로 끌어다 놓음 (칸을 눌러 고를 수도 있음) |
+| 2 | 확장자를 보고 파일이 알맞은 카드에 자동으로 들어감 — 카드 상태가 「완료」 나 선택 표시로 바뀜 |
+| 3 | 빠진 카드는 카드의 [파일 선택] 으로 한 칸씩 채움 |
+| 4 | 잘못 넣은 파일은 카드의 ✕ [파일 제거] 로 되돌림 |
+| 5 | 필수 카드가 모두 차면 [파일 업로드] 가 켜짐 · 누름 |
+| 6 | 카드마다 진행률 · 속도 · 예상 완료 시간이 표시됨 |
+| 7 | 올리기가 끝나면 분석이 백그라운드로 돌고, 끝나면 전처리 화면으로 자동 이동 |
+
+## 보이는 것
+
+- 올리는 동안 [파일 업로드] 단추는 「업로드 중…」 으로 바뀜.
+- 같은 칸에 이미 올라간 파일이 있으면 「기존 파일 교체 확인」 창이 뜸 — [교체] 를 누르면 기존 파일과 분석 결과(지표면 모델 등)가 바뀜, [취소] 하면 그대로.
+- 오류 글 예: 「같은 유형의 파일이 이미 선택되어 있습니다.」 · 「선택한 파일 유형이 이 카드와 맞지 않습니다.」 · 「필수 카드를 모두 채우세요 …」.
+- 올리다 중단되면 「중단된 업로드 감지」 띠가 뜸 — 같은 파일을 다시 고르고 [업로드 재개].
+
+> 주의: 계획노선 PRJ 와 지형 PRJ 는 서로 다른 칸. 라이다 PRJ 가 작업 좌표계 기준이며 노선 좌표계와 다르면 올리기가 막힘.
+
+> 참고: 큰 파일은 올리는 데 시간이 걸림. 올리는 동안 창을 닫지 않기.
@@ -0,0 +1,52 @@
+# 카드 읽는 법
+
+계획노선과 지형 자료의 카드 아홉 장이 각각 무엇을 뜻하는지, 어떤 정보를 미리 보여 주는지.
+
+## 여는 길
+
+- 파일입력 화면의 [계획노선 자료] · [지형 자료 (LAS)] 구역.
+
+![카드 한 장의 구성](B03_04_card_parts.webp)
+
+## 단계
+
+| 번호 | 부분 | 뜻 |
+| --- | --- | --- |
+| 1 | 카드 이름과 확장자 | 이 카드가 받을 파일의 종류 (예: 계획노선 도형 .shp) |
+| 2 | 상태 | 완료 · 업로드 중 · 대기 · 실패 · 선택 |
+| 3 | [파일 선택] | 이 카드에 파일을 직접 고름 |
+| 4 | 파일명과 크기 | 지금 올라가 있는 파일 |
+| 5 | 미리보기 | 파일을 읽어서 보여 주는 요약 |
+
+### 계획노선 자료
+
+그림 번호는 아래 표의 번호와 같음 — 맨 아래 [예정노선에서 가져오기] 는 [예정노선 가져오기](B03/04_예정노선_가져오기).
+
+![계획노선 카드들](B03_02_route_cards.webp)
+
+| 번호 | 카드 | 파일 | 미리보기 |
+| --- | --- | --- | --- |
+| 1 | 계획노선 도형 | .shp | 노선 모양 |
+| 2 | 노선 도형 색인 | .shx | 도형 개수 · 범위 |
+| 3 | 노선 속성 | .dbf | 레코드 · 속성 개수 |
+| 4 | 노선 속성 인코딩 | .cpg (선택) | 인코딩 번호 |
+| 5 | 노선 좌표계 | .prj | 좌표계 이름과 번호 |
+
+### 지형 자료
+
+그림 번호는 아래 표의 번호와 같음.
+
+![지형 카드들](B03_03_terrain_cards.webp)
+
+| 번호 | 카드 | 파일 | 미리보기 |
+| --- | --- | --- | --- |
+| 1 | 포인트클라우드 | .las · .laz | 점 5,000개를 솎아 위에서 본 모양 |
+| 2 | 지형 좌표계 | .prj | 좌표계 이름과 번호 |
+| 3 | 래스터 좌표 | .tfw | 픽셀 크기 |
+| 4 | 지형 래스터 | .tif (선택) | 지형 래스터 그림 |
+
+## 보이는 것
+
+- 계획노선이 지형 자료 범위를 벗어나면 「계획노선이 지형 자료 범위를 벗어납니다.」 · 안에 있으면 「계획노선이 지형 자료 범위 안에 있습니다.」 표시.
+
+> 참고: 지형 쪽 PRJ · TFW 는 지형 자료의 좌표계. 노선 PRJ 와 별개.
@@ -0,0 +1,28 @@
+# 임시 보관함에서 가져오기
+
+대시보드 임시 보관함에 먼저 올려 둔 자료를 이 프로젝트로 옮김. 큰 파일을 미리 올려 둘 때 편함.
+
+## 여는 길
+
+- 파일입력 화면 위쪽 [임시 보관함] 단추.
+
+![보관 자료 선택 창](B03_06_temp_modal.webp)
+
+## 단계
+
+| 단계 | 할 일 |
+| --- | --- |
+| 1 | [임시 보관함] 누름 |
+| 2 | 목록에서 가져올 묶음을 고름 (이름 · 파일 개수 · 크기가 보임) |
+| 3 | [확인] |
+| 4 | 자료가 프로젝트로 옮겨지고 분석이 시작됨 |
+
+## 보이는 것
+
+그림 ① 은 창 아래 [취소] · [확인] 단추 줄. 그림은 보관 자료가 없을 때의 모습.
+
+- 옮기기가 끝나면 「보관 자료를 프로젝트로 옮겼습니다. 분석을 시작합니다.」 알림.
+- 라이다 파일이 묶음에 없으면 「파일은 옮겼지만 라이다 파일이 없어 분석을 시작하지 못했습니다.」 알림.
+- 쓸 수 있는 묶음이 없으면 「사용할 수 있는 보관 자료가 없습니다. 대시보드 임시 보관함에서 필수 파일을 모두 올려 주세요.」 안내.
+
+> 참고: 보관함에 올리는 방법은 [B01 임시 보관함](B01/04_임시_보관함).
@@ -0,0 +1,30 @@
+# 예정노선 가져오기
+
+산림청이 우리 회사에 지정해 준 예정노선을 계획노선 칸에 바로 넣음.
+
+## 여는 길
+
+- 파일입력 화면 [계획노선 자료] 카드 맨 아래 [예정노선에서 가져오기] 단추.
+
+![예정노선 고르기 창](B03_07_plan_import_modal.webp)
+
+## 단계
+
+| 단계 | 할 일 |
+| --- | --- |
+| 1 | [예정노선에서 가져오기] 누름 |
+| 2 | 「지정받은 예정노선 연도 고르기」 창에서 연도를 선택 |
+| 3 | 안내에 따라 [예정노선에서 가져오기] 로 확정 |
+| 4 | 「예정노선을 노선 칸에 넣었습니다.」 알림 후 노선 카드들이 채워짐 |
+
+## 보이는 것
+
+그림은 지정받은 예정노선이 없을 때의 모습 — 있으면 연도 목록이 나타남.
+
+- 지정받은 예정노선이 없으면 「우리 회사에 지정된 예정노선이 없습니다.」 안내.
+- 이미 연결된 노선은 「연결됨: 프로젝트 이름」 표시.
+- 연결한 예정노선이 나중에 바뀌면 화면 위에 「예정노선이 바뀜 …」 띠와 [다시 가져오기] 가 나타남.
+
+> 주의: 이미 분석이 끝난 프로젝트에 가져오면 기존 결과가 지워짐 — 확인 창이 한 번 더 뜸.
+
+> 참고: 받은 예정노선 목록은 [B01 받은 예정노선](B01/03_받은_예정노선).
@@ -0,0 +1,25 @@
+# LAS 없이 설계
+
+라이다(LAS) 파일이 없을 때 1:5,000 수치지형도의 도엽 등고선으로 지형을 만드는 선택.
+
+## 여는 길
+
+- 파일입력 화면 위쪽 [LAS 없이 설계 (도엽등고선 기반)] 체크 칸.
+
+![체크한 모습](B03_05_lasfree_on.webp)
+
+## 단계
+
+| 단계 | 할 일 |
+| --- | --- |
+| 1 | (그림 ①) [LAS 없이 설계 (도엽등고선 기반)] 에 체크 |
+| 2 | (그림 ②) 포인트클라우드 카드가 흐려지며 필수에서 빠짐 |
+| 3 | 계획노선 파일과 지형 좌표계(PRJ)만 채움 |
+| 4 | [파일 업로드] |
+
+## 보이는 것
+
+- 체크 칸 위에 마우스를 올리면 「포인트클라우드 없이 1:5,000 수치지형도 등고선으로 지형을 만듭니다.」 안내.
+- 체크한 상태에서 LAS · LAZ 파일을 넣으면 「LAS 없이 설계를 켠 상태에서는 LAS/LAZ 파일을 넣을 수 없습니다.」 표시.
+
+> 참고: 전처리 화면에서는 [도엽등고 3D 서피스] 가 지형의 바탕이 됨 → [B04 도엽등고 3D 서피스](B04/04_도엽등고_3D_서피스).
@@ -1,5 +1,11 @@
 # 필요한 파일

 - 계획노선 — shapefile 한 벌(.shp·.shx·.dbf·.cpg·.prj) 5개.
+
+![계획노선 카드 다섯](B03_02_route_cards.webp)
+
 - 지형 — 포인트클라우드 LAS/LAZ 1개와 좌표계 PRJ, 래스터 기준 TFW.
- 지형 TIF(DEM)는 선택 사항 — 없어도 지표면 분석이 진행됩니다.
+
+![지형 카드 넷](B03_03_terrain_cards.webp)
+
+- 지형 TIF(DEM)는 선택 사항 — 없어도 지표면 분석이 진행됨.
@@ -1,5 +1,10 @@
 # 고르는 방법

- 여러 개를 한 번에 끌어 놓으면 확장자로 카드에 자동 배정됩니다.
- 카드의 [선택]으로 한 칸씩 지정하거나 ✕로 되돌릴 수 있습니다.
- [임시 보관함]은 대시보드에 미리 올려 둔 자료를 가져옵니다.
+- 여러 개를 한 번에 끌어 놓으면 확장자로 카드에 자동 배정됨.
+
+![올리기 줄](B03_01_pick_row.webp)
+
+- 카드의 [파일 선택]으로 한 칸씩 지정하거나 ✕로 되돌릴 수 있음.
+- [임시 보관함]은 대시보드에 미리 올려 둔 자료를 가져옴.
+
+![보관 자료 선택 창](B03_06_temp_modal.webp)
@@ -1,5 +1,7 @@
 # 알아 둘 것

- 이미 완료된 프로젝트에 다시 올리면 기존 분석 결과가 교체됩니다.
- 작업 좌표계는 라이다 PRJ가 기준 — 노선 좌표계와 다르면 업로드가 막힙니다.
- 라이다가 없으면 [LAS 없는 설계]를 켜고 도엽 등고선으로 진행합니다.
+- 이미 완료된 프로젝트에 다시 올리면 기존 분석 결과가 교체됨.
+- 작업 좌표계는 라이다 PRJ가 기준 — 노선 좌표계와 다르면 업로드가 막힘.
+- 라이다가 없으면 [LAS 없이 설계 (도엽등고선 기반)]를 켜고 도엽 등고선으로 진행함.
+
+![체크한 모습](B03_05_lasfree_on.webp)
@@ -0,0 +1,330 @@
+[
+  {
+    "name": "B03_00_overview",
+    "route": "#/b03-file-input",
+    "project": "road",
+    "before": [
+      {
+        "eval": "document.head.insertAdjacentHTML('beforeend','<style>.ui-toast-container{display:none!important}</style>')"
+      },
+      {
+        "wait": ".b03-file__pick-row"
+      },
+      {
+        "wait_ms": 1500
+      }
+    ],
+    "clip": null,
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".ui-workflow-overlay__panel"
+      },
+      {
+        "n": 2,
+        "sel": ".b03-file__dropzone"
+      },
+      {
+        "n": 3,
+        "sel": ".b03-file__temp-picker .ui-btn"
+      },
+      {
+        "n": 4,
+        "sel": ".b03-file__pick-row > .ui-btn--filled"
+      },
+      {
+        "n": 5,
+        "sel": ".b03-file__lasfree"
+      },
+      {
+        "n": 6,
+        "sel": ".b03-file__columns > :nth-child(1) .b03-file__group-title"
+      },
+      {
+        "n": 7,
+        "sel": ".b03-file__columns > :nth-child(2) .b03-file__group-title"
+      }
+    ]
+  },
+  {
+    "name": "B03_01_pick_row",
+    "route": "#/b03-file-input",
+    "project": "road",
+    "before": [
+      {
+        "eval": "document.head.insertAdjacentHTML('beforeend','<style>.ui-toast-container{display:none!important}</style>')"
+      },
+      {
+        "wait": ".b03-file__pick-row"
+      }
+    ],
+    "clip": ".b03-file__control-panel",
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".b03-file__dropzone"
+      },
+      {
+        "n": 2,
+        "sel": ".b03-file__temp-picker .ui-btn"
+      },
+      {
+        "n": 3,
+        "sel": ".b03-file__pick-row > .ui-btn--filled"
+      },
+      {
+        "n": 4,
+        "sel": ".b03-file__lasfree"
+      }
+    ]
+  },
+  {
+    "name": "B03_02_route_cards",
+    "route": "#/b03-file-input",
+    "project": "road",
+    "viewport": [
+      1600,
+      2000
+    ],
+    "before": [
+      {
+        "eval": "document.head.insertAdjacentHTML('beforeend','<style>.ui-toast-container{display:none!important}</style>')"
+      },
+      {
+        "wait": ".b03-file__columns"
+      },
+      {
+        "wait_ms": 1500
+      }
+    ],
+    "clip": ".b03-file__columns > :nth-child(1)",
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".b03-file__columns > :nth-child(1) [data-slot-id=csv]"
+      },
+      {
+        "n": 2,
+        "sel": ".b03-file__columns > :nth-child(1) [data-slot-id=shx]"
+      },
+      {
+        "n": 3,
+        "sel": ".b03-file__columns > :nth-child(1) [data-slot-id=dbf]"
+      },
+      {
+        "n": 4,
+        "sel": ".b03-file__columns > :nth-child(1) [data-slot-id=cpg]"
+      },
+      {
+        "n": 5,
+        "sel": ".b03-file__columns > :nth-child(1) [data-slot-id=route_prj]"
+      }
+    ]
+  },
+  {
+    "name": "B03_03_terrain_cards",
+    "route": "#/b03-file-input",
+    "project": "road",
+    "viewport": [
+      1600,
+      2000
+    ],
+    "before": [
+      {
+        "eval": "document.head.insertAdjacentHTML('beforeend','<style>.ui-toast-container{display:none!important}</style>')"
+      },
+      {
+        "wait": ".b03-file__columns"
+      },
+      {
+        "wait_ms": 1500
+      }
+    ],
+    "clip": ".b03-file__columns > :nth-child(2)",
+    "callouts": [
+      {
+        "n": 1,
+        "sel": "[data-slot-id=las_laz]"
+      },
+      {
+        "n": 2,
+        "sel": "[data-slot-id=prj]"
+      },
+      {
+        "n": 3,
+        "sel": "[data-slot-id=tfw]"
+      },
+      {
+        "n": 4,
+        "sel": "[data-slot-id=tif]"
+      }
+    ]
+  },
+  {
+    "name": "B03_04_card_parts",
+    "route": "#/b03-file-input",
+    "project": "road",
+    "before": [
+      {
+        "eval": "document.head.insertAdjacentHTML('beforeend','<style>.ui-toast-container{display:none!important}</style>')"
+      },
+      {
+        "wait": "[data-slot-id=csv]"
+      },
+      {
+        "wait_ms": 1200
+      }
+    ],
+    "clip": "[data-slot-id=csv]",
+    "callouts": [
+      {
+        "n": 1,
+        "sel": "[data-slot-id=csv] .b03-file__card-label"
+      },
+      {
+        "n": 2,
+        "sel": "[data-slot-id=csv] .ui-tag"
+      },
+      {
+        "n": 3,
+        "sel": "[data-slot-id=csv] .b03-file__card-select"
+      },
+      {
+        "n": 4,
+        "sel": "[data-slot-id=csv] .b03-file__file-info"
+      },
+      {
+        "n": 5,
+        "sel": "[data-slot-id=csv] .b03-file__preview"
+      }
+    ]
+  },
+  {
+    "name": "B03_05_lasfree_on",
+    "route": "#/b03-file-input",
+    "project": "road",
+    "viewport": [
+      1600,
+      1500
+    ],
+    "before": [
+      {
+        "eval": "document.head.insertAdjacentHTML('beforeend','<style>.ui-toast-container{display:none!important}</style>')"
+      },
+      {
+        "wait": ".b03-file__lasfree"
+      },
+      {
+        "click": ".b03-file__lasfree input"
+      },
+      {
+        "wait_ms": 800
+      },
+      {
+        "eval": "(()=>{const q=[\".b03-file__control-panel\", \"[data-slot-id=las_laz]\"];const els=q.map(s=>[...document.querySelectorAll(s)].find(e=>e.getBoundingClientRect().width>0));const rs=els.map(e=>e.getBoundingClientRect());const L=Math.min(...rs.map(r=>r.left)),T=Math.min(...rs.map(r=>r.top)),R=Math.max(...rs.map(r=>r.right)),B=Math.max(...rs.map(r=>r.bottom));const d=document.createElement('div');d.id='__clip';d.style.cssText='position:absolute;pointer-events:none;left:'+(L+scrollX)+'px;top:'+(T+scrollY)+'px;width:'+(R-L)+'px;height:'+(B-T)+'px';document.body.appendChild(d);})()"
+      }
+    ],
+    "clip": "#__clip",
+    "clip_pad": 4,
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".b03-file__lasfree"
+      },
+      {
+        "n": 2,
+        "sel": "[data-slot-id=las_laz]"
+      }
+    ]
+  },
+  {
+    "name": "B03_06_temp_modal",
+    "route": "#/b03-file-input",
+    "project": "road",
+    "before": [
+      {
+        "eval": "document.head.insertAdjacentHTML('beforeend','<style>.ui-toast-container{display:none!important}</style>')"
+      },
+      {
+        "wait": ".b03-file__temp-picker .ui-btn"
+      },
+      {
+        "click": ".b03-file__temp-picker .ui-btn"
+      },
+      {
+        "wait": ".b03-file__temp-modal"
+      },
+      {
+        "wait_ms": 800
+      }
+    ],
+    "clip": ".b03-file__temp-modal",
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".b03-file__temp-modal-actions"
+      }
+    ]
+  },
+  {
+    "name": "B03_07_plan_import_modal",
+    "route": "#/b03-file-input",
+    "project": "road",
+    "before": [
+      {
+        "eval": "document.head.insertAdjacentHTML('beforeend','<style>.ui-toast-container{display:none!important}</style>')"
+      },
+      {
+        "wait": ".b03-file__columns"
+      },
+      {
+        "click": "button:has-text('예정노선에서 가져오기')"
+      },
+      {
+        "wait_ms": 1200
+      }
+    ],
+    "clip": ".ui-modal",
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".ui-modal__body"
+      }
+    ]
+  },
+  {
+    "name": "B03_08_left_panel",
+    "route": "#/b03-file-input",
+    "project": "road",
+    "viewport": [
+      1600,
+      560
+    ],
+    "before": [
+      {
+        "eval": "document.head.insertAdjacentHTML('beforeend','<style>.ui-toast-container{display:none!important}</style>')"
+      },
+      {
+        "wait": ".ui-workflow-overlay__panel"
+      },
+      {
+        "wait_ms": 1200
+      }
+    ],
+    "clip": ".ui-workflow-overlay__panel",
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".ui-workflow-overlay__title"
+      },
+      {
+        "n": 2,
+        "sel": ".ui-workflow-overlay__handle--side"
+      },
+      {
+        "n": 3,
+        "sel": ".ui-workflow-overlay__panel .ui-help-btn"
+      }
+    ]
+  }
+]