chore(요구): 제안 366 화면 개편 — 조사 넷(업계 · SaaS 대시보드 · 작업 셸 · 지금 화면 코드) · 레퍼런스 그림 53

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

docs/raw/요구_1025/_분석_366-D_지금_화면_코드.md

@@ -0,0 +1,94 @@
+# 366-D 지금 화면 코드 지도 — 대시보드 · 상세 화면 개편이 어디에 떨어지나
+
+## ① 결론 다섯 줄
+
+1. 겉모습은 거의 한 곳에서 나옴 — 토큰 `ui_template/ui_template_theme.css` 한 파일 + 단추 · 입력 · 카드 · 알약 · 토스트 = `ui_template_elements_styles.ts` 안 문자열 CSS · CAD iframe 도 같은 theme.css 를 import → **토큰 값만 갈아도 B · D · E · M · CAD 전체가 한 번에 바뀜**.
+2. 지금 토큰 = 마케팅 사이트 「Wiza」 베끼기(`docs/raw/guidelines/design.md` · 보라 단색 · 제목 24~64px · 카드 여백 24) — 하루 종일 쓰는 공학 도구 밀도와 어긋남이 불만의 뿌리로 보임 · 글꼴 파일이 없어 실제 글꼴 = 시스템(맑은 고딕).
+3. 상세 화면 틀은 한 벌 — `createWorkflowLayout` + 좌측 도킹 패널 + 아래 단추 줄 규약(`.ui-sidebar-actions` · [?][<][>] 자동 삽입)을 B04~B09 · D02~D04 · E02~E07 이 씀 · 로그인 뒤 쪽은 위 메뉴 줄 높이 0 · ☰ 하나만 떠 있음 · 진행 단계 판은 숨김(서랍 안에만).
+4. 갈라지는 곳 = 본문 안쪽 — 탭 7가지 꼴 · 도구줄 페이지마다 · 표 공용 둘 + 손표 · B07 CAD(React + tailwind iframe 앱) · E05 스프레드시트 · 아이콘 세트 없음(이모지 · 글자 기호).
+5. 길 = 토큰(1~3 파일) → 셸(3~6) → 대시보드(5~8) → 상세 틀(6~10) → 페이지별(20~40) · 막는 것 = 가이드 그림 300장 · 장면 셀렉터 700 · 원문 · 클래스 기대 시험 수십 · 700줄 근처 공용 파일 → **클래스 이름은 두고 값 · 배치만 바꾸는 원칙**이 싸게 먹힘.
+
+## ② 항목별 현황(근거)
+
+### 1. 공용 셸 · 틀 · CSS 구조
+
+- 진입 — `A00_Common/main.ts:14` theme.css import · `:57-58` 기본 · 셸 스타일 주입 · `:72-84` 라우트마다 `html.is-bm-route` 토글 뒤 `renderShell` · 해시 라우터 `router.ts`(261줄) · B05↔B06 = 같은 페이지 보기만 바꿈(`main.ts:77`).
+- 셸 `app_shell.ts` — 위 줄 = 로고 · 공개 메뉴 5 · 언어 · 테마 · 로그인(`:77-112` · `NAV_ITEMS :140-146`) · **B · M 쪽은 위 줄 높이 0 · ☰ 만 왼쪽 위에 뜸**(`:536-556`) · 서랍 = 로고 · 진행 단계 · 사이트 메뉴 · 언어/테마/설정 · 터치 모드(`:162-242`) · 셸 CSS 는 TS 문자열(`:364-581`).
+- 레이아웃 둘 — `createGeneralLayout`(`ui_template_general_layout.ts:15` · 제목 + 부제 + 본문 · 최대 폭 1200 `general_layout.css:9`) = B01 · B02 · D01 · E01 / `createWorkflowLayout`(`ui_template_workflow_layout.ts:200`) = 상세.
+- 상세 페이지가 물려받는 것 — 좌측 도킹 패널(`ui_template_overlay.ts:166-254` · 폭 320 `theme.css:207` · 접힘 = 왼쪽으로 밀림 `overlay.css:42`) · 제목 + 프로젝트 이름(`overlay.ts:148`) · 단추 줄을 스크롤 밖으로 쪼개고 [?] 삽입(`overlay.ts:119-139`) · [<][>](`ui_template_help.ts:355-374` · 묶음 `STEP_NAV_GROUPS :59`) · 단계 목록 → ☰ 서랍(`workflow_layout.ts:234` · `app_shell.ts:136`) · 떠 있는 진행 판은 B · M 에서 숨김(`overlay.css:546`).
+- 페이지가 스스로 짓는 것 — 본문 전체(지도 · 3D · CAD · 표) · 좌측 패널 속 카드 · [저장][초기화] 등 단추(`div.ui-sidebar-actions` 규약 · 16 곳).
+- 토큰 — `theme.css` 한 파일: 색 `:19-87` · 글꼴 `:92-120` · 간격 `:125-143` · 반경 `:148-159` · 컨트롤 높이 `:162-174` · 그림자 `:179-189` · 레이아웃 `:194-212` · z `:220-226` · 지도 팔레트 `:234-295`(TS 가 읽음 `ui_template_palette.ts`).
+- 토큰 사용 — 별칭이 압도적(`--spacing-8` 716 · `--color-border` 397 · `--color-text-secondary` 277) · 팔레트 이름 직접(`royal-amethyst` 67 · `mist-violet` 50 · `canvas` 83 · `deep-iris` 20) 약 260.
+- 하드코딩(git 추적 .ts/.css · 대략) — hex: B05 105 · E03 73 · B03 66 · B04 50 · M02 32 · B06 30 · B08 · B09 0 · D · E 0~18 / `.style.x =` 대입: A00 179 · B05 106 · B04 71 · ui_template 62 / px 글자: ui_template 460 · B05 393 · A00 374 · hex 대부분은 캔버스 · 3D · 지도 그림 색(겉 틀 아님).
+- 규모 — CSS 128 파일 25,615줄(CAD 빼고) · 문자열 CSS = `app_shell.ts` · `ui_template_elements_styles.ts`.
+- 아이콘 — 세트 없음 · 단계 📁🗺️🛣️📐∑🏗️📄(`workflow_layout.ts:65`) · D/E 📍🧭✅(`group_workflow.ts:30`) · B01 구역 📊⚙️🗂️…(`B01_Dashboard_UI_Page.ts:229-243`) · 접힘 ▾▸(`theme.css:460,470`) · ☰ ☀ ☾(`app_shell.ts:98,166`) · 손그림 SVG 몇 개(`B01_Dashboard_UI_Knowledge_Chat.ts:8`) · CAD 만 teenyicons(MIT · `openwebcad/package.json`).
+- 글꼴 — `--font-body: "Inter","Noto Sans KR",system-ui…`(`theme.css:95`) · `@font-face` 없음 · `resources/fonts` 없음 · `index.html` 링크 없음 → 윈도우 실제 = Segoe UI + 맑은 고딕.
+
+### 2. 대시보드 B01
+
+- 26 파일 5,684줄 — `UI_Page.ts` 368 · `UI_Modals.ts` 662(700 근접) · `Api_Fetch.ts` 509 · `UI_TempUpload.ts` 469 · `UI_Style_Company.css` 424 · `UI_Style.css` 387.
+- 자료 — `renderB01Dashboard`(`Page.ts:90`) → `fetchDashboardMe` → `loadRoleData`(`:120-164` 역할별 병렬 · `allSettled`) → `buildPage`(`:267-368`) 한 번에 그림 · 함수 39 · 래퍼 `request()`(`Api_Fetch.ts:202`) · 화면 잠금 로딩 덮개.
+- 배치 — 카드 구역(`section()` `general_blocks.ts:29`)을 세로 한 줄로 쌓음 · 역할별 차례(시스템 관리자 `:274-310` · 회사 관리자 `:311-325` · 사용자 `:326-337`) + 기본정보 · 보안 2열(`:340-343`) · 감사 로그(`:345`) · 챗봇 떠 있는 단추(`:350`) · 구역 바로가기 = ☰ 서랍(`:246-259`).
+- 프로젝트 표 = 공용 `table()`(`B01_Dashboard_UI_Projects.ts:22` · `general_blocks.ts:88`) 열 6 · 단계 칸 = 작은 단계 막대 · 행 [수정][삭제] · 모달 = 공용 `openModal`(5 파일).
+- 그림 `B01_00_overview` — 가운데 1200 폭 · 40px 제목 · 큰 빈 카드 연속 · 「데이터가 없습니다」 · 요약 수치 · 최근 작업 · 상태 한눈 보기 없음.
+- 주의 — 공용 블록이 B01 클래스를 같이 붙임(`general_blocks.ts:14,22,36-37` `b01-dashboard__section…`) → B01 CSS 손대면 B02 등 일반 쪽에 번짐.
+
+### 3. 상세 화면 해부
+
+- 뼈대 — [☰ · 제목 · 프로젝트 이름] / 좌측 패널(접는 카드 `createPanelCard` `ui_template_collapsible.ts:18` · `.ui-sidebar-card` `overlay.css:407` · 양식 `.ui-panel-form` `:428`) / 아래 고정 단추 줄 [?][<][>][페이지 단추] / 본문 = 페이지 몫.
+
+| 페이지 | 틀(근거) | 본문 | 벗어남 |
+|---|---|---|---|
+| B03 | general + overlays 손 조립(`B03_FileInput_UI_Page.ts:660-667`) | 업로드 | 상세 틀 아님 |
+| B04 | workflow(`B04_PreProcess_UI_Page.ts:327`) | 2D 지도 캔버스 | 시스템 관리자만(`workflow_layout.ts:171-180`) |
+| B05 · B06 | 한 페이지 두 보기(`design/design_page.ts:186`) | 평면 · 3D + 종단 판 + 횡단 | 좌측 아래 dock(`design_dock.ts`) · 지도 위 유리 단추 도구줄(`B05_Profile_UI_RouteEdit_Chrome.ts`) · 오른쪽 · 아래 접는 판 |
+| B07 | workflow(`B07_DesignDetail_UI_Page.ts:500`) | CAD iframe(`cad_host/cad_host.ts:147`) | 리본 · 상태줄은 openwebcad(React 18 + tailwind) 안 · 따로 빌드 |
+| B08 | workflow(`B08_Quantity_UI_Page.ts:160`) | 탭 + 데이터표(`createDataTable` 5) | `.b08-quantity__tabs` + `.ui-subtabs` |
+| B09 | workflow(`B09_Estimation_UI_Shell.ts:350`) | 탭 9 + 표 | 탭줄 `B09_Estimation_UI_TabBar.ts` · [<][>] 직접 처리(`Shell.ts:369`) |
+| D02 | group(`D02_PlanBase_UI_Page.ts:80`) | 카카오 지도 | [<][>] 직접(`:234`) |
+| D03 · D04 · E02 · E04 · E06 · E07 | `mountGroupStep`(`group_workflow.ts:55-63`) | 캔버스 · 3D · 위성 | 틀 그대로 · 도구줄만 고유(`e04-toolbar` 등) |
+| E03 | group(`E03_StabSection_UI_Page.ts:100`) | 평면 띠 + 횡단 + 오른쪽 결과 판 | 3단 · 좌측 패널에 큰 표 |
+| E05 | group(`E05_StabReport_UI_Page.ts:120`) | 스프레드시트(`:170`) + 미리보기 iframe | 단추 줄 둘(`:96-99`) |
+
+- 깔끔 = B04 · B08 · D03 · D04 · E02 · E04 · E06 · E07 / 벗어남 = B03(손 조립) · B05 · B06(dock · 떠 있는 판 여럿) · B07(iframe 앱) · B09 · D02([<][>] 직접) · E05(시트).
+- 단계 흐름이 화면에 안 보임 — 진행 판 숨김 · 단계 목록은 ☰ 서랍 안 · 눈에 보이는 것 = [<][>] 뿐.
+
+### 4. 테마 · 부품
+
+- 밝음/어두움 = `<html data-theme>` 바꿈(`app_shell.ts:37-42` · localStorage `frd_theme`) · 어두움 값 = `theme.css:303-342`(중립 · 보라만 덮음) · CAD 는 같은 키를 따라감(`openwebcad/src/theme.ts` · `App.css:3` theme.css import).
+- 시스템 어두움 자동(`theme.css:345`)은 `index.html:2` `data-theme="light"` 고정이라 사실상 꺼짐 · 그 블록엔 `--color-warning` 빠짐 · 테마 단추는 로그인 뒤엔 ☰ 서랍 안에만.
+- 토큰 한 번 갈이로 되는 것 — 색(별칭 + 팔레트 이름 값) · 반경 · 그림자 · 글꼴 · 컨트롤 높이 · 간격(716곳이 따라와 전 화면 밀도가 한꺼번에 변함) / 안 되는 것 — 글자 크기 단계(px 고정 · h1~h3 = 40/32/24 `theme.css:525-533` · 값 갈이는 됨 · 단계 이름이 마케팅형) · 캔버스 그림 색 · 페이지 hex · 배치.
+- 공용 부품(클래스 한 벌) — 단추 `.ui-btn` 6꼴(filled · ghost · pill · danger · danger-ghost · glass `ui_template_elements.ts:27`) · 입력 · 고르기 `.ui-input` `.ui-select` `.ui-field` · 카드 `.ui-card` · 알약 `.ui-tag` 5색(`:216`) · 토스트 `.ui-toast` 4 · 확인창 `.ui-confirm` · 모달(`ui_template_modal.ts:28`) · 데이터표(`ui_template_data_table.ts`) · 일반표(`general_blocks.table`) · 카드 묶음 · 트리 · 고르개 · 오른쪽 메뉴 · 접는 판 · 크기 조절 · 체크박스.
+- 페이지마다 따로 — 탭 7꼴(`cad-tabs` · `ss-tabs` · `b08-quantity__tabs` · `b09-estimation__tabs` · `ui-subtabs` · `m02-sod__tabs` · `app-settings__tabs`) · 도구줄(b05 · e04 · e06 · b08 · m02 …) · 손표(`<table>` 직접 M02 16 · M01 11 · E03 5 · ui_template 5) · 페이지 모달 클래스 10.
+
+### 5. 제약 · 위험
+
+- 700줄 — 공용 핵심이 이미 근처: `app_shell.ts` 589 · `overlay.css` 567 · `theme.css` 564 · `data_table.ts` 564 · `b_page_state.ts` 611 · `B01_Dashboard_UI_Modals.ts` 662 → 새 규칙은 새 파일로(셸 CSS 는 .css 로 떼기 먼저).
+- 시험 — `resources/tester` .py 929 · CSS 원문 읽는 시험 95 · theme.css 읽는 11 · 공용 클래스(`ui-workflow-overlay` · `ui-sidebar-actions` · `ui-btn--`) 기대 24 · B01 8 · 브라우저 점검 `ui_checks` 96 → 클래스 이름 바꾸면 줄줄이 깨짐 · 값만 바꾸면 대부분 무사.
+- 가이드 그림 — `A05_EduDetail/guide` 20 페이지 **300장** · 장면 `_scenes.json` 셀렉터 `sel` 700 · `click` 275 · 클래스 바꾸면 장면도 고침 · 재촬영 = `A05_EduDetail_Guide_Capture.py --page <X>`(520줄 · 헤드리스 Edge · 1600×900 · 3D · 지도는 `--headed`) · 가이드 글(md)의 화면 설명도.
+- B07 CAD — openwebcad = 별도 React 앱(MIT · 241 파일 · 자체 CSS 4) · 토큰은 따라옴 · 리본 · 배치 변경은 `npm run build` · M02 도면 양식도 같은 `cad_host`.
+- 지도 — 자체 캔버스(B04 · B05 · D03 · E 계열) · 카카오(D02 · B08 마일스톤 · `ui_template_kakao_map.ts`) · VWorld 타일 · `maplibre-gl` 은 의존성만(코드 쓰임 없음) · 지도 위 색 = theme.css 9절 + 페이지 hex.
+
+## ③ 바꾸는 길
+
+| 단계 | 내용 | 손볼 파일 | 영향 |
+|---|---|---|---|
+| 1 토큰 | 색 · 글꼴 · 크기 · 반경 · 그림자 · 밀도 값 갈이 · 글꼴 파일 싣기 · 시스템 어두움 정리 | `theme.css` · `index.html`(또는 글꼴 css 1) · `elements_styles.ts` | 전 페이지 + CAD · theme 시험 11 · 그림 재촬영(마지막 한 번) |
+| 2 셸 | ☰ 단독 → 왼쪽 아이콘 레일 또는 얇은 위 줄(프로젝트 · 단계 · 사용자) · 아이콘 세트 도입 · 이모지 걷기 | `app_shell.ts`(CSS 떼기) · `device_context.css` · `overlay.css`(bm 규칙) · `workflow_layout.ts` · `group_workflow.ts` · 아이콘 파일 1 | 3~6 파일 · ☰ 기대 시험 · 장면 |
+| 3 대시보드 | 요약 타일 · 프로젝트 목록 중심 · 관리 구역은 탭 · 설정 쪽 | `B01_Dashboard_UI_Page.ts` · Style css 3 · `UI_Projects.ts` · `general_blocks.ts`(B01 클래스 떼기) · 요약 API(필요 시) | 5~8 파일 · B01 시험 8 · B01 그림 14 |
+| 4 상세 틀 | 단계 막대 상시 보이기 · 좌측 카드 · 단추 줄 꼴 · 오른쪽 속성 판 표준 | `workflow_layout.ts/.css` · `overlay.ts/.css` · `help.ts/.css` · `collapsible.ts` · `side_panels` | 6~10 파일 · 공용 클래스 시험 24 · 상세 그림 전부 |
+| 5 페이지별 | 탭 7꼴 → 공용 탭 · 도구줄 공용화 · B03 틀 맞춤 · B09 · D02 [<][>] 정리 · 페이지 hex → 토큰 | B03 · `A00_Common/design` · B08 · B09 · E03~E07 · M02 | 20~40 파일 · 페이지 시험 |
+| 6 CAD | 리본 · 상태줄 꼴 | `openwebcad/src`(빌드) | 따로 · B07 · M02 |
+
+- 1 · 2 만으로도 「느낌」 대부분이 바뀜 · 3 · 4 가 배치 · 탐색을 바꿈 · 그림 재촬영은 4 뒤 한 번.
+
+## ④ 정할 거리
+
+- 색 방향 — 지금 보라(Wiza) 다듬기 vs 새 브랜드 색.
+- 밀도 — 공학 도구형 촘촘(본문 13~14 · 컨트롤 28~32) vs 지금 넉넉(본문 16 · 컨트롤 42).
+- 로그인 뒤 셸 — 위 줄 되살림 vs 왼쪽 레일 vs 지금 ☰ 단독.
+- 단계 막대를 상세 화면에 늘 보일지.
+- 아이콘 세트 · 한글 글꼴 고르기(상용 가능 라이선스).
+- 어두움 테마 계속 둘지 · 시스템 설정 따를지.
+- 클래스 이름 유지(값 · 배치만) 원칙 — 시험 · 장면 보호 여부.
+- 가이드 그림 300장 재촬영 시점.

docs/raw/요구_1025/_조사_366-A_업계.md

@@ -0,0 +1,41 @@
+relay_b80d24941c58 dispatch:ctx_ec1fac9453b7 -> run:run_06a1a55f92be: "요구 366 화면 개편 외부 조사 A (동종 업계 웹·데스크탑 프로그램 13선 및 UI 패턴) 완료"
+### ① 결론 (5줄 요약)
+1. **대시보드(B01) 정보구조 분리**: 현재 프로젝트·임시보관함·팀원관리·내정보가 1열 세로로 길게 나열되어 여백만 넓고 핵심 현황이 안 보이므로, **좌측 고정 GNB(내 프로젝트 / 예정노선 수신함 / 팀·회사 관리 / 시스템 설정) + 상단 요약 KPI 배지 + 카드·고밀도 표·지도 분할 뷰**로 분리함.
+2. **상단 글로벌 헤더 및 공정 Stepper 신설**: 상세 화면(B03~B09, D02~D04, E02~E07) 좌하단 구석의 작은 `[?][<][>]` 이동 방식을 폐기하고, **상단 44px 헤더에 [프로젝트명 · 묶음 배지(임도/예정노선/안정성) · 전 단계 Stepper(클릭 이동 및 완료/진행 표시) · 저장/내보내기]**를 통합 배치함.
+3. **좌측 패널 고밀도화 및 여백 제거**: B05·B07·B09 좌측 패널의 큼직한 회색 박스 버튼 2~3개와 하단 60% 빈 여백을 없애고, **Esri Calcite / Bentley iTwin 방식의 좌측 아이콘 레일(40px) + 접이식 트리·속성 패널(240~260px)**로 개편하여 캔버스 면적을 80% 이상 확보함.
+4. **다중 뷰포트 리사이즈 스플리터 적용**: B05(평면+종단+횡단 drawer), D03(지도+횡단), E03(평면 위험띠+단면+절편표)의 고정 분할을 **드래그 스플리터(Split Pane) 및 지도 위 플로팅 미니바(E03 평면 위험띠의 상단 콤팩트 스트립화)**로 전환해 도면·단면 압착 현상을 해소함.
+5. **엔지니어링 툴바·상태 표시줄 표준화**: 테두리만 둥근 한글 텍스트 나열 버튼(`1m 등고선`, `측점 스냅`, `박스보기` 등)을 **아이콘+짧은 라벨 그룹형 툴바(구분선·토글 활성 색 명확화)와 하단 26px 상태 표시줄(좌표·축척·스냅·수렴상태·단위)**로 정돈함.
+
+### ② 업계 레퍼런스 페이지 13선 (전수 무로그인 접속 확인 완료)
+| 이름 · 주소 | 무엇을 볼 것 (화면 · 패턴) | 우리 대응 화면 | 가져올 점 · 버릴 점 |
+| :--- | :--- | :--- | :--- |
+| **1. Esri Calcite Design System**<br>https://developers.arcgis.com/calcite-design-system/ | GIS/엔지니어링 전용 고밀도 컴포넌트·토큰·다크모드 규격 | 전체 공통 틀 (`ui_template/`) | **[채택]** 3단계 밀도(Compact) 규격·공간정보 전용 아이콘 / **[버림]** 웹컴포넌트 런타임 직접 의존 |
+| **2. Esri Calcite Shell & Panel**<br>https://developers.arcgis.com/calcite-design-system/components/shell/ | Header + Action Bar(아이콘 레일) + 좌우 접이식 Panel + 중앙 Map Shell 배치 | 상세 지도형 (`B05`, `D02`, `D03`, `E07`) | **[채택]** 좌측 좁은 Action Bar와 레이어/속성 패널 2단 구조로 빈 공간 제거 / **[버림]** 3중 중첩 팝오버 |
+| **3. Esri ArcGIS Dashboards**<br>https://www.esri.com/en-us/arcgis/products/arcgis-dashboards/overview | 지도 + 상단 KPI 숫자 카드 + 우측 목록·차트 연동 레이아웃 | 대시보드 (`B01`), 예정노선 (`D03`), 안정성 (`E03`, `E07`) | **[채택]** 목록 행 클릭 시 지도/단면 즉시 줌·하이라이트 연동 및 상단 N.G./O.K. 요약 타일 / **[버림]** 과도한 원형 차트 |
+| **4. Esri Experience Builder**<br>https://www.esri.com/en-us/arcgis/products/arcgis-experience-builder/overview | 지도 위 플로팅 컨트롤러·하단 접이식 테이블·단계별 위젯 전환 | 상세 지도형 (`B05`, `D03`) | **[채택]** B05 하단 종단·테이블·유토곡선 탭을 슬림 도킹 독(Dock)으로 처리 / **[버림]** 자유 배치 빌더 UI |
+| **5. Bentley iTwin Platform**<br>https://www.bentley.com/software/itwin-platform/ | 토목 디지털트윈(선형·종횡단·3D 지형·토공량) 다중 뷰포트 동기화 | 상세 지도·3D형 (`B05`, `B06`, `E04`) | **[채택]** 평면 선형 측점 커서 이동 시 종단·횡단 뷰 동시 크로스헤어 추적 / **[버림]** 무거운 BIM 트리 깊이 |
+| **6. Bentley iTwin.js UI (AppUI)**<br>https://www.itwinjs.org/ | 9-Zone 엔지니어링 화면 분할(상단 툴바·좌우 패널·하단 상태바) | 상세 CAD·3D형 (`B05`, `B07`, `E03`, `E04`) | **[채택]** 캔버스 침범을 최소화하는 슬림 툴바·상태 표시줄(스냅·좌표·축척) 표준 / **[버림]** 복잡한 위젯 드래그 분리 |
+| **7. Autodesk Construction Cloud**<br>https://construction.autodesk.com/ | 건설 SaaS 프로젝트 리스트·상태 배지·도면 버전·발주처 공유함 | 대시보드 (`B01`), 확정·전달 (`D04`, `E01`) | **[채택]** 좌측 고정 메뉴 + 프로젝트 표(진행단계·담당자·최근수정·상태 배지) + 예정노선 수신 카드 / **[버림]** 시공 일보 등 복잡한 하위 메뉴 |
+| **8. Trimble Connect**<br>https://connect.trimble.com/ | 토목 현장·설계 협업용 2D 도면·3D 모델 뷰어 및 레이어 트리 | 상세 3D·CAD형 (`B04`, `B07`, `E04`) | **[채택]** 좌측 도면/레이어 눈 아이콘(켜기/끄기) 밀집 리스트 및 측정 도구 툴바 / **[버림]** 클라우드 폴더 탐색기 계층 |
+| **9. Rocscience Slide2**<br>https://www.rocscience.com/software/slide2 | 2D 사면안정 단면 뷰어·등안전율(Safety Map) 범례·절편 자유물체도 | 상세 안정성 (`E02`, `E03`, `E06`) | **[채택]** 단면 내 Safety Map 컬러바 오버레이 및 우측 인스펙터 탭(요약/절편표/절편력 그래프 전환) / **[버림]** 구식 윈도우 다중 창 |
+| **10. Rocscience Slide3**<br>https://www.rocscience.com/software/slide3 | 3D 지형·타원체 활동면 뷰포트 + 2D 단면 연동 + 조건별 결과 표 | 상세 3D 안정성 (`E04`, `E07`) | **[채택]** 건기·우기·지진 시나리오 탭 전환 및 3D 파괴체 체적·안전율 HUD 박스 / **[버림]** 다단 리본 서브메뉴 |
+| **11. Seequent GeoStudio SLOPE/W**<br>https://www.seequent.com/products-solutions/geostudio/slope-w/ | 좌측 Analysis Tree + 중앙 단면 + 우측 재료·경계조건 도킹 패널 | 상세 안정성 (`E02`, `E03`, `E05`) | **[채택]** 지층 물성 색상 칩(Color Swatch) + 측점·조건 트리 한눈에 보기 / **[버림]** 별도 창으로 뜨는 스프레드시트 |
+| **12. Togal.AI / Procore Estimating**<br>https://www.togal.ai/ | 도면 수량 산출(Takeoff)과 내역서·원가계산서 고밀도 집계표 | 상세 표형 (`B08` 수량, `B09` 원가, `E05` 보고서) | **[채택]** 상단 세그먼트 탭 + 고정 헤더/합계행(Sticky Footer) + 산출근거 우측 슬라이드 드로어 / **[버림]** 좌하단 큰 박스보기/호표보기 버튼 |
+| **13. 산림청 FGIS · 국토정보플랫폼**<br>https://fgis.forest.go.kr/ | 국내 산림·지형 웹GIS의 레이어 제어·행정구역 검색·도엽 출력 | 예정노선 (`D02`, `D03`), 발주처 화면 | **[채택]** 산림청 담당자에게 익숙한 우측 플로팅 지도 제어(배경지도·지적도·등고선 토글) / **[버림]** 팝업 남발 및 구식 정부포털 테두리 |
+
+### ③ 우리 화면에 맞는 UI/UX 개편 패턴 제안
+- **대시보드 (`B01`)**: ① **좌측 사이드바(220px)**: `[프로젝트 목록]`, `[받은 예정노선(배지)]`, `[임시 보관함]`, `[팀원·가입 관리]`, `[회사·내 정보]`, `[시스템 마스터 설정]`으로 탭 분리(한 화면 세로 나열 폐지). ② **프로젝트 메인 뷰**: 상단 4개 요약 카드(진행 중 설계·검토 대기 예정노선·N.G. 위험구간·완료) + 우상단 `[+ 새 프로젝트]` 주 버튼 + 필터 바(전체/임도B/예정노선D/안정성E, 카드형↔고밀도 표 전환).
+- **상세 화면 공통 골격 (`B03~B09`, `D02~D04`, `E02~E07`)**: ① **상단 바(44px)**: 좌측 `[≡ 대시보드] > [프로젝트명]` + 중앙 **수평 Stepper**(현재 단계 강조 및 클릭 이동, 좌하단 `[?][<][>]`는 헤더 우측 `[◀ 이전][다음 ▶][? 도움말]`로 승격). ② **좌측 패널(240~260px)**: 높이 48px짜리 거대 아코디언 대신 32px 고밀도 섹션 헤더와 리스트·체크박스 트리로 채워 하단 빈 공간 제거. ③ **우측·하단 드로어**: `B05`의 횡단·배수유역 탭이나 `E03` 우측 결과창을 리사이즈 핸들(Splitter)과 탭(`요약 | 절편표 | 자유물체도/그래프`)으로 통합해 세로 스크롤 압박 해소.
+- **밀도 · 색 · 글꼴 · 아이콘 · 상태 표시**: ① **밀도**: 표 행 높이 `28~32px`, 입력창·버튼 높이 `28~30px`, 패널 패딩 `8~12px`(엔지니어링 Compact 밀도). ② **색상**: 배경 `#F4F6F8`(밝음)/`#14171A`(어두움), 주 강조색 네이비/슬레이트 블루(`#2563EB`), 산림/통과(`O.K.`) 에메랄드(`#10B981`), 경고 앰버(`#F59E0B`), 위험/미달(`N.G.`) 코랄 레드(`#EF4444` + `◆` 도형 병기). ③ **글꼴**: 한글·UI는 `Pretendard`, 측점(`0+480`)·안전율(`1.113`)·금액(`96,508,869`)은 `JetBrains Mono` 고정폭 + `font-variant-numeric: tabular-nums` 필수 적용. ④ **아이콘**: 텍스트만 있는 툴바 버튼에 `16px` 선형 벡터 아이콘(Lucide/Tabler) 결합. ⑤ **하단 상태바(26px)**: 모든 상세 화면 하단에 `[좌표 X,Y,Z | 축척 1:1,000 | 스냅 상태 | 해석 수렴/소요시간]` 고정 배치.
+
+### ④ 라이센스 검토 (상용 SaaS 독점 배포 가능 여부)
+- **아이콘**: **Lucide Icons** (`ISC` 라이센스 — **⭕ 상용 무료**) · **Tabler Icons** (`MIT` — **⭕ 상용 무료**) · **Phosphor Icons** (`MIT` — **⭕ 상용 무료**).
+- **글꼴**: **Pretendard** (`SIL OFL 1.1` — **⭕ 웹폰트·상용 번들링 무료**) · **JetBrains Mono** (`SIL OFL 1.1` — **⭕ 숫자·코드 상용 무료**).
+- **UI/레이아웃 참고**: **Bentley iTwinUI-css** (`MIT` — **⭕ CSS 토큰/구조 참고 가능**) · **Esri Calcite** (`Apache 2.0` — **⭕ 디자인 패턴·아이콘·색상 토큰 상용 참고 가능**, 순수 TS 유지를 위해 런타임 번들은 제외하고 CSS Grid/변수만 자체 `ui_template/`에 이식).
+
+### ⑤ 브레인 · 사용자 결정 사항 (정할 거리 4가지)
+1. **대시보드(B01) 분리 방식**: 좌측 고정 사이드바 메뉴(`프로젝트` / `예정노선` / `조직관리` / `설정`)로 화면을 분리할지, 상단 탭 바로 분리할지 여부.
+2. **단계 이동(`[<][>]`) 위치**: 좌하단 구석의 `[?][<][>]`를 상단 글로벌 헤더의 **공정 Stepper + 우상단 `[이전/다음/저장]`**으로 완전히 옮길지 여부.
+3. **다크/라이트 기본 테마**: CAD(`B07`)·지도(`D03`)·3D(`E04`) 작업 화면의 기본값을 다크 툴바+다크 캔버스로 둘지, 현행 라이트 테마를 유지할지 여부.
+4. **`E03` 상단 평면 위험띠 배치**: 화면 상단 25%를 차지하는 `평면 위험 띠` 박스를 단면 뷰어 상단 48px 높이의 콤팩트 미니 스트립(또는 플로팅 미니맵)으로 축소할지 여부.
+[payload] {"taskId":"task_74ba0ada1d42","dispatchId":"ctx_ec1fac9453b7","outcome":"succeeded"}

docs/raw/요구_1025/_조사_366-B_대시보드_SaaS.md

@@ -0,0 +1,113 @@
+# 조사 366-B — 대시보드 · 목록 · 설정 화면 레퍼런스 (sub1 · opus)
+
+그림: `docs/raw/요구_1025/ref_366/*.png` (1440×900 헤드리스 Edge · 2026-10-26 촬영 · 25 장) · 찍은 스크립트 `shot_B.py` · 열린 주소 결과 `shot_B.json`.
+
+## 지금 화면 진단 (B01 그림 기준)
+
+- 한 페이지 긴 스크롤에 같은 무게 카드 8~10 개(리소스 · 시스템 설정 · 프로젝트 · 임시 보관함 · 팀원 · 가입 요청 · 회사 · 기본정보 · 보안 · 시스템 로그) — 무엇이 먼저인지 안 보임.
+- 탐색 = 왼쪽 위 햄버거 하나 · 위 머리 없음 · 검색 없음.
+- 프로젝트 표: 워크플로 칩 3~7 개가 줄마다 나열 → 표 폭 대부분 차지 · 「지금 어디까지」가 한눈에 안 보임 · 줄마다 빨강 [삭제] 상시 노출.
+- 빈 상태 = 「데이터가 없습니다」 회색 한 줄 · 다음 할 일 안내 없음.
+- 개인 설정(기본정보 · 보안) · 회사 관리 · 시스템 로그가 대시보드에 섞임.
+
+## ① 결론 다섯 줄
+
+1. 앱 셸부터 바꿈 — 왼쪽 고정 탐색(접으면 아이콘 레일) + 위 머리 48 px(검색 · 도움말 · 사용자 메뉴) · Stripe · Linear · Ant Design Pro · shadcn 공통 꼴.
+2. 대시보드는 「역할별 홈」 하나로 줄이고 팀원 · 회사 · 내 정보 · 시스템은 설정 영역(왼쪽 하위 메뉴 + 오른쪽 폼)으로 분리 — 긴 카드 쌓기 폐지.
+3. 프로젝트 표는 툴바(검색 · 종류 · 상태 · 담당 필터 + 저장된 보기) + 진행 막대(「횡단설계 4/7」) + 줄 끝 「⋯」 메뉴 · 행 높이 40 px 기본(Carbon · GitHub Projects · Ant Pro 조회 표).
+4. 색 · 글꼴 · 아이콘은 토큰만 가져옴 — 중립 회색 12 단계(Radix Colors · MIT) + 강조 한 색 + 상태 4 색 · 글꼴 Pretendard(OFL) · 아이콘 Lucide(ISC) 또는 Tabler(MIT) 한 묶음.
+5. 프레임워크 없는 TS 제약상 React 묶음(antd · shadcn · Polaris)은 그림 참고만 · 코드로 바로 쓸 수 있는 것은 Radix Colors(CSS 변수) · 아이콘 SVG · 웹 컴포넌트(Carbon · Fluent · Apache/MIT) · Shopify Polaris · Esri Calcite 는 라이센스상 제외.
+
+## ② 레퍼런스 페이지 15 개
+
+주소는 모두 2026-10-26 헤드리스로 열어 200 확인 · 로그인 없이 열림.
+
+| 이름 · 주소 | 무엇을 볼 것(화면 · 패턴) | 우리 어느 화면 | 가져올 점 · 버릴 점 |
+| --- | --- | --- | --- |
+| Linear 홈 · https://linear.app/ (그림 `Linear_home`) | 제품 화면 실물 — 좁은 왼쪽 탐색(Inbox · My issues · Projects · Favorites) · 오른쪽 속성 패널 · 상태 아이콘 + 글 | 대시보드 · 상세 표형 | 가져올 점 = 탐색 묶음(개인 / 작업공간 / 즐겨찾기) · 상태 아이콘 일관성 · 단축키 · 버릴 점 = 기본 어두움 · 아주 작은 글(공무원 사용자에 과함) |
+| Linear UI 재설계 글 · https://linear.app/now/how-we-redesigned-the-linear-ui | 테마를 바탕 · 강조 · 대비 세 값으로 생성(LCH) · 밀도 · 탐색 다듬기 과정 | 공용 틀(`ui_template` 테마) | 가져올 점 = 밝음 · 어두움을 손으로 두 벌 만들지 않고 몇 개 값에서 생성 · 버릴 점 = 사용자 맞춤 테마 편집기(지금 불필요) |
+| Vercel Geist · https://vercel.com/geist/introduction | 회색 10 단계 · 상태 색 · Geist 글꼴 · 컴포넌트 문서 | 대시보드 · 공용 틀 | 가져올 점 = 회색 위주 + 강조 최소 · 배지 · 상태 점 · 버릴 점 = 컴포넌트 코드 비공개(글꼴만 OFL) |
+| Stripe 대시보드 문서 · https://docs.stripe.com/dashboard/basics | 실제 대시보드 구성 설명 — 왼쪽 주 탐색 · Home 지표 · 검색 · `?` 단축키 목록 · 계정 · 팀 · 제품 설정 분리 | 대시보드 · 설정 | 가져올 점 = 홈은 「지금 볼 것」만 · 설정은 별도 영역 · `?` 단축키 도움말(지금 [?] 와 연결) · 버릴 점 = 결제 지표 카드 꼴 그대로 |
+| GitHub Projects 문서 · https://docs.github.com/en/issues/planning-and-tracking-with-projects/learning-about-projects/about-projects | 같은 데이터를 표 · 보드 · 로드맵으로 전환 · 필드 필터 · 묶기 · 저장된 보기 | 대시보드 프로젝트 표 · 받은 예정노선 | 가져올 점 = 저장된 보기 탭(「내 프로젝트 · 전체 · 보관」) · 필드 묶기(종류별 · 지역별) · 버릴 점 = 로드맵(일정 데이터 없음) |
+| Atlassian Design System · https://atlassian.design/ | 디자인 토큰(색 · 간격 · 높이) · 로젠지(상태 칩) · 빈 상태 · 사이드 탐색 + 위 머리 | 대시보드 · 설정 · 공용 틀 | 가져올 점 = 토큰 이름 체계(용도별 — `color.text.subtle` 꼴) · 로젠지 색 규칙 · 빈 상태 글 규칙 · 버릴 점 = React 컴포넌트 |
+| IBM Carbon 데이터 표 · https://www.carbondesignsystem.com/building-blocks/core/components/data-table/guidelines (그림 `Carbon_datatable`) | 표 툴바(검색 · 필터 · 일괄 동작) · 행 높이 단계 · 정렬 · 확장 행 · 줄 선택 | 프로젝트 표 · 팀원 표 · 상세 표형(B08 · B09) | 가져올 점 = 행 높이 단계(밀도 전환) · 선택 시 툴바가 일괄 동작 줄로 바뀜 · 버릴 점 = 각진 IBM 꼴 그대로 |
+| IBM Carbon UI 셸 머리 · https://www.carbondesignsystem.com/building-blocks/core/components/ui-shell-header/guidelines (그림 `Carbon_UIshell`) | 48 px 위 머리 · 왼쪽 패널 · 오른쪽 패널(알림 · 사용자) · 앱 전환 | 모든 화면 셸 | 가져올 점 = 머리 높이 · 구획(제품명 / 탐색 / 전역 동작) · 버릴 점 = 어두운 머리 고정 |
+| Microsoft Fluent 2 · https://fluent2.microsoft.design/ | 밀도 · 모양 · 색 원칙 · Fluent System Icons(가는 / 채운 두 꼴) | 공용 틀 · 상세 CAD형 도구줄 | 가져올 점 = 같은 아이콘의 「보통 / 선택(채움)」 짝 — 도구 켜짐 표시에 적합 · 버릴 점 = Windows 느낌 그대로 |
+| Material 3 탐색 레일 · https://m3.material.io/components/navigation-rail/overview | 아이콘 + 짧은 이름 세로 레일 · 넓히면 서랍 | 상세 지도형 · CAD형 왼쪽 · 대시보드 탐색 접힘 | 가져올 점 = 접힌 탐색 = 아이콘 + 두 글자 이름(아이콘만은 금지) · 버릴 점 = 큰 둥근 알약 · 넉넉한 여백(정보 밀도 낮음) |
+| Ant Design Pro 분석 · 조회 표 · https://preview.pro.ant.design/dashboard/analysis/ · https://preview.pro.ant.design/list/table-list/ (그림 `AntDesignPro_demo` · `AntDesignPro_list`) | 실제 돌아가는 공개 데모 — 접는 왼쪽 메뉴 · 경로(breadcrumb) · 조회 폼 + 표 · 상태 = 색 점 + 글 · 새로고침 · 밀도 · 열 설정 아이콘 | 대시보드 · 프로젝트 표 · 상세 표형 | 가져올 점 = 동아시아 업무 화면 밀도 · 표 오른쪽 위 「밀도 · 열 보이기」 · 상태 점 · 버릴 점 = 파랑 일색 · 조회 폼이 표 위에 크게 자리 차지 |
+| shadcn/ui 대시보드 · 블록 · https://ui.shadcn.com/examples/dashboard · https://ui.shadcn.com/blocks (그림 `shadcn_dashboard` · `shadcn_blocks`) | 사이드바 그룹(Home / Documents) · KPI 카드 넷 · 기간 전환 · 표 · 오른쪽 위 Quick Create | 대시보드 | 가져올 점 = 차분한 중립 회색 + 검정 주 단추 · 카드 테두리 1 px · 사이드바 블록 구성 · 버릴 점 = React · Tailwind 코드(그림 참고만) |
+| Radix Colors · https://www.radix-ui.com/colors (그림 `Radix_colors`) | 12 단계 색 척도 · 단계별 용도(1~2 바탕 · 3~5 요소 · 6~8 테두리 · 9~10 단색 · 11~12 글) · 어두움 짝 | 공용 틀 테마 전체 | 가져올 점 = CSS 변수 그대로 씀(MIT · 프레임워크 무관) · 밝음 · 어두움 단계 짝 자동 · 버릴 점 = 없음 |
+| KRDS 대한민국 정부 디자인 시스템 · https://www.krds.go.kr/html/site/index.html (그림 `KRDS`) | 정부 서비스 표준 — 글자 · 화면 설정(크기 · 대비) · 기본 패턴 · 서비스 패턴 · 접근성 | 예정노선(D · 산림청 공무원) · 공통 접근성 | 가져올 점 = 「글자 · 화면 설정」(글 크기 단계 · 고대비) · 접근성 기준 · Pretendard GOV · 버릴 점 = 대국민 홈페이지 꼴(큰 배너 · 큰 위 메뉴) — 업무 도구에 안 맞음 |
+| Figma 파일 브라우저 도움말 · https://help.figma.com/hc/en-us/articles/14381406380183-Guide-to-the-file-browser (그림 `Figma_file_browser`) | 최근 · 초안 · 팀 · 프로젝트 탐색 · 썸네일 격자 / 목록 전환 | 대시보드 「이어서 하기」 · 프로젝트 목록 | 가져올 점 = 최근 연 파일 썸네일 줄(지도 · 노선 미리보기) · 격자 / 목록 전환 · 버릴 점 = 썸네일 위주(프로젝트 수 많으면 표가 나음) |
+
+덧붙여 열어 본 것(표 밖 · 그림 있음): GitHub Primer `https://primer.style/` · GitLab Pajamas `https://design.gitlab.com/`(데이터 많은 도구 · 토큰 필터 검색) · Notion 사이드바 도움말 `https://www.notion.com/ko/help/navigate-with-the-sidebar` · Esri Calcite `https://developers.arcgis.com/calcite-design-system/`(GIS 앱 셸 — 그림 참고만 · 라이센스 제외) · Lucide · Tabler 아이콘 · Pretendard 저장소.
+제외: Tailwind Plus 앱 UI(로그인 화면으로 넘어감) · Shopify Polaris(접속 끊김 · 라이센스상 어차피 제외).
+
+## ③ 우리에게 맞는 패턴 제안
+
+### 대시보드(B01)
+
+- 배치 — 앱 셸 = 왼쪽 탐색 240 px(접으면 아이콘 레일 64 px · 아이콘 + 두 글자) + 위 머리 48 px(왼쪽 회사 · 오른쪽 검색 Ctrl+K · [?] · 알림 · 사용자 메뉴).
+- 탐색 묶음 — 작업: 홈 · 프로젝트 · 받은 예정노선 · 임시 보관함 / 관리(권한 있는 사람만): 팀원 · 가입 요청(대기 수 배지) · 회사 · 시스템 설정 · 시스템 로그 / 맨 아래: 내 정보 · 보안 · 테마 전환.
+- 홈 = 역할별 한 화면:
+  - 설계 엔지니어 — 「이어서 하기」 최근 프로젝트 3~5 개(작은 지도 그림 · 마지막 단계 바로 열기) + 내 프로젝트 표 상위 10 + 새로 받은 예정노선.
+  - 산림청 공무원 — 예정노선 상태별 수(지점 지정 · 분석 중 · 확정 · 업체 지정) + 안정성 검토 대기 목록.
+  - 회사 관리자 — 위 + 가입 요청 대기 · 팀원 수.
+  - 시스템 관리자 — 위 + 리소스 요약 한 줄(자세히는 시스템 화면).
+- 프로젝트 표:
+  - 위 툴바 — 검색 · 종류 칩(임도설계 · 예정노선 · 안정성평가 · 사방설계) · 상태 · 담당자 · 지역 · 정렬 · 표 / 격자 전환 · 저장된 보기 탭(내 프로젝트 · 전체 · 보관).
+  - 진행 단계 — 칩 7 개 나열 대신 가는 마디 막대 + 「횡단설계 · 4/7」 글 · 마우스 올리면 단계 칩 · 막대 마디 눌러 그 단계로 바로 이동.
+  - 행 전체 = 열기 · 수정 · 이름 바꾸기 · 복제 · 보관 · 삭제는 줄 끝 「⋯」 메뉴 · 삭제만 빨강 + 확인 창.
+  - 줄 선택 시 툴바가 일괄 동작 줄로 바뀜(보관 · 삭제 · 담당 바꾸기).
+  - 행 높이 40 px 기본 · 밀도 전환(32 / 40 / 48) · 숫자 · 날짜 열 오른쪽 정렬 + 고정폭 숫자.
+- 빈 상태 — 「데이터가 없습니다」 대신 작은 그림 + 한 줄(「아직 프로젝트가 없음」) + 주 단추(「첫 프로젝트 만들기」) + 도움말 링크.
+- 설정 영역 — 카드 쌓기 폐지 · 왼쪽 하위 메뉴(내 정보 · 보안 · 회사 · 팀원 · 가입 요청 · 마스터 데이터 · 구조물 조합 · 도면 양식 · 계산 자리 · 시스템 로그) + 오른쪽 폼 한 장 · 폼 저장 단추는 폼 아래 고정.
+
+### 상세 화면(B03~B09 · D02~D04 · E02~E07) — 셸 원칙만
+
+- 위 머리에 프로젝트 이름 + 가로 단계 표시(지금 [<] [>] 대신 단계 이름 줄 · 지금 단계 강조 · 끝난 단계 체크) + 오른쪽 저장 상태(「저장 안 됨 · 3 건」) + 주 단추 [저장] [확정].
+- 왼쪽 패널 접기 + 아이콘 레일(Material 레일 · Calcite 액션 바 꼴) · 지도 · 3D · CAD 본문 최대화.
+- 아래 단추 줄 → 얇은 상태 줄(좌표 · 측점 · 단위 · 선택 수)로 바꾸고 동작은 위로.
+- 밀도 — 상세는 촘촘(행 32 px · 글 13 px) · 대시보드는 보통(행 40 px · 글 14 px).
+
+### 색 · 글꼴 · 아이콘 · 상태
+
+- 색 — 중립 회색 12 단계(Radix slate 꼴) 위주 · 강조 한 색 · 상태 넷(정보 파랑 · 성공 초록 · 경고 주황 · 위험 빨강) · 빨강은 위험 동작 · 오류에만 · 밝음 · 어두움은 같은 단계 번호 짝.
+- 글꼴 — Pretendard(한글 · 영문 무게 고름 · KRDS 도 GOV 판 채택) · 표 숫자는 `tabular-nums`.
+- 아이콘 — 한 묶음만 · 선 아이콘 1.5~2 px · 16 / 20 px · 켜짐은 채운 꼴 또는 바탕색.
+- 상태 표시 — 칩(색 + 글 · 색만 금지) · 진행 마디 막대 · 저장 상태 글 · 알림은 오른쪽 아래 토스트(자동 사라짐 · 오류는 남김).
+
+## ④ 라이센스 (npm · 저장소 LICENSE 직접 확인)
+
+| 묶음 | 라이센스 | 상용 · 우리 조건 |
+| --- | --- | --- |
+| Radix Colors `@radix-ui/colors` 3.0.0 | MIT | ✅ CSS 변수 그대로 · 프레임워크 무관 |
+| Lucide `lucide` 1.61.0 | ISC(MIT 꼴) | ✅ 프레임워크 없는 판 있음 · ISC 가 허용 목록 밖이면 Tabler |
+| Tabler Icons `@tabler/icons` 3.49.0 | MIT | ✅ 6,200+ 개 |
+| Phosphor `@phosphor-icons/web` · Heroicons | MIT | ✅ |
+| Fluent `@fluentui/web-components` 3.1.3 · `@fluentui/svg-icons` | MIT | ✅ 웹 컴포넌트 · 프레임워크 없이 씀 |
+| Carbon `@carbon/web-components` 2.66.0 · `@carbon/icons` | Apache-2.0 | ✅ 웹 컴포넌트 |
+| Material `@material/web` 2.5.0 · Material Symbols | Apache-2.0 | ✅ (Material Web 은 유지보수만 하는 상태 — 새 채택 비추) |
+| Atlassian `@atlaskit/*` | Apache-2.0(코드) | ⚠ React 전용 · 글꼴 · 로고 · 브랜드는 확인 안 함 → 그림 참고만 |
+| Primer CSS · Octicons · GitLab UI · antd · shadcn/ui | MIT | ✅ 단 antd · shadcn 은 React → 그림 참고만 |
+| 표 · 차트 — TanStack `table-core` · AG Grid Community · uPlot | MIT | ✅ 프레임워크 무관 |
+| ECharts | Apache-2.0 | ✅ |
+| Pretendard · Geist · (Noto Sans KR · IBM Plex 도 같은 꼴) | SIL OFL-1.1 | ⚠ 상용 · 웹 내장 가능 · 단 글꼴만 따로 팔기 금지 · BSD · MIT · Apache 목록 밖 → 정할 거리 |
+| KRDS(코드 · 디자인) | 저작권법 24조의2 공공저작물 자유이용 · 출처 표기 | ⚠ 상용 가능 · 출처 표기 의무 · 오픈소스 라이센스 아님 → 정할 거리 |
+| Remix Icon 4.9.1 | npm 표기 Apache-2.0 · 실제 파일은 「Remix Icon License v1.0」(2026-01) | ❌ 표기 · 실물 어긋남 → 쓰지 않음 |
+| Shopify Polaris | MIT 꼴 + 「Shopify 연동 앱 또는 Shopify 와 시각적으로 다른 앱만」 | ❌ 제외 |
+| Esri Calcite | Esri MLA(독점) | ❌ 제외 · 그림 참고만 |
+| Tailwind Plus | 유료 · 로그인 필요 | ❌ 확인 안 함 · 제외 |
+
+## ⑤ 정할 거리
+
+1. 셸 — 왼쪽 고정 탐색(Stripe · Linear 꼴 · 제안) 또는 위 탭 메뉴(KRDS 꼴).
+2. 첫 화면 — 역할별 홈(제안) 또는 프로젝트 표 바로.
+3. 설정 · 관리 화면을 대시보드에서 떼어 별도 영역으로 둘지(제안 = 뗌).
+4. 글꼴 OFL(Pretendard) 허용 여부 — 허용 목록(BSD · MIT · Apache)에 글꼴 예외 둘지.
+5. 아이콘 묶음 — Lucide(ISC) 또는 Tabler(MIT).
+6. 진행 단계 표시 — 마디 막대 + 「4/7」(제안) 또는 지금 칩 유지.
+7. 밀도 — 대시보드 40 px · 상세 32 px 고정 또는 사용자 전환.
+8. 강조 색 — 지금 남보라 유지 또는 산림 녹색 계열.
+9. KRDS 따르는 범위 — 공무원 화면(D)만 또는 전체 · 출처 표기 위치.
+10. 구현 길 — 지금 `ui_template` 직접 유지 + 토큰(색 · 간격 · 글꼴)만 가져옴(제안) 또는 웹 컴포넌트 묶음(Carbon · Fluent) 채택.

docs/raw/요구_1025/_조사_366-C_상세_워크스페이스.md

@@ -0,0 +1,132 @@
+# 조사 366-C — 상세 작업 화면(워크스페이스) 외부 레퍼런스
+
+창 sub4 · 조사만(코드 · 저장소 무변경) · 그림 `docs/raw/요구_1025/ref_366/C_`(헤드리스 크롬 1440×900 · 26장)
+
+## 지금 화면 진단 (B05 · B07 · B09 · D03 · E03 그림 기준)
+
+- 왼쪽 패널 = 큰 카드 아코디언(구조물 배치 · 페이지 설정 · 노선 추천) — 펼치기 전엔 빈 칸이 대부분(B05 · B09 왼쪽 70% 공백).
+- 저장 · 초기화 · 단계 이동 [? < > 저장 초기화] 이 왼쪽 패널 맨 아래 — 단계 이름 없는 [<][>] · [초기화] 가 [저장] 바로 옆(빨강 테두리만 다름).
+- 아래 칸 여닫는 손잡이가 흩어짐 — 「▼종단」 위 가운데 · 「▲테이블 ▲유토곡선」 아래 가운데 · 「횡단」「배수유역」 오른쪽 세로 글자 탭.
+- 지도 위 정보 상자(B05 ④ 예상노선 · 계획노선 길이)가 지도를 가림 — 상태 줄 없음.
+- 위 도구 줄 = 같은 무게의 글자 단추 나열 · 켜짐(토글)과 실행(동작) 구분이 진보라 채움 하나 · B05 되돌리기 · 다시하기 두 벌.
+- 진보라(#26114a) = 「켜진 토글」 · 「주 단추(D03 저장)」 · 「선택된 탭(B09)」 모두 같은 색 — 상태 의미가 겹침.
+- E03 고정 격자 — 위 「평면 위험 띠」 아래 큰 빈칸 · 오른쪽 결과 칸(속성 칸 꼴)은 좋음.
+- 바탕 테마가 마케팅 사이트 「Wiza」 꼴(8px 둥근 카드 · 넉넉한 여백) — 하루 종일 쓰는 도구 밀도에 안 맞음.
+
+## ① 결론 다섯 줄
+
+1. 지도 · 3D · CAD · 표 도구들은 거의 같은 뼈대 — 위 앱 줄 · 왼쪽 아이콘 줄+패널 · 가운데 캔버스 · 오른쪽 속성 칸 · 아래 탭 칸 · 맨 아래 상태 줄(QGIS · iTwin · Felt · Onshape · Figma).
+2. 우리 화면의 가장 큰 흠 = 저장 · 단계 이동 자리와 아래 칸 손잡이가 페이지마다 흩어짐 → 상세 화면 전부를 한 벌의 공용 셸(`ui_template`)로 묶는 일이 먼저.
+3. 단계 흐름(B03→B09)은 위 앱 줄의 단계 표시줄(이름 · 끝남 · 고침 있음 · 경고 점)로 — 이름 없는 [<][>] 대신 「다음: 횡단설계 ›」.
+4. 선택한 것의 값은 오른쪽 속성 칸(Felt 상세 칸 · Figma 속성 칸 · Forma 분석 칸) · 결과 · 경고는 아래 「검토」 탭 + 상태 줄 개수 — 누르면 그 측점으로 이동.
+5. 색은 중립 회색 틀 + 강조 한 색(주 단추 · 선택) + 상태 색(아이콘+글자) · 글자 13px · 줄 28px · 둥글기 4px — 라이브러리는 거의 필요 없음(분할 손잡이 · 아이콘 정도).
+
+## ② 레퍼런스 페이지 (모두 2026-10-26 헤드리스로 열어 200 확인)
+
+| 이름 · 주소 | 무엇을 볼 것(화면 · 패턴) | 우리 대응 | 가져올 점 · 버릴 점 |
+| --- | --- | --- | --- |
+| Felt — 화면 둘러보기 · https://help.felt.com/getting-started/tour-the-interface | 다섯 부분: 위 도구 줄 · 왼쪽 범례/목록 · 오른쪽 상세 칸(선택 시 · 스타일 · 필터 · 데이터 탭) · 아래 표(T 키) · 지도. 보기 모드 ↔ 편집 모드 | 상세 지도형(B05 · D03) | 가져올 것: 선택 시 열리는 오른쪽 상세 칸 · 지도 아래 표 칸 · 단축키 · 보기/편집 모드 구분(D 공무원 열람). 버릴 것: 자동 저장(우리는 [저장] 명시) |
+| Kepler.gl 데모 · https://kepler.gl/demo/nyctrips (그림 02) | 왼쪽 아이콘 탭 넷(층 · 필터 · 상호작용 · 바탕지도) + 층 카드(눈 · 접기) · 오른쪽 세로 지도 조작 단추 줄(분할 · 3D · 범례 · 그리기) · 패널 접기 ◀ | 상세 지도형 · 3D | 가져올 것: 아이콘 줄로 패널 갈래 전환 · 층 줄마다 눈 · 접기 · 지도 오른쪽 세로 조작 줄 · 2D/3D · 분할 지도 단추. 버릴 것: 어두운 기본 테마 · 알림 상자가 지도 가림 |
+| QGIS 화면 설명서 · https://docs.qgis.org/latest/en/docs/user_manual/introduction/qgis_gui.html (그림 05) | 메뉴 · 도구 줄 · 붙였다 떼는 패널(층 · 탐색기 · 도구상자 · 탭 묶음) · 지도 · 상태 줄(찾기 · 좌표 · 축척 · 확대 · 회전 · 좌표계 · 메시지) | 상세 지도형 · 공통 상태 줄 | 가져올 것: 상태 줄 구성 그대로(좌표 · 측점 · 축척 · 스냅 · 메시지 수) · Ctrl+K 찾기. 버릴 것: 도구 줄 여러 겹 · 아이콘만 있는 빽빽함(비프로그래머엔 과함) |
+| Cesium Sandcastle · https://sandcastle.cesium.com/ (그림 20) | 왼쪽 세로 아이콘 줄 + 목록 패널 · 오른쪽 3D · 우상단 조작 단추(찾기 · 홈 · 지도 바꾸기 · 도움말) · 아래 시간 줄 · 「Console」 접힘 칸 | 3D 보기(B05 3D · E 광역) | 가져올 것: 3D 우상단 조작 묶음 · 첫 사용 조작 안내(마우스 · 터치) · 아래 접힘 칸 한 줄. 버릴 것: 시간 줄(쓸 일 없음) |
+| iTwin.js AppUI — Frontstage 설정 · https://www.itwinjs.org/ui/appui/configure-frontstage/ (그림 03) | 인프라(도로 · 교량) 뷰어 틀: 네 면 패널(각 두 칸) · 핀 고정/풀기 · 손잡이 끌기 = 크기 · 누르기 = 접기 · 떠 있는 위젯 · 위 「도구 설정」 줄 · 아래 상태 줄 · 캔버스 위 겹친 도구 줄 | 공통 셸 전부 | 가져올 것: 「지금 도구의 설정」 줄(측점 간격 · 스냅 등) · 패널 손잡이 누르면 접힘 · 상태 줄. 버릴 것: 위젯 떼어 띄우기 · 새 창 팝아웃(과함) |
+| Esri Calcite — Shell · https://developers.arcgis.com/calcite-design-system/components/shell/ (그림 04) | GIS 앱 셸 칸 이름: header · panel-start/end · panel-top/bottom · footer · 가운데 지도 · 좁은 화면은 패널 접기 | 공통 셸 | 가져올 것: 칸 이름 짓기 · 지도 뒤로 깔기(contentBehind) 개념. 버릴 것: 코드 사용(Esri MLA — 아래 ④) |
+| Onshape 화면 기본 · https://cad.onshape.com/help/Content/Home/user_interface_basics.htm (그림 07) | 작업 갈래마다 바뀌는 위 도구 줄 · 왼쪽 기능 목록 + 되감기 막대 · 그래픽 영역 · 기능 대화창(파랑 칸 = 화면에서 고르기) · 색 표시 오류 | 상세 CAD형(B07) · 단계 흐름 | 가져올 것: 단계 목록의 오류 색 표시 · 「화면에서 고를 칸」 강조 · 오른쪽 누름 메뉴. 버릴 것: 되감기 막대(우리 흐름엔 없음) |
+| Figma UI3 안내 · https://www.figma.com/blog/making-the-move-to-ui3-a-guide-to-figmas-next-chapter/ (그림 06_blog) | 도구 줄을 아래 가운데 떠 있는 줄로 · 왼쪽 탐색 · 오른쪽 속성 칸(선택 따라 바뀜) · 크기 조절 패널 · UI 최소화(Shift+\) | 상세 CAD형(B07) · 지도형 | 가져올 것: UI 최소화 한 키(캔버스 넓게) · 선택 따라 바뀌는 속성 칸. 버릴 것: 아래 떠 있는 도구 줄(B07 리본에 익숙한 CAD 사용자엔 낯섦 · 반발 많았음) |
+| Blender 설명서 — Areas · https://docs.blender.org/manual/en/latest/interface/window_system/areas.html (그림 09) | 영역 나누기 · 합치기 · 경계 끌기 · 한 영역 최대화(Ctrl+Space) · 영역마다 머리줄 · 도구(T) · 옆칸(N) 여닫기 | 아래 칸(종단 · 표) · 3D | 가져올 것: 칸 하나 최대화 · 되돌리기(종단을 크게 보기) · 단축키로 옆칸 여닫기. 버릴 것: 자유 분할(초보자 길 잃음) |
+| Google Earth Engine 코드 편집기 · https://developers.google.com/earth-engine/guides/playground (그림 08) | 왼쪽 탭(문서 · 스크립트 · 자산) · 가운데 편집기 · 오른쪽 탭(검사 · 콘솔 · 작업) · 아래 지도 · 지도 우상단 층 관리 · 좌상단 그리기 | 상세 지도형 + 결과 | 가져올 것: 오른쪽 「검사(Inspector) · 작업(Tasks)」 탭 — 누른 점 값 보기 · 긴 계산 진행 목록. 버릴 것: 코드 편집 중심 배치 |
+| SimScale 후처리 · https://www.simscale.com/docs/post-processing/new-integrated-post-processor/ (그림 11) | 위 필터 상자(단면 · 입자) · 필터 목록(켜기 · 복제 · 지우기) · 범례 색 막대(최소 · 최대 눌러 고침) · 통계 · 방향 육면체 · 두 결과 비교 | 해석 결과형(E03 · E06) | 가져올 것: 범례 범위 직접 고침 · 결과 비교 · 점 찍어 값 보기. 버릴 것: 필터 만들기 자유도(우리는 정해진 결과) |
+| Autodesk Forma Site Design · https://www.autodesk.com/products/forma-site-design/overview (그림 21) | 왼쪽 탐색 · 라이브러리 · 가운데 지도/3D 캔버스 · 오른쪽 분석 메뉴 · 2D/3D 전환 · 분석 결과 최대 6개 나란히 비교 | 상세 지도형 + 3D · 결과 | 가져올 것: 같은 캔버스에서 2D/3D 전환(따로 모달 아님) · 분석은 오른쪽 · 대안 나란히 비교(D03 연도별 노선 후보). 버릴 것: 로그인 뒤 화면은 못 봄(제품 소개만) |
+| Airtable 표 보기 · https://support.airtable.com/articles/7905594155-airtable-grid-view (그림 13) | 줄 높이 4단 · 필터 · 정렬 · 묶기 · 열 숨김 · 열 고정 · 줄 펼쳐 보기(Space) | 상세 표형(B08 · B09) | 가져올 것: 줄 높이(조밀/보통) · 열 고정 · 묶기 · 줄 펼쳐 상세. 버릴 것: 자유 칼럼 만들기(양식 고정) |
+| Procore Estimating 물량 산출 · https://v2.support.procore.com/en-gb/product-manuals/procore-estimating/tutorials/add-takeoffs-in-procore-estimating (그림 12) | 도면 위 산출(개수 · 길이 · 면적) · 도면 아래 도구 줄(격자 · 설정) · 산출 탭 ↔ 견적 탭 | 상세 표형 + CAD형(B08 수량 ↔ B07 도면) | 가져올 것: 표 줄 ↔ 도면 위치 서로 짚기 · 산출 → 견적 탭 흐름. 버릴 것: 수동 물량 그리기(우리는 자동) |
+| Carbon UI shell · https://www.carbondesignsystem.com/building-blocks/core/components/ui-shell-header/guidelines (그림 14) | 위 머리줄 · 왼쪽 옆 탐색(레일 → 펼침) · 오른쪽 패널 · 밀도 · 회색 틀 + 파랑 강조 | 공통 셸 · 색 · 밀도 | 가져올 것: 회색 단계 색 체계 · 머리줄 높이 48 · 레일 접힘 규칙. 버릴 것: IBM 고유 글꼴(Plex는 OFL이지만 한글 없음) |
+
+보조로 연 페이지(표 밖): Blueprint 문서 https://blueprintjs.com/docs/ (조밀한 데이터 도구 꼴 · React 라 코드는 안 씀) · Dockview https://dockview.dev/ · AG Grid https://www.ag-grid.com/javascript-data-grid/getting-started/ · Tabulator https://www.tabulator.info/ · Mapbox Studio https://docs.mapbox.com/console-tools/studio/ · Foursquare Studio https://docs.foursquare.com/analytics-products/docs/studio-overview · Ansys Discovery https://ansys.synopsys.com/products/3d-design/ansys-discovery(제품 소개만 · 배치 정보 적음) · Speckle https://speckle.systems/.
+못 연 곳: Figma 도움말 UI3 글(404 → 블로그로 대체) · Unity 설명서(404) · Smartsheet 도움말(응답 실패) · Bentley iTwin 실제 뷰어 · Onshape · Forma 작업 화면은 로그인 필요.
+
+## ③ 우리에게 맞는 패턴 제안
+
+### 상세 화면 — 공용 「작업 셸」 한 벌
+
+```
+┌ 앱 줄 40 ─ ☰ 프로젝트명 │ 전처리 ✓ › 노선 ● › 횡단 › 도면 › 수량 › 원가 ⚠2 │ 고침 3건 · [초기화▾] [저장] ┐
+├ 도구 설정 줄 32 (지금 도구의 값: 측점 간격 · 스냅 · 등고선 간격) ─────────────────────────────┤
+│레일│ 왼쪽 패널 280~360 │        캔버스(지도 · 3D · CAD)            │ 오른쪽 속성 칸 300 │
+│ 40 │ 목록 · 설정        │  좌상단: 보기 도구 · 우측 세로: 지도 조작 │ (선택했을 때만)    │
+│    │ (카드 아님 · 머리줄) │  좌하단: 범례(접힘)                       │                    │
+│    ├────────────────────┴──────────────────────────────────────────┴────────────────────┤
+│    │ 아래 칸: [종단][표][유토곡선][횡단][배수유역][검토 ⚠5]   ─ 끌어 크기 · ⤢ 최대화 · ▾ 접기 │
+└ 상태 줄 24 ─ 좌표 · 커서 측점 17+11 · 축척 · 스냅 켜짐 · 계산 중… · 경고 5 · 저장 안 됨 ────┘
+```
+
+- 배치 — 다섯 칸 고정 자리(앱 줄 · 레일+왼쪽 · 캔버스 · 오른쪽 · 아래 · 상태 줄). 페이지는 칸에 내용만 넣음. E03 처럼 빈 칸 생기는 고정 격자 없앰.
+- 탐색 — 단계 이동은 앱 줄 단계 표시줄(눌러 이동 · 단계마다 점: 끝남 ✓ · 고침 있음 ● · 경고 ⚠수) + 앱 줄 오른쪽 「다음: ○○ ›」. 페이지 갈래(구조물 · 설정 · 추천)는 레일 아이콘(Kepler · Cesium 꼴) — 아코디언 대신 한 번에 하나.
+- 저장 · 초기화 · 확정 — 앱 줄 오른쪽 한 자리. [저장] = 강조 채움 · 고친 것 없으면 흐림 · 「고침 3건」 표시. [초기화] = [저장]과 떨어진 펼침(▾) 메뉴 안 · 확인창 유지. [확정](D · B 확정 단계) = [저장] 자리 대신.
+- 접고 펴기 · 크기 — 패널마다 경계 끌기 · 경계 누르기 = 접기(iTwin) · 크기 · 접힘은 사용자별 기억(localStorage · 작업 데이터 아님) · 「UI 최소화」 한 키(Figma Shift+\) · 아래 칸 ⤢ 최대화(Blender).
+- 아래 칸 — 탭 한 줄로 통합(지금 위 · 아래 · 오른쪽 세로 탭 셋 → 하나). 종단 · 표 · 유토곡선 · 횡단 · 배수유역 · 검토. 오른쪽 세로 글자 탭 없앰.
+- 오른쪽 속성 칸 — 지도에서 측점 · 구조물을 고르면 열림(Felt · Figma) · 값 고침 · 「지도에서 고르기」 칸 강조(Onshape 파랑). E03 결과 칸 꼴을 전 페이지 표준으로.
+- 지도 위 겹 — 좌상단 보기 도구(등고선 · 측점 · 기울기 토글) · 우측 세로 조작(확대 · 2D/3D · 분할 · 범례 · 바탕지도) · 좌하단 접히는 범례. 지금 지도 위 정보 상자는 상태 줄로.
+- 3D — 같은 캔버스에서 2D/3D 전환 또는 좌우 분할(Kepler · Forma) · 따로 모달 안 띄움 · 우상단 3D 조작 묶음(Cesium).
+- 도구 줄 — 토글(켜짐 = 연한 강조 바탕 + 강조 글자)과 동작(테두리 단추) 모양 구분 · 묶음 사이 세로 선 · 되돌리기/다시하기 한 벌.
+- 결과 · 경고 — 상태 줄 개수 → 아래 「검토」 탭 목록(측점 · 내용 · 심각도) → 누르면 그 측점으로 지도 이동 · 단계 표시줄 점과 같은 수. 색만 쓰지 않고 아이콘+글자(◆N.G 지금 꼴 좋음).
+- 긴 계산 — 상태 줄 「계산 중 · 측점 12/54」 + 아래 「작업」 목록(GEE Tasks) · 화면 잠금은 지침대로 저장 · 확정 · 초기화 · 추천 적용만.
+
+### 상세 표형(B08 · B09)
+
+- 표 탭 = 위 탭 줄(지금 알약 단추 → 밑줄 탭) · 왼쪽 패널 기본 접힘(레일만) — 표가 화면 폭 전부.
+- 머리줄 · 첫 열 고정 · 소계/합계 줄 아래 고정 · 숫자 오른쪽 정렬 + 고정폭 숫자(tabular-nums) · 줄 높이 조밀/보통 두 단(Airtable).
+- 고칠 칸만 표시(연한 바탕) · 근거식은 비고 열(지금 꼴 좋음) · 줄 누르면 근거 표(일위대가 등)로 이동 + 뒤로 가기.
+- 보기 옵션(박스/호표 · 하이퍼링크/팝업)은 표 위 오른쪽 작은 토글로.
+
+### 상세 CAD형(B07)
+
+- 리본(홈 · 삽입 · 주석 · 뷰 · 출력)은 AutoCAD 사용자 익숙 → 유지 · 높이 줄이기(아이콘 20 · 접기 ^ 기본 켬).
+- 왼쪽 도면 목록 = 썸네일 없는 조밀 목록 + 개수 · 설정(⚙)은 줄 오른쪽 hover.
+- 아래 상태 줄(객체 스냅 · 직교 · 극좌표 · 그리드 · 명령행) = 이미 맞는 꼴 → 이 줄을 다른 페이지 상태 줄의 본보기로.
+- 오른쪽 속성 칸(선택 개체의 색 · 선 두께 · 층) — 지금 리본 「특성」 묶음을 옮김.
+
+### 밀도 · 색 · 글꼴 · 아이콘 · 상태
+
+- 밀도 — 본문 13px · 보조 12px · 조작 높이 28 · 표 줄 28(조밀 24) · 간격 4/8 · 둥글기 4(카드 8 → 4) · 패널 안 카드 테두리 없앰(머리줄 + 구분선).
+- 색 — 틀은 중립 회색 단계(바탕 #f6f7f9 · 선 #e3e5e8 · 글 #1f2328) · 강조 한 색(지금 보라 유지 가능 · 주 단추 · 선택 · 포커스만) · 토글 켜짐은 연한 강조 · 상태 색 넷(성공 · 경고 · 위험 · 정보)은 아이콘과 짝 · 지도 · 3D 위 색과 겹치지 않게 틀은 무채색.
+- 글꼴 — 한글 Pretendard(또는 지금 Noto Sans KR 유지) · 숫자 열 tabular-nums · 측점 · 좌표는 고정폭 숫자.
+- 아이콘 — 한 세트로 통일(Lucide 또는 Tabler · 24 격자 · 선 1.5) · 레일 · 도구 줄은 아이콘+짧은 글자(비프로그래머) · 아이콘만이면 툴팁+단축키.
+- 테마 — 밝음 기본 · 어두움은 3D · CAD 캔버스만 어둡게 하는 선택지.
+
+## ④ 라이센스 (상용 가능 여부 · 원문 확인)
+
+| 대상 | 라이센스 | 상용 | 비고 |
+| --- | --- | --- | --- |
+| Lucide 아이콘 | ISC | 가능 | MIT 와 같은 수준 허용 · 저작권 표기. 규칙 목록(BSD · MIT · Apache)에 ISC 없음 → 정할 거리 |
+| Tabler Icons | MIT | 가능 | 6200+ 개 · 선 아이콘 |
+| Pretendard 글꼴 | SIL OFL 1.1 | 가능(임베드 · 웹폰트) | 글꼴만 따로 팔기 금지. 지금 쓰는 Noto Sans KR · Inter 도 OFL |
+| dockview-core | MIT(enterprise 판만 유료) | 가능 | 프레임워크 없는 JS · 의존 없음. 도킹 · 탭 · 떠 있는 패널 |
+| Split.js | MIT | 가능 | 분할 손잡이만(작음) |
+| Golden Layout | MIT | 가능 | 도킹 · 오래됨 |
+| Tabulator | MIT | 가능 | 프레임워크 없는 표 · 가상 스크롤 · 열 고정 · 묶기 |
+| AG Grid Community | MIT(Enterprise 판은 상용 유료) | Community 만 가능 | 피벗 · 엑셀 내보내기 등은 Enterprise |
+| Carbon Design System | Apache 2.0 | 가능 | 웹 컴포넌트판 있음 · 참고 위주 |
+| Blueprint | Apache 2.0 | 가능 | React 전용 → 코드 안 씀 · 꼴만 참고 |
+| Kepler.gl | MIT | 가능 | 꼴 참고 |
+| CesiumJS | Apache 2.0 | 가능 | 꼴 참고(Cesium ion 데이터는 별도 약관) |
+| MapLibre GL JS(이미 씀) | BSD-3 | 가능 | — |
+| Esri Calcite | Esri MLA(독점) | ✗ 코드 사용 금지 | 칸 구성만 보고 따라 만듦 |
+| iTwin.js AppUI | 꼴 참고만 | — | React 기반 · 쓰지 않음 |
+
+- 권장 — 셸 · 분할 손잡이 · 탭은 `ui_template` 에 자체로(CSS grid + 끌기 몇십 줄) · 새 의존성 없음. 도킹 자유 배치가 꼭 필요할 때만 dockview-core(MIT).
+- 화면 그림 · 로고 · 상표(Felt · Figma 등)는 꼴만 참고 — 그대로 베끼거나 그림을 제품에 넣지 않음.
+
+## ⑤ 정할 거리
+
+1. 상세 화면 전부를 공용 「작업 셸」 한 벌로 묶을지(권장: 예 · B05 먼저 → B06 · D03 · E03 → B07 · B09).
+2. 저장 · 초기화 · 단계 이동 자리 — 위 앱 줄 오른쪽(권장) vs 지금처럼 왼쪽 패널 아래.
+3. 단계 표시줄(B03→B09 이름 · 상태 점) 넣을지 · [<][>] 없앨지.
+4. 오른쪽 속성 칸 — 선택했을 때만 열림(권장) vs 늘 열림.
+5. 아래 칸 탭 하나로 통합 + 오른쪽 세로 글자 탭(횡단 · 배수유역) 없앨지.
+6. 왼쪽 레일(아이콘 줄) + 한 번에 한 갈래 vs 지금 아코디언.
+7. 상태 줄 넣을지(좌표 · 측점 · 축척 · 스냅 · 경고 수 · 계산 진행).
+8. 색 — 보라 강조 유지 + 회색 틀 vs 새 강조 색 · 둥글기 8 → 4 · 밀도 조밀/보통 두 단 제공 여부.
+9. 아이콘 세트 — Lucide(ISC 허용 여부) vs Tabler(MIT).
+10. 글꼴 — Pretendard 교체 vs Noto Sans KR 유지(둘 다 OFL · 글꼴은 OFL 허용으로 명시할지).
+11. 표 라이브러리 — 지금 `ui_template_data_table` 유지(권장) vs Tabulator(MIT) · 큰 표(수천 줄) 필요 시점.
+12. 패널 크기 · 접힘 기억 범위 — 사용자별(브라우저) vs 계정별(서버).

docs/raw/요구_1025/제안_366_화면개편.md

@@ -0,0 +1,119 @@
+# 제안 366 — 대시보드 · 상세 화면 개편 방향 (10-26)
+
+원문 = `사용자요구_1025.md` 요구 366 · 조사 넷 = `_조사_366-A_업계.md`(안티그래비티 · 토목 · GIS · 지반 · 견적 13) · `_조사_366-B_대시보드_SaaS.md`(sub1 · SaaS · 디자인 시스템 15) · `_조사_366-C_상세_워크스페이스.md`(sub4 · 지도 · 3D · CAD 작업 화면 15) · `_분석_366-D_지금_화면_코드.md`(지금 화면 틀) · 레퍼런스 그림 53 장 = `ref_366/`.
+제안만 — 구현은 사용자 확정 뒤.
+
+## 1. 방향 한 줄
+
+**「마케팅 사이트 꼴」 → 「하루 종일 쓰는 엔지니어링 작업 도구 꼴」** — 회색 틀 + 강조 한 색 · 촘촘한 밀도 · 왼쪽 탐색 셸 · 모든 상세 화면이 같은 작업 셸 한 벌.
+
+## 2. 왜 마음에 안 드는가 (진단)
+
+- 지금 디자인 = 마케팅 사이트 「Wiza」 꼴을 그대로 가져옴(`docs/raw/guidelines/design.md`) — 보라 한 색 · 큰 제목 · 카드 안 여백 24 px · 단추 높이 42 px → 설계 도구로는 헐렁함. 글꼴 파일이 실제로 안 실려 윈도우 기본 글꼴(맑은 고딕)로 보임.
+- 대시보드 = 같은 무게 카드 8~10 개를 한 장에 세로로 쌓음 · 위 머리 · 검색 없음 · 프로젝트 줄마다 단계 칩 3~7 개 + 빨강 [삭제] 상시 노출 · 개인 설정 · 회사 · 시스템 로그가 섞임.
+- 상세 화면 = 로그인 뒤 위 메뉴 없이 ☰ 하나 · 단계 흐름이 ☰ 서랍 안에만 있어 안 보임 · [?] [<] [>] [저장]이 왼쪽 아래 구석 · 저장 · 단계 이동 · 아래 칸 손잡이가 페이지마다 다른 자리 · 탭 모양 7 가지 · 아이콘 없이 이모지 · 글자.
+
+## 3. 방향을 잡을 레퍼런스 페이지 (대표 12)
+
+| 갈래 | 레퍼런스 | 무엇을 가져올까 | 그림 |
+| --- | --- | --- | --- |
+| 대시보드 셸 · 탐색 | Linear https://linear.app/ | 좁은 왼쪽 탐색 묶음(작업 / 관리 / 즐겨찾기) · 상태 아이콘 일관성 | `Linear_home.png` |
+| 홈 · 설정 분리 | Stripe 대시보드 https://docs.stripe.com/dashboard/basics | 홈 = 「지금 볼 것」만 · 설정은 별도 영역 · `?` 단축키 | `Stripe_dashboard_basics.png` |
+| 프로젝트 표 · 업무 밀도 | Ant Design Pro 조회 표 https://preview.pro.ant.design/list/table-list/ | 동아시아 업무 화면 밀도 · 표 툴바 · 밀도 · 열 설정 · 상태 점 | `AntDesignPro_list.png` |
+| 저장된 보기 · 진행 | GitHub Projects https://docs.github.com/en/issues/planning-and-tracking-with-projects/learning-about-projects/about-projects | 「내 프로젝트 · 전체 · 보관」 보기 탭 · 묶기 · 필터 | `GitHub_Projects_docs.png` |
+| 차분한 중립 꼴 | shadcn/ui 대시보드 https://ui.shadcn.com/examples/dashboard | 중립 회색 + 검정 주 단추 · 1 px 테두리 · 사이드바 블록(그림 참고만) | `shadcn_dashboard.png` |
+| GIS 작업 셸 | Esri Calcite Shell https://developers.arcgis.com/calcite-design-system/components/shell/ | 위 머리 + 아이콘 레일 + 접이 패널 + 가운데 지도(배치만 · 코드 금지 = Esri 독점 라이센스) | `C_04_calcite_shell.jpg` |
+| 토목 다중 뷰 | Bentley iTwin AppUI https://www.itwinjs.org/ui/appui/configure-frontstage/ | 9 구역 화면 · 슬림 도구줄 · 상태 줄 · 평면 측점 따라 종단 · 횡단 동시 표시 | `C_03_itwin_frontstage.jpg` |
+| 지도 + 속성 칸 | Felt https://help.felt.com/getting-started/tour-the-interface | 지도에서 고르면 오른쪽 속성 칸 · 깔끔한 겹 조작 | `C_01_felt_interface.jpg` |
+| 레일 + 패널 | Kepler.gl https://kepler.gl/demo/nyctrips | 왼쪽 아이콘 레일로 패널 갈래 전환 · 2D/3D 한 캔버스 | `C_02_kepler_demo.jpg` |
+| 패널 최소화 · 속성 | Figma UI3 https://www.figma.com/blog/making-the-move-to-ui3-a-guide-to-figmas-next-chapter/ | UI 최소화 한 키 · 오른쪽 속성 칸 · 캔버스 최대 | `C_06_figma_ui3_blog.jpg` |
+| 안정성 결과 화면 | Rocscience Slide2 · Slide3 https://www.rocscience.com/software/slide2 | Safety Map 범례 · 오른쪽 결과 탭(요약 · 절편표 · 그래프) · 조건 탭 | (조사 A) |
+| 색 · 글꼴 · 접근성 토큰 | Radix Colors https://www.radix-ui.com/colors · KRDS https://www.krds.go.kr/ | 회색 12 단계 + 강조 · 밝음/어두움 짝(MIT) · 공무원 화면 글자 크기 · 고대비 | `Radix_colors.png` · `KRDS.png` |
+
+전체 레퍼런스(43) · 장단점 = 조사 A · B · C 의 ② 표.
+
+## 4. 대시보드 개편안
+
+```
+┌ 위 머리 48 ─ 회사 로고 · 회사명 │                     │ 검색 Ctrl+K · [?] · 알림 · 사용자 ▾ ┐
+├ 왼쪽 탐색 240(접으면 레일 64) ┬──────────────────────────────────────────────────────────┤
+│ 작업                         │ 홈 — 역할별 한 화면                                        │
+│  · 홈                        │ ┌요약 타일┐┌────────┐┌────────┐┌────────┐  [+ 새 프로젝트]│
+│  · 프로젝트                  │ │진행 중 7 ││검토 대기││N.G 구간 ││완료 12  │                 │
+│  · 받은 예정노선 (3)         │ └────────┘└────────┘└────────┘└────────┘                 │
+│  · 임시 보관함               │ 이어서 하기 — 최근 프로젝트 3~5(작은 지도 그림 · 마지막 단계) │
+│ 관리(권한자만)               │ 프로젝트 표                                                │
+│  · 팀원 · 가입 요청 (2)      │  [내 프로젝트][전체][보관] · 검색 · 종류 · 상태 · 지역 · 밀도 │
+│  · 회사 · 시스템 설정 · 로그 │  이름 · 종류 · 지역 · 진행 ▮▮▮▮▯▯▯ 횡단설계 4/7 · 수정일 · ⋯ │
+│ ─────                        │                                                            │
+│  내 정보 · 보안 · 테마        │                                                            │
+└──────────────────────────────┴────────────────────────────────────────────────────────────┘
+```
+
+- 홈 = 역할별: 설계 엔지니어(이어서 하기 · 내 프로젝트 · 새 예정노선) · 산림청(예정노선 상태별 수 · 안정성 검토 대기) · 회사 관리자(+ 가입 요청 · 팀원) · 시스템 관리자(+ 리소스 한 줄).
+- 프로젝트 표 = 단계 칩 나열 대신 진행 막대 + 「횡단설계 4/7」(마디 누르면 그 단계로) · 열기 = 행 누름 · 수정 · 복제 · 보관 · 삭제 = 줄 끝 「⋯」(삭제만 빨강 + 확인) · 빈 상태 = 그림 + 한 줄 + [첫 프로젝트 만들기].
+- 설정 · 관리 = 대시보드에서 뗌 · 왼쪽 하위 메뉴 + 오른쪽 폼 한 장.
+
+## 5. 상세 화면 — 공용 작업 셸 한 벌
+
+```
+┌ 앱 줄 40 ─ ☰ 프로젝트명 │ 전처리 ✓ › 노선 ● › 횡단 › 도면 › 수량 › 원가 ⚠2 │ 고침 3건 · [초기화▾] [저장] ┐
+├ 도구 설정 줄 32 (지금 도구 값: 측점 간격 · 스냅 · 등고선) ──────────────────────────────┤
+│레일│ 왼쪽 패널 280~360 │       캔버스(지도 · 3D · CAD)             │ 오른쪽 속성 칸 300 │
+│ 40 │ 목록 · 설정(머리줄) │ 좌상: 보기 도구 · 우측: 지도 조작 · 좌하: 범례│ (고를 때만)       │
+│    ├───────────────────┴───────────────────────────────────────────┴───────────────────┤
+│    │ 아래 칸: [종단][표][유토곡선][횡단][배수유역][검토 ⚠5]  ─ 끌어 크기 · ⤢ 최대 · ▾ 접기 │
+└ 상태 줄 24 ─ 좌표 · 커서 측점 17+11 · 축척 · 스냅 · 계산 중… · 경고 5 · 저장 안 됨 ──────┘
+```
+
+- 단계 이동 = 앱 줄 단계 표시줄(눌러 이동 · 끝남 ✓ · 고침 ● · 경고 ⚠수) · 지금 왼쪽 아래 [?] [<] [>] 는 앱 줄 오른쪽으로.
+- 저장 · 초기화 · 확정 = 앱 줄 오른쪽 한 자리 · [저장] 강조 · 고친 것 없으면 흐림 · [초기화] 는 떨어진 ▾ 메뉴 안(확인창 유지).
+- 왼쪽 = 아이콘 레일로 갈래 전환(구조물 · 설정 · 추천) · 큰 회색 카드 · 아래 빈 여백 없앰.
+- 아래 칸 = 탭 한 줄로 통합 · 끌어 크기 · 최대화 · 접기 · 크기는 사용자별 기억.
+- 오른쪽 속성 칸 = 지도에서 측점 · 구조물을 고르면 열림(E03 결과 칸 꼴을 표준으로).
+- 상태 줄 = B07 CAD 아래 줄(스냅 · 직교 · 명령행)을 본보기로 전 페이지.
+- 표형(B08 · B09) = 왼쪽 패널 기본 접힘 · 밑줄 탭 · 머리줄 · 첫 열 · 합계 줄 고정 · 숫자 고정폭.
+- CAD형(B07) = 리본 유지(AutoCAD 익숙) · 높이 줄임 · 오른쪽 속성 칸으로 「특성」 이동.
+
+## 6. 시각 언어
+
+| 항목 | 제안 |
+| --- | --- |
+| 색 | 중립 회색 12 단계(Radix slate 꼴) 틀 · 강조 한 색(주 단추 · 선택 · 포커스만) · 상태 넷(정보 · 성공 · 경고 · 위험)은 아이콘 + 글자와 짝 · 지도 · 3D 색과 안 겹치게 틀은 무채색 |
+| 밀도 | 상세 = 본문 13 px · 조작 높이 28 · 표 줄 28(조밀 24) · 대시보드 = 본문 14 · 표 줄 40 · 둥글기 4 · 카드 테두리 줄임 |
+| 글꼴 | Pretendard(한글 · KRDS 도 채택) · 숫자 열 tabular-nums · 측점 · 좌표 · 금액 고정폭 숫자 |
+| 아이콘 | 한 묶음(Tabler · MIT 권함) · 선 1.5 · 16/20 px · 레일 · 도구줄 = 아이콘 + 짧은 글자 · 이모지 걷음 |
+| 테마 | 밝음 기본 · 어두움 유지 · 3D · CAD 캔버스만 어둡게 고르는 선택지 |
+
+## 7. 바꾸는 길 (단계 · 손볼 곳)
+
+| 단계 | 내용 | 손볼 파일 | 비고 |
+| --- | --- | --- | --- |
+| 1 토큰 | 색 · 글꼴 · 크기 · 둥글기 · 밀도 값 · 글꼴 파일 싣기 | `ui_template_theme.css` · `ui_template_elements_styles.ts` · 글꼴 1 | 전 페이지 + CAD 가 한꺼번에 바뀜 · 「느낌」 대부분 |
+| 2 셸 | ☰ 단독 → 위 머리 + 왼쪽 탐색 · 아이콘 묶음 · 이모지 걷기 | `app_shell.ts` 등 3~6 | |
+| 3 대시보드 | 역할별 홈 · 프로젝트 표 · 설정 분리 | B01 5~8 | |
+| 4 상세 틀 | 앱 줄 단계 표시줄 · 저장 자리 · 레일 · 아래 탭 · 상태 줄 · 속성 칸 | `ui_template` 6~10 | 틀을 따르는 페이지 8 개는 저절로 |
+| 5 페이지별 | 탭 7 꼴 → 공용 · 도구줄 · 틀 밖 페이지(B03 · B05/B06 · B07 · B09 · D02 · E05) | 20~40 | |
+| 6 CAD | 리본 · 상태 줄 꼴 | `openwebcad`(빌드) | |
+
+- 원칙 = 화면 요소 이름(클래스 · data-)은 그대로 두고 값 · 배치만 바꿈 → 시험 · 가이드 촬영 장면 700 곳 보호 · 가이드 그림 300 장은 4 단계 뒤 캡처 스크립트로 한 번 다시 찍음.
+- 1 · 2 만 먼저 해도 인상이 크게 바뀜 → 1 · 2 를 먼저 하고 보고 다음을 정하는 길도 있음.
+
+## 8. 라이센스
+
+- 쓸 수 있음: Radix Colors(MIT) · Tabler Icons(MIT) · Lucide(ISC) · Pretendard(SIL OFL · 글꼴) · Carbon · Fluent 웹 컴포넌트(Apache · MIT · 쓰지 않아도 됨).
+- 그림 참고만: Esri Calcite(Esri 독점 · 조사 A 의 Apache 표기는 틀림 — B · C 원문 확인) · Shopify Polaris · Remix Icon 4.x · antd · shadcn(React).
+- 권함 = 새 화면 라이브러리 없이 `ui_template` 직접 · 가져오는 것은 색 값 · 아이콘 SVG · 글꼴뿐.
+
+## 9. 정할 거리 (사용자)
+
+1. 셸 — 왼쪽 고정 탐색(권함) / 위 탭 메뉴.
+2. 대시보드 첫 화면 — 역할별 홈(권함) / 프로젝트 표 바로.
+3. 단계 이동 — 앱 줄 단계 표시줄 + 오른쪽 [저장](권함) / 지금 왼쪽 아래 유지.
+4. 강조 색 — 지금 보라 다듬기 / 산림 녹색 계열 / 진한 남색.
+5. 밀도 — 촘촘(권함) / 지금 넉넉.
+6. 글꼴 Pretendard(SIL OFL) 허용 — 허용 목록(BSD · MIT · Apache)에 글꼴 예외.
+7. 아이콘 — Tabler(MIT · 권함) / Lucide(ISC).
+8. 어두운 캔버스(3D · CAD) 선택지 둘지.
+9. 진행 순서 — 1 · 2(토큰 · 셸) 먼저 하고 보기(권함) / 1~4 한 번에.
+10. 시안 — 정하기 전에 대시보드 · B05 두 화면을 HTML 시안으로 먼저 볼지.