내비게이션

화면이 열 개를 넘어가는 순간부터 같은 문제가 반복됩니다. 만든 사람 머릿속에는 어느 화면이 어디에 붙어 있는지가 전부 들어 있지만, 처음 들어온 사람에게는 눈앞의 한 화면이 전부입니다. 지금 어디에 있는지, 여기 말고 무엇이 더 있는지, 방금 있던 자리로 어떻게 돌아가는지가 화면 위에 적혀 있지 않으면 알아낼 방법이 없습니다.

초기 페이지덱이 그랬습니다. 처음 문을 열었을 때 화면은 여섯 개였고, 상단에 링크 여섯 개를 나란히 놓는 것으로 충분했습니다. 문제는 그다음이었습니다. 태오가 기능을 하나 붙일 때마다 상단에 링크가 하나씩 늘었고, 1년 뒤에는 열아홉 개가 한 줄에 눌려 있었습니다. 줄이 넘쳐서 글자 크기를 줄였고, 그래도 넘쳐서 덜 쓰는 것부터 뒤로 밀었습니다. 무엇을 뒤로 미룰지는 그 주에 누가 목소리를 크게 냈느냐로 정해졌습니다.

그 결과는 수아에게 먼저 왔습니다. 고객사 교육을 나가면 매번 같은 질문을 받았습니다. 문서를 공유 상태로 바꾸는 설정이 어디 있느냐는 질문이었는데, 그 설정은 상단 열아홉 개 중 열두 번째 링크 안에 들어 있었습니다. 기능이 없어서 못 쓰는 게 아니라 있는 자리를 몰라서 못 쓰는 상태였고, 같은 문의가 한 달에 서른 건씩 쌓였습니다.

내비게이션은 이 문제를 화면마다 따로 풀지 않겠다는 약속입니다. 새 기능이 생길 때마다 링크를 어디 붙일지 그때그때 정하는 대신, 제품 전체가 몇 개의 묶음으로 나뉘고 각 묶음이 화면 어디에 어떤 모양으로 놓이는지를 먼저 정해 둡니다. 그 뒤에 들어오는 기능은 이미 있는 자리 중 하나를 찾아 들어갑니다. 놓을 자리가 없다면 자리가 부족한 게 아니라 그 기능이 제품의 어느 갈래에 속하는지가 아직 안 정해졌다는 신호입니다.

바로 위에 놓인 정보 구조와는 역할이 갈립니다. 정보 구조는 내용을 어떤 묶음으로 나누고 각 묶음을 뭐라고 부를지 정하는 뼈대이고, 내비게이션은 그 뼈대를 화면 위에 드러내 실제로 손가락으로 옮겨 다닐 수 있게 만드는 부분입니다. 뼈대가 틀리면 아무리 매끈한 메뉴를 얹어도 사람들이 헤매고, 뼈대가 맞아도 메뉴로 드러나지 않으면 없는 것과 같습니다.

내비게이션 아래 묶인 말은 두 갈래로 나뉩니다. 어디까지를 책임지느냐가 범위이고, 화면에 어떤 모양으로 놓이느냐가 형태입니다. 범위는 제품을 어떻게 나눴는지에서 나오고, 형태는 그 나눔을 화면 크기와 상황에 맞춰 어떻게 그릴지에서 나옵니다.

범위는 이 메뉴가 어느 화면까지 따라다니는지로 갈립니다. 세 자리가 있습니다.

1. 글로벌 내비게이션 — 어느 화면에 있든 똑같이 보이는 최상위 메뉴입니다. 페이지덱이라면 문서·팀·템플릿처럼 제품을 이루는 큰 갈래가 여기 놓입니다. 항목이 늘 보이므로 자리가 가장 비싸고, 그래서 대개 다섯에서 일곱 개 안쪽으로 유지합니다.
2. 로컬 내비게이션 — 특정 영역에 들어갔을 때만 나타나는 하위 메뉴입니다. 팀 화면에 들어가야 구성원·권한·요금제 같은 항목이 보이는 식입니다. 그 영역에 안 들어간 사람에게는 아예 안 보이므로 항목을 늘려도 부담이 적습니다. 대신 그 영역 밖에 있는 사람은 그런 기능이 있다는 것조차 모르므로, 처음 쓰는 사람이 꼭 거쳐야 하는 것은 이쪽에 두지 않습니다.
3. 유틸리티 내비게이션 — 제품의 갈래가 아니라 계정과 설정처럼 옆에서 거드는 기능을 모은 메뉴입니다. 자주 쓰지는 않지만 필요한 순간에는 반드시 찾아야 하는 것들이라, 화면 오른쪽 위 같은 구석 자리에 늘 같은 모습으로 둡니다. 페이지덱에서는 오른쪽 위 계정 사진을 누르면 프로필과 알림 설정과 로그아웃이 늘 같은 순서로 열립니다. 이 순서를 한 번 바꾸면 눈으로 확인하지 않고 누르던 사람이 가장 먼저 헤맵니다.

셋의 관계는 지도의 축척과 비슷합니다. 글로벌은 전국 지도, 로컬은 그 안의 도시 지도, 유틸리티는 어느 지도에나 붙어 있는 범례입니다.

형태는 같은 범위를 화면 위에 어떤 모양으로 그리느냐입니다. 다섯 가지가 자주 쓰입니다.

1. 빵부스러기 — 현재 위치를 상위 경로와 함께 한 줄로 늘어놓는 표시입니다. 문서 › 팀 문서 › 2026 계획 처럼 적어 두면 지금 어디에 있는지와 한 단계 위로 어떻게 올라가는지가 한꺼번에 해결됩니다. 깊이가 세 단계를 넘는 제품에서 값이 큽니다. 두 단계뿐인 제품에 붙이면 한 줄을 차지하고도 새로 알려 주는 것이 없습니다.
2. 탭 바 — 모바일 화면 아래쪽에 주요 갈래를 서너 칸으로 늘어놓는 방식입니다. 엄지가 닿는 자리라 이동이 빠르지만 칸이 다섯을 넘으면 글자가 뭉개져서, 무엇을 넣을지보다 무엇을 뺄지가 어려운 결정이 됩니다.
3. 사이드바 — 화면 옆을 세로로 길게 쓰는 방식입니다. 세로는 가로보다 늘릴 여유가 커서 항목이 스무 개여도 담기고, 접었다 펴는 모양으로 계층까지 같이 보여 줄 수 있습니다. 문서 툴과 관리 화면이 주로 이 모양입니다. 다만 세로로 길어질수록 아래쪽 항목은 스크롤을 내려야 보이고, 거기까지 밀린 항목은 접어 둔 메뉴와 사정이 비슷해집니다.
4. 햄버거 메뉴 — 줄 세 개짜리 아이콘 뒤에 메뉴 전체를 접어 두는 방식입니다. 화면을 가장 적게 먹지만 접힌 것은 보이지 않고, 보이지 않는 것은 잘 쓰이지 않습니다. 좁은 화면에서 달리 방법이 없을 때 고르는 선택지에 가깝습니다.
5. 메가 메뉴 — 항목 하나에 마우스를 올리면 그 아래 딸린 것들을 한 판에 펼쳐 보여 주는 대형 메뉴입니다. 상품 종류가 수백 개인 쇼핑몰처럼 갈래가 넓고 얕은 제품에서 씁니다. 한 번에 다 보여 주는 대신 화면의 절반 이상을 덮습니다. 반대로 갈래가 좁고 깊은 제품에 이 모양을 쓰면 펼쳐진 판의 절반이 빈칸으로 남습니다.

범위와 형태는 따로 고르는 메뉴가 아니라 짝을 이룹니다. 같은 글로벌 내비게이션이라도 데스크톱에서는 사이드바로, 모바일에서는 탭 바로 놓입니다. 화면이 좁아졌다고 항목을 빼는 게 아니라 같은 항목을 다른 모양으로 옮겨 그리는 것이고, 이때 어느 항목이 탭 바 다섯 칸에 들어가고 어느 항목이 햄버거 뒤로 가는지가 그 제품이 무엇을 중요하게 여기는지를 그대로 드러냅니다.

"이건 글로벌에 올릴 게 아니라 로컬로 내리는 게 맞습니다. 팀 화면 안에서만 쓰는 기능이라서요."

모든 화면에 따라다닐 만큼 자주 쓰는 기능이 아니니 해당 영역 안에서만 보이게 하자는 제안입니다. 내리면 그 기능을 실제로 쓰는 사람에게는 오히려 가까워집니다.

"탭 바가 다섯 칸인데 여섯 번째를 넣자는 거라, 지금 있는 것 중 하나는 빼야 합니다."

자리 수가 정해진 곳에서는 무엇을 넣을지가 곧 무엇을 뺄지와 같은 질문이라는 뜻입니다. 여섯 번째를 넣겠다면 그 항목이 지금 있는 다섯 중 하나보다 자주 쓰인다는 근거가 있어야 합니다.

"햄버거 안으로 넣으면 지표가 떨어질 겁니다. 지난번에 검색을 접었을 때 사용률이 절반이 됐어요."

접힌 메뉴 뒤로 보내면 기능이 없어진 것처럼 취급된다는 경고이고, 근거로 같은 제품에서 이미 겪은 수치를 대고 있습니다.

페이지덱이 문서 템플릿 기능을 새로 냈을 때 이 대화가 사흘 동안 이어졌습니다. 지현은 새로 가입한 사람이 첫 문서를 만드는 데 걸리는 시간을 줄이려고 템플릿을 상단 최상위에 올리자고 했고, 민서는 상단이 이미 다섯 칸이라 하나를 빼야 한다고 답했습니다. 뺄 후보로 나온 것이 검색이었는데, 현우가 검색을 써 본 사람의 다음 주 재방문율이 안 써 본 사람의 두 배라는 숫자를 들고 오면서 그 안은 접혔습니다.

결론은 자리를 바꾸는 쪽이었습니다. 템플릿은 글로벌이 아니라 문서 목록 화면의 로컬 메뉴 첫 줄로 들어갔고, 대신 가입한 지 2주가 안 된 계정에만 상단에 작은 표시를 붙였습니다. 태오가 한 주 뒤 수치를 뽑아 보니 템플릿을 연 비율은 목표에 못 미쳤지만 검색 사용률은 그대로였습니다. 지현은 이 결과를 두고 상단 자리를 늘리는 대신 로컬 메뉴 안에서 순서를 다시 보자고 정리했습니다.

메뉴를 많이 보여 줄수록 친절하다고 여기는 경우가 가장 흔합니다. 찾는 것이 화면에 이미 나와 있으면 한 번만 누르면 되니 그렇게 생각하기 쉽습니다. 실제로는 선택지가 늘어날수록 하나를 고르는 데 드는 시간이 같이 늘고, 어느 선을 넘으면 사람들은 고르는 대신 읽기를 그만둡니다. 상단에 열아홉 개가 늘어서 있던 시절의 페이지덱에서 실제로 눌린 것은 네 개였고, 나머지 열다섯 개는 한 달 동안 클릭 수가 두 자리를 넘지 못했습니다. 이대로 두면 잘 안 쓰이는 항목이 자주 쓰이는 항목의 자리까지 갉아먹습니다. 메뉴는 창고가 아니라 진열대에 가깝고, 진열대에 전부 올려 두면 아무것도 눈에 띄지 않습니다. 항목이 정말 많은 제품이라면 메뉴를 늘리는 대신 검색 UX를 손보는 쪽이 낫습니다. 검색어를 넣고 결과를 확인하기까지의 경험을 다루는 갈래인데, 찾는 것의 이름을 아는 사람에게는 메뉴 열 칸보다 입력창 하나가 빠릅니다.

내비게이션을 디자인의 마지막 단계에서 얹는 장식으로 여기는 것도 흔합니다. 눈에 보이는 메뉴 모양이 결과물의 전부처럼 보이기 때문입니다. 그러나 메뉴에 적히는 이름과 묶음은 그 앞 단계에서 이미 정해진 것이고, 그 이름은 화면 밖에서도 일합니다. 주소 줄에 그대로 들어가고, 검색 결과에 제목으로 뜨고, 고객 문의에 그대로 인용됩니다. 팀 문서라고 부르던 묶음을 워크스페이스로 바꾸면 메뉴 글자만 바뀌는 게 아니라 도움말 문서와 교육 자료와 고객이 쓰던 말까지 한꺼번에 어긋납니다. 그래서 이 일은 화면을 그리기 전에 무엇을 몇 갈래로 나눌지부터 정하고 들어갑니다. 급하다고 화면부터 그리면 나중에 이름을 고치는 값이 화면을 고치는 값보다 커집니다.