[블로그 개편기 - 5] 모바일 메뉴를 줄이는 대신 다시 설계한 이유
모바일 메뉴를 처음 만들었을 때 개발, 영어, 주짓수 같은 카테고리와 글 목록, 검색을 한 줄의 같은 항목처럼 배치했다. 기능은 모두 동작했지만 화면은 중구난방으로 느껴졌다.
처음에는 간격이나 글자 크기의 문제라고 생각했다. 자세히 보니 더 근본적인 정보구조의 문제였다.
같은 메뉴처럼 보여도 역할은 다르다
카테고리는 무엇을 읽을 것인가를 고르는 Primary Navigation이다. 글 목록은 전체 콘텐츠를 훑는 Browse 기능이고, 검색은 목적이 분명한 Utility다.
이 셋을 같은 모양과 위계로 나열하면 사용자는 동일한 종류의 선택지로 받아들인다. 따라서 모바일 메뉴는 개념적으로 다음 세 그룹을 가져야 했다.
현재 모바일 메뉴. 콘텐츠 카테고리와 글 목록·검색을 간격과 구분선으로 분리했다.
- Primary: 개발, 영어, 주짓수, 프리다이빙, 증류, 일상
- Browse: 글 목록
- Utility: 검색
그룹의 의미는 제목, 간격, 구분선, 글자 굵기와 정렬에 반영해야 한다. 정보의 계층과 화면의 계층이 같아야 메뉴를 빠르게 이해할 수 있다.
모바일은 데스크톱의 축소판이 아니다
데스크톱에서 자연스러운 가로 메뉴를 좁히기만 하면 모바일에서 좋은 경험이 되지 않는다. 손가락으로 누르는 영역, 메뉴가 열리는 위치, 본문으로 돌아가는 방식이 모두 달라진다.
그래서 Mobile, Tablet, Desktop을 각각의 사용 환경으로 보았다. 대표 기기 몇 개만 보는 대신 320px부터 2560px까지 폭을 바꿔 확인했고, 특히 767px과 768px처럼 breakpoint 직전과 직후를 살폈다.
화면별 패치보다 규칙을 고치기
특정 폭에서만 어색한 여백을 발견할 때마다 media query를 추가하면 CSS는 곧 패치의 목록이 된다. 대신 spacing token, typography scale, container, grid, breakpoint 정책을 먼저 고쳤다.
Grid와 Flex도 눈으로만 확인하지 않았다. 긴 제목 때문에 열이 넓어지는지, min-width 때문에 항목이 줄지 않는지, 이미지의 원본 너비가 가로 스크롤을 만드는지 확인했다.
접근성도 같은 품질 기준에 넣었다. 메뉴의 터치 영역, 키보드 이동, focus와 active 상태, 대비, semantic HTML을 함께 봤다. 예쁜 메뉴라도 현재 위치를 알 수 없거나 누르기 어렵다면 완성된 UI가 아니다.
모바일을 별도 UX로 대하자 문제를 “작은 화면에서 어떻게 우겨 넣을까”가 아니라 “이 환경에서 무엇이 먼저 보여야 할까”로 바꿀 수 있었다.