[Refactor] optimize gif 애니메이션

[Arkingco]

Describe your changes

• GIF 이미지 파일이 webp로 변경 되었습니다 이유는 다음과 같습니다
• webp형식으로 변경할 때 생긴 hydration 문제를 AnimationVideo 컴포넌트로 분리하고 useEffect를 사용하여 해결하였습니다.

const SnowAnimationVideo = () => {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  return isMounted ? (
    <video width={153} height={153} autoPlay muted loop>
      <source src="/SnowAnimation.webm" type="video/webm" />
    </video>
  ) : null;
};

• GIF파일의 크기가 평균치 60% 감소하였습니다

해결!

Screen Capture

Issue number and link

• 400

[Arkingco]

webp에 대해서는 처음알았습니다 png와 jpg파일에도 사용이 가능하다는 것 같은데, 컨텐츠 이미지에도 적용할 수 있을지 궁금하네요 알고 계신부분이 있나요? webm과 webp가 존재하고 webm은 이미지 webp는 영상입니다. 컨텐츠 이미지에도 적용 가능할 것 으로 예상되네요 다만 영상은 사진이 여러장 이어져있다보니까 크기가 엄청 커서 파일로 변환할 때 크게 의미가 있었는데 그냥 이미지는 실직적으로 얼마나 의미 있을지는 모르겠습니다.. 한번 해주세요 ㅋㅋㅋ