A02 · 화면설계도 · OnBridge
상단바(브랜드·계정)와 메뉴바(풀다운) 두 단으로 나눈 내비게이션 구조와, A02 페이지 계획의 화면 8종을 실제로 동작하는 목업으로 옮긴 설계도입니다. 메뉴를 눌러 화면을 전환해 볼 수 있고, 오른쪽 주석판에 해당 화면의 명세가 따라옵니다.
메뉴바의 각 항목에 마우스를 올리거나 클릭하면 풀다운이 열립니다. 하위 항목을 고르면 아래 뷰포트가 해당 화면으로 바뀌고, 상단바의 경로 표시와 좌측 트리도 함께 따라갑니다.
상단바는 사람(누구로 로그인했고 어떻게 나가는가)을, 메뉴바는 일(무엇을 하러 왔는가)을 담당합니다. 두 축을 섞지 않는 것이 이 구조의 핵심입니다.
| 메뉴 | 하위 항목 | 라우트 | 권한 | 비고 |
|---|---|---|---|---|
| 🏠 홈 | 대시보드 | / | user | 로그인 직후 도착지 |
| 로그인 화면 | /login | 비인증 | 설계도에서만 노출. 실제 메뉴에는 없음 | |
| 📋 업무 | Item 목록 | /items | item:read | 도메인 화면의 원형 |
| Item 상세 | /items/:id | item:read | 메뉴가 아니라 목록에서 진입 | |
| Item 등록·수정 | /items/new | item:write | 등록·수정 같은 컴포넌트 | |
| 활동 로그 | /audit | audit:read | manager 이상 | |
| 🛡️ 관리 | 사용자 관리 | /users | user:manage | admin이 아니면 메뉴 자체를 숨김 |
| 시스템 설정 | /settings/system | system:manage | ||
| 🙋 내 설정 | 내 프로필 | /settings/profile | user | 상단바 계정 메뉴와 동일 목적지 |
| 비밀번호 변경 | /settings/password | user | 성공 시 타 세션 만료 | |
| ❓ 도움말 | 사용 안내 | /help | 전체 | 미구현 — P2 |
풀다운은 보기보다 잘못 만들기 쉽습니다. 아래 여섯 가지는 구현 시 반드시 지켜야 하는 항목입니다.
포인터 장치에서는 hover로 열어 탐색을 빠르게 하고, 클릭하면 열린 상태로 고정합니다. 터치 장치에서는 첫 탭이 열기, 두 번째 탭이 이동입니다.
열려 있는 동안 다른 메뉴로 마우스를 옮기면 그 메뉴가 바로 열립니다 — 매번 다시 클릭하게 만들지 않습니다.
바깥 클릭 · Esc · 포인터 이탈. 셋 중 하나만 빠져도 메뉴가 화면에 눌어붙습니다.
포인터 이탈에는 약 150ms 지연을 둡니다. 메뉴 버튼과 목록 사이의 1px 틈에서 즉시 닫히면 조작이 불가능해집니다.
비활성(회색 처리)이 아니라 제거합니다. 있는데 못 누르는 메뉴는 "왜 안 되냐"는 문의를 만듭니다.
단, 이는 편의일 뿐 보안 장치가 아닙니다. 권한은 서버에서 강제하고, 직접 URL 접근은 /403으로 보냅니다.
Tab으로 메뉴 이동, Enter/Space로 열기, ↑↓로 항목 이동, Esc로 닫고 버튼에 포커스 복귀.
aria-haspopup·aria-expanded를 실제 상태와 동기화합니다.
메뉴 항목의 앰버 점, 상단바의 경로 표시, 본문의 브레드크럼. 셋이 항상 같은 것을 가리켜야 합니다.
좌측 트리의 활성 항목도 함께 갱신됩니다.
메뉴 → 하위 항목. 3단 중첩 풀다운은 만들지 않습니다. 더 깊은 구조가 필요하면 좌측 트리로 내립니다.
한 풀다운의 항목은 7개 이하로 유지하고, 넘으면 구분선과 소제목으로 묶습니다.
메뉴 노출과 서버 권한이 같은 표를 근거로 삼습니다. 화면이 늘어날 때 이 표에 행을 먼저 추가하세요.
| 화면 | 권한 코드 | admin | manager | member | viewer |
|---|---|---|---|---|---|
| 대시보드 | user | ● | ● | ● | ● |
| Item 목록 · 상세 | item:read | ● | ● | ● | ● |
| Item 등록 | item:write | ● | ● | ● | ○ |
| Item 수정 | item:write | ● | ● | 본인만 | ○ |
| Item 삭제 | item:delete | ● | ● | ○ | ○ |
| 활동 로그 | audit:read | ● | ● | ○ | ○ |
| 사용자 관리 | user:manage | ● | ○ | ○ | ○ |
| 시스템 설정 | system:manage | ● | ○ | ○ | ○ |
| 내 프로필 · 비밀번호 | user | ● | ● | ● | ● |
자기 자신의 역할은 낮출 수 없고, 마지막 admin은 비활성화할 수 없습니다. 서버에서 막고, UI에서는 해당 항목을 비활성 처리한 뒤 이유를 말풍선으로 설명합니다.
물리 삭제 대신 deleted_at 소프트 삭제가 기본입니다. 보관 기간(기본 90일)이 지나면 야간 작업으로 정리합니다.
파괴적 확인 모달은 이름을 직접 입력해야 확정됩니다.
이 설계도를 확정하려면 아래가 먼저 정해져야 합니다.
Item의 실제 도메인설계도 전체에서 Item은 자리표시자입니다. 도메인이 정해지면 라우트·화면명·권한 코드 세 곳을 일괄 치환합니다. (A01 O-1과 연동)
현재 카드는 자리만 잡은 상태입니다. 실제로 매일 봐야 하는 숫자가 무엇인지 정해야 합니다.
상세 화면에 "첨부" 탭을 잠정 배치했습니다. 필요하다면 저장소·용량 제한·바이러스 검사 설계가 추가됩니다.
현재는 한국어 단일 가정입니다. 다국어가 필요하면 메뉴 라벨 길이가 2배까지 늘어날 수 있어 메뉴바 레이아웃을 다시 봐야 합니다.
시스템 설정 화면에 5회/15분을 잠정 표기했습니다. 확정 후 A05 데이터 모델에 반영합니다.
현재는 청사진 팔레트(심해 네이비 + 청사진 블루 + 앰버)입니다. 참고하신 AI Gate의 보라·마젠타 계열을 그대로 쓸지 결정이 필요합니다.