chore(요구): 제안 369 대시보드 새 구조 — 조사 셋(기업 · 공공 포털 · 현대 SaaS · 역할 관리 화면) · 그림 58 · 사이트맵 · 홈 시안 HTML

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-26 16:34:48 +09:00
co-authored by Claude Opus 5.5
parent 69783b58f5
commit 6080faf0cf
62 changed files with 586 additions and 0 deletions
@@ -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"}
@@ -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 꼴) 둘지.
@@ -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. 시스템 로그 동작 이름 한국어로 바꿀지.
Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 208 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 312 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 380 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 222 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 302 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 468 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 244 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 726 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 280 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 208 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 256 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 234 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 454 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 208 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 187 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 223 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 133 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 166 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 161 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 197 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 153 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 185 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

File diff suppressed because one or more lines are too long