topic난이도

Sidebar

신문의 사이드 기사에서 유래한 UI.

#sidebar#사이드바#네비게이션

Sidebar(사이드바)는 신문 편집 용어에서 왔다. 본문 옆에 배치된 보조 기사나 관련 정보 박스를 'sidebar'라 불렀다. 메인 기사를 방해하지 않으면서 추가 맥락을 제공하는 역할이었다. 웹에서도 본문 옆에 위치한 보조 네비게이션이나 보충 정보 영역을 Sidebar라 한다.

실제 사물UI 패턴
신문의 사이드 기사본문 옆의 보조 패널
본문을 보충하는 역할네비게이션/필터/목차 제공
항상 같은 위치에 있음고정되어 스크롤해도 따라옴

사용 가이드라인: 대시보드, 관리자 페이지, 문서 사이트에서 주로 쓴다. 왼쪽 사이드바는 네비게이션, 오른쪽 사이드바는 보조 정보(목차, 속성 패널)가 관례다. 모바일에서는 화면이 좁아 Drawer로 변환하는 반응형 전략이 필수다. 사이드바 너비는 보통 240~280px이 적당하다.