Navigation
상단 내비게이션·사이드 내비게이션·메인 영역으로 협업 도구의 앱 셸을 구성해요.
협업 도구는 프로젝트, 보드, 이슈, 문서처럼 계층이 깊고 오래 머무는 화면이 많아요. 사용자가 지금 어디에 있는지, 어디로 갈 수 있는지를 언제나 알 수 있도록, 모든 화면이 같은 뼈대(앱 셸)를 공유해요.
앱 셸 구성
| # | 영역 | 역할 | 비고 |
|---|---|---|---|
| 1 | Banner | 앱 전체에 영향을 주는 경고 | 필요할 때만. Banner |
| 2 | Top navigation | 제품 전역 이동과 도구: 앱 전환, 검색, 만들기, 도움말, 알림, 프로필 | 높이 48px, 항상 고정. Navigation System 의 TopNav |
| 3 | Side navigation | 현재 제품 안의 이동: 내 작업, 프로젝트, 보드, 필터, 즐겨찾기 | 접기·너비 조절 가능. SideNav + Side Nav Items |
| 4 | Main | 페이지 본문. 맨 위에 Page header | 유일한 필수 영역 |
| 5 | Aside | 페이지에 딸린 보조 정보 (이슈 세부 정보, 목차) | 선택 |
| 6 | Panel | 앱 전역 보조 패널 (도움말, AI 어시스턴트, 알림) | 선택, 오른쪽에서 열림 |
아래는 Navigation System 과 Side Nav Items 로 만든 앱 셸이에요.
Top navigation
- 왼쪽부터 앱 전환 → 제품 이름 → 검색 → 만들기(primary) 순서로, 오른쪽 끝에 알림·도움말·설정·프로필을 둬요.
- "만들기" 는 상단에서 유일한 primary 버튼이에요. 어디서든 이슈나 페이지를 바로 만들 수 있게 해요.
- 검색은 가운데 가장 넓게 두고, 화면이 좁아지면 아이콘 버튼으로 줄여요.
- 오른쪽 아이콘 버튼에는 Tooltip 과
label을 꼭 줘요.
Side navigation
- 항목은 현재 위치를 선택 상태(
bg-ds-background-selected,text-ds-text-selected)로 표시해요. 한 번에 하나만 선택돼요. - 관련 항목은 섹션으로 묶고 소제목을 붙여요. (예: "추천", "프로젝트", "필터")
- 깊이는 두 단계까지만 펼쳐요. 더 깊은 계층은 Main 의 Breadcrumbs 나 Tabs 로 옮겨요.
- 사용자가 접거나(상단 왼쪽 토글,
Ctrl+[) 너비를 조절할 수 있고, 그 상태는 다음 방문에도 유지해요. 접힌 상태에서 토글에 마우스를 올리면 잠깐 떠서 보여줘요. - 화면이 좁아지면 자동으로 접히고, 열면 Main 위에 겹쳐서 떠요.
- 프로젝트처럼 하위 공간이 있는 항목은
ExpandableMenuItem으로 제자리에서 펼치고, 최근 항목·즐겨찾기처럼 긴 목록은FlyoutMenuItem으로 옆에 띄워요. - 항목에 마우스를 올리면 나타나는 "만들기"·"더 보기" 버튼은
actionsOnHover슬롯에 넣고, 메뉴는 Dropdown menu 로 만들어요.
Main
페이지 맨 위에는 Page header 를 두고, 그 안에 위치(Breadcrumbs) → 제목 → 액션 → 필터 바 순서로 쌓아요.
- Breadcrumbs: 상위 계층으로 돌아가는 길. 현재 페이지는 넣지 않아요. 제목이 그 역할을 해요.
- Tabs: 같은 대상의 다른 보기(요약·보드·목록·타임라인)를 오갈 때.
- Pagination: 많은 결과를 페이지로 나눌 때. 무한 스크롤보다 위치를 기억하기 쉬워요. Pagination
어떤 이동 컴포넌트를 쓸까
| 상황 | 컴포넌트 |
|---|---|
| 제품 안의 주요 공간 사이 이동 | Side Nav Items (사이드 내비) |
| 상위 계층으로 돌아가기 | Breadcrumbs |
| 같은 대상의 다른 보기 | Tabs |
| 긴 목록의 다음 묶음 | Pagination |
| 여러 단계로 된 작업의 진행 위치 | Progress tracker |
| 버튼에서 펼치는 이동·액션 목록 | Dropdown menu, Menu |
| 현재 화면을 떠나지 않는 상세 보기 | Drawer, Modal dialog |
원칙
Do· 위치를 분명하게
사이드 내비게이션의 선택 상태, Breadcrumbs, 페이지 제목이 같은 위치를 가리키게 해요.
Don't· 같은 링크 여러 곳에
같은 목적지를 상단·사이드·본문에 모두 두면 무엇이 주 경로인지 헷갈려요.
- 앱 셸은 페이지가 바뀌어도 움직이지 않아요. Main 만 바뀌어요.
- 키보드 사용자를 위해 셸 맨 앞에 "본문으로 건너뛰기" 링크를 두고, 각 영역에
<header>,<nav aria-label>,<main>,<aside>랜드마크를 써요. - 링크는
<a>로, 같은 화면 안의 동작은<button>으로 만들어요. 새 탭 열기와 주소 복사가 그대로 동작해야 해요.