Next.js 학습 자료

챕터 22: 네비게이션 바 만들기

서론 네비게이션 바는 웹사이트의 길잡이 역할을 합니다. 사용자가 원하는 페이지로 쉽게 이동할 수 있도록 도와주는 필수 요소입니다. 잘 설계된 네비게이션 바는 사용자 경험을 크게 향상시키고, 웹사이트의 전체적인 구조를 한눈에 보여줍니다.

이번 챕터에서는 실제 프로젝트에서 바로 사용할 수 있는 다양한 스타일의 네비게이션 바를 만들어보겠습니다. 기본적인 헤더 네비게이션부터 모바일 반응형 메뉴, 드롭다운 메뉴까지 단계별로 구현하면서 네비게이션 바 제작의 모든 것을 마스터해보겠습니다.

본론 기본 네비게이션 바 구조 먼저 가장 기본적인 네비게이션 바를 만들어봅시다:

jsx import Link from 'next/link'

export default function BasicNavbar() { return (

{/* 로고 영역 */}

🚀 MyWebsite

      {/* 메뉴 영역 */}
      <div className="flex items-center space-x-8">
        <Link href="/" className="text-gray-700 hover:text-blue-600 transition">
          홈
        </Link>
        <Link href="/about" className="text-gray-700 hover:text-blue-600 transition">
          소개
        </Link>
        <Link href="/services" className="text-gray-700 hover:text-blue-600 transition">
          서비스
        </Link>
        <Link href="/portfolio" className="text-gray-700 hover:text-blue-600 transition">
          포트폴리오
        </Link>
        <Link href="/contact" className="text-gray-700 hover:text-blue-600 transition">
          연락처
        </Link>
      </div>
      
      {/* CTA 버튼 */}
      <div>
        <Link 
          href="/get-started" 
          className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition"
        >
          시작하기
        </Link>
      </div>
    </div>
  </div>
</nav>

) } 모바일 반응형 네비게이션 모바일 기기에서도 완벽하게 작동하는 반응형 네비게이션을 만들어봅시다:

jsx 'use client'

import { useState } from 'react' import Link from 'next/link'

export default function ResponsiveNavbar() { const [isMenuOpen, setIsMenuOpen] = useState(false)

const menuItems = [ { href: '/', label: '홈' }, { href: '/about', label: '소개' }, { href: '/services', label: '서비스' }, { href: '/portfolio', label: '포트폴리오' }, { href: '/blog', label: '블로그' }, { href: '/contact', label: '연락처' } ]

return (

{/* 로고 */} 🌟 Brand

      {/* 데스크톱 메뉴 */}
      <div className="hidden md:flex items-center space-x-6">
        {menuItems.map((item) => (
          <Link
            key={item.href}
            href={item.href}
            className="text-gray-700 hover:text-blue-600 transition font-medium"
          >
            {item.label}
          </Link>
        ))}
        <Link
          href="/login"
          className="bg-blue-600 text-white px-5 py-2 rounded-lg hover:bg-blue-700 transition"
        >
          로그인
        </Link>
      </div>
      
      {/* 모바일 메뉴 버튼 */}
      <button
        onClick={() => setIsMenuOpen(!isMenuOpen)}
        className="md:hidden flex flex-col justify-center items-center"
      >
        <span className={`bg-gray-700 transition-all duration-300 ease-out h-0.5 w-6 rounded-sm ${
          isMenuOpen ? 'rotate-45 translate-y-1.5' : '-translate-y-1'
        }`} />
        <span className={`bg-gray-700 transition-all duration-300 ease-out h-0.5 w-6 rounded-sm my-1 ${
          isMenuOpen ? 'opacity-0' : 'opacity-100'
        }`} />
        <span className={`bg-gray-700 transition-all duration-300 ease-out h-0.5 w-6 rounded-sm ${
          isMenuOpen ? '-rotate-45 -translate-y-1.5' : 'translate-y-1'
        }`} />
      </button>
    </div>
    
    {/* 모바일 메뉴 */}
    <div className={`md:hidden transition-all duration-300 ease-in-out ${
      isMenuOpen ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0 overflow-hidden'
    }`}>
      <div className="py-4 space-y-2">
        {menuItems.map((item) => (
          <Link
            key={item.href}
            href={item.href}
            className="block px-4 py-3 text-gray-700 hover:bg-gray-100 hover:text-blue-600 transition rounded"
            onClick={() => setIsMenuOpen(false)}
          >
            {item.label}
          </Link>
        ))}
        <div className="px-4 pt-2">
          <Link
            href="/login"
            className="block w-full bg-blue-600 text-white text-center py-3 rounded-lg hover:bg-blue-700 transition"
            onClick={() => setIsMenuOpen(false)}
          >
            로그인
          </Link>
        </div>
      </div>
    </div>
  </div>
</nav>

) } 드롭다운 메뉴가 있는 네비게이션 서브메뉴가 포함된 더 복잡한 네비게이션을 구현해봅시다:

jsx 'use client'

import { useState } from 'react' import Link from 'next/link'

export default function DropdownNavbar() { const [activeDropdown, setActiveDropdown] = useState(null)

const navigation = [ { label: '홈', href: '/' }, { label: '제품', href: '/products', submenu: [ { label: '전자제품', href: '/products/electronics' }, { label: '의류', href: '/products/clothing' }, { label: '도서', href: '/products/books' }, { label: '가전제품', href: '/products/appliances' } ] }, { label: '서비스', href: '/services', submenu: [ { label: '웹 개발', href: '/services/web-development' }, { label: '모바일 앱', href: '/services/mobile-apps' }, { label: '디자인', href: '/services/design' }, { label: '컨설팅', href: '/services/consulting' } ] }, { label: '회사', href: '/company', submenu: [ { label: '회사 소개', href: '/company/about' }, { label: '팀 소개', href: '/company/team' }, { label: '채용', href: '/company/careers' }, { label: '뉴스', href: '/company/news' } ] }, { label: '연락처', href: '/contact' } ]

return (

{/* 로고 */} MyBrand

      {/* 네비게이션 메뉴 */}
      <div className="hidden md:flex items-center space-x-1">
        {navigation.map((item) => (
          <div
            key={item.label}
            className="relative"
            onMouseEnter={() => setActiveDropdown(item.label)}
            onMouseLeave={() => setActiveDropdown(null)}
          >
            <Link
              href={item.href}
              className="px-4 py-2 text-gray-700 hover:text-blue-600 transition flex items-center"
            >
              {item.label}
              {item.submenu && (
                <svg
                  className="w-4 h-4 ml-1"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M19 9l-7 7-7-7"
                  />
                </svg>
              )}
            </Link>
            
            {/* 드롭다운 메뉴 */}
            {item.submenu && activeDropdown === item.label && (
              <div className="absolute left-0 mt-2 w-48 bg-white rounded-lg shadow-xl py-2 z-50">
                {item.submenu.map((subItem) => (
                  <Link
                    key={subItem.href}
                    href={subItem.href}
                    className="block px-4 py-2 text-gray-700 hover:bg-gray-100 hover:text-blue-600 transition"
                  >
                    {subItem.label}
                  </Link>
                ))}
              </div>
            )}
          </div>
        ))}
      </div>
      
      {/* 액션 버튼들 */}
      <div className="hidden md:flex items-center space-x-3">
        <Link
          href="/search"
          className="p-2 text-gray-600 hover:text-blue-600 transition"
        >
          🔍
        </Link>
        <Link
          href="/cart"
          className="p-2 text-gray-600 hover:text-blue-600 transition relative"
        >
          🛒
          <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
            3
          </span>
        </Link>
        <Link
          href="/login"
          className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition"
        >
          로그인
        </Link>
      </div>
    </div>
  </div>
</nav>

) } 고정 네비게이션과 스크롤 효과 스크롤에 반응하는 동적 네비게이션을 만들어봅시다:

jsx 'use client'

import { useState, useEffect } from 'react' import Link from 'next/link'

export default function StickyNavbar() { const [scrolled, setScrolled] = useState(false) const [lastScrollY, setLastScrollY] = useState(0) const [navbarVisible, setNavbarVisible] = useState(true)

useEffect(() => { const handleScroll = () => { const currentScrollY = window.scrollY

  // 스크롤 방향 감지
  if (currentScrollY > lastScrollY && currentScrollY > 80) {
    setNavbarVisible(false) // 아래로 스크롤 시 숨김
  } else {
    setNavbarVisible(true) // 위로 스크롤 시 표시
  }
  
  // 스크롤 상태 업데이트
  setScrolled(currentScrollY > 20)
  setLastScrollY(currentScrollY)
}

window.addEventListener('scroll', handleScroll)
return () => window.removeEventListener('scroll', handleScroll)

}, [lastScrollY])

return ( <> <nav className={fixed w-full z-50 transition-all duration-300 ${ navbarVisible ? 'translate-y-0' : '-translate-y-full' } ${ scrolled ? 'bg-white shadow-lg' : 'bg-transparent' }}>

<Link href="/" className={text-2xl font-bold transition-colors ${ scrolled ? 'text-blue-600' : 'text-white' }} > ScrollNav

        <div className="flex items-center space-x-6">
          {['홈', '소개', '서비스', '포트폴리오', '연락처'].map((item) => (
            <Link
              key={item}
              href={`/${item.toLowerCase()}`}
              className={`transition-colors ${
                scrolled 
                  ? 'text-gray-700 hover:text-blue-600' 
                  : 'text-white hover:text-gray-200'
              }`}
            >
              {item}
            </Link>
          ))}
        </div>
      </div>
    </div>
  </nav>
  
  {/* 데모용 콘텐츠 */}
  <div className="pt-16">
    <div className="h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
      <h1 className="text-5xl font-bold text-white">스크롤해보세요</h1>
    </div>
    <div className="h-screen bg-gray-100 flex items-center justify-center">
      <p className="text-2xl text-gray-700">네비게이션 바가 변합니다</p>
    </div>
  </div>
</>

) } 실습: 완성도 높은 네비게이션 컴포넌트 모든 기능을 통합한 완성도 높은 네비게이션을 만들어봅시다:

jsx 'use client'

import { useState, useEffect } from 'react' import Link from 'next/link' import { usePathname } from 'next/navigation'

export default function ProfessionalNavbar() { const [isMenuOpen, setIsMenuOpen] = useState(false) const [scrolled, setScrolled] = useState(false) const [searchOpen, setSearchOpen] = useState(false) const pathname = usePathname()

useEffect(() => { const handleScroll = () => { setScrolled(window.scrollY > 10) } window.addEventListener('scroll', handleScroll) return () => window.removeEventListener('scroll', handleScroll) }, [])

const navigation = [ { name: '홈', href: '/' }, { name: '제품', href: '/products' }, { name: '서비스', href: '/services' }, { name: '블로그', href: '/blog' }, { name: '회사소개', href: '/about' }, { name: '연락처', href: '/contact' } ]

return ( <header className={sticky top-0 z-50 transition-all duration-300 ${ scrolled ? 'bg-white shadow-md' : 'bg-white/95 backdrop-blur-sm' }}>

{/* 로고 */}

NextApp

      {/* 데스크톱 메뉴 */}
      <div className="hidden lg:flex items-center space-x-8">
        {navigation.map((item) => (
          <Link
            key={item.name}
            href={item.href}
            className={`relative py-2 transition-colors ${
              pathname === item.href
                ? 'text-blue-600'
                : 'text-gray-700 hover:text-blue-600'
            }`}
          >
            {item.name}
            {pathname === item.href && (
              <span className="absolute bottom-0 left-0 w-full h-0.5 bg-blue-600"></span>
            )}
          </Link>
        ))}
      </div>
      
      {/* 액션 버튼들 */}
      <div className="flex items-center space-x-4">
        {/* 검색 */}
        <div className="relative hidden md:block">
          <button
            onClick={() => setSearchOpen(!searchOpen)}
            className="p-2 text-gray-600 hover:text-blue-600 transition"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </button>
          
          {searchOpen && (
            <div className="absolute right-0 mt-2 w-64">
              <input
                type="text"
                placeholder="검색..."
                className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500"
                autoFocus
              />
            </div>
          )}
        </div>
        
        {/* 알림 */}
        <button className="p-2 text-gray-600 hover:text-blue-600 transition relative hidden md:block">
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
              d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
          </svg>
          <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">
            2
          </span>
        </button>
        
        {/* CTA 버튼 */}
        <Link
          href="/get-started"
          className="hidden md:inline-block bg-gradient-to-r from-blue-500 to-purple-600 text-white px-5 py-2 rounded-lg hover:shadow-lg transition"
        >
          시작하기
        </Link>
        
        {/* 모바일 메뉴 토글 */}
        <button
          onClick={() => setIsMenuOpen(!isMenuOpen)}
          className="lg:hidden p-2"
        >
          <div className="w-6 h-6 flex flex-col justify-center items-center">
            <span className={`bg-gray-700 h-0.5 w-full transition-all ${
              isMenuOpen ? 'rotate-45 translate-y-1.5' : ''
            }`}></span>
            <span className={`bg-gray-700 h-0.5 w-full my-1 transition-all ${
              isMenuOpen ? 'opacity-0' : ''
            }`}></span>
            <span className={`bg-gray-700 h-0.5 w-full transition-all ${
              isMenuOpen ? '-rotate-45 -translate-y-1.5' : ''
            }`}></span>
          </div>
        </button>
      </div>
    </nav>
    
    {/* 모바일 메뉴 */}
    {isMenuOpen && (
      <div className="lg:hidden py-4 border-t">
        {navigation.map((item) => (
          <Link
            key={item.name}
            href={item.href}
            className={`block py-3 px-4 rounded transition-colors ${
              pathname === item.href
                ? 'bg-blue-50 text-blue-600'
                : 'text-gray-700 hover:bg-gray-50'
            }`}
            onClick={() => setIsMenuOpen(false)}
          >
            {item.name}
          </Link>
        ))}
        <Link
          href="/get-started"
          className="block mt-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white text-center py-3 rounded-lg"
          onClick={() => setIsMenuOpen(false)}
        >
          시작하기
        </Link>
      </div>
    )}
  </div>
</header>

) } 결론 네비게이션 바는 웹사이트의 첫인상을 결정하는 중요한 요소입니다. 이번 챕터에서 우리는 기본적인 네비게이션부터 모바일 반응형, 드롭다운 메뉴, 스크롤 효과까지 다양한 네비게이션 패턴을 구현해보았습니다.

좋은 네비게이션 바를 만들기 위한 핵심 요소들을 정리하면, 명확한 구조와 직관적인 디자인, 모바일 기기 대응, 현재 위치 표시, 부드러운 애니메이션, 그리고 접근성 고려입니다. 이 모든 요소들이 조화롭게 어우러질 때 사용자 친화적인 네비게이션이 완성됩니다.

다음 챕터에서는 네비게이션의 디자인과 UX를 더욱 개선하는 방법에 대해 알아보겠습니다. 브레드크럼, 사이드바, 탭 네비게이션 등 다양한 네비게이션 패턴을 추가로 구현해볼 예정입니다!