탐색과 맥락

목적

Dot의 탐색은 사용자가 사람, 데이터, 배움의 관계를 화면 전환 뒤에도 이해하게 한다. Link는 단순한 링크 스타일이 아니라 이전 위치, 현재 대상, 변경 상태, 다음 배움의 방향을 끊지 않는 제품 행동이다.

사용자는 언제든 다음 질문에 답할 수 있어야 한다.

• 지금 어디에 있는가?
• 어떤 대상을 보고 있거나 편집하는가?
• 어디에서 왔고 돌아가면 무엇이 유지되는가?
• 지금까지 무엇이 바뀌었는가?
• 다음 단계는 어디인가?

탐색 수준

수준이 다른 탐색을 같은 컴포넌트에 섞지 않는다. Sidebar는 필드 section 이동을 맡지 않고, Tabs는 제품의 전체 영역을 대체하지 않는다.

위치를 표시하는 방법

• PageHeader title에는 현재 대상 또는 작업 이름을 쓴다.
• 상위 맥락이 필요하면 eyebrow, breadcrumb 또는 backAction 중 하나를 선택한다.
• 깊이가 얕고 돌아갈 목적지가 명확하면 backAction을 우선한다.
• 여러 상위 수준을 직접 이동해야 하면 breadcrumb를 사용한다.
• Sidebar는 현재 영역을 selected 상태로 표시하고 색뿐 아니라 구조와 텍스트 강조를 사용한다.
• Tabs는 같은 대상의 동등한 관점을 전환할 때 사용하며 작업 순서를 나타내는 데 쓰지 않는다.

동일한 위치를 eyebrow, breadcrumb, back button, selected sidebar로 모두 반복하지 않는다. 사용자가 길을 찾는 데 필요한 최소 신호를 선택한다.

목록에서 상세로

목록에서 상세로 이동할 때 다음 맥락을 보존한다.

• 검색어
• 필터와 정렬
• 페이지 또는 불러온 범위
• 선택한 행
• scroll 위치
• 목록의 현재 갱신 시각

상세의 backAction 레이블은 단순한 뒤로보다 커리큘럼 목록으로, 실패 알림으로처럼 돌아갈 맥락을 말한다. 브라우저 history를 사용할 수 없는 직접 진입에서도 안전한 목적지를 제공한다.

상세에서 편집으로

• 상세 제목과 대상 식별자는 편집에서도 유지한다.
• 저장 상태와 version이 중요하면 header meta에 계속 표시한다.
• 편집 완료 후 사용자가 원래 보던 상세 section으로 돌아갈 수 있게 한다.
• 여러 항목을 순차 검토할 때 이전·다음 대상과 남은 수를 보여준다.
• 미저장 변경이 있으면 이탈 전에 영향과 복구 가능성을 설명한다.

편집 화면이 별도의 제품처럼 보이도록 전체 navigation을 불필요하게 제거하지 않는다. 집중을 위해 단순화하더라도 나가는 경로와 현재 대상을 유지한다.

구조가 깊은 편집

넓은 화면에서는 outline + editor 패턴을 사용할 수 있다.

• outline은 전체 구조, 현재 선택, 완료·오류 상태를 보여준다.
• editor는 선택한 항목 하나에 집중한다.
• 항목을 바꿔도 scroll과 입력 상태를 의도에 맞게 보존한다.
• 오류가 있는 항목은 outline에서도 찾을 수 있게 한다.
• 작은 화면에서는 outline 선택 → editor 편집의 순차 흐름으로 바꾸고 돌아가기 경로를 제공한다.

중첩 scroll은 한 축에 하나만 둔다. outline과 editor가 각각 독립적으로 끝없이 스크롤되면 현재 위치 관계를 잃기 쉽다.

상태의 연속성

• 저장, 검증, 발행 상태는 관련 화면에서 같은 용어와 StatusPill tone을 사용한다.
• 화면을 이동해도 방금 수행한 행동의 결과를 확인할 수 있어야 한다.
• 데이터가 오래됐을 수 있으면 마지막 갱신 시각과 새로고침 상태를 표시한다.
• 외부 변경으로 현재 내용이 달라졌다면 조용히 덮어쓰지 않고 비교 또는 다시 불러오기 선택을 제공한다.
• 사용자가 진행 중인 AI 작업이 다른 화면에서도 계속된다면 해당 작업에 돌아가는 경로와 완료 알림을 제공한다.

깊은 링크와 공유

• 권한이 있는 사용자가 특정 대상과 필요한 관점에 직접 접근할 수 있게 한다.
• URL이나 공유 링크에 민감한 입력값, 개인 정보, 일회성 비밀을 넣지 않는다.
• 직접 진입 시에도 상위 맥락과 안전한 back 경로를 구성한다.
• 삭제되거나 권한이 없는 대상은 빈 화면이 아니라 이유와 돌아갈 경로를 제공한다.
• tab, filter, 선택 section을 URL에 반영할지는 공유·복원 가치와 민감도를 기준으로 결정한다.

Flexible, Link, Glow의 적용

• Flexible: 사용자의 권한, 작업 숙련도, 화면 크기에 따라 navigation 밀도를 조정하되 현재 위치와 나가는 경로는 유지한다.
• Link: 사람·데이터·배움·이전/다음 맥락을 화면 전환 뒤에도 보존한다. 이 문서의 최상위 판단 기준이다.
• Glow: 사용자가 다음 방향을 잃었거나 새로운 학습 고리로 넘어가는 순간에만 안내 신호로 사용한다. 현재 위치 표시에 상시 사용하지 않는다.

예외와 피해야 할 사용

• 브라우저 뒤로가기에만 의존해 제품 맥락을 복구하지 않는다.
• 뒤로, 목록처럼 목적지가 불명확한 레이블을 반복하지 않는다.
• 같은 수준의 항목이 아닌 것을 Tabs로 묶지 않는다.
• 이동처럼 보이는 행과 inline action을 같은 클릭 영역에 겹치지 않는다.
• 모달 위에 모달을 열어 탐색 깊이를 만들지 않는다.
• 모바일에서 Sidebar를 숨기고 현재 영역을 알 방법도 없애지 않는다.
• data refresh 때 선택, filter, page를 임의로 초기화하지 않는다.
• 저장되지 않은 변경을 경고 없이 버리지 않는다.
• 접근 권한이 없다는 이유만으로 아무 설명 없는 빈 화면을 보여주지 않는다.

상태와 접근성

• navigation landmark와 현재 항목의 accessible current 상태를 제공한다.
• 링크는 기본적으로 Enter로 실행되고 버튼 역할을 흉내 내지 않는다.
• focus 순서는 화면의 시각적·논리적 순서와 일치한다.
• route 변경 후 페이지 h1로 focus를 이동하거나 변경 사실을 알린다.
• focus-visible 상태는 배경색과 무관하게 식별 가능해야 한다.
• Sidebar keyboard shortcut은 제품이 명시적으로 설정한 경우에만 활성화하고 입력 중에는 가로채지 않는다.
• sheet 형태의 모바일 navigation은 열리면 focus를 내부에 제한하고 닫으면 trigger로 복귀한다.
• selected 상태는 색만이 아니라 텍스트 굵기, 배경, accessible state 중 적절한 조합을 사용한다.

검토 질문

• 사용자는 현재 위치와 대상을 제목만 보고 알 수 있는가?
• 목록으로 돌아갈 때 검색·필터·정렬·scroll이 복구되는가?
• 직접 링크로 들어와도 상위 맥락과 나가는 경로가 있는가?
• 상세와 편집 사이에 대상, 저장 상태, version이 이어지는가?
• 이전·다음 학습 또는 검토 대상으로 자연스럽게 이동할 수 있는가?
• 같은 탐색 정보를 여러 컴포넌트로 중복하지 않았는가?
• 좁은 화면에서도 현재 위치와 돌아가기 경로가 유지되는가?
• screen reader와 keyboard에서 현재 항목과 route 변경이 전달되는가?
• 자동 갱신이나 외부 변경이 사용자의 위치와 입력을 파괴하지 않는가?
• 안내 강조가 필요한 순간에만 다음 방향을 밝히고 있는가?