모바일 네비게이션 링크 오버플로우 가로스크롤로 막기

한 이커머스 플랫폼의 기본 레이아웃 컴포넌트를 다루면서 자주 마주치는 숙제가 있다. 바로 네비게이션 링크 개수가 많아질수록 모바일 화면에서 깨져 보이는 문제다. 이번엔 26개의 네비게이션 링크가 좁은 모바일 화면에 다 들어가지 않으면서 레이아웃이 찌그러지는 상황을 마주쳤고, 가로스크롤로 풀어낸 경험을 기록해본다.

네비게이션 팽창의 딜레마

처음 이 이슈를 팀에서 발견했을 땐 "26개가 맞나?" 하는 의문부터 들었다. 카테고리가 시간에 따라 늘어나는 비즈니스 특성상, 운영팀이 관리자 페이지에서 네비게이션 항목을 추가할 때마다 모바일 사용자 경험이 조금씩 악화되고 있었다. 스마트폰 화면(보통 320px~480px 너비)에서 텍스트 링크 26개를 세로 쌓거나 강제로 줄여 쓰면 어느 쪽이든 누르기 어려워진다.

일반적으로 이런 상황에서 고려할 만한 방안들이 있다:

우리 플랫폼의 경우 네비게이션 항목들이 카테고리 나열이고, 사용자가 빠르게 스캔하면서 원하는 항목을 찾는 게 흐름이었다. 계층 구조를 새로 만들 필요도 없었고, 모든 항목을 시각적으로 노출하되 모바일에서도 자연스럽게 접근할 수 있도록 설계해야 했다.

Base.astro 에서의 변경

Base.astro 는 사이트 전체 페이지의 기본 레이아웃 컴포넌트다. 헤더, 푸터, 사이드바 같은 전역 UI가 여기에 정의되어 있고, 네비게이션도 당연히 이 파일에서 관리된다. 이곳을 건드릴 땐 항상 신중했다. 작은 변경이 전체 사이트에 퍼지기 때문이다.

실제 변경은 단순했다. 모바일 뷰포트에서 네비게이션 컨테이너에 overflow-x: auto 를 주고, 자식 항목들이 flex-wrap 되지 않도록 flex-wrap: nowrap 을 설정했다. 동시에 사용자가 스크롤이 가능하다는 걸 알 수 있도록 스크롤바의 가시성이나 shadow 요소를 조정했다.

/* 의사 코드 예시 */
@media (max-width: 768px) {
  .nav-container {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; /* iOS 매끄러운 스크롤 */
  }

  .nav-item {
    flex-shrink: 0; /* 각 항목이 줄어들지 않도록 */
    white-space: nowrap;
  }
}

여기서 주의한 부분이 둘 있다. 첫째, -webkit-overflow-scrolling: touch 를 iOS에서 momentum 스크롤이 자연스럽게 느껴지도록 넣었다. 둘째, flex-shrink: 0 으로 각 네비 항목이 무리하게 찌그러지지 않도록 했다. 이전엔 강제로 축소되면서 텍스트가 뭉개지는 경험을 사용자가 했을 테니까.

영향 범위와 고민

이 변경이 Base.astro 에서 일어났다는 건, 모든 페이지에 영향을 미친다는 뜻이다. 다행히 네비게이션 자체는 모든 페이지에서 동일하게 렌더링되므로, 회귀 테스트 범위는 명확했다. 다만 데스크톱에서 이 CSS가 불필요한 스크롤을 만들지 않는지, 태블릿 화면(768px 경계)에서 어떻게 보이는지는 확인이 필요했다.

한 가지 더 고민했던 건 접근성이다. 스크린 리더 사용자는 가로스크롤 존재를 인식하지 못할 가능성이 있다. 그래서 컨테이너에 role="navigation" 과 적절한 aria-label 을 확인했고, 스크롤 가능한 요소임을 나타내는 속성들이 제대로 있는지 점검했다.

다른 관점의 접근들

사실 팀 내에서 이 이슈에 대해 여러 의견이 있었다. 한 팀원은 "26개면 정말 필요한 가요? 덜 노출하고 '더보기' 버튼은?" 이라고 제안했고, 이건 좋은 질문이었다. 운영팀과의 대화 결과, 각 카테고리는 모두 중요하고 노출 우선순위를 떨어뜨릴 수 없다는 걸 알 수 있었다. 그렇다면 숨기는 건 최후의 수단이어야 했다.

또 다른 의견은 "드롭다운으로 그룹핑하면?" 이었는데, 이건 네비게이션 구조 전체의 재설계였다. 비용 대비 효과를 고려했을 때, 현재로선 간단한 CSS 수정이 더 빠른 해결책이었다. 실제로 고객 피드백이 "링크가 안 보여요" 라는 수준이었지, "네비게이션 구조가 복잡해요" 가 아니었으니까.

회고: 모바일 우선의 실제 의미

이번 작업을 하면서 느낀 건, "모바일 우선 설계"라는 건 결국 제약 속에서 창의적으로 생각하는 연습이라는 거다. 넓은 데스크톱 화면에서 모든 걸 펼쳐 놓는 건 쉽다. 하지만 손가락으로 누를 수 있는 좁은 화면에서 26개의 선택지를 제공하려면, 각 선택지 사이의 우선순위를 정하거나, 구조를 새로 생각하거나, 상호작용 방식을 조정해야 한다.

가로스크롤 솔루션은 보수적이지만 합리적인 선택이었다. 현재 비즈니스 요구와 기술 부채를 모두 고려했을 때, 이 방식으로 충분히 버텨낼 수 있고, 나중에 더 나은 방안이 생기면 업그레이드할 여지도 남겨뒀다. 이게 바로 점진적 개선의 실제 모습이 아닐까 싶다.

🛒 이 글과 어울리는 추천 상품

• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.