React로 구현하는 모던 스크롤 내비게이션 바 - 실무에서 바로 쓰는 고급 애니메이션 효과

안녕하세요! 오늘은 스크롤 위치에 따라 자연스럽게 변화하는 고급스러운 내비게이션 바를 만들어보겠습니다

스크롤 전 결과

.

구현된 내비게이션 바의 주요 특징

 

1. 스크롤 위치에 따른 배경색 변화
2. 부드러운 높이 조절 애니메이션
3. 반응형 디자인 (모바일/데스크톱)
4. 동적 색상 변화 시스템
5. 모바일 메뉴 애니메이션

주요 구현 포인트 설명

1. 스크롤 감지 로직

useEffect(() => {
  const handleScroll = () => {
    const scrollPosition = window.scrollY;
    setIsScrolled(scrollPosition > 50);
  };

  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

 

스크롤 이벤트를 감지하여 상태를 관리하는 부분입니다. 50px 이상 스크롤되면 내비게이션 바의 스타일이 변경됩니다.

2. 반응형 디자인 구현

<div className="hidden md:flex items-center space-x-8">
  {/* 데스크톱 메뉴 아이템 */}
</div>

<div className="md:hidden">
  {/* 모바일 메뉴 아이템 */}
</div>

Tailwind CSS의 반응형 클래스를 활용하여 화면 크기에 따라 적절한 메뉴를 표시합니다.

3. 애니메이션 효과

<nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
  isScrolled 
    ? 'bg-white shadow-lg py-2' 
    : 'bg-transparent py-4'
}`}>

transition-all과 duration-300을 사용하여 모든 변화에 부드러운 애니메이션을 적용했습니다.

실무 적용 시 주의사항

성능 최적화
  - 스크롤 이벤트에 디바운스 적용
  - 검토 불필요한 리렌더링 방지
  - will-change 속성 활용 고려

접근성 고려사항
  - 키보드 네비게이션 지원
  - ARIA 레이블 추가
  - 충분한 색상 대비 확보

브라우저 호환성
  - iOS Safari의 고정 헤더 이슈 대응
  - 다양한 브라우저 테스트 필요

성능 최적화 팁

1. 스크롤 이벤트 최적화

const debounce = (func, wait) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
};

const handleScroll = debounce(() => {
  // 스크롤 처리 로직
}, 100);

2. 리렌더링 최적화

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

스크롤 시 이미지

마무리

지금까지 스크롤에 반응하는 모던한 내비게이션 바를 만들어보았습니다. 이러한 인터랙티브한 요소들은 사용자 경험을 한층 더 향상시키는 중요한 요소가 됩니다. 더 나아가 이 컴포넌트를 기반으로 다양한 변형과 확장이 가능합니다. 프로젝트의 특성에 맞게 수정하여 활용해보세요. 다음 포스팅에서는 더 다양한 인터랙티브 컴포넌트들을 다뤄보도록 하겠습니다. 궁금하신 점이 있다면 댓글로 남겨주세요!