모바일 내비게이션을 만들 때 거의 자동으로 햄버거 버튼을 놓습니다. 공간이 부족하니 감춘다는 논리이고, 목적지가 열 개를 넘는 사이트라면 합리적입니다. 다만 그 선택에는 대가가 있고, 그 대가를 알고 고르는 것과 모르고 고르는 것은 결과가 다릅니다.
햄버거가 실제로 지불하는 비용
첫째, 모든 목적지가 똑같이 보이지 않게 됩니다. 방문자가 가장 자주 가는 곳도, 거의 가지 않는 곳도 탭 한 번 뒤에 나란히 놓입니다. 중요도의 차이가 화면에서 사라집니다.
둘째, 한 단계가 늘어납니다. 열고 → 찾고 → 누르는 세 동작이 되고, 각 단계에서 사람이 빠져나갑니다. 셋째, 열린 패널이 화면을 덮으므로 그 순간 맥락이 사라집니다 — 방금 읽던 내용이 보이지 않는 상태에서 선택해야 합니다.
목적지가 넷 이하라면 감추지 않습니다
실제로 트래픽을 만드는 목적지는 대개 서넛입니다. 그렇다면 가로로 늘어놓고 넘치는 만큼만 가로 스크롤되게 하는 편이 낫습니다. 좁은 화면에서 항목이 옆으로 흐르는 필 바 형태이고, CSS 만으로 만들 수 있습니다.
한 가지 조건이 있습니다 — 오른쪽 끝의 항목이 반쯤 보이게 잘려 있어야 합니다. 딱 맞게 끝나면 사람들은 더 있다는 사실을 모릅니다. 스크롤이 가능하다는 사실을 알려 주는 것은 문구가 아니라 잘린 모양입니다.
목적지가 많다면 절충안도 있습니다. 들어가는 만큼만 보이게 두고 나머지를 “더보기” 하나로 접는 방식입니다. 상위 서넛은 언제나 한 번에 닿고, 긴 꼬리는 한 단계 뒤에 둡니다.
하단 고정 바는 한 가지 행동에만
화면 아래쪽은 엄지가 가장 닿기 쉬운 자리입니다. 그래서 가장 중요한 행동 하나를 두기에 적합합니다 — 신청 · 문의 · 구매처럼 이 화면의 목적에 해당하는 것입니다. 여기에 메뉴를 여럿 넣으면 화면만 잡아먹습니다.
구현에서 두 가지를 챙깁니다. 하단 여백에 padding-bottom: env(safe-area-inset-bottom) 을 더해 기기의 홈 인디케이터와 겹치지 않게 하고, 본문 끝이 바에 가리지 않도록 콘텐츠 아래쪽에 바 높이만큼의 여유를 둡니다.
열고 닫는 장치는 진짜 버튼이어야 합니다
토글을 <div> 로 만들면 키보드로 도달할 수 없고 보조 기술이 상태를 읽지 못합니다. <button> 을 쓰고 aria-expanded 를 열림 상태에 맞춰 갱신합니다. 스크립트를 쓰고 싶지 않다면 <details> 와 <summary> 조합이 접근성과 키보드 조작을 기본으로 갖춘 토글을 만들어 줍니다.
내비게이션 구조는 검색 유입 경로와도 직결됩니다 — 관련 정리는 SEO 아카이브에 있고, 화면 구조를 포함한 정비를 맡기려면 최적화 지원 사업에서 함께 다룹니다.
다음 회차
마지막 회차는 고정 요소입니다. position: sticky 는 실패해도 아무 말을 하지 않기 때문에, 왜 안 붙는지 알아내는 데 몇 시간이 걸리곤 합니다.