화면과 내비게이션

제품 화면을 route 단위로 나누고 사용자가 길을 잃지 않는 탐색 구조를 설계합니다.

Route 지도

화면을 추가하기 전에 사용자가 어떤 URL을 직접 열 수 있어야 하는지 먼저 정합니다. URL은 메뉴 구조의 부산물이 아니라 공유, 새로고침, 권한 판단에 쓰이는 제품 계약이므로 초기에 이름을 안정적으로 잡는 편이 좋습니다.

- 정적 route와 상세 route를 구분합니다.

- 메뉴 label과 URL 이름을 최대한 가깝게 둡니다.

- 삭제 예정 route는 redirect 계획을 함께 둡니다.

상단 navigation, 좌측 메뉴, 본문, 보조 패널은 각자 스크롤 책임이 다릅니다. 제품형 화면에서는 shell을 고정하고 내용만 바뀌게 설계하면 페이지 이동 중 시각적 흔들림이 줄어듭니다.

- 공통 shell은 shared builder로 둡니다.

- 페이지별 sidebar는 데이터로 구성합니다.

- 긴 본문은 sticky 보조 탐색을 붙입니다.

필터, 탭, 검색어처럼 사용자가 복원하고 싶은 상태는 query parameter 후보입니다. 반대로 임시 hover, modal 내부 입력 중간값, 드롭다운 열림 상태는 URL에 넣지 않는 편이 더 자연스럽습니다.

- 공유 가능한 상태만 query로 올립니다.

- 기본값은 URL을 짧게 유지합니다.

- 뒤로 가기 동작을 실제로 확인합니다.