표지판과 빵부스러기

웹을 실제 물리적 공간에 비유해보면 내비게이션이 왜 중요한지 바로 이해돼. 낯선 건물에 들어갔을 때 표지판이 잘 되어 있으면 헤매지 않는 것처럼, 웹에서도 내비게이션이 잘 되어 있으면 사용자가 길을 잃지 않거든.

물리적 공간에서 우리가 길을 찾는 방법은 두 가지야:

• 물어보기 — "화장실 어디에요?" (웹에서는 검색)
• 표지판 따라가기 — 안내 표지판을 보고 이동 (웹에서는 내비게이션 메뉴)

웹에서 내비게이션이 하는 역할:

• "여기가 어디야?" — 현재 위치를 알려줌
• "뭐가 있어?" — 이 사이트에서 할 수 있는 것들을 보여줌
• "어떻게 사용해?" — 사이트 사용법을 알려줌
• "신뢰할 수 있어?" — 잘 만들어진 내비게이션은 사이트 전체의 신뢰감을 높임

그런데 웹에는 물리적 공간에 없는 독특한 문제가 하나 있어. 물리적 공간에서는 규모감이 있잖아. 건물이 얼마나 큰지, 몇 층인지, 내가 어디쯤에 있는지 본능적으로 감지할 수 있지. 웹에서는 이게 없어. 사이트가 페이지 10개짜리인지 10만 개짜리인지, 내가 구석에 있는지 한가운데에 있는지 알 수 없거든. 그래서 내비게이션이 이 정보를 대신 제공해야 해.

수십 년간 굳어진 웹 내비게이션 관례를 보면:

• 전역 내비게이션(Global Navigation) — 모든 페이지에서 보이는 최상위 메뉴. 보통 페이지 상단에 위치하고 사이트의 주요 섹션들을 보여줘
• 지역 내비게이션(Local Navigation) — 현재 섹션 안에서의 하위 메뉴. 현재 섹션의 세부 항목들이지
• 사이트 ID — 보통 왼쪽 상단의 로고. "이 사이트가 뭔지"를 알려줘. 건물의 간판에 해당하는 거야
• 유틸리티 — 검색, 로그인, 언어 선택 등. 사이트 구조와는 관계없지만 항상 필요한 기능들이고 보통 오른쪽 상단에 있지

이 관례들이 중요한 이유는 3장에서 말한 것과 같아 — 사용자가 이미 학습한 패턴이니까 따르면 생각할 필요가 없어지거든.

사용자는 크게 두 유형으로 나뉘어:

• 검색 우선형 — 사이트에 오면 바로 검색창부터 찾는 사람. "내가 찾는 걸 정확히 아니까 직접 검색하겠어"
• 탐색 우선형 — 메뉴를 따라가면서 찾는 사람. "뭐가 있는지 둘러보면서 찾아야지"

대부분의 사용자는 상황에 따라 둘 다 써. 뭘 찾는지 명확하면 검색, 아직 뭘 원하는지 잘 모르면 탐색이지.

검색에 대한 크룩의 조언은 단순해:

• 검색창은 눈에 잘 보이게. 찾아 헤매게 하면 안 돼
• 간단한 텍스트 입력 + 버튼 형태가 최선이야. 고급 검색 옵션은 숨겨놓고
• 검색 결과가 좋아야 해. 검색창을 만들었는데 결과가 엉망이면 검색 안 넣은 것보다 나빠

사용자가 사이트 안에서 **"나 지금 어디 있지?"**를 알 수 있어야 해. 물리적 공간의 "현재 위치" 표시(쇼핑몰 안내 지도에서 빨간 점으로 "현재 위치"를 표시하는 것)와 같은 역할이야.

가장 흔한 방법:

• 현재 메뉴를 시각적으로 강조 (다른 색, 굵은 글씨, 배경색 변경 등)
• 빵부스러기(breadcrumb)로 경로 표시

의외로 현재 위치 표시가 안 되어 있거나 약한 사이트가 많아. 크룩은 현재 위치 표시의 중요성을 과소평가하지 말라고 강조해. 사용자가 길을 잃으면 그 순간부터 모든 게 힘들어지니까.

빵부스러기는 "홈 > 카테고리 > 서브카테고리 > 현재 페이지" 형태로 현재 위치의 경로를 보여주는 내비게이션 요소야. 헨젤과 그레텔이 숲에서 길을 찾기 위해 빵부스러기를 떨어뜨린 것에서 유래한 이름이지.

크룩의 빵부스러기 원칙:

• 페이지 상단에 위치 — 맨 위에 있어야 자연스럽지
• ">"로 단계를 구분 — ">"는 계층 관계를 직관적으로 보여줘
• 현재 페이지는 굵게 — 마지막 항목(현재 위치)을 강조하고
• 작게 표시 — 빵부스러기는 보조 내비게이션이지 주연이 아니야. 너무 크면 주 내비게이션과 경쟁하거든

빵부스러기가 좋은 이유는 — 공간을 거의 안 차지하면서도, 사용자에게 **"이 페이지가 사이트 구조에서 어디에 위치하는지"**를 한눈에 보여주기 때문이야. 비용 대비 효과가 좋은 내비게이션 요소지.

크룩은 탭 내비게이션을 특별히 좋아해. 왜냐면 탭은 현실 세계에서 이미 익숙한 메타포(파일 폴더의 탭)이고, 자연스럽게 **"지금 어느 탭에 있는지"**를 보여주기 때문이야.

좋은 탭의 조건:

• 선택된 탭이 시각적으로 확실히 구분됨 (색이 다르거나, 앞으로 튀어나오거나)
• 탭이 콘텐츠 영역과 물리적으로 연결되어 보임
• 올바르게 그려진 탭은 아무 설명 없이도 동작 방식을 이해할 수 있음

탭이 잘 작동하는 이유는 물리적 세계와의 유사성 때문이야. 사람들은 진짜 폴더 탭을 수없이 사용해봤으니까, 웹에서 탭을 보면 설명 없이도 "아, 이걸 누르면 이 섹션 내용이 나오겠구나" 하고 이해하지.

크룩이 제안하는 실전 테스트 방법이 있어. 개념이 재밌는데 — 누군가 트렁크에 너를 넣고, 사이트의 임의 페이지에 내려놓았다고 상상해봐. 즉, 어떤 맥락도 없이 아무 페이지에 갑자기 떨어진 거야.

그 상태에서 다음 질문에 바로 답할 수 있으면 내비게이션이 잘 되어 있는 거야:

• 이 사이트가 뭐하는 곳이지? (사이트 ID)
• 내가 지금 어느 페이지에 있지? (페이지 이름)
• 이 사이트의 주요 섹션은 뭐가 있지? (전역 내비게이션)
• 이 섹션에서 내가 갈 수 있는 곳은? (지역 내비게이션)
• 여기가 전체 구조에서 어디쯤이지? (현재 위치 표시)
• 어떻게 검색하지? (검색)

이 중 하나라도 답이 안 나오면 내비게이션을 개선해야 해. 트렁크 테스트는 간단하지만, 내비게이션 문제를 빠르게 잡아내는 데 효과적이지.

---

정리

6장 읽고 기억할 거:

1. 내비게이션은 표지판이야. 사용자가 "여기가 어디야?", "뭐가 있어?", "어떻게 가?"에 즉시 답할 수 있어야 해
2. 검색과 탐색 모두 지원해야 해. 검색 우선 사용자와 탐색 우선 사용자가 둘 다 있거든
3. 현재 위치를 반드시 표시해야 해. 빵부스러기든 메뉴 강조든, 사용자가 길 잃은 느낌이 들면 안 돼
4. 트렁크 테스트를 해봐. 아무 페이지에 뚝 떨어졌을 때 6가지 질문에 답할 수 있으면 합격이야