[7/100] sidebar

7번째는 sidebar(이하 사이드바)입니다. 사이드바는 주로 대시보드 형태의 레이아웃에서 내비게이션의 기능을 담당합니다. 대시보드에서는 염두를 해야 하는 게 많은 기능으로 인해서 메뉴가 많이 들어갈 수 있어야 하고, 추후 확장성도 고려해야 하기 때문에 좌측에 세로로 메뉴가 정렬되는 사이드바가 많이 사용됩니다. 가로로 정렬되어 있는 메뉴들은 심미적으로는 좋아 보일 수 있지만, 메뉴가 많이 들어가기 힘들고, 확장성도 제한이 됩니다.

 

 

가장 기본적인 사이드바의 형태인데, 메뉴 상단에 있는 홀더에는 서비스의 로고 혹은 로그인된 사용자의 간략한 정보가 포함될수 있지만, 이런 것들은 만약 상단에 GNB가 있다면 거기에도 포함될 수 있습니다. 사이드바의 특징이 유연하고, 확장성이 좋기 때문에 서비스의 구조에 따라 형태는 천차만별이 됩니다.

 

사이드바에 들어가는 메뉴들의 형태도 다양합니다. 위의 예시에서는 간단하게 알림을 받은 갯수를 표시하는 뱃지만 되어 있지만, 만약 메뉴마다 그룹화되어 있거나 위계성을 가지는, 쉽게 말해서 폴더 같은 형태를 취한다면, 위계성을 보여주는 시각적 요소들이 포함되어야 합니다.

 

그리고 간단한 구조를 가지는 사이드바의 경우에는 축소된 버전도 있으면 사용성과 콘텐츠가 들어가는 영역의 크기가 넓어지기 때문에 고려를 하면 좋습니다. 이유는 대시보드의 경우에는 새로운 사용자보다는 특정 사용자 혹은 반복적으로 사용하는 사용자가 많기 때문에 메뉴의 라벨이 보이지 않는 게 시각적 혹은 개념적으로 혼란을 일으키는 게 적기 때문입니다.

 

마지막으로 요즘 앱 디자인에서는 예전과는 다르게 햄버거 메뉴를 거의 사용하지 않는 추세입니다. 대부분 BNB에 위치시키는 경우가 많고, 사용성을 고려하면 그게 맞다고 생각합니다. 하지만 만약에 PC 웹에서 사용하는 대시보드가 모바일 웹도 지원해야 한다면, 모바일 웹에서 보이는 사이드바를 고려해야 하기 때문에 반응형 디자인을 해야 합니다. 모바일 웹을 지원하면 사이드바의 메뉴를 BNB형태로 바꾸는 것도 좋지만, 만약 메뉴가 너무 많다면 당장은 간단하게 햄버거 메뉴를 사용하는 게 합리적이라고 생각합니다.