특징

• 스크롤 트리거에 의한 각종 애니메이션
  • CSS, 자바스크립트를 이용해 사용자의 스크롤 동작에 반응하여 활성화되는 다채로운 애니메이션을 구현
• 로고의 눈동자 애니메이션 기능 구현
  • props 드릴링을 방지하기 위해 로고 컨테이너와 눈동자를 ref 객체 형태로 전역 상태값에 등록
  • 로고 컨테이너를 기준으로 마우스의 위치에 따라 동적으로 변하는 가중치를 만들고, 눈동자 ref에 해당값을 적용해 마우스 위치에 따라 눈동자가 움직이는 듯한 애니메이션을 구현
• 스크롤 이벤트와 리렌더링을 분리시키고, composite 단계에서의 gpu에 의한 애니메이션 구현
  • 스크롤 이벤트와 화면 리렌더링을 분리하여 처리
  • 조건문을 이용하며 불필요한 호출 방지
  • 애니메이션으로 인한 reflow나 repaint가 진행되는 것이 아닌 Composite 단계에서의 gpu에 의한 애니메이션 구현
• Tailwind CSS를 이용하여 레이아웃과 반응형 웹 디자인을 구축하고, 그 외의 모든 스타일링은 순수 CSS로 작업
• 위아래 양방향 무한스크롤
  • ref와 스크롤 이벤트를 활용해 스크롤이 일정 위치에 도달하면 배열에 새로운 요소들을 추가하고 (지금 높이 - 이전 높이) 위치로 스크롤을 이동시켜 스크롤에 움직임없이 느껴지도록 없도록 현
• UX 향상을 위한 이미지 프리로드
  • 카드 아이템에 마우스 오버 시 관련 상세 페이지의 이미지 자동 프리로드
  • set 자료형을 이용해 한 번 프리로드 된 이미지에 대해 캐시 메커니즘을 적용하여 최적화 구현
• CI/CD
  • Github Pages를 통한 정적 배포
  • 프로젝트 자동 빌드 및 배포를 위해 Github Actions 활용
  • 개발 편의성 향상

배운 점

• 애니메이션 기술 향상

  • 이전에는 애니메이션 구현에 대해 잘 모르고 있었으나, 이 프로젝트를 통해 원하는 대로 애니메이션을 구현할 수 있는 능력을 구비하게 되었습니다.

• z-index와 Stacking Context 이해

  • 요소들 간의 z-index 비교 과정에서 자식 요소들이 부모 Stacking Context에 종속된다는 사실을 배웠습니다.
  • Stacking Context 내의 자식 요소에는 별도의 position 속성 지정이 필요 없다는 것도 새롭게 알게되었습니다.

이 프로젝트를 진행하며 얻은 경험은 향후 복잡한 UI/UX 요소를 포함하는 프로젝트에서 효과적인 애니메이션 구현에 크게 기여할 것입니다.