모바일 햄버거 메뉴 드로어로 반응형 네비게이션 개선

모바일 반응형 UI의 핵심인 햄버거 메뉴 드로어를 구현했다. 단순해 보이지만, 네비게이션 UX와 팀의 모바일 우선 전략에 꽤 큰 영향을 미치는 작업이었다.

왜 이 작업이 필요했나

모바일 디바이스에서 전체 네비게이션을 상단에 펼쳐놓으면 화면 공간이 금세 부족해진다. 특히 작은 스크린에서는 콘텐츠 영역을 확보하는 게 UX의 생사를 가른다. 햄버거 메뉴(≡ 아이콘)는 이런 제약을 해결하는 가장 보편적인 패턴이다. 사용자들도 이 패턴에 익숙해서 별도 학습 비용이 없다는 게 장점이다.

우리 팀은 데스크톱 기준으로 나빠지지 않으면서도 모바일에서 진정한 경험을 제공하려는 방향으로 가고 있었다. 그 과정에서 네비게이션 바가 모바일에서 과도하게 공간을 차지하고 있다는 피드백이 여러 번 올라왔다. 이번 작업은 그 피드백을 구체적으로 구현하는 첫 단계였다.

구현 관점에서의 고민

템플릿 쪽에선 햄버거 아이콘과 숨겨진 드로어 네비게이션을 마크업하고, CSS에선 모바일 breakpoint 이하에서만 드로어를 활성화하는 방식으로 처리했다. 기존 데스크톱 네비게이션과의 호환성도 신경썼다.

이때 주의했던 부분은 상태 관리의 단순성이었다. 복잡한 상태 관리 라이브러리 없이도 동작하도록, CSS의 :checked 가짜 상태나 visibility 토글로 드로어 열고 닫기를 구현하는 게 일반적이다. 물론 JavaScript로 더 정교한 UX(스크롤 잠금, 스와이프 닫기 등)를 구성할 수도 있지만, 초기 단계에선 단순함이 유지보수성을 높인다.

/* 모바일 breakpoint 이하에서만 햄버거 메뉴 표시 */
@media (max-width: 768px) {
  .nav-desktop {
    display: none;
  }
  .hamburger {
    display: block;
  }
  .drawer {
    /* 슬라이드 애니메이션 처리 */
  }
}

팀 차원에서의 의미

이 작업은 단순 UI 컴포넌트 추가보다는 모바일 우선 아키텍처로의 점진적 전환을 상징한다. 네비게이션 같은 기본 요소부터 반응형으로 설계하기 시작하면, 이후 다른 컴포넌트들도 자연스럽게 모바일을 고려한 구조를 갖추게 된다.

코드 리뷰 단계에서도 "드로어가 열려있을 때 뒤의 스크롤은 어떻게 막을 건지", "다크모드 지원은", "접근성(a11y)은 어떻게 할 건지" 같은 질문들이 나올 법하다. 이번 작업이 초석이 되어 그다음 단계의 개선사항들이 자연스럽게 도출된다.

또한 디자이너와의 협업에서도 기준점이 생긴다. 해당 breakpoint에서 어떤 UI를 보여줄지, 애니메이션 속도는 얼마나 할지 같은 디테일이 명확해진다.

다음 단계를 위한 체크리스트

실제로 이 작업을 끝내고 며칠 후, 몇 가지 개선 사항들이 자연스럽게 파이프라인에 들어갔다:

• 드로어 닫기 버튼/아이콘의 명확성
• 스크린 리더 호환성 (ARIA 속성)
• 탭 포커스 관리 (드로어가 열려있을 때)
• 네비게이션 링크 눌렀을 때 자동 드로어 닫기

작은 기능이라도 사용자 흐름 전체를 고려하면 확장할 부분들이 많다. 이건 초기 설계 단계에서 완벽하게 해결하려고 하기보단, 점진적으로 개선하는 게 효율적이라는 실경험이다.

이런 식으로 기본기에 충실하면서도 팀 프로세스와 사용자 경험을 함께 고려하는 게, 결국 유지보수가 쉬운 제품을 만드는 길이라고 생각한다.