모바일 네비 가로스크롤, 컴팩트 레이아웃으로 해결

vtuberprofile 의 모바일 네비게이션에서 링크 17개가 화면 폭에 맞지 않아 가로로 스크롤되거나 여러 줄로 늘어나던 문제를 레이아웃 최적화로 정리했다.

문제 상황: "많아진 링크, 무너진 모바일 레이아웃"

처음엔 심각해 보이지 않을 수 있는데, 17개라는 건 꽤 적지 않은 양이다. 모바일 화면(통상 320px~480px 너비)에서 네비게이션 항목이 17개나 되면:

• 가로 스크롤 유발: 모든 항목을 한 줄에 억지로 놓으려다 보니 화면을 벗어남
• 줄바꿈으로 비대화: 레이아웃이 자동으로 여러 줄로 흘러가면서 네비 영역 자체가 커짐
• 터치 타겟 축소: 항목 하나당 차지하는 폭이 줄어들어 모바일 유저 입장에선 클릭하기 어려워짐

이건 단순한 "보기 싫음"이 아니라 접근성과 UX 문제다. 모바일 사용자는 네비를 쓸 때마다 답답함을 느꼈을 것.

원인과 배경: "기능 추가의 부작용"

17개 링크가 모였단 건 보통 이런 경로를 거친다:

• 초기 기획: 3~5개 항목으로 시작
• 기능 확대: SNS, 커뮤니티, 팬사이트, 멤버십 등 이웃 서비스·채널 추가
• 운영자 요청: 새 프로젝트/이벤트/외부 링크 추가

결과적으로 "있으면 좋겠다"는 게 모이다 보니 17개가 된 거다. 이건 웹 개발에서 흔한 패턴이다. 데스크톱 화면에선 충분히 보이니까 개발 단계나 초기 검토에서 모바일 문제가 눈에 띄지 않을 수 있다.

해결 전략: "모바일 우선 사고"

Dex.astro 레이아웃 파일을 손봤다는 건, 네비게이션 영역 자체의 구조나 스타일을 개선했단 뜻이다. 일반적인 접근 방식은:

1. 드롭다운 / 아코디언 활용

항목을 카테고리별로 묶고, 모바일에선 "더보기" 버튼이나 펼침 메뉴로 숨김. 초기 표시는 5~7개 핵심 항목만.

2. 스크롤 가능한 수평 리스트

포기하고 스크롤을 허용하되, 스크롤바를 숨기고 터치 친화적으로 개선. 이 경우 처음 보이는 항목은 명확히 하되, 옆으로 드래그 가능하게.

3. 반응형 그리드 레이아웃

모바일에선 2열 또는 3열 그리드로 항목을 배치. 태블릿에선 더 많은 열, 데스크톱에선 한 줄로 펼치기.

<!-- 예시: 반응형 네비 스타일 -->
<nav class="navigation">
  {/* 모바일: grid-cols-2, 태블릿: grid-cols-4, 데스크톱: flex */}
  <ul class="nav-items md:flex md:flex-row grid grid-cols-2 gap-2">
    {navLinks.map(link => <li key={link}>{link}</li>)}
  </ul>
</nav>

레이아웃 개선의 일반 원칙

이런 류 문제를 다룰 때 배운 교훈:

팀 관점에서의 회고

이 작업은 작아 보이지만, 사실 기능 vs. 디자인의 트레이드오프 싸움을 실제로 정리한 거다. "17개 링크를 다 보여줘야 하나" 질문을 던지고, 모바일에서도 사용 가능한 상태로 만드는 게 개발 팀의 책임이다.

비슷한 상황에서:
- 새 기능 추가 요청이 들어올 땐 "이게 네비에 들어가는 건가?"부터 묻기
- 네비 항목이 늘어나는 추이를 보고, 일정 개수 도달하면 아키텍처 검토 트리거
- 모바일 대응을 "나중에"가 아닌 PR 체크리스트의 필수 항목으로 둘 것

Astro 같은 정적 생성 프레임워크에서 레이아웃 파일 하나를 손보는 게 여러 페이지에 영향을 주니까, 이 수정이 생각보다 광범위한 영향을 미쳤을 가능성도 크다. 다음 기획부터는 "화면 크기별 네비 항목 수" 설계 단계에서 명시하기.

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

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

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