사이드바

메뉴는 오래 화면 위쪽 가로줄이었고, 항목이 다섯 개쯤일 때는 잘 돌아갑니다. 페이지덱도 처음에는 상단에 문서·팀·템플릿·검색·설정 다섯 칸이었습니다.

기능이 늘면서 가로줄이 버티지 못했습니다. 항목이 열두 개가 되자 글자가 뭉개지거나 두 줄로 접혔고, 두 줄이 되면 어느 항목이 같은 층인지 알 수 없습니다. 더 큰 문제는 계층이었습니다. 팀 아래 폴더가 있고 그 아래 문서가 있는 구조를 가로줄로는 표현할 방법이 없어서, 사용자가 폴더를 열 때마다 화면이 통째로 바뀌었습니다.

세로 방향은 가로보다 늘릴 여유가 큽니다. 그 여유를 쓰기로 하고 메뉴를 옆으로 세운 것이 이 형태입니다.

화면 왼쪽을 세로로 길게 떼어 두고 그 안에 이동할 곳을 늘어놓습니다. 폭은 240~280픽셀로 고정하고 남은 폭을 본문이 씁니다. 폭을 고정하는 이유는 화면을 옮겨 다녀도 메뉴 위치가 그대로여야 하기 때문입니다.

세로를 쓰면서 생기는 것이 둘입니다.

1. 항목 수에 여유가 생겨 스무 개를 담아도 글자가 뭉개지지 않습니다.
2. 계층을 들여쓰기로 보여 줄 수 있습니다. 팀 항목을 누르면 그 아래 폴더가 한 칸 들여쓴 채 펼쳐지고, 다시 누르면 접힙니다. 지금 보고 있는 문서가 어느 폴더 아래 있는지가 화면에서 그대로 보입니다.

안에서는 대개 세 덩어리로 나눕니다. 위쪽에 제품의 큰 갈래, 가운데에 사용자가 만든 것, 아래쪽에 계정과 설정을 둡니다.

빠뜨리면 안 되는 것이 현재 위치 표시입니다. 지금 보고 있는 화면의 항목을 눈에 띄게 남겨 두지 않으면 사이드바는 이동 장치가 아니라 목록이 됩니다.

세로가 길어지면 아래쪽 항목은 스크롤을 내려야 보입니다. 밀린 항목은 접어 둔 메뉴와 사정이 비슷하므로, 처음 쓰는 사람이 꼭 거쳐야 하는 것은 스크롤 없이 보이는 자리에 둡니다. 화면이 좁아지면 아이콘만 남기고 접거나 완전히 숨기는데, 완전히 숨기면 줄 세 개 아이콘 뒤에 메뉴를 넣는 햄버거 메뉴와 같아집니다.

"항목이 열둘인데 상단 가로줄로는 안 됩니다. 사이드바로 옮기죠."

가로 공간이 모자라 세로 형태로 바꾸자는 제안입니다.

"지금 어느 문서를 보고 있는지 사이드바에서 안 보여요."

현재 위치 표시가 빠졌다는 지적입니다.

"모바일에서는 접읍시다. 대신 탭 바에 네 개만 올리고요."

좁은 화면에서는 같은 항목을 다른 형태로 옮겨 그린다는 뜻입니다.

페이지덱은 데스크톱에서 사이드바를, 휴대폰에서는 화면 아래 탭 바를 씁니다. 민서가 이 짝을 정할 때 가장 오래 붙잡는 일은 항목을 빼는 결정입니다. 사이드바에 스무 개가 들어 있어도 탭 바에는 네 개만 올라가므로, 나머지 열여섯 개가 어디로 가는지를 항목마다 정해야 합니다.