사이트를 보통 크기로 열었을 때 한 줄로 정돈된 메뉴도 글자를 확대하면 두 줄 이상으로 바뀝니다. 그때 메뉴가 잘리거나 다른 버튼을 덮으면 필요한 페이지에 접근할 수 없습니다. 줄바꿈을 무조건 막기보다 확대 화면에서도 이름과 클릭 영역이 온전히 보이도록 설계해야 합니다.
대표적인 화면 폭과 브라우저 확대 단계에서 상단 메뉴를 확인합니다. 긴 메뉴 이름이 두 줄로 내려갈 때 높이가 늘어나는지, 다음 줄의 항목을 가리지 않는지 살펴봅니다. ‘더 보기’ 안으로 자동 이동하는 항목이 있다면 현재 페이지가 그 안에 있을 때 위치 표시가 어떻게 나타나는지도 확인합니다. 메뉴 일부가 화면 밖으로 사라지는 상태를 단순히 작은 글씨로 해결해서는 안 됩니다.
모바일에서는 운영체제의 글자 크기를 키운 상태도 시험합니다. 하위 메뉴가 열릴 때 목록을 아래로 스크롤할 수 있는지, 닫기 버튼은 계속 찾을 수 있는지 확인합니다. 버튼의 터치 영역이 줄바꿈한 문구와 일치해야 합니다. 글자 일부만 눌리거나 인접 항목이 잘못 선택되는 경우는 배치 문제입니다.
줄바꿈 때문에 메뉴 이름의 의미가 달라지지 않도록 너무 긴 수식어는 덜어낼 수 있습니다. 그러나 이용자가 구별하는 데 필요한 지점명이나 절차명을 생략해서는 안 됩니다. 항목 수 자체가 많다면 하위 구조를 검토하고 비슷한 질문의 메뉴를 분리하거나 통합합니다. 시각적인 균형을 맞추려고 중요한 항목을 숨기는 결정을 피합니다.
키보드 초점과 화면 읽기 이름이 줄바꿈 뒤에도 올바른 항목을 가리키는지 확인합니다. 화면을 확대하면 스크롤 방향이 달라질 수 있으므로 좌우로 움직이지 않고 핵심 메뉴에 도달할 수 있는지도 봅니다. 이미지로 만든 글자 메뉴는 확대 시 읽기 어려워질 수 있습니다.
수정 뒤 처음 온 사람에게 확대 화면으로 특정 페이지를 찾아보게 하세요. 실제로 어느 부분에서 멈췄는지 기록하면 일반 크기에서는 보이지 않던 문제를 발견할 수 있습니다. 메뉴의 줄바꿈은 보기 좋은 한 줄을 지키는 문제가 아니라 다양한 화면에서 선택의 의미와 동작을 보존하는 문제입니다.