feat(B01): 프로젝트 카드 요약 함수 · API — 단계 · 썸네일 선 · 담당 · 멈춘 날 · 연장 · 측점 · 구조물 (PLAN 547-1)

- B01_Dashboard_Summary.project_summaries(ids) — 쿼리 다섯 번(개수 무관) · 넣은 차례 · 없는 값은 칸 뺌
- 썸네일 = 최신 노선 GeoJSON 중심선 100 점 안쪽 · 0~1 칸(가로세로 비 유지 · y 아래로)
- GET /api/dashboard/projects/summary?ids= — 보이는 프로젝트만(시스템 관리자 전부 · 회사 · 내 것)
- 실측 21 개 0.14 s

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

B01_Dashboard/B01_Dashboard_Router_Home.py

@@ -0,0 +1,47 @@
+"""B01 대시보드 홈 API (PLAN 547) — 프로젝트 카드 요약 · 역할별 홈."""
+
+from typing import Any
+
+import aiomysql
+from fastapi import APIRouter, Depends, Query
+
+from common_util.common_util_auth import verify_session
+from config.config_db import get_db_pool
+
+from .B01_Dashboard_Summary import project_summaries
+
+router = APIRouter(prefix="/api/dashboard", tags=["B01_Dashboard"])
+
+SUMMARY_LIMIT = 200
+
+
+async def visible_project_ids(session: dict[str, Any]) -> list[str]:
+    """보이는 프로젝트(최근 수정 순) — 시스템 관리자 = 전부 · 회사 = 회사 전체 · 없으면 내 것."""
+    where, args = "p.deleted_at IS NULL", ()
+    if session["role"] != "SYSTEM_ADMIN":
+        if session.get("company_id"):
+            where, args = where + " AND p.company_id = %s", (int(session["company_id"]),)
+        else:
+            where, args = where + " AND p.user_id = %s", (int(session["user_id"]),)
+    pool = get_db_pool()
+    async with pool.acquire() as connection, connection.cursor(aiomysql.DictCursor) as cursor:
+        await cursor.execute(
+            f"SELECT p.id FROM projects p WHERE {where} "
+            "ORDER BY p.updated_at DESC, p.created_at DESC",
+            args,
+        )
+        return [str(r["id"]) for r in await cursor.fetchall()]
+
+
+@router.get("/projects/summary")
+async def projects_summary(
+    ids: str | None = Query(None, max_length=8000, description="쉼표로 이은 프로젝트 id"),
+    session: dict[str, Any] = Depends(verify_session),
+):
+    """카드 요약 — ids 없으면 보이는 프로젝트 전부(최근 수정 순) · 안 보이는 id 는 빠짐."""
+    visible = await visible_project_ids(session)
+    if ids:
+        allowed = set(visible)
+        wanted = dict.fromkeys(pid.strip() for pid in ids.split(","))
+        visible = [pid for pid in wanted if pid in allowed]
+    return {"status": "success", "projects": await project_summaries(visible[:SUMMARY_LIMIT])}

B01_Dashboard/B01_Dashboard_Summary.py

@@ -0,0 +1,172 @@
+"""프로젝트 카드 요약 (PLAN 547-1) — 홈 · 목록 · 상세 카드가 같이 씀.
+
+단계 = 대시보드 표 단계 막대와 같은 값(`workflow_state.current_stage` · 종류별 단계 목록).
+썸네일 = 최신 노선 경로 GeoJSON(B05 정본) 중심선을 100 점 안쪽으로 줄여 0~1 칸에 맞춤
+(가로세로 비 유지 · 가운데 · y 는 화면 방향 = 아래로 커짐). 값이 없으면 칸을 뺌.
+쿼리 = 프로젝트 · 단계 · 참여자 · 노선 · 측점 다섯 번(개수와 무관) + 노선 · 구조물 파일 읽기.
+"""
+
+from __future__ import annotations
+
+import json
+from datetime import datetime
+from pathlib import Path
+from typing import Any
+
+import aiomysql
+
+from config.config_db import get_db_pool
+from M02_MasterTemplete.M02_Template_Migrate import project_root
+
+from .B01_Dashboard_Repository import get_workflow_states_for_projects
+
+THUMB_POINTS = 100
+
+# 단계 이름 = 화면 단계 막대 글(ui_template_locale_common · _de) 한국어 · 모르는 종류 = 임도
+STAGE_NAMES: dict[str, tuple[str, ...]] = {
+    "ROAD": ("파일입력", "전처리", "노선설계", "횡단설계", "상세설계", "수량산출", "원가계산"),
+    "PLAN": ("기준 지정", "노선 분석", "확정 · 내보내기"),
+    "STABILITY": ("지반 조건", "2D 해석", "3D 해석", "보고서", "암반 해석", "광역 위험"),
+}
+
+
+def stage_names(kind: str | None) -> tuple[str, ...]:
+    return STAGE_NAMES.get(kind or "ROAD", STAGE_NAMES["ROAD"])
+
+
+def thumb_line(points: list[list[float]], limit: int = THUMB_POINTS) -> list[list[float]] | None:
+    """중심선 → limit 점 안쪽 · 0~1 칸(가로세로 비 유지 · y 아래로). 두 점 못 되면 None."""
+    if len(points) < 2:
+        return None
+    if len(points) > limit:
+        last = len(points) - 1
+        points = [points[round(i * last / (limit - 1))] for i in range(limit)]
+    xs = [p[0] for p in points]
+    ys = [p[1] for p in points]
+    dx, dy = max(xs) - min(xs), max(ys) - min(ys)
+    span = max(dx, dy) or 1.0
+    ox, oy = (1 - dx / span) / 2, (1 - dy / span) / 2
+    return [
+        [round(ox + (x - min(xs)) / span, 4), round(1 - oy - (y - min(ys)) / span, 4)]
+        for x, y in zip(xs, ys, strict=True)
+    ]
+
+
+def _route_points(root: Path | None, route_data_path: str | None) -> list[list[float]]:
+    from B05_Profile.B05_Profile_Engine_Sections import _load_route_polyline
+
+    if root is None or not route_data_path:
+        return []
+    try:
+        return [[x, y] for x, y, _ in _load_route_polyline(root, route_data_path)]
+    except (OSError, ValueError):
+        return []
+
+
+def _structure_count(root: Path | None) -> int | None:
+    from B05_Profile.B05_Profile_Structures_Repository import structures_file_path
+
+    if root is None:
+        return None
+    try:
+        with open(structures_file_path(str(root)), encoding="utf-8") as handle:
+            items = json.load(handle).get("structures")
+    except (OSError, ValueError, AttributeError):
+        return None
+    return len(items) if isinstance(items, list) else None
+
+
+def _marks(values: list[Any]) -> str:
+    return ", ".join(["%s"] * len(values))
+
+
+async def project_summaries(project_ids: list[str]) -> list[dict[str, Any]]:
+    """프로젝트 여럿 → 카드 요약(넣은 차례 · 지운 · 없는 프로젝트는 빠짐)."""
+    ids = list(dict.fromkeys(str(pid) for pid in project_ids))
+    if not ids:
+        return []
+    pool = get_db_pool()
+    async with pool.acquire() as connection, connection.cursor(aiomysql.DictCursor) as cursor:
+        await cursor.execute(
+            f"""SELECT p.id, p.name, p.project_kind, p.region, p.updated_at, p.storage_path,
+                       p.company_id, p.user_id, u.name AS owner_name
+                FROM projects p LEFT JOIN users u ON u.id = p.user_id
+                WHERE p.id IN ({_marks(ids)}) AND p.deleted_at IS NULL""",
+            tuple(ids),
+        )
+        rows = {str(r["id"]): r for r in await cursor.fetchall()}
+        states = await get_workflow_states_for_projects(cursor, list(rows))
+        await cursor.execute(
+            f"""SELECT m.project_id, u.name FROM project_members m
+                JOIN users u ON u.id = m.user_id AND u.deleted_at IS NULL
+                WHERE m.project_id IN ({_marks(ids)}) ORDER BY u.name""",
+            tuple(ids),
+        )
+        members: dict[str, list[str]] = {}
+        for r in await cursor.fetchall():
+            members.setdefault(str(r["project_id"]), []).append(r["name"])
+        # 최신 노선 = B05 get_latest_route 와 같은 차례(computed_at · id 내림)
+        await cursor.execute(
+            f"""SELECT id, project_id, total_length_m, route_data_path FROM routes
+                WHERE project_id IN ({_marks(ids)})
+                ORDER BY computed_at DESC, id DESC""",
+            tuple(ids),
+        )
+        routes: dict[str, dict[str, Any]] = {}
+        for r in await cursor.fetchall():
+            routes.setdefault(str(r["project_id"]), r)
+        stations: dict[int, int] = {}
+        route_ids = [int(r["id"]) for r in routes.values()]
+        if route_ids:
+            await cursor.execute(
+                f"""SELECT route_id, COUNT(*) AS n FROM cross_sections
+                    WHERE route_id IN ({_marks(route_ids)}) GROUP BY route_id""",
+                tuple(route_ids),
+            )
+            stations = {int(r["route_id"]): int(r["n"]) for r in await cursor.fetchall()}
+
+    now = datetime.now()
+    result = []
+    for pid in ids:
+        row = rows.get(pid)
+        if row is None:
+            continue
+        state = states.get(pid, {"current_stage": 0, "stages": []})
+        names = stage_names(row.get("project_kind"))
+        index = min(int(state["current_stage"]), len(names) - 1)
+        stages = state["stages"]
+        root = project_root(row.get("storage_path"))
+        route = routes.get(pid)
+        metrics: dict[str, Any] = {}
+        if route and route.get("total_length_m") is not None:
+            metrics["length_m"] = round(float(route["total_length_m"]), 1)
+        if route and stations.get(int(route["id"])):
+            metrics["stations"] = stations[int(route["id"])]
+        structures = _structure_count(root)
+        if structures is not None:
+            metrics["structures"] = structures
+        owners = [row["owner_name"]] if row.get("owner_name") else []
+        owners += [name for name in members.get(pid, []) if name and name not in owners]
+        updated = row.get("updated_at")
+        result.append(
+            {
+                "id": pid,
+                "name": row["name"],
+                "kind": row.get("project_kind") or "ROAD",
+                "region": row.get("region"),
+                "company_id": row.get("company_id"),
+                "stage_index": index,
+                "stage_total": len(names),
+                "stage_name": names[index],
+                "done": bool(stages) and all(s["state"] == "COMPLETE" for s in stages),
+                "updated_at": updated.isoformat() if updated else None,
+                "stale_days": (now - updated).days if updated else None,
+                "owner_user_id": row.get("user_id"),
+                "owner_names": owners,
+                "thumb": thumb_line(
+                    _route_points(root, route.get("route_data_path")) if route else []
+                ),
+                "metrics": metrics,
+            }
+        )
+    return result

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/_조사_367-A_본보기_업계.md

@@ -0,0 +1,81 @@
+relay_7b94132d8a3f dispatch:ctx_a3e4088486eb -> run:run_06a1a55f92be: "요구 366·367 본보기 프로그램 조사 A (1순위 Onshape · 2순위 Autodesk Forma 통째 이식 설계안) 완료"
+### ① 결론 다섯 줄 (본보기 1순위 · 2순위 · 선정 까닭)
+1. **본보기 1순위 — `Onshape` (클라우드 엔지니어링 워크스페이스)**: 웹 브라우저 하나로 문서(프로젝트) 관리부터 3D 모델링·2D CAD 도면·BOM 수량표·보고서·버전/공유까지 끝내는 상용 SaaS의 완성형 표준임.
+2. **1순위 선정 까닭**: 프로젝트 하나 안에서 **하단 워크스페이스 탭 바(지형 → 노선·종단 → 횡단 → CAD도면 → 수량 → 원가)**로 이질적인 뷰(3D·CAD·표)를 한 창에서 즉시 전환하고, **상단 문맥 툴바 + 좌측 피처/측점 트리 + 우측 속성/내역 플라이아웃**을 유지하는 틀이 우리 B·D·E 3대 묶음과 1:1로 맞아떨어짐.
+3. **본보기 2순위 — `Autodesk Forma` (클라우드 지형·도로 대지 계획 및 실시간 분석)**: 지도·3D 지형 위에서 대안 노선을 긋고 우측 패널에서 토공량·경사·안전율을 실시간 비교하는 공간 설계 표준임.
+4. **2순위 선정 까닭**: `Onshape`가 전체 프로그램 껍데기(홈 대시보드 + 프로젝트 탭 + CAD/표 전환)의 본보기라면, `Autodesk Forma`는 그 안의 **지도·지형·해석 탭(B05 노선, D02~D03 예정노선, E03~E07 안정성평가)** 내부 좌·중·우 3단 캔버스 구성을 그대로 본뜰 최적의 짝임.
+5. **결합 전략**: **전체 골격(첫 화면 폴더/표 대시보드 → 프로젝트 상단 헤더·하단 공정 탭 전환 → 우측 슬라이드 테이블·설정)은 `Onshape`를 통째로 따르고**, 지도·단면·안정성 작업 캔버스 내부만 `Autodesk Forma` + `Rocscience Slide2`의 좌측 대안/측점 트리 + 우측 분석 인스펙터 배치를 이식함.
+
+### ② 후보 프로그램 4종 상세 (캡처 저장 위치: `tmp/brain_367/ref_A/`)
+
+#### 후보 1 (1순위). Onshape (Cloud CAD & PDM Workspace)
+- **한 줄 소개**: 설치 없이 브라우저에서 프로젝트 관리·3D 설계·2D 상세 도면·수량표(BOM)·승인 배포를 한 문서 안의 탭으로 처리하는 클라우드 엔지니어링 SaaS임.
+- **공개 확인 주소**: `https://cad.onshape.com/help/Content/Home/user_interface_basics.htm` · `https://www.onshape.com/en/features/pdm` · `https://www.onshape.com/en/features/drawings` · `https://www.onshape.com/en/features/bill-of-materials`
+- **전체 흐름 (5줄)**:
+  1. **첫 화면(Documents Page)**: 좌측 필터 레일(내 프로젝트·공유됨·발주처 수신·휴지통) + 중앙 고밀도 프로젝트 표 + 행 클릭 시 우측 상세/공유 패널이 열림.
+  2. **프로젝트 생성·열기**: 좌상단 `[Create ▾]` 버튼으로 프로젝트(묶음 선택) 생성 후 클릭 시 단일 워크스페이스 창으로 진입함.
+  3. **작업 화면**: 상단 2단 바(문서 타이틀/버전/공유 바 + 현재 탭 전용 아이콘 툴바) + 좌측 피처·레이어 트리(260px) + 중앙 대전면 WebGL 캔버스 + 우측 접이식 테이블/속성 드로어로 구성됨.
+  4. **단계 이동**: 화면 **하단 고정 탭 바(Bottom Tab Bar)**에 `[Part Studio(3D)] [Assembly] [Drawing(2D CAD)] [BOM(표)]` 탭이 나란히 놓여 클릭 한 번으로 3D→CAD→표를 즉시 오감.
+  5. **결과·설정**: 각 탭 우클릭/우상단에서 DWG·PDF·Excel 내보내기와 릴리즈(확정 전달) 모달을 실행하며, 우상단 프로필 메뉴에서 계정·회사·시스템 설정 화면으로 전환함.
+- **쓰기 쉬운 점 / 안 맞는 점**: **[장점]** 좌하단 `[<][>]` 없이 하단 탭 바로 전 공정을 한눈에 오가며 3D·CAD·표가 한 프로그램처럼 자연스럽게 이어짐 / **[단점]** 기계 CAD 기반이라 지형 지도·종횡단 분할 뷰는 후보 2·3의 캔버스 분할을 보충해야 함.
+- **화면 그림(4장)**: `onshape_01_documents_dashboard.png`, `onshape_02_workspace_ui_basics.png`, `onshape_03_drawings_2d_cad.png`, `onshape_04_bom_table_panel.png`
+
+#### 후보 2 (2순위). Autodesk Forma (Cloud Site, Terrain & Road Planning)
+- **한 줄 소개**: 클라우드 지형·위성지도 위에서 도로·단지 대안을 설계하고 토공량·경사·환경 지표를 실시간 분석·비교하는 웹 설계 프로그램임.
+- **공개 확인 주소**: `https://www.autodesk.com/products/forma/overview` · `https://blogs.autodesk.com/forma/2026/08/28/forma-site-design-tools-overview/` · `https://blogs.autodesk.com/forma/2025/06/19/terrain-editing-made-easy-with-forma-site-design/` · `https://www.autodesk.com/products/forma-site-design/product-details`
+- **전체 흐름 (5줄)**:
+  1. **첫 화면(Project Hub)**: 프로젝트 카드 그리드 + 지도 위치 미리보기 + 팀원 초대 허브로 시작함.
+  2. **프로젝트 진입**: 대지 영역(지형·도로 레이어)을 지정하거나 기존 파일을 불러와 3D 지형 캔버스를 생성함.
+  3. **작업 화면**: 좌측 사이드바 상단 `Proposals(연도별·노선 대안 목록)` + 하단 `Layers(지형·지적·등고선)` + 캔버스 중앙 플로팅 드로잉 툴바 + 우측 실시간 `Analyze(토공 절성토량·경사 분석)` 패널로 배치됨.
+  4. **단계 이동**: 상단 헤더 중앙의 세그먼트 스위치(`Site Design` ↔ `Compare(대안 비교)` ↔ `Board(보고 보드)`)로 설계와 비교·보고 단계를 전환함.
+  5. **결과·설정**: `Compare` 화면에서 대안별 물량·위험도를 나란히 비교한 뒤 Civil 3D/외부 설계사로 확정 노선을 내보냄.
+- **쓰기 쉬운 점 / 안 맞는 점**: **[장점]** 산림청 예정노선(D)과 임도 노선설계(B05)의 대안 비교·지형 분석 UX가 가장 직관적임 / **[단점]** 정밀 2D CAD 도각 편집과 원가계산서 스프레드시트 화면은 없음.
+- **화면 그림(4장)**: `forma_01_product_overview.png`, `forma_02_ui_navigation.png`, `forma_03_terrain_earthwork.png`, `forma_04_analysis_panel.png`
+
+#### 후보 3 (3순위). Bentley OpenRoads Designer & iTwin Platform (AppUI)
+- **한 줄 소개**: 도로 선형·종단·횡단·3D 코리더·토공 수량을 다중 동기화 뷰포트로 다루는 토목 인프라 설계 표준 소프트웨어임.
+- **공개 확인 주소**: `https://www.bentley.com/products/openroads-designer/` · `https://www.bentley.com/products/itwin-platform/` · `https://www.itwinjs.org/`
+- **전체 흐름 (5줄)**:
+  1. **첫 화면**: WorkSpace(발주처/설계기준) 및 WorkSet(프로젝트) 선택 백스테이지 화면으로 시작함.
+  2. **프로젝트 진입**: 프로젝트 표준 템플릿(설계속도·폭원·비탈면 경사 기준)을 로드하여 작업창을 엶.
+  3. **작업 화면**: 상단 공정별 리본 툴바 + 좌측 Explorer 트리 + **중앙 2~3분할 동기화 뷰포트(좌상 평면도 + 좌하 종단도 + 우측 횡단도/3D)** + 하단 상태 표시줄(스냅·좌표·축척)로 구성됨.
+  4. **단계 이동**: 좌상단 워크플로우 드롭다운 및 리본 탭(`지형 → 선형 → 종횡단 → 코리더 → 도면생성 → 수량산출`)을 순서대로 따라감.
+  5. **결과·설정**: 도면 시트 자동 분할 후 토공 수량 집계표(Civil Report)와 내역서를 출력하며, File 백스테이지에서 환경설정을 관리함.
+- **쓰기 쉬운 점 / 안 맞는 점**: **[장점]** 평면·종단·횡단 3뷰 동시 연동과 하단 상태바가 토목 엔지니어에게 가장 익숙함 / **[단점]** 상단 리본 명령이 너무 빽빽해 웹 SaaS에 그대로 옮기면 무거움.
+- **화면 그림(3장)**: `bentley_01_openroads_overview.png`, `bentley_02_itwin_platform.png`, `bentley_03_itwinjs_appui.png`
+
+#### 후보 4 (4순위). Rocscience Slide2 / Slide3 (지반·사면안정 해석 워크스페이스)
+- **한 줄 소개**: 지층 단면·3D 지형 모델링부터 한계평형 탐색·Safety Map 시각화·보고서 출력까지 일원화한 사면안정 해석 표준 프로그램임.
+- **공개 확인 주소**: `https://www.rocscience.com/software/slide2` · `https://www.rocscience.com/help/slide2/documentation/slide2-model/slide2-overview` · `https://www.rocscience.com/software/slide3`
+- **전체 흐름 (5줄)**:
+  1. **첫 화면**: 최근 프로젝트 목록과 템플릿/검증 예제 탐색기로 시작함.
+  2. **프로젝트 진입**: 프로젝트 설정(해석 방법 Bishop/Janbu/Spencer, 지하수 조건, 수렴 공차) 모달을 먼저 확정함.
+  3. **작업 화면**: 상단 워크플로우 탭(`Geometry → Groundwater → Loading/Support → Surfaces`) + 좌측 시나리오(건기/우기/지진) 트리 + 중앙 단면/3D 뷰어 + 하단 좌표 입력줄로 구성됨.
+  4. **단계 이동**: 상단 우측 `[Compute(해석)]` → `[Interpret(결과 보기)]` 버튼으로 모델링 모드와 결과 해석 모드를 전환함.
+  5. **결과·설정**: Interpret 화면에서 등안전율 컬러맵(Safety Map)·절편 자유물체도를 확인하고 `[Report Generator]`로 목차형 계산서를 즉시 인쇄함.
+- **쓰기 쉬운 점 / 안 맞는 점**: **[장점]** 안정성평가(E02~E07)의 시나리오 관리·Safety Map·절편 그래프·보고서 생성 흐름의 직접적인 정답지임 / **[단점]** 노선 설계나 원가 내역서 기능은 없음.
+- **화면 그림(3장)**: `rocscience_01_slide2_overview.png`, `rocscience_02_slide2_help_ui.png`, `rocscience_03_slide3_overview.png`
+
+### ③ 1순위 본보기(`Onshape` 골격 + `Forma/Slide2` 캔버스)에 우리 기능을 옮긴 지도
+| 우리 화면 | 본보기의 어느 화면 · 어떤 꼴로 매핑 | 구현 메모 |
+| :--- | :--- | :--- |
+| **`B01` 대시보드** | **Onshape `Documents Page`**: 좌측 고정 필터 메뉴(`전체 프로젝트` / `임도설계 B` / `예정노선 D` / `안정성평가 E` / `받은 예정노선함` / `임시보관함`) + 중앙 고밀도 프로젝트 표 + 우측 프로젝트 요약·할당 드로어 | 한 화면 1열 세로 나열 폐지, 프로젝트 표 집중 |
+| **`B02·D01·E01` 등록** | **Onshape `[Create ▾]` 모달**: 대시보드 좌상단 주 버튼 클릭 시 2단계 깔끔한 모달(묶음 선택 → 기본 제원·노선 가져오기)로 생성 후 즉시 워크스페이스 진입 | 별도 빈 페이지 이동 대신 빠른 생성 모달화 |
+| **`B03~B09` 공통 틀** | **Onshape `Document Workspace`**: 상단 44px 헤더(프로젝트명·저장상태·내보내기) + 상단 40px 문맥 툴바 + **하단 36px 공정 탭 바(`[1.파일] [2.전처리] [3.노선·종단] [4.횡단] [5.CAD도면] [6.수량] [7.원가]`)** | 좌하단 `[?][<][>]` 폐지, 하단 탭 바로 즉시 전환 |
+| **`B03` 업로드 · `B04` 전처리** | **Onshape `Import & Part Studio`**: 좌측에 업로드 파일·전처리 레이어 트리(LAS·정사영상·수치지도 체크박스), 중앙에 3D/2D 지형 미리보기, 상단 툴바에 전처리 실행 상태 표시 | 좌측 거대 버튼 2개 대신 파일·레이어 트리 배치 |
+| **`B05` 노선·종단 · `B06` 횡단** | **Forma `Canvas` + OpenRoads `Split View`**: 좌측에 노선 대안·측점(`0+000~`) 리스트 트리, 중앙 상단에 평면 지도, 중앙 하단에 리사이즈 종단도, 우측 도킹 패널에 횡단도·구조물 속성 배치 | 평면·종단·횡단 스플리터(Split Pane) 동기화 |
+| **`B07` CAD 도면** | **Onshape `Drawing Tab`**: 좌측에 시트(도면 목록: 표지·평면·종단·횡단·구조물) 썸네일/트리, 상단에 아이콘+짧은 라벨 CAD 툴바, 하단에 스냅·직교·축척 상태바 배치 | 빈 좌측 여백을 도면 시트 트리와 레이어 창으로 채움 |
+| **`B08` 수량 · `B09` 원가** | **Onshape `BOM Table` (전체화면 그리드 확장형)**: 상단 서브탭(`원가계산서 | 내역서 | 일위대가 | 단가산출 | 중기·자재`) + 중앙 꽉 찬 고정헤더/고정합계행 스프레드시트 + 우측 산출근거 슬라이드 패널 | 좌측 패널을 접어 표 가로 폭 100% 확보 |
+| **`D02~D04` 예정노선** | **Autodesk Forma `Proposals & Compare`**: 좌측에 연도별(`2027~2029`) 대안 카드 트리(클릭 시 지도·횡단 즉시 전환), 우상단 `[안 비교]` 및 `[노선 확정·설계사 배정]` 액션 바 배치 | 산림청 발주처용 깔끔한 대안 비교 중심 |
+| **`E02~E07` 안정성평가** | **Onshape 하단 탭(`[1.지반정수] [2.2D단면] [3.3D광역] [4.암반] [5.보고서]`) + Slide2 뷰어**: 좌측에 측점(`O.K./N.G.` 필터) 리스트, 중앙에 단면/3D Safety Map(평면 위험띠는 단면 상단 44px 미니바로 압축), 우측에 `[결과요약 | 절편표 | 그래프]` 탭 패널 | E03 상단 25% 빈 공간을 차지하던 위험띠 압축 |
+| **설정 · 사용자 가이드** | **Onshape `My Account / Company Settings` & 우상단 `[?]` 슬라이드오버**: 대시보드 좌하단 `[⚙ 회사·시스템 설정]` 전용 화면으로 분리하고, 가이드는 작업 화면 우측 슬라이드 드로어로 호출 | 대시보드 본문에서 개인정보·보안 폼 완전 분리 |
+
+### ④ 따라 만들 때 주의 사항 및 라이센스
+- **복제 금지 경계**: Onshape·Forma·Slide2의 상표, 로고, 고유 그래픽 에셋, 독점 아이콘 세트는 일절 복제하지 않으며, **화면 분할 비율(헤더 44px · 툴바 40px · 좌측 트리 260px · 하단 탭/상태바 32px)과 작업 동선(워크스페이스 탭 전환)**만 참고해 자체 CSS(`ui_template/`)로 구현함.
+- **상용 안전 오픈소스 부품**: 아이콘은 **Lucide Icons (`ISC`) / Tabler Icons (`MIT`)**, 글꼴은 **Pretendard + JetBrains Mono (`SIL OFL 1.1`)**, 엔지니어링 9-Zone 레이아웃 CSS 구조는 **Bentley `iTwinUI-css` (`MIT`)** 및 **Esri `Calcite` (`Apache 2.0`)** 규격만 참조하여 상용 라이센스 위반 위험이 전혀 없음.
+
+### ⑤ 브레인 · 사용자 결정 사항 (정할 거리 3가지)
+1. **프로젝트 내 공정 전환 위치**: **Onshape 방식(화면 하단 고정 워크스페이스 탭 바 + 하단 상태바)**으로 갈지, **상단 헤더 내 수평 Stepper 탭**으로 갈지 여부.
+2. **대시보드(B01) 기본 뷰**: **Onshape 방식(좌측 폴더/묶음 트리 + 중앙 고밀도 표 + 우측 상세 패널)**을 기본으로 할지, **Forma 방식(썸네일/미니맵 카드 그리드)**을 기본으로 할지 여부.
+3. **작업 화면 기본 테마**: 온종일 도면·지도를 보는 엔지니어 눈 피로도를 줄이기 위해 **상단 헤더·좌우 패널을 다크 슬레이트(`#181B20`)로 통일**할지, **클린 라이트(`#F8FAFC`)**를 기본으로 둘지 여부.
+[payload] {"taskId":"task_6f0ea26fd3ba","dispatchId":"ctx_a3e4088486eb","outcome":"succeeded"}

docs/raw/요구_1025/_조사_367-B_본보기_SaaS.md

@@ -0,0 +1,147 @@
+# 조사 367-B — 통째로 따라 할 본보기 프로그램 (비전문가용 현대 작업 SaaS · sub1 · opus)
+
+원문 = 요구 367(「요소 개선이 아니라 완전히 새 인터페이스 · 본보기 프로그램을 찾아 비슷하게」) · 앞 조사(366-A/B/C) 표는 다시 만들지 않음.
+그림 = `docs/raw/요구_1025/ref_367/B_`(24 장 · 2026-10-26 Playwright 헤드리스(Edge)로 찍음 · 공개 문서 그림은 원본 받음).
+지금 화면 = `A05_EduDetail/guide/B01 · B05 · B07 · B09 · D03 · E03 _00_overview.webp` 봄 — 대시보드는 같은 무게 카드 세로 쌓기 · 상세는 왼쪽 패널 + 본문 + 왼쪽 아래 [?][<][>][저장][초기화] · 단계 흐름이 화면에 안 보임.
+
+## ① 결론 다섯 줄
+
+1. **본보기 1순위 = Felt**(felt.com · 지도 작업 SaaS) — 「작업공간 홈(최근 지도 썸네일 · 프로젝트) → 지도 편집(위 도구줄 · 왼쪽 범례 · 오른쪽 상세 칸 · 아래 표) → 인쇄 판 편집기(쪽 목록 · 도면 · 쪽 설정 · [내보내기]) → 공유 → 작업공간 설정」이 우리 「대시보드 → 지도 · 노선 → 도면 → 보고서 · 내보내기 → 설정」과 한 흐름으로 거의 겹침.
+2. 까닭 — GIS 를 모르는 사람용으로 만든 지도 도구 · 파일 끌어다 놓기로 시작(= B03 업로드) · 지도 + 표 + 오른쪽 속성이 한 화면(= B05 · B06 · D · E) · 인쇄 판(= B07 도각 · 출력) · 메뉴 깊이 2 단 · 단축키 `?` 한 장.
+3. **2순위 = Figma**(파일 브라우저 + 편집 화면) — Felt 에 없는 「단계」를 Figma 의 **쪽(Pages) 목록 = 단계 목록** 꼴로 메움 · 왼쪽(쪽 · 레이어) · 가운데 캔버스 · 오른쪽 속성 · 아래 떠 있는 도구줄 = B07 CAD 화면의 본보기.
+4. 표 화면(B08 수량 · B09 원가 · 받은 예정노선 · 팀원)은 **Airtable** 꼴(위 표 탭 · 왼쪽 저장된 보기 · 줄 펼치면 오른쪽 · 가운데 기록 카드) · 산림청 공무원 화면(D)의 쉬운 3D 산지 보기는 **Google Earth 웹** 꼴을 덧댐.
+5. 정리 = **「Felt 셸 한 벌 + Figma 쪽 목록으로 단계 + Airtable 표 화면」** · 상표 · 색 · 아이콘 · 그림은 베끼지 않고 배치 · 흐름만 · [저장] 단추는 우리 규칙대로 남김(Felt 는 자동저장).
+
+## ② 후보 프로그램 4 개
+
+### A. Felt — 지도 작업 SaaS (1순위)
+
+- 한 줄 소개 — 「GIS 를 몰라도 쓰는 지도」 · 파일을 올리면 지도가 되고 스타일 · 분석 · 대시보드 · 인쇄 판 · 공유까지 브라우저 하나에서.
+- 공개 주소(모두 열어 200 확인):
+  - 제품 https://felt.com/
+  - 화면 둘러보기 https://help.felt.com/getting-started/tour-the-interface (둘러보기 영상 포함 · 문서 안 mp4)
+  - 첫 지도 만들기(4 단계) https://help.felt.com/getting-started/create-your-first-map
+  - 지도 · 프로젝트 정리 https://help.felt.com/maps/organize-maps
+  - 인쇄 판 https://help.felt.com/export-and-print/print-layouts
+  - 단축키 https://help.felt.com/getting-started/keyboard-shortcuts
+  - 작업공간 설정 https://help.felt.com/administration/workspaces
+- 전체 흐름:
+  1. 첫 화면 — 작업공간 홈: 왼쪽 「지도(최근 · 검색 · 초안 · 프로젝트 목록) / 데이터(최근 · 공용 라이브러리)」 · 오른쪽 최근 지도 썸네일 격자 · 오른쪽 위 빨강 [New map] 하나.
+  2. 프로젝트 — 왼쪽 「Maps」 옆 + = 새 지도 · 폴더+ = 새 프로젝트(이름 · 공개 범위 두 칸만) · 새 지도는 「초안」에 놓였다가 프로젝트로 옮김.
+  3. 작업 — 지도 화면 다섯 칸: 위 도구줄(왼쪽 메뉴 · 경로 「프로젝트 > 지도」 · 가운데 도구 · 오른쪽 표 · 검색 · 댓글 · AI · [Share] · [Done]) · 왼쪽 범례(Legend / List 탭) · 오른쪽 상세 칸(Style · Filter · Components · Data 탭) · 아래 표 · 가운데 지도.
+  4. 단계 · 「다음에 뭘」 — 단계 막대는 없음 · 대신 「보기 모드 ↔ 편집 모드」(Shift+E) · 빈 지도에 「끌어다 놓기」 안내 · 도움말 「첫 지도 4 단계(만들기 → 데이터 → 꾸미기 → 공유)」 · AI 도우미에 「다음엔 뭘 하나」 물음.
+  5. 결과 · 설정 — 메뉴 「File > Print」(Ctrl+P) → 인쇄 판 편집기(왼쪽 쪽 썸네일 · 가운데 쪽 · 오른쪽 쪽 크기 · 형식 · DPI · 아래 [Export]) · [Share](이메일 · 링크 · 권한 셋) · 데이터 내보내기 · 작업공간 설정(Members · Usage · Billing · Developers · Workspace 탭 · 왼쪽 탐색은 홈과 같음).
+- 쓰기 쉬운 점 — 화면이 둘(홈 · 지도)뿐 · 지도 화면 다섯 칸 자리가 늘 같음 · 고르면 오른쪽 칸이 열리고 Esc 로 닫힘 · 표(T) · 범례(1) · 목록(2) · 단축키(?) · 명령 찾기(Ctrl+K) · 인터페이스 숨김(Ctrl+.) · 메뉴 깊이 2 단 · 주 단추는 화면마다 하나만 색.
+- 우리와 안 맞는 점 — 단계 흐름(B03→B09)이 없음 · 자동저장(우리는 [저장] · [확정] · [초기화]) · 종단 · 횡단 · CAD 같은 「지도 아닌 그림」 칸이 없음 · 지도 엔진(MapLibre) 대신 카카오 · VWorld · 영어 UI.
+- 그림:
+  - `Felt_01_workspace_home.jpg` 첫 화면 · 최근 지도 격자
+  - `Felt_02_map_parts.jpg` 지도 화면 다섯 칸(도구줄 · 범례 · 상세 · 표 · 지도)
+  - `Felt_03_detail_panel.jpg` 레이어 고르면 오른쪽 상세 칸
+  - `Felt_04_table.jpg` 아래 표 열기
+  - `Felt_05_print_layout.jpg` 인쇄 판 편집기
+  - `Felt_06_share.jpg` 공유 칸 · `Felt_07_workspace_settings.jpg` 작업공간 설정
+
+### B. Figma — 디자인 협업 (2순위)
+
+- 한 줄 소개 — 비디자이너(기획 · 개발)도 매일 쓰는 협업 편집기 · 파일 브라우저 → 편집 화면 두 칸 구조의 교과서.
+- 공개 주소(열어 확인):
+  - 파일 브라우저 안내 https://help.figma.com/hc/en-us/articles/14381406380183
+  - 파일 브라우저 둘러보기(영상 포함) https://help.figma.com/hc/en-us/articles/30926159906967
+  - 편집 화면 둘러보기 https://help.figma.com/hc/en-us/articles/15297425105303
+  - UI3 개편 글 https://www.figma.com/blog/making-the-move-to-ui3-a-guide-to-figmas-next-chapter/
+- 전체 흐름:
+  1. 첫 화면 — 파일 브라우저: 왼쪽 계정 · 검색 · 최근 · 팀(초안 · 프로젝트 · 둘러보기) · 오른쪽 최근 파일(썸네일 / 목록 전환) · [+ 새로 만들기].
+  2. 프로젝트 — 팀 > 프로젝트 > 파일 세 층 · 초안에서 시작해 프로젝트로 옮김.
+  3. 작업 — 편집 화면 다섯 자리(A 얇은 레일 · B 왼쪽 쪽 · 레이어 · C 캔버스 · D 오른쪽 속성 · E 아래 떠 있는 도구줄).
+  4. 단계 · 「다음에 뭘」 — 왼쪽 위 **쪽 목록을 단계(M1 · M2 · M3 + 상태 이모지)로 쓰는 공식 권장** · 빈 파일엔 시작 틀 · Ctrl+/ 빠른 실행(기능 이름으로 찾기) · Ctrl+\ 패널 숨김.
+  5. 결과 · 설정 — 오른쪽 속성 칸 맨 아래 「Export」 · 오른쪽 위 [Share] · 계정 설정은 파일 브라우저 쪽 별도 창.
+- 쓰기 쉬운 점 — 왼쪽 = 「무엇이 있나」 · 오른쪽 = 「고른 것의 값」 · 아래 = 「도구」로 역할이 갈림 · 고른 것에 따라 오른쪽 칸만 바뀜 · 쪽 목록으로 큰 흐름이 늘 보임.
+- 우리와 안 맞는 점 — 디자인 전용 낱말 · 지도 · 표 화면 없음 · 매우 촘촘한 작은 글(공무원 사용자엔 과함) · 무한 캔버스(우리는 도면 한 장 단위).
+- 그림:
+  - `Figma_01_file_browser.jpg` 파일 브라우저 왼쪽(계정 · 검색 · 최근 · 팀)
+  - `Figma_02_file_browser_team.jpg` 팀 · 초안 · 즐겨찾기
+  - `Figma_03_ui3_editor.jpg` 편집 화면 실물(쪽 · 레이어 · 캔버스 · 속성 · 아래 도구줄)
+  - `Figma_05_editor_regions.jpg` 다섯 자리 뼈대 · `Figma_06_left_sidebar.jpg` 왼쪽 칸
+  - `Figma_07_pages_by_milestone.jpg` 쪽 목록을 단계로 쓰는 예
+  - `Figma_04_account_settings.jpg` 계정 설정
+
+### C. Airtable — 표 · 데이터 작업 SaaS
+
+- 한 줄 소개 — 엑셀을 쓰던 사람이 바로 쓰는 표 데이터베이스 · 같은 표를 격자 · 갤러리 · 달력 · 칸반으로 봄.
+- 공개 주소(열어 확인):
+  - 공개 베이스 실물(로그인 없음) https://airtable.com/appwN4xi4EHvYcucp/shrX9pRC4srAbKdx0
+  - 템플릿 https://www.airtable.com/templates
+  - 제품(베이스 위 막대 Data · Automations · Interfaces · Forms 그림) https://www.airtable.com/platform
+  - 보기 안내 https://support.airtable.com/docs/how-to-create-a-view
+- 전체 흐름:
+  1. 첫 화면 — 홈(작업공간 · 최근 베이스 · [+ 만들기] · 템플릿에서 시작).
+  2. 프로젝트 — 「베이스」 하나 = 프로젝트 하나 · 템플릿 고르면 표 · 보기까지 차려진 채 시작.
+  3. 작업 — 위 표 탭(Assets · Vendors · Employees) · 왼쪽 저장된 보기 목록 · 표 위 숨김 · 필터 · 묶기 · 정렬 막대 · 줄 펼치면 가운데 기록 카드.
+  4. 단계 · 「다음에 뭘」 — 베이스 맨 위 큰 탭 「Data → Automations → Interfaces → Forms」(일의 갈래를 위 탭으로) · 빈 표엔 「가져오기」 안내 · Ctrl+K 어디서나 찾기.
+  5. 결과 · 설정 — 위 [Share] · CSV 내보내기 · 인터페이스(보고용 화면) 따로 만듦 · 작업공간 설정.
+- 쓰기 쉬운 점 — 표 탭 · 보기 · 필터가 늘 같은 자리 · 줄 → 카드 펼침이 쉬움 · 집계 줄(합계)이 맨 아래.
+- 우리와 안 맞는 점 — 지도 · 3D · 도면 없음 · 표가 주인공(우리는 지도가 주인공) · 계산식 표(원가 일위대가)의 깊은 계층은 약함.
+- 그림:
+  - `Airtable_03_shared_base.jpg` 공개 베이스 실물(위 표 탭 · 왼쪽 보기 · 표)
+  - `Airtable_04_record_expand.jpg` 줄 펼침 카드
+  - `Airtable_05_gallery_view.jpg` 같은 표를 갤러리로
+  - `Airtable_02_platform.jpg` 베이스 위 큰 탭(Data · Automations · Interfaces · Forms)
+  - `Airtable_01_templates.jpg` 템플릿에서 시작
+
+### D. Google Earth 웹 — 3D 지도 프로젝트
+
+- 한 줄 소개 — 누구나 아는 3D 지구 · 한국어 화면 · 「지도 프로젝트」 목록 → 3D 편집 화면.
+- 공개 주소(열어 확인 · 로그인 없이 3D 화면까지 열림):
+  - 실물 https://earth.google.com/web/
+  - 프로젝트 · 이야기 만들기 안내 https://www.google.com/earth/outreach/learn/create-a-map-or-story-in-google-earth-web/
+- 전체 흐름:
+  1. 첫 화면 — 3D 지구 + 위 메뉴(파일 · 수정 · 보기 · 추가 · 도구 · 도움말) + 도구줄(검색 · 실행취소 · 장소표시 · 선 · 레이어 · 재기).
+  2. 프로젝트 — 로고 누르면 「지도 프로젝트」 홈: 왼쪽 [+ 신규](새 프로젝트 Ctrl+J · 파일 가져오기 KML · GeoJSON · SHP.zip · CSV) · 오른쪽 표(이름 · 소유자 · 용량 · 수정 날짜) · 빈 상태 그림 + 「아직 프로젝트 없음 · 만들기」.
+  3. 작업 — 왼쪽 「지도 콘텐츠」 목록 · 가운데 3D · 위 [지도 프로젝트에 추가] [다운로드] [다른 이름으로 저장] · 「저장되지 않은 변경사항 있음」 표시.
+  4. 단계 · 「다음에 뭘」 — 처음 쓰는 기능마다 작은 말풍선 안내(「여기서 모든 프로젝트를 찾고 관리」) · 빈 목록마다 그림 + 할 일 한 줄 · 발표 보기(▶)로 지점을 차례로 넘김.
+  5. 결과 · 설정 — 다운로드 · 공유 · 발표 · 오른쪽 위 톱니 설정.
+- 쓰기 쉬운 점 — 한국어 · 산지 3D 가 기본 · 「저장 안 됨」 표시가 [저장] 단추 방식과 맞음 · 빈 상태 · 처음 안내가 친절.
+- 우리와 안 맞는 점 — 설계 도구가 아님(선 · 점 정도) · 표 · 도면 없음 · Flutter 캔버스라 웹 관례와 조금 다름.
+- 그림:
+  - `GEarth_01_web.jpg` 강원 산지 3D 첫 화면
+  - `GEarth_02_projects.jpg` 지도 프로젝트 홈 · 빈 상태
+  - `GEarth_03_new_menu.jpg` [+ 신규] 메뉴(새 프로젝트 · 파일 가져오기)
+  - `GEarth_04_editor.jpg` 편집 화면(왼쪽 콘텐츠 · 저장 안 됨 표시 · 다운로드 · 다른 이름 저장)
+  - `GEarth_02_outreach.jpg` 공식 안내 페이지
+
+본 것 · 뺀 것 — Canva(첫 화면 쉬움은 좋으나 편집 화면 공개 그림 없음 · 마케팅 꼴) · Miro · Notion · Linear(지도 · 도면 성격과 멂 · 366-B 에서 셸 요소로만 다룸) · Typeform 위 탭(Create · Share · Results — 공식 문서에서 현재 배치 확인 못 함).
+
+## ③ 1순위 본보기(Felt)에 우리 기능을 옮긴 지도
+
+공통 셸 = Felt 지도 화면 그대로: **위 도구줄**(왼쪽 Aislo 메뉴 · 경로 「프로젝트 > 단계」 · 가운데 그 단계 도구 · 오른쪽 표 · 검색 · 도움말 · [저장] · [다음 단계 ▶]) · **왼쪽 칸**(위 = 단계 목록(Figma 쪽 목록 꼴 · 상태 점) · 아래 = 그 단계의 범례 · 목록) · **오른쪽 상세 칸**(고른 것의 값 · 탭) · **아래 칸**(표 또는 종단 · 횡단 그림) · **가운데 본문**(지도 · 3D · 도면).
+
+| 우리 화면 | 본보기의 어느 화면 · 어떤 꼴로 | 메모 |
+| --- | --- | --- |
+| B01 대시보드 | Felt 작업공간 홈 — 왼쪽 「프로젝트(최근 · 내 것 · 임시 보관 · 묶음별) / 받은 예정노선 / 자료(공용 라이브러리)」 · 오른쪽 최근 프로젝트 썸네일 격자(지도 + 노선 미리보기 · 마지막 단계) · 오른쪽 위 [새 프로젝트] 하나 | 격자 ↔ 표 전환(Figma) · 팀원 · 회사 · 시스템은 홈에서 빼고 설정으로 |
+| B02 등록 | Felt 「새 프로젝트」 작은 창(이름 · 공개 범위) + Google Earth [+ 신규] 메뉴(빈 프로젝트 · 파일로 시작) | 묶음 넷(임도 · 예정노선 · 안정성 · 사방) 고르기 = 첫 칸 · 칸은 최소 · 나머지는 단계 안에서 |
+| B03 업로드 | Felt 「Upload Anything」 — 빈 지도에 끌어다 놓기 · 왼쪽 범례에 올라간 파일이 레이어로 쌓임 | 빈 상태 = 큰 놓기 칸 + 받는 형식 한 줄(Google Earth 꼴) |
+| B04 전처리 | Felt 레이어 상세 칸 — 레이어 고르면 오른쪽에 설정 · 진행 · 결과 · 아래 표 | 오래 걸리는 처리는 레이어 줄에 진행 점 |
+| B05 노선 · 종단 | Felt 지도 화면 + 아래 칸 = 종단(표 자리에 종단 그림 · 탭으로 표 · 유토곡선) · 오른쪽 상세 = 고른 구조물 · 측점 값 · 위 도구줄 가운데 = 노선 편집 도구 | 지금 왼쪽 접이 카드(구조물 · 설정 · 추천)는 오른쪽 상세 탭 또는 도구줄로 |
+| B06 횡단 | 같은 셸 · 가운데를 횡단 그림으로 바꾸고 왼쪽 목록 = 측점 목록(Figma 레이어 꼴) · 아래 = 평면 작은 지도 | 측점 고르면 지도 · 횡단 함께 이동 |
+| B07 CAD 도면 | Felt 인쇄 판 편집기 + Figma 편집 화면 — 왼쪽 도면 쪽 썸네일(표지 · 평면 · 종단 · 횡단 · 구조물) · 가운데 도면 · 오른쪽 쪽 설정 · 고른 객체 속성 · 위(또는 아래 떠 있는) 도구줄 · 오른쪽 아래 [내보내기] | 지금 리본 여섯 탭은 도구줄 + 오른쪽 속성으로 줄임 |
+| B08 수량 | Airtable 베이스 — 위 표 탭(토공 · 구조물 · 배수 …) · 왼쪽 보기 · 맨 아래 합계 줄 · 줄 펼침 카드 = 산출 근거 | 셸은 같고 가운데가 표 |
+| B09 원가 | Airtable 같은 꼴 + 오른쪽 상세 칸 = 고른 공종의 일위대가 | 내보내기(xlsx)는 위 오른쪽 |
+| D 예정노선 | Google Earth 꼴 지도 프로젝트 홈(연도별 지점 표) → Felt 지도 화면(3D 기본 · 보기 모드 시작) · 확정 · 업체 지정 = 오른쪽 상세 칸 단추 | 공무원 = 「보기 모드」로 열고 [편집] 한 번 · 글자 크게 |
+| E 안정성평가 | Felt 지도 화면(광역 위험 = 레이어 · 범례) · 단면 해석 = 아래 칸 그림 · 결과 요약 = Felt 대시보드 꼴(범례 안 숫자 · 막대) · 보고서 = 인쇄 판 | 2D · 3D 전환은 도구줄 오른쪽 |
+| 설정 | Felt 작업공간 설정 — 홈과 같은 왼쪽 탐색 + 위 탭(팀원 · 회사 · 사용 · 시스템) + 「제목 왼쪽 · 칸 오른쪽」 폼 | 개인(내 정보 · 보안)은 왼쪽 아래 계정 메뉴 |
+| 사용자 가이드 | Felt `?`(단축키 한 장) · 오른쪽 아래 둥근 [?] · Figma Ctrl+/ 빠른 실행 · Google Earth 처음 말풍선 | 지금 [?] 단계 가이드는 단계 목록 옆 「이 단계에서 할 일」 체크 3~5 줄로 |
+
+## ④ 따라 만들 때 주의
+
+- 베끼지 않음 — 이름 · 로고 · 빨강(Felt) · 보라(Figma) 강조색 · 아이콘 · 빈 상태 그림 · 화면 그림 · 문구. 가져오는 것은 **자리 배치 · 흐름 · 단축키 관례**만(배치 · 흐름은 저작권 대상 아님 · 전체 꼴을 상표처럼 똑같이 만들면 혼동 위험 → 우리 색 · 글꼴 · 아이콘으로).
+- 우리 규칙 지킴 — 자동저장 금지 → Felt 의 「Done」 자리에 [저장] · Google Earth 꼴 「저장 안 된 변경 있음」 표시 · [초기화]는 메뉴 안으로.
+- 라이브러리(BSD · MIT · Apache 만) — 셸 · 칸 나눔 · 오른쪽 칸 · 명령 찾기(Ctrl+K)는 라이브러리 없이 TS + CSS grid 로 충분 · 아이콘 Lucide(ISC — MIT 와 같은 허용형) 또는 Tabler(MIT) 한 묶음 · Material Symbols(Apache 2.0)도 가능 · 색 Radix Colors(MIT) · 표가 무거우면 Tabulator(MIT). Felt · Figma · Airtable · Google Earth 는 모두 독점 · 코드 · 그림 가져올 것 없음.
+- 지도 · 3D 엔진은 지금 그대로(카카오 · VWorld · three.js · 자체 WebGL) — 셸만 갈아 끼움.
+
+## ⑤ 정할 거리
+
+1. 본보기 확정 — 「Felt 셸 + Figma 단계 목록 + Airtable 표」 묶음으로 갈지 · Felt 하나만 갈지.
+2. 단계 자리 — 왼쪽 칸 위 단계 목록(Figma 꼴 · 추천) vs 위 도구줄 경로 「프로젝트 > 노선설계 ▾」 내림 vs 둘 다.
+3. 보기 모드 · 편집 모드 나눔 — 공무원 · 검토자는 보기로 열고 [편집] 한 번(Felt 꼴) — 쓸지.
+4. 대시보드 첫 화면 — 썸네일 격자(Felt · Figma) vs 표(Google Earth) 기본값.
+5. 글꼴 — Pretendard(OFL · 글꼴 전용 허용형)를 쓸지 · 「BSD · MIT · Apache 만」 규칙에 글꼴 예외를 둘지.

docs/raw/요구_1025/_조사_367-C_본보기_지도3D.md

@@ -0,0 +1,167 @@
+# 조사 367-C — 통째로 따라 할 본보기 프로그램 (지도 · 3D 중심 설계 · 분석)
+
+sub4 · 2026-10-26 · 조사만(코드 · 저장소 손대지 않음). 앞 조사(366-A/B/C · 요소 · 패턴 표)와 겹치는 표는 다시 만들지 않음.
+그림 = `docs/raw/요구_1025/ref_367/C_` 34 장(헤드리스 Edge · 공개 도움말 그림 · 공식 영상 정지 화면 · 로그인 없는 공개 예제 앱).
+
+## ① 결론 다섯 줄
+
+1. **1순위 = Autodesk InfraWorks(도로 개념설계)** — 「첫 화면 모델 목록 → 지도에서 구역 지정 → 3D 작업 화면 · 위 단계 탭 넷 · 오른쪽 패널 한 자리 · 아래 종단 보기 · 색 분석 · 대안 고르는 칸」이 우리 B 흐름(지형 → 노선 · 종단 → 분석)과 거의 같은 뼈대.
+2. InfraWorks 에 없는 수량 · 원가는 **같은 갈래 도로 개념설계 프로그램 OpenRoads ConceptStation 의 「아래 서랍 탭(종단 · 횡단 · 비용) + 상세 수량 · 비용 보고서 + 단가 설정 표」** 꼴로 채움 — 1순위의 보충.
+3. **2순위 = Autodesk Forma(웹 대지 설계 · 분석)** — 홈 → 프로젝트 → 작업의 단순한 3단 · 떠 있는 패널(왼쪽 안 · 층 / 위 가운데 그리기 도구 / 오른쪽 분석) · 3D 위 색 + 아래 색 띠 범례 · 최대 6안 나란히 비교. 웹 SaaS 로서 겉모습은 가장 깔끔하나 차례 있는 단계 · 종단 · 횡단 · 표 화면이 없음.
+4. 까닭 — 1순위는 「도로를 지형 위에 놓고 종단과 함께 고치는」 일 자체가 같아 화면 대부분이 1:1 로 옮겨짐. 겉 꼴(어두운 리본 · 촘촘한 아이콘)만 버리고 366 제안의 밝은 회색 틀 · 강조 한 색 · 글자 붙은 단추로 입힘. 2순위는 겉 꼴이 좋으나 우리 단계 · 표 화면을 새로 지어야 할 몫이 큼.
+5. 보조 본보기 — DroneDeploy(첫 화면 지도 썸네일 카드 · 업로드 → 처리 알림 · 히스토그램 범례) · ArcGIS Urban(지도 핀으로 열기 · 시나리오 드롭다운 · 오른쪽 「색 띠 + 표 + Δ」 · 보기 전용 공유 = 산림청 검토) · Giraffe(레이아웃 탭 · 지도 아래 데이터 표 · Paper 도면 시트) · TestFit(아래 집계 띠 · 절성토 색 지도). 통째 본보기는 아님.
+
+## ② 후보 프로그램
+
+### A. Autodesk InfraWorks — 1순위
+
+- 한 줄 소개 — 지도 · 지형 위에서 도로 · 교량 · 배수를 개념설계하는 3D 프로그램(데스크탑 + 클라우드). 시작 화면 → 단계 탭 리본 → 3D + 오른쪽 패널 + 아래 종단.
+- 주소(모두 200 확인)
+  - 시작 화면 https://help.autodesk.com/cloudhelp/ENU/InfraWorks-Basics/files/GUID-01AABC51-386E-4E5B-A901-C317CBC050E3.htm
+  - 화면 구성 https://help.autodesk.com/cloudhelp/ENU/InfraWorks-Basics/files/GUID-390DEDE6-C26A-45F4-8B16-23CE3739F9ED.htm
+  - 위 도구막대 https://help.autodesk.com/cloudhelp/ENU/InfraWorks-Basics/files/GUID-248EB772-88DB-4915-BA3B-F5A94461E660.htm
+  - 색 분석(Themes) https://help.autodesk.com/cloudhelp/ENU/InfraWorks-Basics/files/GUID-0B5F05D1-5596-4FA7-A08A-AA3F186E8E43.htm
+  - 대안 관리(Proposals) https://help.autodesk.com/cloudhelp/ENU/InfraWorks-Basics/files/GUID-077918A7-3C10-4194-B47C-EB854771AE62.htm
+  - 종단 보기 https://help.autodesk.com/cloudhelp/ENU/InfraWorks-RoadsandHighways/files/GUID-16C4D630-A4C4-4BC6-9365-DDEC802FE4F9.htm
+  - (옛 `help.autodesk.com/view/INFWKS/ENU/` = 404 · autodesk.com 제품 페이지 = 403 봇 차단)
+- 전체 흐름
+  1. 첫 화면 — 왼쪽 [열기] [새로] [Model Builder] + 거르기(최근 / 클라우드) · 오른쪽 모델 표(이름 · 종류 · 마지막 연 때 · 줄 끝 「…」) · 표/격자 전환.
+  2. 프로젝트 — Model Builder: 지도에서 구역 지정 → 지형 · 항공사진 · 도로 · 건물 자동 수집 → 모델. 또는 빈 모델 + 오른쪽 Data Sources 패널로 자료 가져오기.
+  3. 작업 — 위 리본 · 가운데 3D · 오른쪽 여닫는 패널 한 자리(자료 · 속성 · 색 분석 · 대안이 번갈아) · 아래 종단 보기(3D 와 측점 따라가기).
+  4. 단계 — 위 탭 넷(관리 / 만들기 / 분석 / 발표·공유) = 일의 차례. 대안은 위 「master」 고르는 칸.
+  5. 결과 · 설정 — 경사 · 표고 · 방향 색 분석(규칙별 색 띠) · 절성토 수량 CSV · 발표 탭 · 오른쪽 위 톱니(단위 · 언어 · 품질) · 왼쪽 위 「I」 = 첫 화면.
+- 쓰기 쉬운 점 — 첫 화면이 단추 셋 + 표 하나 · 단계 탭이 곧 차례 · 3D 와 종단이 한 화면에서 같이 움직임 · 오른쪽 패널 한 자리 돌려 써 캔버스 넓음 · 선택한 도로의 속성(측점 범위 · 표고 범위 · 경사 범위 · 절성토 게이지)이 바로 보임.
+- 우리와 안 맞는 점 — 원가 · 견적 없음(수량까지) · 횡단 · CAD 도면은 Civil 3D 로 넘김 · 리본 아이콘이 촘촘(비전문가 어려움) · 도시 · 고속도로 중심 · 데스크탑 + 동기화 구조.
+- 그림
+  - `C7_3_infraworks_home.jpg` — 시작 화면(왼쪽 단추 셋 · 최근 모델 표 · 표/격자)
+  - `C7_3_infraworks_ui.jpg` — 작업 화면 세 구역(위 리본 · 지도 · 오른쪽 자료 패널)
+  - `C7_3_infraworks_toolbar.jpg` — 위 도구막대 번호 풀이(단계 탭 · 묶음 · 보기 도구 · 대안 칸 · 보기 모드)
+  - `C7_3_infraworks_profile.jpg` — 3D 도로 + 오른쪽 속성(측점 · 표고 · 경사 범위 · 절성토 게이지) + 아래 종단(수직 과장 · 측점 따라가기)
+
+### A'. Bentley OpenRoads ConceptStation — 1순위 보충(수량 · 원가)
+
+- 한 줄 소개 — 지역을 골라 지형을 받고 도로 · 교량을 그리면 바로 개산 비용이 붙는 도로 개념설계 프로그램(데스크탑). 대안별 비용 비교가 핵심.
+- 주소(200 확인)
+  - 제품 https://www.bentley.com/software/openroads-conceptstation/
+  - 도움말 https://docs.bentley.com/LiveContent/web/OpenRoads%20ConceptStation%20Help-v16/en/ (아래 서랍 · 비용 탭 · 상세 보고서 · 종단 · 횡단 쪽)
+  - 영상 https://www.youtube.com/watch?v=i7CHnG66P4Y (비용 추정) · https://www.youtube.com/watch?v=ufvUsZrZ370 (대안)
+- 전체 흐름
+  1. 첫 화면 — 전체 화면 파일 메뉴(새로 · 열기 · 가져오기 · 내보내기 · 설정).
+  2. 프로젝트 — 지도에서 구역 사각형 → 이름 · 좌표계 → 자료 자동 수집 · 추가 가져오기.
+  3. 작업 — 화면 전체 캔버스 · 왼쪽 세로 아이콘 줄 · 아래 탭 서랍(저장 뷰 · 범주 · 비용 · 종단 · 횡단).
+  4. 단계 — 위 대안 칸(Scenario1…) · 도로 종류를 그림 격자에서 골라 그림 → 서랍에서 종단 · 횡단 고침.
+  5. 결과 · 설정 — 서랍 비용 탭(합계 + 공종별) → 상세 수량 · 비용 보고서(코드 · 항목 · 수량 · 단위 · 단가 · 금액) → 엑셀 · 단가 설정 표 직접 고침.
+- 쓰기 쉬운 점 — 종단 · 횡단 · 비용을 아래 서랍 탭 하나에 모아 지도를 안 가림 · 그리는 즉시 비용 · 단가 표가 우리 원가 화면과 같은 꼴.
+- 우리와 안 맞는 점 — 프로젝트 목록이 파일 대화창 수준 · 단계 표시 없음 · 색 분석 없음 · 공개 그림이 오래되고(2016~2020) 흐림.
+- 그림
+  - `C7_3_conceptstation_new.jpg` — 새 프로젝트(지도 구역 사각형 + 이름 · 좌표계)
+  - `C7_3_conceptstation_workspace_roadclass.jpg` — 작업 화면(왼쪽 아이콘 줄 · 아래 서랍 탭 · 도로 종류 그림 고르기)
+  - `C7_3_conceptstation_plan_profile.jpg` — 위 평면 + 아래 서랍 종단(흐림)
+  - `C7_3_conceptstation_report.jpg` — 상세 수량 · 비용 보고서 표
+  - `C7_3_conceptstation_cost_config.jpg` — 단가 설정 표
+  - `C7_3_conceptstation_import.jpg` · `C7_3_conceptstation_product.jpg` — 가져오기 · 제품 첫 화면
+
+### B. Autodesk Forma(옛 Spacemaker) — 2순위
+
+- 한 줄 소개 — 웹 대지 설계 · 분석. 주소로 땅을 고르면 주변 건물 · 지형이 자동으로 깔리고, 3D 위에 배치하며 일조 · 바람 · 소음 분석을 색 지도로 봄.
+- 주소(200 확인)
+  - 도움말 첫 화면 https://help.autodesk.com/view/SPCMKR/ENU/ (지시서의 `view/FORMA` = 404)
+  - 화면 구역 표 https://help.autodesk.com/cloudhelp/ENU/Forma-SD-Get-Started/files/Getting_Started_SD.html
+  - 작업 화면 공식 그림 https://help.autodesk.com/cloudhelp/ENU/Forma-SD-Get-Started/images/sd_interface.png
+  - 도구 전체 설명 https://blogs.autodesk.com/forma/2026/08/28/forma-site-design-tools-overview/
+  - 첫 땅 만들기 https://blogs.autodesk.com/forma/2025/11/20/how-to-create-your-first-site-in-forma-site-design/
+  - 영상 https://www.youtube.com/watch?v=DcKY-ekEyiY · https://www.youtube.com/watch?v=1ovhhMWpohw
+- 전체 흐름
+  1. 첫 화면 — 왼쪽 허브 · 프로젝트 나무 · 가운데 「무엇을 만들까」 카드 셋 · 오른쪽 위 [새로 만들기].
+  2. 프로젝트 — 만들기 창(이름 · 공개 범위) → 개요(만들기 카드 + 「안에 있는 것」 표 + 구성원 초대) → 지구본에서 주소 검색 · 범위 네모 → 주변 자료 주문.
+  3. 작업 — 왼쪽 아이콘 줄 + 설계안 카드 · 층 목록 · 위 가운데 떠 있는 그리기 도구 한 줄 · 오른쪽 분석 아이콘 격자 + 지표 표 · 오른쪽 아래 보기 막대(2D/3D · 카메라 · 내보내기).
+  4. 단계 — 차례 없음. 위 모드 셋(설계 / 비교 / 보드) + 설계안 복제 · 전환.
+  5. 결과 · 설정 — 3D 위 색 + 아래 색 띠 범례(구간 편집) · 빠른 분석은 즉시 · 상세 분석은 [실행] + 이력 · 비교 모드 2~6칸 · 보드 → PDF · 왼쪽 아래 톱니.
+- 쓰기 쉬운 점 — 역할이 또렷한 네 자리(왼 = 안 · 층, 가운데 = 3D, 오른 = 분석 · 성질, 위 가운데 = 도구) · 떠 있는 패널이라 3D 넓음 · 분석 결과 꼴이 늘 같음(색 + 색 띠 + 구간 표) · 빠른 분석 / 무거운 분석 [실행] 구분 = 우리 「조작 중 즉시 · 무거운 계산 서버」와 같음 · 안 나란히 비교.
+- 우리와 안 맞는 점 — 차례 있는 단계 없음 · 종단 · 횡단 · CAD · 수량 · 원가 표 화면 없음 · 도시 대지(450 m 네모) 중심 · 파일 업로드 · 전처리 진행 화면 없음 · 결과물이 발표 보드 중심.
+- 그림
+  - `C7_1_forma_home.jpg` — 홈(허브 · 프로젝트 나무 · 만들기 카드)
+  - `C7_1_forma_project.jpg` — 프로젝트 개요(만들기 카드 + 안에 있는 것 표 + 초대)
+  - `C7_1_forma_newsite.jpg` — 지도 위 범위 네모 고르기
+  - `C7_1_forma_interface.jpg` — 작업 화면(왼 설계안 · 층 · 위 도구 · 오른 분석 · 지표)
+  - `C7_1_forma_analysis_panel.jpg` — 소음 분석 색 지도 + 색 띠 범례 + 오른쪽 실행 칸
+  - `C7_1_forma_compare.jpg` — 비교 모드 두 칸
+
+### C. Giraffe (+ TestFit) — 부분 본보기
+
+- 한 줄 소개 — 지도 위에 건물 덩어리를 그리면 면적 · 원가 · 수익이 바로 셈되는 웹 부동산 타당성 도구 / TestFit = 대지 자동 배치 + 수치 비교.
+- 주소(200 확인) — https://www.giraffe.build/ · 화면 배치 https://intercom.help/giraffe-knowledgebase-v6/en/articles/17012259-user-interface-overview · 첫 화면 …/16764757-home-overview · 패널 …/17116490-panels · 분석 …/11818609-analytics-overview · 도면 시트 …/14902992-paper-overview · 영상 https://www.youtube.com/watch?v=tV_HMbXjX78 · TestFit https://www.testfit.io/site-solver
+- 전체 흐름 — 첫 화면(왼쪽 세로 메뉴 · 템플릿 카드 줄 · 프로젝트 표/카드) → 템플릿 · 빈 프로젝트 → 지도 중심 패널 화면(왼 속성 · 층 / 오른 분석 표 / 아래 상태 줄 · 떠 있는 그리기 도구) → 위 오른쪽 「레이아웃 탭」(설계 · 지도 · 흐름)으로 패널 배치 통째 전환 → 분석 표 · 지도 아래 데이터 표 · Paper 도면 시트 → PDF · CSV · DXF.
+- 쓰기 쉬운 점 — 레이아웃 탭 = 단계마다 정해진 배치 · 지도 아래 데이터 표(표에서 고르면 지도도 선택) · Paper 시트(위 단추 줄 · 가운데 시트) · TestFit 아래 집계 띠 한 줄 · 절성토 색 지도.
+- 우리와 안 맞는 점 — 차례 단계 없음 · 노선 · 종단 · 횡단 없음 · 결과가 숫자 표뿐 · 자동 저장(우리 [저장] 규칙과 반대) · 패널 자유 배치는 비전문가에 어지러움.
+- 그림 — `C7_2_giraffe_home.jpg`(첫 화면) · `C7_2_giraffe_workspace.jpg`(작업 화면) · `C7_2_giraffe_analytics.jpg`(분석 표) · `C7_2_giraffe_datatable.jpg`(지도 아래 표) · `C7_2_giraffe_paper.jpg`(도면 시트) · `C7_2t_testfit_options.jpg`(아래 집계 띠) · `C7_2t_testfit_cutfill.jpg`(절성토 색 지도)
+
+### D. DroneDeploy · ArcGIS Urban — 부분 본보기
+
+- 한 줄 소개 — DroneDeploy = 드론 사진 업로드 → 클라우드 처리 → 웹 지도 · 3D 측정 · 보고서 / ArcGIS Urban = 3D 도시 위 계획 · 사업 · 시나리오 지표 대시보드 · 시민 공개.
+- 주소(200 확인)
+  - DroneDeploy 도움말(웹은 403 봇 차단 · 같은 글 API 로 확인) https://help.dronedeploy.com/hc/en-us/articles/1500004860621 (프로젝트 목록) · …/1500004963802 (만들기 · 업로드 · 탐색) · …/1500004964002 (고도 · 히스토그램) · …/1500004964642 (내보내기) · 영상 https://www.youtube.com/watch?v=NS8WLnoFqyE
+  - ArcGIS Urban 도움말 https://doc.esri.com/en/arcgis-urban/latest/help/help-intro.html · 시나리오 …/help-scenarios.html · 공개 예제 앱(로그인 없음) https://urban.arcgis.com/?id=642003449ecb4c20a26e19d7bc9ccaf1 · 영상 https://www.youtube.com/watch?v=U040cTw4O9g
+- 전체 흐름
+  - DroneDeploy — 프로젝트 카드(항공사진 썸네일 · 마지막 촬영일 · 목록/지도 보기) → 지도에서 위치 찍어 만들기 → 위 탭(비행 / 업로드 / 탐색 / 보고서) → 처리 끝나면 알림 → 왼쪽 층 판 + 오른쪽 세로 도구 띠 · 고도 색 + 히스토그램 범례 · 날짜 비교 밀대 → 왼쪽 아래 내보내기.
+  - Urban — 전체 3D + 왼쪽 위 검색 판(사업 · 계획 · 지표) + 지도 핀 → 열면 위 띠에 시나리오 드롭다운 · 모드 아이콘 → 오른쪽 판이 모드따라 바뀜(정보 · 용도 색 띠 + 면적표 + Δ · 대시보드 막대 · 숫자 칸) → 비교 엑셀 · 공개 공유 · 의견.
+- 쓰기 쉬운 점 — 썸네일 카드로 현장 찾기 · 처리 뒤 알림 · 히스토그램 범례 · 지도 핀으로 열기(산림청 예정노선 여러 개) · 시나리오 드롭다운 · 보기 전용 공유(공무원 검토).
+- 우리와 안 맞는 점 — 둘 다 보기 · 검토 도구(설계 단계 체인 없음) · 아래 판(종단 · 표) 자리 없음 · CAD · 수량 · 원가 없음 · Urban 은 업로드 흐름 없음.
+- 그림 — `C7_4_dronedeploy_newproject.jpg`(프로젝트 카드) · `C7_4_dronedeploy_dashboard.jpg`(목록 시안) · `C7_4_dronedeploy_explore.jpg`(탐색 화면) · `C7_4_dronedeploy_elevation.jpg`(고도 색 + 히스토그램) · `C7_4_dronedeploy_export.jpg`(내보내기) · `C7_4_urban_live_overview.jpg`(첫 화면 3D + 핀) · `C7_4_urban_live_planlist.jpg`(계획 목록) · `C7_4_urban_live_plan.jpg`(시나리오 · 모드 아이콘) · `C7_4_urban_live_zoning.jpg`(색 띠 + 면적표 + Δ) · `C7_4_urban_live_dashboard.jpg`(대시보드 카드)
+
+### 후보 한눈에
+
+| 프로그램 | 웹 | 프로젝트 목록 | 차례 단계 | 노선 · 종단 | 색 분석 | 표 · 원가 | 판정 |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| InfraWorks (+ConceptStation) | ✕(데스크탑) | ○ | ○ 탭 넷 | ○ | ○ | ConceptStation ○ | 1순위 |
+| Forma | ○ | ○ | ✕ 모드 셋 | ✕ | ○ 가장 좋음 | ✕ | 2순위 |
+| Giraffe · TestFit | ○ | ○ | △ 레이아웃 탭 | ✕ | △ | △ 숫자 표 | 부분 |
+| DroneDeploy | ○ | ○ 썸네일 | △ 위 탭 | ✕ | ○ | ✕ | 부분 |
+| ArcGIS Urban | ○ | △ 지도 핀 | ✕ 모드 | ✕ | ○ | △ 대시보드 | 부분 |
+
+## ③ 1순위(InfraWorks 뼈대 + ConceptStation 서랍)에 우리 기능을 옮긴 지도
+
+| 우리 화면 | 본보기의 어느 화면 · 어떤 꼴로 | 메모 |
+| --- | --- | --- |
+| B01 대시보드 | InfraWorks 시작 화면 — 왼쪽 [새 프로젝트] [열기] + 거르기(최근 · 내 것 · 회사 · 받은 예정노선 · 보관) · 오른쪽 프로젝트 표(이름 · 종류 · 진행 단계 · 마지막 연 때 · 줄 끝 「…」) · 표/카드 전환 | 카드 썸네일은 DroneDeploy 꼴(노선 지도 작은 그림) · 회사 · 사용자 관리는 오른쪽 위 톱니 아래로 뗌 |
+| B02 등록 | Model Builder 대화창 — 이름 · 종류 · 지역 + 지도에서 구역 지정 | ConceptStation 새 파일(지도 사각형 + 이름 · 좌표계) 꼴이 더 가까움 · 표제란 값은 접힘 칸 |
+| B03 업로드 | 오른쪽 Data Sources 패널 — 자료 종류별 줄(계획노선 · 라이다) · 상태(올림 · 처리 중 · 끝) | 처리 뒤 알림은 DroneDeploy 꼴 |
+| B04 전처리 | 같은 자료 패널의 「처리」 줄 + 결과는 3D 위 색 분석(표고 · 경사 · 물 흐름)으로 보임 | Themes 색 띠 범례 · 단계 탭 ① 「관리」 자리 |
+| B05 노선 · 종단 | 작업 화면 중심 — 3D/평면 + 선택 노선의 오른쪽 속성(측점 범위 · 표고 범위 · 경사 범위 · 절성토 게이지) + 아래 종단 보기(수직 과장 · 측점 따라가기) | 지금 B05 아래 종단 칸과 거의 같음 · 유토곡선 · 표 · 배수유역은 아래 서랍 탭으로(ConceptStation) · 노선 추천 = 위 대안 칸 |
+| B06 횡단 | ConceptStation 아래 서랍 「횡단」 탭 — 측점 앞뒤 화살표 · 과장 비율 | B05 와 한 페이지 유지 · 서랍 탭 전환으로 이동 · 지금 오른쪽 「횡단」 손잡이 대체 |
+| B07 CAD 도면 | 단계 탭 「발표 · 내보내기」 자리의 전용 시트 화면(Giraffe Paper 꼴: 위 단추 줄 · 가운데 시트 · 시트 목록) | 본보기에 CAD 없음 — 지금 자체 WebGL CAD 유지 · 셸(위 단계 탭 · 오른쪽 패널)만 맞춤 |
+| B08 수량 | ConceptStation 아래 서랍 「비용」 탭(공종별 합계) → 전체 화면 상세 보고서 표(코드 · 항목 · 수량 · 단위) | 지도 줄 ↔ 표 줄 서로 짚기 |
+| B09 원가 | ConceptStation 상세 수량 · 비용 보고서 + 단가 설정 표(범주 · 코드 · 항목 · 단위 · 단가) + [엑셀] | 표형 화면은 왼쪽 패널 접힘 · 합계 크게 |
+| D 예정노선 | 같은 셸 · 단계 탭 셋(기준 지정 → 노선 분석 → 확정) · 연도별 노선 후보 = 위 대안 칸 + 오른쪽 패널 후보 카드(연장 · 최대 경사 · 위반) | 산림청 보기 전용 · 지도 핀으로 열기는 ArcGIS Urban 꼴 · 업체 지정 = 오른쪽 패널 폼 |
+| E 안정성평가 | 단계 탭 「분석」 — Themes 색 분석(평면 위험 띠 · 광역 위험 색 지도) + 오른쪽 결과 패널(최소 안전율 · 판정 · 절편표) + 아래 서랍(횡단 · 절편력 그래프) | 색 + 색 띠 범례 + 구간 표는 Forma 분석 꼴이 더 깔끔 — 섞어 씀 · E05 보고서 = 표형 |
+| 설정 | 오른쪽 위 톱니 — 단위 · 표시 · 테마 · 언어 / 회사 · 사용자 · 시스템은 시작 화면 쪽 관리 메뉴 | 작업 화면 안 「페이지 설정」 카드는 오른쪽 패널 한 탭으로 |
+| 사용자 가이드 | 오른쪽 위 [?] + 첫 화면 왼쪽 아래 링크(새 기능 · 도움말 · 교육) | 지금 [?] 단추 자리 이동 · A05 가이드 연결 |
+
+셸 그림(1순위 기준):
+
+```
+┌ 위 줄 ─ 집 · 프로젝트명 │ [관리][노선 · 종단][횡단][도면][수량 · 원가] │ 대안 ▾ │ 보기 도구 │ 저장 · ⚙ · ? ┐
+├ 가운데 3D · 평면 캔버스(왼쪽 아래 좌표 · 측점 · 오프셋) ─────────────────────┬ 오른쪽 패널 한 자리 ─┤
+│                                                                             │ 자료 / 속성 / 색 분석 │
+├ 아래 서랍 탭 ─ [종단][횡단][유토곡선][표][비용][검토 ⚠] · 끌어 크기 · 접기 ─┴──────────────────────┤
+```
+
+## ④ 따라 만들 때 주의
+
+- 베끼지 않음 — 이름(InfraWorks · Forma · ConceptStation · Giraffe · DroneDeploy · ArcGIS) · 로고 · 아이콘 · 그림 · 화면 안 고유 이름(ViewCube · Action Center · Backstage · Proposals · Model Builder)을 우리 화면 글에 쓰지 않음. 배치 · 흐름만.
+- 도움말 글 · 그림 저작권 — Autodesk 도움말은 CC BY-NC-SA 3.0(비영리) → 우리 상용 가이드에 옮겨 쓰지 않음. 그림은 내부 참고만(이 `ref_C/` 는 tmp · git 밖 유지).
+- 겉 꼴 — InfraWorks 의 어두운 리본 · 촘촘한 아이콘은 버리고 366 제안의 밝은 회색 틀 · 강조 한 색 · 아이콘 + 글자 단추로.
+- 라이브러리 — 화면 틀 라이브러리 새로 들이지 않고 `ui_template` 직접. 아이콘 Tabler(MIT) · 색 Radix Colors(MIT) · 패널 나누기 Split.js(MIT) · 표 Tabulator(MIT) 정도. Esri Calcite · ArcGIS Maps SDK(Esri 독점) · Autodesk · Bentley SDK 는 쓰지 않음.
+- 자동 저장 꼴(Giraffe · Forma)은 따르지 않음 — 우리 [저장] · [확정] 규칙 유지.
+- 지도 출처 표기(카카오 · VWorld)는 캔버스 오른쪽 아래 그대로.
+
+## ⑤ 정할 거리
+
+1. 본보기 — InfraWorks 뼈대(1순위 · 도로 흐름 일치) / Forma 뼈대(2순위 · 웹 겉 꼴 우선).
+2. 단계 이동 — 위 줄 단계 탭(권함 · 탭 다섯 안팎으로 묶음) / 지금 왼쪽 아래 [<] [>] 유지.
+3. 아래 서랍 — 종단 · 횡단 · 유토곡선 · 표 · 비용을 탭 하나로 모음(권함) / 페이지마다 따로.
+4. 오른쪽 패널 한 자리 — 자료 · 속성 · 색 분석 · 대안을 번갈아(권함) / 지금 왼쪽 카드 유지.
+5. 대안(노선 추천 · 연도별 후보) — 위 줄 대안 칸 / 패널 안 카드 목록.
+6. 첫 화면 — 표 중심(InfraWorks · 권함) / 썸네일 카드 중심(DroneDeploy) / 둘 다 전환.
+7. CAD(B07) · 원가(B09) — 셸만 맞추고 본문 유지(권함) / 본문까지 새로.
+8. 시안 — B01 · B05 두 화면을 1순위 · 2순위 각각 HTML 시안으로 먼저 볼지.

docs/raw/요구_1025/_조사_369-A_기업공공포털.md

@@ -0,0 +1,48 @@
+relay_e43b3fae492a dispatch:ctx_4ea18346b432 -> run:run_06a1a55f92be: "요구 369 대시보드 조사 A (기업·공공·엔지니어링 포털 9선 비교 및 B01 사이트맵 개편안) 완료"
+### ① 결론 다섯 줄
+- 현행 대시보드(`B01`)는 프로젝트 표·받은 예정노선·임시 보관함·리소스 현황·시스템 설정·사용자/팀원·가입 요청·회사 관리·내 프로필·보안·시스템 로그 등 13개 구역이 단일 스크롤에 뒤섞여 작업 복귀와 행정 관리의 경계가 흐려져 있음.
+- ArcGIS Online·Autodesk ACC·Onshape·Bentley iTwin·CALS 등 9개 포털 조사 결과, 모두 좌측 고정 메뉴(4~5개 묶음) + 역할별 홈 + 3단 설정 위계(우상단 개인 계정 / 좌측 조직·표준 / 시스템 운영)로 분리함.
+- 받은 예정노선처럼 0건일 때 구역을 숨기면 기능 존재조차 모르므로, 상시 노출 탭 + 카운트 배지(0) + 안내형 빈 상태(Empty State)로 전환해야 함.
+- 8~9열에 작업 단계 알약 7개가 늘어선 프로젝트·사용자 표는 핵심 5~6열 + 행 클릭 우측 상세 서랍(Drawer) + [최근 단계 이어하기] 주 버튼(전체 단계는 팝오버)으로 밀도를 낮춰야 함.
+- 시각 톤은 Bentley iTwin UI + Autodesk ACC를 본보기로 삼아 다크 슬레이트 좌측 메뉴(#0F172A), 밝은 본문(#F8FAFC), 4대 사업 묶음별 컬러 배지로 B2B 엔지니어링 포털의 신뢰감을 확보함.
+
+### ② 레퍼런스 9선 비교표 (tmp/brain_369/ref_A/ 총 18장 저장 완료)
+| 이름 · 주소(실제 확인) · 캡처 파일 | 볼 것: 첫 화면 · 왼쪽 메뉴 · 세부 나눔 · 설정 나눔(개인/회사/시스템) · 예쁜 점 | 우리에게 가져올 점 |
+| :--- | :--- | :--- |
+| 1. Esri ArcGIS Online (`https://doc.arcgis.com/en/arcgis-online/reference/view-status.htm` / `arcgis_01_org_home.png`, `arcgis_02_content_groups.png`) | 첫 화면: 조직 현황+최근 콘텐츠 / 메뉴: Content·Groups·Organization(Overview/Members/Settings/Status 탭) / 설정: 우상단 아바타(개인) vs Organization(조직·상태) / GIS 배지·상태 분리 우수 | 프로젝트·임시 보관함을 작업 공간 탭으로 묶고, 리소스·로그는 시스템 운영 > 상태/로그 탭으로 분리함 |
+| 2. Autodesk Construction Cloud (`https://help.autodesk.com/view/DOCS/ENU/?guid=Project_Admin_Home` / `acc_01_projects_home.png`, `acc_02_account_admin.png`) | 첫 화면: 최근 프로젝트+할 일 / 메뉴: Project List ↔ Account Admin(Projects/Members/Companies/Templates/Settings) / Templates 독립 메뉴로 도면·표준 관리가 명확함 | 시스템 설정 카드 5종(구조물 조합·옵션·도면 양식·계산 자리·마스터)을 첫 화면에서 빼내 좌측 설계 표준 메뉴로 독립시킴 |
+| 3. Autodesk Account (`https://www.autodesk.com/support/account/manage/users/add-users` / `autodesk_acct_01_users.png`, `autodesk_acct_02_products.png`) | 좌측 User Management > By User / Invitations 탭 분리 / 표는 이름·이메일·역할·상태 4열만 두고 행 클릭 시 우측 서랍에서 직급·부서·권한 편집 | 9열 사용자·팀원 표를 5열로 줄이고 우측 상세 서랍을 도입하며, 가입 요청은 조직 관리 내 탭(배지 표시)으로 통합함 |
+| 4. Onshape Cloud CAD/PDM (`https://cad.onshape.com/help/Content/Home/user_interface_basics.htm` / `onshape_01_docs_home.png`, `onshape_02_company_settings.png`) | 좌측 필터 트리 + 중앙 프로젝트 표 + 우측 속성 서랍 / 우상단 아바타에서 My Account(프로필·서명·보안)와 Company Settings(회사정보·표제란) 완벽 분리 | 기본정보(프로필·전자서명)와 보안(비밀번호)을 본문에서 빼내 우상단 아바타 드롭다운(내 계정 설정)으로 이동함 |
+| 5. Bentley Infrastructure Cloud & iTwin UI (`https://itwinui.bentley.com/` / `bentley_01_connect_center.png`, `bentley_02_itwin_portal.png`) | CONNECT Center(최근 프로젝트 3장+조직 전환기) / MIT 오픈소스 @itwin/itwinui-react 기반 토목 인프라 표준 다크 슬레이트 메뉴·고밀도 표(행 높이 40~44px)·상태 알약 | 우리 대시보드의 1순위 시각 본보기로 삼아 좌측 다크 슬레이트 메뉴바, 상단 회사 전환기, 단계 알약 디자인에 적용함 |
+| 6. Trimble Connect (`https://www.trimble.com/en/products/trimble-connect` / `trimble_01_projects.png`, `trimble_02_admin.png`) | 프로젝트 카드/표 뷰 토글 + 우상단 + New / 임시 업로드 파일(Inbox)과 정규 프로젝트 폴더를 명확히 분리하고 만료·참여자 요약 제공 | 임시 보관함(30일 보관)에 남은 만료일(D-24) 배지와 [+ 새 프로젝트로 바로 연결] 원클릭 액션을 부여함 |
+| 7. Procore (`https://www.procore.com/platform` / `procore_01_portfolio.png`, `procore_02_directory.png`) | Company Portfolio 표 상단에 단계(Stage)별 카운트 필터 칩 배치 / Company Tools(Portfolio/Directory/Admin) 분리 | 프로젝트 표 상단에 전체·예정노선·임도설계·사방설계·안정성평가 카운트 칩과 검색창을 두어 즉시 필터링함 |
+| 8. 건설사업정보시스템 CALS · 나라장터 (`https://www.calspia.go.kr/portal/` / `public_01_cals_portal.png`, `public_02_g2b_portal.png`) | 발주청·용역사 역할별 미결·수신 업무 요약 박스를 첫 화면 최상단에 배치 / 발주처 하달 문서 수신 상태(미연결·연결됨·업데이트) 강조 | 산림청 하달 받은 예정노선을 숨기지 않고 첫 화면 상단 인수인계 알림 배너 및 좌측 받은 예정노선(배지) 탭으로 상시 노출함 |
+| 9. 산림청 산림공간정보서비스 FGIS (`https://www.forest.go.kr/newkfsweb/kfs/idx/SubIndex.do?orgId=fgis&mn=KFS_03_08_01` / `forest_01_fgis_home.png`, `forest_02_forest_go_kr.png`) | 산림청 표준 포레스트 그린·네이비 신뢰 톤 및 관할 지방산림청·국유림관리소·지자체 행정구역 분류 체계 | 지역 필터 및 4대 사업 묶음 배지 색상에 산림 도메인 친화 색상(포레스트 그린·로열 블루·엠버·슬레이트)을 반영함 |
+
+### ③ 우리 대시보드 새 구조(사이트맵) — 기존 13개 구역 100% 매핑 및 4대 역할별 가시성
+상단 바(좌: 로고 + 시스템 관리자용 회사 전환[예시건설 ▾], 우: [+ 새 프로젝트] · [?] 가이드 · 아바타 메뉴) + 좌측 고정 사이드바(5개 메뉴 묶음) 구조임.
+| 좌측 메뉴 묶음 | 세부 페이지 (탭 / 서랍) | 기존 13개 구역 매핑 (빠짐없이 이동) | 일반 | 회사관리자 | 산림청 | 시스템관리자 |
+| :--- | :--- | :--- | :---: | :---: | :---: | :---: |
+| 1. 홈 (`/dashboard`) | 역할별 요약 배너 + 최근 프로젝트 3장 + 빠른 실행 | #3 프로젝트(최근 3건), #4 [+] 새 프로젝트 모달, #5 받은 예정노선(미연결 배너), #8 가입 요청(대기 배지), #1 리소스(상태 요약 배지) | ● | ● | ● | ● |
+| 2. 작업 공간 (`/projects`) | 탭 2-1. 전체 프로젝트 / 탭 2-2. 받은 예정노선(상시 노출) / 탭 2-3. 임시 보관함(30일) | #3 프로젝트 표 전체(단계 알약·수정·삭제), #5 받은 예정노선 표 전체, #6 임시 보관함 전체 | ● | ● | ●(하달/조회) | ● |
+| 3. 설계 표준 (`/standards`) | 탭 3-1. 구조물 조합·옵션 / 탭 3-2. 도면 양식·계산 자리·마스터 데이터 | #2 시스템 설정 카드 1~5장 전체(구조물 조합·옵션·도면 양식·계산 자리·마스터 데이터) | ●(개인/읽기) | ●(회사/개인) | ○(열람) | ●(마스터) |
+| 4. 조직 관리 (`/org`) | 탭 4-1. 구성원 관리(5열 표+우측 서랍) / 탭 4-2. 가입 요청(배지 N) / 탭 4-3. 회사 정보·목록 | #7 사용자 관리(시스템)/팀원 관리(회사), #8 가입 요청, #9 회사 관리(시스템)/회사 정보·로고(회사) | ✕ | ●(자사) | ●(관할) | ●(전체회사) |
+| 5. 시스템 운영 (`/sys`) | 탭 5-1. 리소스 현황(KPI 5개+7일 차트) / 탭 5-2. 시스템 감사 로그 | #1 리소스 현황(CPU·메모리·디스크·활성 KPI+7일 추이), #12 시스템 로그 표 | ✕ | ✕ | ✕ | ●(전용) |
+| 우상단·우하단 전역 | 아바타 → 내 계정 설정 모달(기본정보·전자서명 / 보안·비밀번호) · 우상단 [?] · 우하단 챗봇 | #10 기본정보(내 프로필·전자서명), #11 보안(비밀번호 변경), #13 전역 도우미([?]·챗봇) | ● | ● | ● | ● |
+
+### ④ 홈(첫 화면) 구성안 — 역할별 우선 노출 및 빈 상태(Empty State)
+- 일반 사용자(설계자): ① 상단 인수인계 배너(미연결 받은 예정노선 N건 → [프로젝트 생성·연결]) → ② 최근 작업 프로젝트 카드 3장([마지막 단계 이어하기 →] 버튼) → ③ 최근 프로젝트 표(5건) + 임시 보관함 만료 알림.
+- 회사 관리자: 일반 홈 + 상단 조직 상태 바(활성 팀원 N명 · 승인 대기 가입 요청 N건 [바로가기] · 도면 표제란 로고 등록 상태).
+- 산림청(발주·검토자): ① 하달 예정노선 현황 카드(확정 하달 N건 · 용역사 연결 N건 · 업데이트 미반영 N건) → ② 관할 사업 목록 표([보기] 중심).
+- 시스템 관리자: ① 플랫폼 상태 바(CPU·메모리·디스크 정상/주의 배지 + 전체 회사/활성 사용자 수 + 미승인 가입 요청) → ② 선택 회사(예시건설 ▾) 프로젝트 요약 및 최근 감사 이벤트 5건.
+- 빈 상태 원칙: 섹션을 숨기지 않고 점선 카드(#E2E8F0)에 아이콘+설명+행동 버튼 배치(예: 받은 예정노선 0건 → 산림청에서 하달된 예정노선이 없습니다. 직접 작도하려면 [+ 새 프로젝트]를 누르세요).
+
+### ⑤ 예쁘게 (시각 규격 — 본보기: Bentley iTwin UI + Autodesk ACC)
+- 색·글꼴·간격: 좌측 사이드바 #0F172A(선택 #1E293B + 좌측 3px #10B981 바, 너비 240px/접힘 64px), 본문 배경 #F8FAFC, 카드 #FFFFFF(1px solid #E2E8F0, 패딩 24px, 간격 16px). 글꼴은 Pretendard + 수치·IP·날짜용 JetBrains Mono(tabular-nums). 4대 사업 배지는 예정노선(#16A34A 그린)·임도설계(#2563EB 블루)·사방설계(#64748B 슬레이트)·안정성평가(#D97706 엠버)로 구분함.
+- 표·카드 정돈: 프로젝트 표는 프로젝트명 · 사업종류 · 지역 · 진행단계([최근 단계 이어하기] + 4/7 진행률 바 + 전체 단계 팝오버) · 수정일 · [⋮] 6열(행 높이 44px)로 줄여, 7개 단계 알약 나열로 인한 줄바꿈 깨짐을 방지함.
+
+### ⑥ 정할 거리 (3건)
+1. 로그인 직후 기본 랜딩 탭: 요약 중심 홈(`/dashboard`)으로 열지, 실무자 복귀가 빠른 작업 공간 > 전체 프로젝트(`/projects`, 상단 요약 배너 포함)로 바로 열지 결정 필요함.
+2. 도우미([?] 가이드 + 우하단 챗봇) 통합 여부: 우상단 [?]와 우하단 챗봇을 우하단 통합 도우미 런처(탭 1: 화면 설명서 / 탭 2: 법령·지침 챗봇) 하나로 합칠지 결정 필요함.
+3. 산림청 역할 전용 뷰 범위: 산림청 로그인 시 임시 보관함과 설계 표준(개인 수정)을 숨기고 예정노선 하달·연결 현황을 첫 탭으로 고정할지 확정 필요함.
+[payload] {"taskId":"task_29c6565c3fd6","dispatchId":"ctx_4ea18346b432","outcome":"succeeded"}

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

@@ -0,0 +1,141 @@
+# 조사 369-B — 대시보드 개편: 예쁘고 분류가 잘 된 현대 SaaS (sub1 · opus)
+
+그림: `tmp/brain_369/ref_B/` 31 장(공개 문서 · 변경 기록 속 제품 화면 원본 · Plausible 공개 데모는 헤드리스 Edge 1440×900 촬영 · 2026-10-26) · 찍은 스크립트 `shot.py` · 열린 주소 결과 `shot_t2.json` · `shot_t3.json`.
+앞 조사(366-B 셸 · 표 · 토큰 · 라이센스)와 겹치는 표는 다시 만들지 않음 — 이번은 **메뉴 묶음 · 설정 나눔 · 첫 화면 · 예쁨의 실제 요소**만.
+
+## ① 결론 다섯 줄
+
+1. 열두 곳 모두 같은 뼈대 — **왼쪽 메뉴(작업) + 위 머리 오른쪽 사용자 메뉴(나) + 따로 떨어진 설정 영역(회사 · 시스템)**. 한 페이지에 다 넣은 곳은 없음.
+2. 설정은 **「나 / 회사 / 시스템」 세 묶음**으로 나눔 — Linear(Account · Features · Administration · Your teams) · Supabase(계정 설정을 조직 밖 오른쪽 위로) · Figma(관리자만 보는 Admin 영역). 우리도 개인(기본정보 · 보안) · 회사(회사 정보 · 팀원 · 가입 요청) · 시스템(리소스 · 마스터 · 회사 · 사용자 · 로그)으로.
+3. 첫 화면은 **「이어서 하기 + 지금 할 일」**만 — Vercel 팀 첫 화면(프로젝트 카드 + 사용량 한 장) · Notion Home(Jump back in) · Cloudflare 개요(지표 + Next steps). 리소스 그래프 · 로그 · 회사 표는 첫 화면에서 빼고 세부 페이지로.
+4. 메뉴 깊이는 **두 단까지** — 묶음 이름(회색 작은 글) → 항목(아이콘 + 글). 세 단째는 페이지 안 탭(Railway · GitHub · Figma Resources)으로.
+5. 「예쁨」 = 색을 줄이고(회색 단계 + 강조 한 색) · 1 px 선 · 일정한 간격 · 한 화면 주 단추 하나 · 설정 줄은 「아이콘 + 제목 + 설명 + 오른쪽 조작」(Linear) — 본보기는 **Vercel(밝은 셸 · 메뉴) + Linear(설정 페이지)**.
+
+## ② 레퍼런스 12
+
+주소는 모두 2026-10-26 헤드리스로 열어 200 확인. 대시보드 자체는 로그인 필요 → 공식 문서 · 변경 기록에 실린 제품 화면 원본을 받음.
+
+| 이름 · 주소 | 볼 것 — 첫 화면 · 메뉴 묶음 · 세부 페이지 · 설정 나눔 · 예쁜 점 | 우리에게 가져올 점 |
+| --- | --- | --- |
+| **Vercel** 새 탐색 · https://vercel.com/changelog/new-dashboard-navigation-available · 팀 첫 화면 https://vercel.com/changelog/improved-team-overview-page (그림 `Vercel_newnav_01` 밝음 · `Vercel_newnav_02` 어두움 · `Vercel_teamoverview_01`) | 첫 화면 = 팀의 프로젝트 카드(검색 · 정렬 · 카드/목록 전환) + 사용량 카드 한 장 + 최근 미리보기 · 왼쪽 위 팀 전환(「Acme Pro ⌃⌄」) → 바로 아래 「Find… F」 검색 → 항목(아이콘 + 글 · 하위 있으면 ›) · 위 가로 탭 대신 접는 세로 메뉴로 바꿈(2026-02 기본) · 팀 화면과 프로젝트 화면이 같은 메뉴 이름 · 설정은 팀 설정 / 프로젝트 설정 따로 | 왼쪽 위 「회사 이름 ⌃⌄」(시스템 관리자는 회사 전환 = 지금 회사 알약 자리) · 메뉴 맨 위 검색 · 첫 화면 = 프로젝트 카드 + 요약 카드 한 장 · 밝음 · 어두움 같은 꼴 짝 |
+| **Supabase** 대시보드 탐색 개편 · https://supabase.com/changelog/33670-upcoming-breaking-change-to-dashboard-navigation · 프로젝트 설정 정리 https://supabase.com/changelog/37655-dashboard-navigation-updates-project-settings (그림 `Supabase_nav_01`) | 한 번에 조직 하나 · 조직 고르기는 위 머리 · **조직 메뉴와 프로젝트 메뉴를 따로** · 계정 설정은 조직 밖으로 빼서 오른쪽 위 사용자 메뉴(계정 설정 · 미리보기 기능 · 명령 메뉴 · 테마) · 기능별 설정은 그 기능 페이지 안으로 옮김(데이터베이스 설정 → 데이터베이스 › 구성) | 「내 정보 · 보안 · 테마」= 오른쪽 위 사용자 메뉴 · 대시보드 메뉴(회사 단위)와 프로젝트 안 메뉴(작업 화면)를 섞지 않음 · 기능 설정은 기능 곁에(구조물 조합은 「설계 기본값」 곁에) |
+| **Linear** 설정 개편 · https://linear.app/changelog/2024-12-18-personalized-sidebar · 작업공간 https://linear.app/docs/workspaces · 환경설정 https://linear.app/docs/account-preferences (그림 `Linear_settings_nav_crop` · `Linear_sidebar_02` · `_03` · `Linear_pref_01` · `Linear_ws_01` · `Linear_members_01`) | 설정은 **앱과 갈린 모드** — 맨 위 「‹ Back to app」 · 묶음 넷: Account(Profile · Preferences · Notifications · Security & access) / Features / Administration(Workspace · Teams · Members · Security · API · Plans · Billing · Import/Export — 관리자만) / Your teams · 팀 설정 첫 장 = 요약 줄 목록(아이콘 + 제목 + 한 줄 설명 + 값 › ) · 멤버 = 거르는 표(검색 · 역할 · 가입일 · 마지막 접속) · 작업공간 전환은 왼쪽 위 이름 메뉴 | **설정 나눔의 본보기** — 「‹ 대시보드로」 + 묶음 셋(내 계정 / 회사 / 시스템) · 설정 줄 꼴(제목 + 회색 설명 + 오른쪽 조작) · 팀원 표 꼴 |
+| **Notion** 사이드바 · https://www.notion.com/help/navigate-with-the-sidebar · 작업공간 설정 https://www.notion.com/help/workspace-settings (그림 `Notion_sidebar_crop` · `Notion_home_01` · `_02` · `_03` · `Notion_settings_01`) | 메뉴 맨 위 고정 넷: Search · Home · Inbox · **Settings & members**(설정과 멤버를 한 창에) → 아래 묶음 Private · Shared · Teamspaces · Favorites(접힘 · 정렬 · 「More」로 길이 제한) · Home = 「Jump back in」 최근 카드 줄 | 고정 항목 몇 개 + 그 아래 묶음 · 긴 목록은 다섯 줄 + 「더 보기」 · 첫 화면 「이어서 하기」 카드 줄 |
+| **Figma** 조직 관리 · https://help.figma.com/hc/en-us/articles/360039829474-Guide-to-organization-administration (그림 `Figma_admin_nav_crop` · `Figma_admin_03`) | 관리자만 보이는 「Admin」 항목 → 들어가면 메뉴가 **관리 전용으로 바뀜**(‹ 조직 이름 admin) · 묶음: Dashboard(알림 수 배지) · People · Billing · Content · Resources · Activity · Settings / Billing groups · Guests · 세부는 페이지 안 탭(Libraries · Kits …) + 오른쪽 상세 패널 | 시스템 관리자 영역 = 같은 꼴(‹ 시스템 관리 · 개요 · 회사 · 사용자 · 가입 요청 · 기본값 · 로그) · 처리할 일 수 배지 · 표 줄 누르면 오른쪽 상세 패널 |
+| **GitHub** 조직 · https://docs.github.com/en/organizations/managing-organization-settings (그림 `GitHub_orgset_01` · `GitHub_kodekloud_01` — 설정 메뉴 묶음 · 출처 https://notes.kodekloud.com/docs/GitHub-Foundations-Certification/GitHub-Administration/Managing-Organization-Settings/page) | 조직 첫 화면 = 위 탭(Overview · Repositories 52 · Projects 12 · Teams 20 · People 44 · Security · Insights · **Settings** 맨 끝) · 설정 왼쪽 메뉴 묶음 = General / Access(역할 · 멤버 권한 · 가져오기) / Code, planning, and automation / Security / Archive(Logs) | 탭 이름 옆 개수 · 「설정」은 맨 끝 · 로그는 「보관(Archive)」 묶음 맨 아래 — 시스템 로그 자리 |
+| **Cloudflare** 새 탐색 · https://developers.cloudflare.com/changelog/post/new-cloudflare-one-navigation-and-product-experience/ · AI 묶음 https://developers.cloudflare.com/changelog/post/2026-02-19-ai-dashboard-experience-improvements/ · Workers 개요 https://developers.cloudflare.com/changelog/post/2025-10-06-new-worker-overview-page/ (그림 `Cloudflare_ai_02` · `Cloudflare_worker_01` · `Cloudflare_one_01`) | 메뉴 이름을 **제품 이름 → 하는 일 이름**으로 바꿈(「Gateway policies」→「Traffic policies」) · 묶음 제목(Build) → 항목(Compute ›) → 펼침(세로 안내선 + 하위) · 「Beta」 점선 배지 · 개요 페이지 = 지표 줄 + 오른쪽 「Next steps」 · 메뉴 바꾼 날 첫 접속에 「새 메뉴 둘러보기」 창 | 메뉴는 화면 코드(B03 · M02) 아닌 하는 일 이름으로 · 「준비 중」 배지(사방설계) · 홈 「다음 할 일」 · 개편 첫 날 둘러보기 창 한 번 |
+| **Sentry** 새 탐색 · https://sentry.io/changelog/new-nav-issue-views-ga (그림 `Sentry_newnav_01`) | **두 단 메뉴** — 맨 왼쪽 아이콘 레일(Issues · Explore · Dashboards · Insights · Settings · 아래 ? · 소식 · 사용자) + 둘째 패널(Feed · … · Starred Views 개수 배지 · Configure) · 위 거르기 줄(My Projects · All Envs · 14D) · 표 = 제목 굵게 + 회색 한 줄 + 작은 막대 추이 | 항목 많아질 때의 길(지금은 한 단으로 충분) · 「저장된 보기 + 개수」 → 프로젝트 「내 것 · 진행 중 · 보관」 · ? 와 사용자는 레일 맨 아래 |
+| **PostHog** 대시보드 · https://posthog.com/docs/product-analytics/dashboards (그림 `PostHog_dash_03`) | 카드 타일 격자(큰 숫자 · 막대 · 면 그래프) · 카드마다 제목 회색 작은 대문자 + 「⋯」 · 기간 거르기 위 오른쪽 | 시스템 관리자 「개요」 페이지의 지표 카드 꼴(리소스 현황 이동처) |
+| **Railway** 기본 · https://docs.railway.com/overview/the-basics (그림 `Railway_basics_03` · `_04`) | 프로젝트 첫 장 = 캔버스 + 위 탭(Architecture · Observability · Logs · Settings) · 항목 누르면 오른쪽 넓은 패널(Deployments · Variables · Metrics · Settings 탭) · 활동 목록 오른쪽 | 「세부 페이지 대신 오른쪽 패널」 — 팀원 · 회사 · 받은 예정노선 상세를 새 페이지 없이 · 설정 탭은 늘 맨 끝 |
+| **Plausible** 공개 데모 · https://plausible.io/plausible.io (그림 `Plausible_live_00` — 실제 돌아가는 화면) | 밝은 바탕 · 지표 여섯 칸 한 줄(이름 대문자 회색 · 큰 숫자 · ↗ 증감) → 넓은 그래프 → 아래 카드 둘(탭 · 막대 바탕 표) · 강조 보라 한 색 · 그림자 거의 없음 | 「예쁘다」의 최소 요소 실물 — 색 하나 · 간격 일정 · 표 줄에 옅은 막대 바탕(값 크기) |
+| **Clerk** 조직 · https://clerk.com/docs/guides/organizations/overview · 대시보드 https://clerk.com/docs/guides/dashboard/overview (그림 `Clerk_orgs_01`) | 작업공간 › 앱 › 조직 › 사용자 · 역할 · 권한 층 그림 · 조직 목록 → 조직 하나 누르면 상세(정보 · 멤버 · 초대 · 설정 탭) · 조직 프로필은 설정 톱니 → 창 | 시스템 관리자 「회사」 페이지 = 회사 목록 → 회사 상세(정보 · 팀원 · 가입 요청 · 프로젝트 탭) — 지금 「회사 알약으로 전환」 대체 |
+
+덧붙여: Stripe 대시보드 기본(https://docs.stripe.com/dashboard/basics)은 366-B 에 있어 빼냄 · Sentry 공개 샌드박스(sandbox.sentry.io)는 업무 메일 입력을 요구해 들어가지 않음 · Vercel 「The New Side of Vercel」은 로그인으로 넘어감.
+
+## ③ 우리 대시보드 새 구조(사이트맵)
+
+### 셸(모든 대시보드 페이지 공통)
+
+- 위 머리 48 px — 왼쪽 AISLO 로고 · 오른쪽 [?] 가이드 · 알림(가입 요청 · 받은 예정노선 · 보관함 만료) · 사용자 메뉴(이름 · 역할 / 내 정보 · 보안 · 테마 · 로그아웃).
+- 왼쪽 메뉴 240 px(접으면 아이콘 + 두 글자 64 px) — 맨 위 「회사 이름 ⌃⌄」(시스템 관리자만 눌러 회사 전환 · 나머지는 이름만) · 그 아래 「찾기 Ctrl+K」.
+- 지식 챗봇 — 오른쪽 아래 둥근 단추 그대로(모든 페이지).
+- ☰ 서랍 · 구역 접기 폐지 — 메뉴가 늘 보임.
+
+### 메뉴 묶음 → 세부 페이지 → 들어갈 것
+
+| 묶음 | 세부 페이지(주소 예) | 들어갈 것 | 일반 | 회사 관리자 | 산림청 | 시스템 |
+| --- | --- | --- | --- | --- | --- | --- |
+| (고정) | **홈** `/home` | 역할별 첫 화면(④) | ✅ | ✅ | ✅ | ✅ |
+| 작업 | **프로젝트** `/projects` | 프로젝트 표(검색 · 묶음 거르기 넷 · 저장된 보기 「내 것 · 회사 전체 · 보관」 · 진행 막대) · 오른쪽 위 [+ 새 프로젝트] → 묶음 카드 넷 창(지금 그대로) | ✅ | ✅ | ✅(예정노선 · 안정성평가 기본 거르기) | ✅(고른 회사) |
+| 작업 | **받은 예정노선** `/received` | 지정받은 예정노선 표(이름 · 연도 · 확정 시각 · 연결 상태) · [보기] · [연결] · 새로 받음 · 업데이트 있음 개수 배지 | ✅ 업체 | ✅ 업체 | — | ✅ |
+| 작업 | **임시 보관함** `/inbox-files` | 30일 파일 표 · 남은 날 · [+ 올리기] · 만료 임박 강조 | ✅ | ✅ | ✅ | ✅ |
+| 도움 | **사용자 가이드** | 지금 [?] 가이드(새 탭 또는 오른쪽 패널) | ✅ | ✅ | ✅ | ✅ |
+| 도움 | **지식 챗봇** | 둥근 단추와 같은 창을 넓게(법령 · 지침 질문) | ✅ | ✅ | ✅ | ✅ |
+| (맨 아래) | **설정** ⚙ → 설정 모드로 들어감 | 아래 표 | ✅ | ✅ | ✅ | ✅ |
+
+설정 모드(Linear 꼴 — 메뉴가 「‹ 대시보드로」 + 설정 묶음으로 바뀜):
+
+| 설정 묶음 | 세부 페이지 | 들어갈 것 | 일반 | 회사 관리자 | 산림청 | 시스템 |
+| --- | --- | --- | --- | --- | --- | --- |
+| 내 계정 | 기본정보 | 이름 · 직급 · 부서 · 연락처 · 서명 | ✅ | ✅ | ✅ | ✅ |
+| 내 계정 | 보안 | 비밀번호 바꾸기(이후 로그인 기록) | ✅ | ✅ | ✅ | ✅ |
+| 내 계정 | 화면 | 밝음 · 어두움 · 글자 크기 | ✅ | ✅ | ✅ | ✅ |
+| 내 계정 | 내 설계 기본값 | 구조물 조합(개인 층) | ✅ | ✅ | — | ✅ |
+| 회사 | 회사 정보 | 회사명 · 사업자번호 · 대표자 · 주소 · 로고(도면 표제란) | 읽기 | ✅ | 읽기(기관 정보) | ✅ |
+| 회사 | 팀원 | 팀원 표(검색 · 역할 · 상태) · [+ 팀원] · 줄 끝 ⋯(수정 · 역할 변경 · 제거) | 읽기 | ✅ | ✅(기관 안) | ✅ |
+| 회사 | 가입 요청 | 대기 표 · [승인] · [거절] · 대기 수 배지 | — | ✅ | ✅(기관 안) | ✅ |
+| 회사 | 회사 설계 기본값 | 구조물 조합(회사 층) | 읽기 | ✅ | — | ✅ |
+| 시스템 관리 | 개요 | 리소스 현황(CPU · 메모리 · 디스크 · 활성 사용자 · 활성 프로젝트 · 7일 그래프) | — | — | — | ✅ |
+| 시스템 관리 | 회사 | 회사 목록 → 회사 상세(정보 · 로고 · 팀원 · 가입 요청 · 프로젝트 탭) · [+ 회사] | — | — | — | ✅ |
+| 시스템 관리 | 사용자 | 전체 사용자 표(회사 거르기 · 역할 변경 · 삭제) | — | — | — | ✅ |
+| 시스템 관리 | 설계 기본값(마스터) | 마스터 데이터 · 구조물 조합 · 구조물 옵션 · 도면 양식 · 계산 자리 — 묶음 안 다섯 항목(지금 카드 다섯) | — | — | — | ✅ |
+| 시스템 관리 | 시스템 로그 | 동작 · 대상 · 접속 주소 · 일시 표(거르기 · 기간) | — | — | — | ✅ |
+
+### 지금 구역 → 새 자리(빠짐없이)
+
+| 지금(한 페이지) | 새 자리 |
+| --- | --- |
+| 리소스 현황(시스템) | 설정 › 시스템 관리 › 개요 · 홈엔 한 줄 요약만 |
+| 시스템 설정 카드 — 마스터 데이터 · 구조물 조합 · 구조물 옵션 · 도면 양식 · 계산 자리 | 설정 › 시스템 관리 › 설계 기본값(다섯 항목) · 일반 · 회사 관리자의 「구조물 조합」 카드 하나 → 내 계정 › 내 설계 기본값 · 회사 › 회사 설계 기본값(층별로 갈림) |
+| 프로젝트 표 + [+] | 작업 › 프로젝트 · 홈엔 「이어서 하기」 + 짧은 목록 |
+| 새 프로젝트(묶음 카드 넷) | 프로젝트 페이지 · 홈 오른쪽 위 [+ 새 프로젝트] 같은 창 |
+| 받은 예정노선 | 작업 › 받은 예정노선 · 새로 받음은 홈 「할 일」과 알림 |
+| 임시 보관함 | 작업 › 임시 보관함 · 만료 임박은 홈 「할 일」 |
+| 사용자 관리(시스템) | 설정 › 시스템 관리 › 사용자 |
+| 팀원 관리(회사 관리자) | 설정 › 회사 › 팀원 |
+| 가입 요청 | 설정 › 회사 › 가입 요청(시스템은 회사 상세 탭에도) · 대기 수는 메뉴 배지 + 홈 |
+| 회사 관리(시스템) | 설정 › 시스템 관리 › 회사 |
+| 회사 정보(회사 관리자) | 설정 › 회사 › 회사 정보 |
+| 기본정보 | 설정 › 내 계정 › 기본정보(사용자 메뉴에서도 바로) |
+| 보안(비밀번호) | 설정 › 내 계정 › 보안 |
+| 시스템 로그 | 설정 › 시스템 관리 › 시스템 로그 · 홈엔 최근 다섯 줄(시스템만) |
+| 지식 챗봇 | 둥근 단추 그대로 + 도움 › 지식 챗봇 |
+| 사용자 가이드 [?] | 위 머리 [?] + 도움 › 사용자 가이드 |
+| 회사 이름 알약(시스템 관리자 회사 고르기) | 왼쪽 위 「회사 이름 ⌃⌄」 전환(Vercel 팀 전환 꼴) |
+| ☰ 서랍 · 구역 접기 | 폐지 — 늘 보이는 왼쪽 메뉴 |
+
+## ④ 홈(첫 화면) 구성안
+
+공통 머리: 「안녕하세요, ○○○ 님」 대신 페이지 제목 「홈」 + 오른쪽 주 단추 [+ 새 프로젝트](만들 권한 있는 역할만) — 주 단추는 이것 하나.
+
+| 역할 | 위에서부터 |
+| --- | --- |
+| 일반(설계 엔지니어) | ① **이어서 하기** — 최근 연 프로젝트 카드 3~4(이름 · 묶음 배지 · 지금 단계 「횡단설계 4/7」 · 마지막 수정 · 누르면 그 단계로) ② **할 일** 목록 — 새로 받은 예정노선 · 「업데이트 있음」 · 보관함 만료 7일 안 파일(각 줄 → 바로 그 페이지) ③ **내 프로젝트** 짧은 표 5 줄 + [전체 보기] |
+| 회사 관리자 | 위 ①②③ + **회사 요약 카드 한 장**(팀원 수 · 진행 중 프로젝트 수 · 가입 요청 N → [처리]) |
+| 산림청 | ① 예정노선 **상태별 개수 카드 넷**(지점 지정 · 분석 중 · 확정 · 업체 지정) — 눌러 프로젝트 거르기 ② 업체 지정 대기 목록 ③ 최근 예정노선 · 안정성평가 5 줄 |
+| 시스템 관리자 | ① **서버 상태 한 줄**(CPU · 메모리 · 디스크 % — 넘으면 주황 · 빨강 · [자세히] → 개요) ② 처리 대기(전체 가입 요청 · 새 회사) ③ 숫자 카드(회사 · 사용자 · 활성 프로젝트) ④ 최근 시스템 로그 5 줄 · 그 아래 고른 회사의 일반 홈 |
+
+빈 상태:
+- 첫 로그인(프로젝트 0) — 「시작하기」 세 걸음 체크 카드(Cloudflare 「Next steps」 꼴): ☐ 기본정보 · 서명 채우기 → ☐ 측량 파일 임시 보관함에 올리기 → ☐ 첫 프로젝트 만들기 · 끝낸 걸음은 ✓ · 다 끝나면 카드 사라짐.
+- 목록 빈 칸 — 「데이터가 없습니다」 대신 회색 선 아이콘 + 한 줄 + 주 단추 하나 + 가이드 링크:
+  - 프로젝트: 「아직 프로젝트가 없음」 · [+ 새 프로젝트] · 「프로젝트 만들기 안내」
+  - 받은 예정노선: 「산림청이 지정한 예정노선이 여기 모임」 · 단추 없음
+  - 임시 보관함: 「측량 파일을 30일 동안 먼저 올려 둠」 · [+ 올리기]
+  - 가입 요청: 「대기 중인 요청 없음」 · 단추 없음(배지도 숨김)
+
+## ⑤ 예쁘게 — 본보기 = Vercel(셸 · 메뉴 · 첫 화면) + Linear(설정 페이지)
+
+| 요소 | 정할 값(본보기에서 읽은 것) | 지금 화면과 다른 점 |
+| --- | --- | --- |
+| 색 | 바탕 아주 옅은 회색(#FAFAFA 꼴) · 카드 흰색 · 선 1 px 옅은 회색 · 글 진회색 / 보조 회색 2 단계 · **강조 한 색**(주 단추 · 선택된 메뉴 · 링크) · 상태 넷(파랑 정보 · 초록 완료 · 주황 주의 · 빨강 위험 — 위험 동작에만) | 지금 = 구역마다 진보라 [+] · 줄마다 빨강 [삭제] · 노란 테두리 → 빨강 · 진보라를 거의 안 봄 |
+| 글꼴 | Pretendard 한 벌 · 크기 넷만: 페이지 제목 22~24 / 카드 제목 15~16 / 본문 14 / 보조 12~13 · 굵기 400 · 500 · 600 · 숫자 `tabular-nums` | 지금 제목 · 표 글 크기 단계가 많고 SYSTEM_ADMIN · ACTIVE 같은 코드 글자가 그대로 → 「시스템 관리자」 · 「활성」 한글 배지 |
+| 아이콘 | 선 아이콘 한 묶음(Lucide · Tabler) · 16 px(표 · 단추) / 18~20 px(메뉴) · 선 1.5 · 메뉴 항목마다 하나 · 켜짐 = 바탕색 칸 | 지금 메뉴 아이콘 없음 |
+| 간격 | 4 px 격자(4 · 8 · 12 · 16 · 24 · 32) · 카드 안 여백 20~24 · 카드 사이 16~24 · 메뉴 줄 높이 32~36 · 묶음 제목 위 여백 20 | 지금 구역 사이 간격 · 안 여백이 들쭉날쭉 |
+| 카드 | 둥근 모서리 8~12 · 선 1 px · 그림자 없음(위에 뜨는 창만 그림자) · 제목 왼쪽 위 + 「⋯」 오른쪽 위 · 큰 숫자 카드 = 회색 작은 이름 → 큰 숫자 → 증감 | 지금 = 모든 구역이 같은 무게 큰 카드 |
+| 표 | 줄 높이 40 · 머리 회색 12~13 · 세로선 없음 · 가로선 옅게 · 줄에 마우스 올리면 옅은 바탕 · 동작은 줄 끝 「⋯」 하나(삭제는 그 안 빨강 + 확인 창) · 상태 = 점 + 글 배지 · 위 툴바(검색 · 거르기 · 보기 전환) | 지금 = 줄마다 [수정] [역할 변경] [사용자 삭제] 단추 셋 · 워크플로 칩 7 개 |
+| 설정 페이지 | 가운데 폭 720 px 남짓 · 묶음 제목 → 둥근 테두리 상자 안 줄 목록 · 줄 = 제목 + 회색 한 줄 설명 + 오른쪽 조작(입력 · 고르기 · 켜기 · ›) · 저장 단추는 묶음 끝 하나(Linear `Linear_pref_01` · `Linear_sidebar_02`) | 지금 = 기본정보 · 보안 폼이 대시보드 카드 안에 |
+| 메뉴 | 묶음 제목 회색 12 px(대문자 효과 없음 · 한글) · 항목 = 아이콘 + 글 · 지금 위치 = 옅은 회색 바탕 + 진한 글 · 배지 = 오른쪽 작은 회색 수(위험만 색) · 「준비 중」 = 점선 배지(Cloudflare 「Beta」 꼴) | — |
+| 밝음 · 어두움 | Vercel · Linear 모두 같은 꼴 두 벌 · 밝음 기본 | — |
+
+## ⑥ 정할 거리
+
+1. 설정 = **별도 모드**(「‹ 대시보드로」 · Linear · Figma 꼴 · 제안) 또는 같은 왼쪽 메뉴 아래 묶음으로 둠.
+2. 시스템 관리 = 설정 안 한 묶음(제안) 또는 Figma 처럼 따로 「관리 콘솔」.
+3. 시스템 관리자의 회사 전환 = 왼쪽 위 「회사 이름 ⌃⌄」(제안) 또는 시스템 관리 › 회사 상세에서만.
+4. 구조물 조합 세 층(개인 · 회사 · 마스터) = 층마다 메뉴 따로(제안) 또는 한 화면에서 층 고르기.
+5. 프로젝트 = 한 목록 + 묶음 거르기(제안) 또는 묶음마다 메뉴(임도설계 · 예정노선 · 안정성평가 · 사방설계).
+6. 받은 예정노선 메뉴 = 업체 계정에 늘 보임 + 빈 상태(제안) 또는 받은 것 있을 때만.
+7. 산림청 홈 · 메뉴 — 「업체 지정 현황」을 따로 페이지로 둘지.
+8. 사방설계(준비 중) = 「준비 중」 배지로 보임(제안) 또는 숨김.
+9. 본보기 = Vercel + Linear 꼴(밝음 기본 · 강조 한 색) 승인 · 강조 색(지금 진보라 유지 또는 산림 녹색).
+10. 개편 첫 접속 「새 메뉴 둘러보기」 창(Cloudflare 꼴) 둘지.

docs/raw/요구_1025/_조사_369-C_역할_관리화면.md

@@ -0,0 +1,144 @@
+# 조사 369-C — 역할이 여럿인 업무 관리 화면 · 대시보드 새 구조 (sub4 · opus)
+
+그림 = `ref_C/` 27 장(1440×900 헤드리스 Edge · 공식 문서 속 그림 · 2026-10-26) · 찍은 스크립트 `shot_C.py`.
+앞 조사(366 · 367)와 겹치는 셸 · 색 토큰은 다시 적지 않음 — 이번은 **역할별 메뉴 · 관리 페이지 나눔 · 설정 층**만.
+
+## ① 결론 다섯 줄
+
+1. 역할 전환 = **한 셸 · 한 메뉴 틀에서 권한 없는 묶음만 숨김**(Microsoft 365 · Google 관리 콘솔 · Ant Design Pro) — 따로 떨어진 관리 콘솔(Atlassian · 네이버웍스 Admin · Slack)은 회사 수천 명 규모 꼴 · 우리는 한 셸에 「작업 / 회사 / 시스템」 세 묶음.
+2. 설정은 **세 층으로 가름 — 내 정보(개인) / 회사 / 시스템** — Notion 설정 창(계정 · 워크스페이스 두 묶음) · Linear 회사 이름 ▾ 메뉴(내 설정 · 회사 설정 · 팀원 초대) 꼴 · 대시보드 본문에서 기본정보 · 보안 · 회사 · 로그 구역을 걷어냄.
+3. 관리 페이지는 **「사람」 하나에 탭**(팀원 · 가입 요청 N · 초대) — Notion 멤버(멤버 · 그룹 · 게스트 · 요청) · 채널톡 팀원 구성(팀 멤버 · 팀 · 역할) · 「로그(감사)」와 「리소스(모니터링)」는 따로(네이버웍스 감사 · 모니터링 분리).
+4. 홈 = **역할별 「처리할 일 + 바로 할 일 + 이어서 하기」** — M365 간소화 보기 위 줄(사용자 추가 · 비밀번호 재설정) · Atlassian 개요(빠른 작업 + 접근 요청 수 카드) · 토스 상점관리자 홈(요약 숫자 + 오른쪽 좁은 칸 바로가기 · 공지).
+5. 예쁘게 = **Tabler(MIT) 틀 + 토스 상점관리자 한국어 꼴** — 옅은 회색 바탕 · 흰 카드 · 1 px 테두리 · 회색 소제목으로 묶은 메뉴 · 설정 = 왼쪽 하위 메뉴 + 오른쪽 섹션 폼 · 한국어 표 · 배지 규칙은 KRDS.
+
+## ② 레퍼런스 12
+
+주소는 모두 2026-10-26 헤드리스로 열어 200 확인(관리 화면 실물은 로그인 필요 → 공식 문서 속 실제 화면 그림).
+
+| 이름 · 주소 · 그림 | 볼 것: 첫 화면 · 왼쪽 메뉴 묶음 · 세부 페이지 나눔 · 설정 나눔 · 예쁜 점 | 우리에게 가져올 점 |
+| --- | --- | --- |
+| **Microsoft 365 관리 센터** · https://learn.microsoft.com/en-us/microsoft-365/admin/admin-overview/admin-center-overview · 그림 출처 https://learn.microsoft.com/en-us/microsoft-365/admin/add-users/add-users · `C01_M365_dashboard_view` · `C01_M365_simplified_view` | 첫 화면 = 「간소화 보기 / 대시보드 보기」 전환 · 위 줄 바로 할 일(사용자 추가 · 비밀번호 재설정 · 그룹 추가) · 카드(사용자 관리 · 청구 · 교육) · 왼쪽 = 홈 · 사용자(활성 · 연락처 · 게스트 · 삭제된 사용자) · 팀 및 그룹 · 청구 · 설정 · 「메뉴 고치기 · 모두 보기」 · 관리 센터는 앱 런처의 「관리」 타일 = 관리자에게만 | 홈 위 「바로 할 일」 줄(팀원 추가 · 가입 요청 보기) · 팀원 하위 = 활성 · 대기 · 나간 사람 · 드문 메뉴는 「모두 보기」 뒤로 |
+| **Google Workspace 관리 콘솔** · https://knowledge.workspace.google.com/admin/getting-started/navigate-the-admin-console?hl=ko · https://workspaceupdates.googleblog.com/2023/07/pin-links-in-the-google-admin-console.html · `C02_Google_admin_pinned_nav` · `C02_Google_admin_submenu` | 왼쪽 = 홈 · 대시보드 · 디렉터리(사용자 · 그룹) · 기기 · 앱 · 보안 · 보고 · 결제 · 계정 · 위에 고정 5 개 · 위 검색 「사용자 · 그룹 · 설정 검색」 · **위임 관리자에게는 권한 있는 메뉴만 보임** · 홈 카드 = 사용자 카드 안에 「추가 · 삭제 · 고치기」 바로가기 링크 | 권한별 메뉴 거르기(틀은 같고 항목만 숨김) · 검색이 페이지 · 설정 이름까지 찾음 · 홈 카드 안 바로가기 링크 |
+| **Atlassian Administration** · https://support.atlassian.com/organization-administration/docs/explore-an-atlassian-organization/ · `C03_Atlassian_admin_overview` | 별도 콘솔(admin.atlassian.com) · 왼쪽 = 개요 · 디렉터리 · 앱 · 보안 · 데이터 관리 · 인사이트 · 결제 · 맨 아래 조직 설정 · 개요 = 빠른 작업(사용자 초대 · 앱 추가 · 도메인 확인) + 감시 카드(활성 사용자 · **앱 접근 요청 400** + 추세) | 홈 「가입 요청 N」 카드 · 빠른 작업 줄 · 회사 설정은 묶음 맨 아래 한 칸 |
+| **네이버웍스 Admin** · https://help.worksmobile.com/ko/admin-guides/overview/ · https://help.worksmobile.com/ko/service-introduction/start/admin/ · `C04_NaverWorks_admin_menu_tree` · `C04_NaverWorks_admin_members` · `C04_NaverWorks_admin_storage` | 사용자 화면 위 아이콘 → 「Admin」(관리자에게만) · Admin 메뉴 = 기본환경 · 구성원 관리 · 보안 관리 · 서비스 관리 · 통계 · 감사 · 모니터링 · 아카이빙 · 구매 및 청구 · 감사 · 모니터링은 2단계 인증 뒤 · 구성원 목록 + [구성원 추가] · 공용 용량 원그래프 | 한국어 메뉴 이름 꼴(명사 2~5 자) · 「감사(로그)」 · 「모니터링(리소스)」 분리 · 위험 메뉴 다시 인증 |
+| **채널톡 채널 설정** · https://docs.channel.io/help/ko/articles/0cdd2005-%EC%97%AD%ED%95%A0 · https://docs.channel.io/help/ko/articles/%EC%83%88%EB%A1%9C%EC%9A%B4-%ED%8C%80-%EB%A9%A4%EB%B2%84%EB%A5%BC-%EC%B4%88%EB%8C%80%ED%95%98%EA%B3%A0-%EC%8B%B6%EC%96%B4%EC%9A%94-dd7373c2 · `C05_Channel_settings_nav_role` · `C05_Channel_member_table_role` · `C05_Channel_role_cards` · `C05_Channel_invite_link` | 설정 왼쪽 = 일반 설정 · 구독 및 결제 · **팀원 구성(팀 멤버 · 팀 · 역할 · 봇)** · 상담 · 보안 및 개발 · 아래 사용 가이드 · 팀원 표 줄마다 역할 고르기 → 역할 수정 창(고른 역할 설명 한 줄 · 왼쪽 아래 빨강 「매니저 제거」) · 초대 = 링크 + [링크 복사] + 메일 초대 한 창 · 예쁜 점: 연보라 강조 · 둥근 모서리 · 넉넉하지만 정돈된 한국어 폼 | 「팀원」 하위 페이지 꼴 · 역할 고르는 칸 아래 설명 한 줄 · 위험 단추는 창 왼쪽 아래로 떼어 둠 · 초대 링크 + 메일 한 창 |
+| **토스페이먼츠 상점관리자** · https://www.tosspayments.com/blog/articles/29669 · `C06_Toss_merchant_home` · `C06_Toss_start_page` | 왼쪽 = 홈 · 정산내역 · 정산대행 / 「결제관리」 소제목 아래 통합결제 · 현금영수증 / 「결제 설정」 / 「계약 · 상점」(회사정보) — **작은 회색 소제목으로 묶음** · 홈 = 이달 요약 숫자 4 + 달력 + 오른쪽 좁은 칸(서비스 바로가기 · 공지사항) | 한국어 업무 화면 본보기 · 묶음 소제목 · 홈 오른쪽 좁은 칸(바로가기 · 공지 · 가이드) · 숫자 굵게 + 단위 작게 |
+| **Notion 설정 · 멤버** · https://www.notion.com/ko/help/add-members-admins-guests-and-groups · https://www.notion.com/ko/help/workspace-settings · `C07_Notion_settings_account_workspace` | 설정 창 왼쪽 두 묶음 — 「계정」(내 계정 · 내 설정 · 알림 · 연결 · 언어) / 「워크스페이스」(설정 · 멤버 · 분석 · 요금제 · 보안 · 감사 로그) = 관리자에게만 · 멤버 페이지 위 탭 = **멤버 103 · 그룹 8 · 게스트 2 · 최근 나감 · 요청** + 초대 링크 칸 + [멤버 추가] | 개인 / 회사 설정을 한 틀 두 묶음으로 · 가입 요청 = 팀원 페이지의 탭 + 수 · 탭 이름 옆 숫자 |
+| **Linear 회사 메뉴** · https://linear.app/docs/workspaces · `C08_Linear_workspace_menu` · `C08_Linear_docs_workspace` | 왼쪽 위 회사 이름 ▾ = 내 설정 · 회사 설정 · 팀원 초대 및 관리 · 회사 바꾸기 · 로그아웃 — 개인 · 회사 · 전환이 한 메뉴 | ☰ 서랍 대신 회사 이름 ▾ 하나에 모음 · 시스템 관리자 「회사 바꾸기」(지금 회사 알약) 자리 |
+| **Ant Design Pro (MIT · React → 그림만)** · https://preview.pro.ant.design/admin/sub-page · https://preview.pro.ant.design/account/settings · `C09_AntPro_admin_menu` · `C09_AntPro_account_settings` | 공개 데모 · 「Admin」 메뉴 = 라우트 권한 표시(access) — 권한 없으면 메뉴 · 페이지 모두 없음 · 계정 = 계정 센터 · 계정 설정 · 설정 페이지 = 왼쪽 탭(기본 설정 · 보안 설정 · 계정 연결 · 새 메시지 알림) + 오른쪽 폼 | 메뉴 정의 표 한 벌에 「보일 역할」 칸 → 메뉴 · 페이지 진입 모두 거름 · 기본정보 · 보안 = 내 정보 한 페이지 두 탭 |
+| **Tabler (MIT · HTML/CSS)** · https://preview.tabler.io/ · https://preview.tabler.io/settings.html · https://preview.tabler.io/users.html · `C10_Tabler_home` · `C10_Tabler_account_settings` · `C10_Tabler_users` | 홈 = 지표 카드 + 작은 그래프 · 설정 = 회색 소제목(사업 설정 / 경험) 묶은 왼쪽 하위 메뉴 + 오른쪽 섹션(제목 · 설명 한 줄 · 입력) · 사용자 = 카드 격자 + 역할 배지 · 예쁜 점: 옅은 회색 바탕 · 흰 카드 · 1 px 테두리 · 둥글기 4 · 얇은 선 아이콘 | ⑤ 본보기 1 순위 — 프레임워크 없는 HTML/CSS 라 배치 · 간격 값 그대로 참고 가능(코드 쓰면 MIT 표기) |
+| **KRDS 정부 디자인 시스템** · https://www.krds.go.kr/html/site/component/component_03_04.html · https://www.krds.go.kr/html/site/component/component_04_11.html · https://www.krds.go.kr/html/site/component/component_04_06.html · `C11_KRDS_side_nav` · `C11_KRDS_table` · `C11_KRDS_badge` | 사이드 메뉴 2~4 단계 · 펼침 ⌄ · 지금 위치 강조 · 표 = 머리 옅은 회색 · 숫자 오른쪽 · 단위 머리에 · 좁은 화면 카드 전환 · 배지 3 꼴(글자 · 테두리 · 채움 — 접수중 · 마감임박 · 모집완료) | 산림청 공무원 화면 글 크기 · 대비 · 한국어 표 · 상태 배지 규칙 · 라이센스 미확인 → 규칙만 |
+| **덧붙임: Slack 관리 대시보드 · flex 구성원 추가** · https://slack.com/intl/ko-kr/help/articles/115005594006 · https://intercom.help/flex-team-guide/ko/articles/10288255 · `C12_Slack_admin_dashboard_help` · `C12_Flex_add_member_sections` | Slack = 조직 이름 → 도구 및 설정 → 조직 설정 = 따로 열리는 관리 대시보드 · flex = 구성원 추가 긴 폼을 「선택」 섹션 켜기 · 끄기로 접음 | 시스템 관리자 「운영」 묶음은 별 화면 느낌(위 머리 색 띠) 정도로만 · 긴 폼(회사 정보)은 선택 섹션 접기 |
+
+뺀 것: 카카오워크 관리자(공개 문서 · 그림 못 찾음) · 플렉스 실화면(홈페이지 그림이 마케팅 꼴) · GitHub 설정 문서(그림 없음).
+
+## ③ 우리 대시보드 새 구조 (사이트맵)
+
+역할 넷 — 일반 = `USER` · 회사 관리자 = `ADMIN` · 산림청 = 소속 회사가 산림청(`is_forest_service` · 역할과 겹침) · 시스템 관리자 = `SYSTEM_ADMIN`.
+
+```
+위 머리 ─ [회사 로고 · 회사명 ▾] ……… [검색] [?] [알림 N] [내 이름 ▾]
+            └ 내 정보 · 팀원 초대(관리자) · 회사 바꾸기(시스템) · 로그아웃
+왼쪽 메뉴
+ 작업
+  · 홈
+  · 프로젝트          [+ 새 프로젝트]
+  · 받은 예정노선 (N)  — 지정받은 업체 · 받은 것 있을 때만
+  · 임시 보관함
+ 회사                  — 관리자 · 일반은 「회사 정보」만(읽기)
+  · 팀원 (N)           탭: 팀원 · 가입 요청 N · 초대
+  · 회사 정보
+  · 설계 기본값         구조물 조합(회사 층)
+ 시스템                — 시스템 관리자만
+  · 운영 현황
+  · 회사               목록 → 회사 상세(탭: 정보 · 팀원 · 가입 요청 · 프로젝트)
+  · 사용자             전체 사용자 · 가입 요청 전체
+  · 마스터 설정         마스터 데이터 · 구조물 조합 · 구조물 옵션 · 도면 양식 · 계산 자리
+  · 시스템 로그
+ ─────
+  · 사용자 가이드 · 내 정보
+오른쪽 아래 둥근 단추 = 지식 챗봇(모든 대시보드 페이지)
+```
+
+### 세부 페이지 · 들어갈 것
+
+| 묶음 · 페이지 | 들어갈 것 | 일반 | 회사 관리자 | 산림청 | 시스템 |
+| --- | --- | --- | --- | --- | --- |
+| 작업 · 홈 | ④ 참고 | ○ | ○ | ○ | ○ |
+| 작업 · 프로젝트 | 보기 탭(내 프로젝트 · 회사 전체 · 보관) · 종류 칩(임도설계 · 예정노선 · 안정성평가 · 사방설계) · 검색 · 표 · 줄 끝 ⋯(수정 · 삭제) · [+ 새 프로젝트] → 묶음 카드 넷 창 | ○(내 것) | ○(+회사 전체) | ○ · 예정노선 카드 켜짐 · 첫 칩 = 예정노선 | ○(회사 필터) |
+| 작업 · 받은 예정노선 | 이름 · 연도 · 확정 시각 · 연결 상태 · [보기] · [연결] | ○ 받은 때만 | ○ 받은 때만 | — | ○ |
+| 작업 · 임시 보관함 | 30 일 파일 표 · 남은 날 배지 · [+ 올리기] | ○ | ○ | ○ | ○ |
+| 회사 · 팀원 | 탭 팀원(표 · 역할 바꾸기 · 제거) · 가입 요청(승인 · 거절 · 수 배지) · 초대(검색 · 초대 메일) | — | ○ | 관리자면 ○ | (회사 상세로) |
+| 회사 · 회사 정보 | 회사명 · 사업자번호 · 대표자 · 주소 · 로고(도면 표제란) · 활성 사용자 · 프로젝트 수 | 읽기 | 고침 | 역할대로 | (회사 상세로) |
+| 회사 · 설계 기본값 | 구조물 조합 회사 층 · 권한 한 줄(마스터 읽기 · 회사 수정 · 개인 수정) | ○ | ○ | ○ | (마스터 설정으로) |
+| 시스템 · 운영 현황 | CPU · 메모리 · 디스크 · 활성 사용자 · 활성 프로젝트 · 7 일 그래프 · 넘침 경고 | — | — | — | ○ |
+| 시스템 · 회사 | 회사 표 · [+ 회사] · 로고 지정 · 회사 상세 탭(정보 · 팀원 · 가입 요청 · 프로젝트) | — | — | — | ○ |
+| 시스템 · 사용자 | 전 회사 사용자 표(회사 필터) · 추가 · 역할 변경 · 삭제 · 가입 요청 전체 | — | — | — | ○ |
+| 시스템 · 마스터 설정 | 하위 메뉴 다섯 → 지금 마스터 템플릿 화면으로 | — | — | — | ○ |
+| 시스템 · 시스템 로그 | 이메일 · 동작 · 대상 · 접속 주소 · 일시 · 기간 · 동작 · 사람 필터 | — | — | — | ○ |
+| 내 정보 | 탭 기본정보(이름 · 직급 · 부서 · 연락처 · 서명) · 보안(비밀번호) | ○ | ○ | ○ | ○ |
+
+### 지금 구역 → 새 자리 (빠짐 없음)
+
+| 지금 구역 | 새 자리 |
+| --- | --- |
+| 리소스 현황 | 시스템 · 운영 현황(홈엔 한 줄 요약) |
+| 시스템 설정 카드 다섯(시스템) | 시스템 · 마스터 설정 하위 메뉴 다섯 |
+| 시스템 설정 카드 하나(구조물 조합 · 일반 · 회사 관리자) | 회사 · 설계 기본값 |
+| 프로젝트 표 | 작업 · 프로젝트(홈엔 최근 5) |
+| 새 프로젝트(묶음 카드 넷) | 프로젝트 [+] · 홈 바로 할 일 줄 · 같은 창 그대로 |
+| 받은 예정노선 | 작업 · 받은 예정노선(메뉴 수 배지 · 홈 알림 띠) |
+| 임시 보관함 | 작업 · 임시 보관함(홈엔 「곧 지워질 파일」) |
+| 사용자 관리(시스템) | 시스템 · 사용자 |
+| 팀원 관리(회사 관리자) | 회사 · 팀원 · 팀원 탭 |
+| 가입 요청 | 회사 · 팀원 · 가입 요청 탭(시스템 = 시스템 · 사용자 안 탭) |
+| 회사 관리(시스템) | 시스템 · 회사 |
+| 회사 정보 | 회사 · 회사 정보 |
+| 회사 이름 알약(시스템 관리자 회사 고르기) | 시스템 · 회사 → 회사 상세 탭 · 위 머리 회사명 ▾ 「회사 바꾸기」 |
+| 기본정보 · 보안 | 내 정보 두 탭(위 머리 내 이름 ▾ · 메뉴 맨 아래) |
+| 시스템 로그 | 시스템 · 시스템 로그(홈엔 최근 5) |
+| 지식 챗봇 | 오른쪽 아래 둥근 단추 그대로 |
+| 사용자 가이드 [?] | 위 머리 [?] · 메뉴 맨 아래 「사용자 가이드」 |
+| ☰ 서랍(구역 바로 가기 · 다른 화면) | 왼쪽 메뉴로 대체 · 좁은 화면에서만 ☰ |
+
+## ④ 홈(첫 화면) 구성안
+
+공통 꼴 — 위 「바로 할 일」 줄(M365) · 가운데 카드 · 오른쪽 좁은 칸 280 px(토스: 바로가기 · 공지 · 가이드).
+
+| 역할 | 먼저 보이는 것(위 → 아래) |
+| --- | --- |
+| 일반 | 바로 할 일 [+ 새 프로젝트] [파일 올리기] · ① 이어서 하기 — 최근 연 프로젝트 3~4 카드(이름 · 종류 · 지금 단계 · 수정일 · [이어서]) · ② 알림 띠 — 새 받은 예정노선 N(있을 때만) · 곧 지워질 임시 파일 N · ③ 내 프로젝트 5 줄 + 「모두 보기」 |
+| 회사 관리자 | 일반 + 맨 위 「처리할 일」 카드 — 가입 요청 N · 비어 있는 회사 정보(로고 · 사업자번호) · 바로 할 일 줄에 [팀원 초대] |
+| 산림청 | 바로 할 일 첫 단추 [+ 새 예정노선] · 예정노선 상태별 수 카드(작성 중 · 확정 · 업체 지정) · 최근 예정노선 · 안정성평가 진행 중 |
+| 시스템 관리자 | 운영 한 줄(CPU · 메모리 · 디스크 · 활성 사용자 · 활성 프로젝트 — 기준 넘으면 빨강) · 처리할 일(전 회사 가입 요청 N · 디스크 경고) · 최근 시스템 로그 5 · 자기 프로젝트(있을 때만) |
+
+빈 상태:
+- 첫 로그인 = 「시작하기」 체크 카드(Atlassian · M365 꼴) — 기본정보 채우기 · 비밀번호 바꾸기 · 첫 프로젝트 만들기 · (관리자) 팀원 초대 · 회사 로고 · 다 하면 접힘.
+- 회사 없는 사용자 = 「회사 가입 요청」 안내 카드 하나.
+- 표 · 카드 빈 상태 = 회색 한 줄 대신 「무엇이 여기 오나 한 줄 + 주 단추 하나」(예: 「아직 프로젝트 없음 — [첫 프로젝트 만들기]」) · 받은 예정노선 · 알림 띠는 없으면 아예 숨김.
+
+## ⑤ 예쁘게 — 본보기 = Tabler(틀) + 토스 상점관리자(한국어 꼴)
+
+| 항목 | 제안 |
+| --- | --- |
+| 색 | 바탕 옅은 회색 · 카드 흰색 · 테두리 1 px 연회색 · 강조 한 색(주 단추 · 지금 메뉴 · 탭 밑줄만 · 색은 366 정할 거리 4) · 위험 빨강은 확인 창 · ⋯ 메뉴 안에만 |
+| 글꼴 | Pretendard(GOV) · 본문 14 · 표 14 · 페이지 제목 20 굵게 · 카드 제목 16 · 메뉴 소제목 12 회색(토스 「결제관리」 꼴) · 숫자 굵게 + 단위 작게 · 숫자 열 tabular-nums |
+| 아이콘 | Tabler Icons(MIT) 선 1.5 · 메뉴 20 px · 단추 16 px · 메뉴는 아이콘 + 글 늘 같이 |
+| 간격 | 4 의 배수 · 카드 안 20 · 카드 사이 16 · 메뉴 줄 36 · 페이지 가장자리 24 · 페이지 너비 최대 1280(설정 폼 720) |
+| 카드 | 둥글기 6 · 그림자 없이 테두리 · 머리줄 = 제목 + 오른쪽 「모두 보기 ›」 · 숫자 카드 = 큰 숫자 + 한 줄 설명 + (있으면) 추세 |
+| 표 | 줄 44 · 머리 옅은 회색 바탕 · 숫자 오른쪽 · 상태 = 배지(KRDS 3 꼴: 글자 · 테두리 · 채움) · 줄 누름 = 열기 · 줄 끝 ⋯ · 탭 이름 옆 수(「가입 요청 3」) |
+| 설정 페이지 | 왼쪽 하위 메뉴(회색 소제목 묶음) + 오른쪽 섹션(제목 · 설명 한 줄 · 입력) · [저장]은 섹션 끝 · 긴 폼은 선택 섹션 접기(flex) |
+| 한국어 글 | 메뉴 = 명사 2~5 자(팀원 · 회사 정보 · 시스템 로그) · 단추 = 짧은 동작(추가 · 저장 · 승인 · 거절) · 상태 = 대기 · 승인 · 거절 · 활성 · 동작 이름은 영문 코드(`PROJECT_CREATE`) 대신 한국어(프로젝트 만듦) |
+
+## ⑥ 정할 거리
+
+1. 관리 화면 자리 — 한 셸 안 「회사 · 시스템」 묶음(권함) / 따로 여는 관리 콘솔(Atlassian · 네이버웍스 꼴).
+2. 시스템 관리자의 회사 보기 — 시스템 · 회사 → 회사 상세 탭(권함) / 지금처럼 화면 전체를 바꾸는 회사 알약.
+3. 가입 요청 — 팀원 페이지 탭 + 수 배지(권함) / 따로 메뉴.
+4. 설계 기본값 자리 — 회사 묶음 「설계 기본값」 + 시스템 「마스터 설정」 두 곳(권함) / 한 메뉴 안 층 탭(개인 · 회사 · 마스터).
+5. 내 정보 — 페이지(권함) / Notion 꼴 설정 창(모달).
+6. 산림청 홈 — 예정노선 먼저인 홈 따로(권함) / 일반 홈 공용.
+7. 홈 오른쪽 좁은 칸(바로가기 · 공지 · 가이드) 둘지.
+8. 첫 로그인 「시작하기」 체크 카드 둘지.
+9. 위험 메뉴(사용자 삭제 · 시스템 로그) 비밀번호 다시 묻기 둘지(네이버웍스 꼴).
+10. 시스템 로그 동작 이름 한국어로 바꿀지.