Lottie 파일 처리하기

이 귀여운 애니메이션은 로그인페이지에서 만날 수 있다.

Lottie 파일은 애니메이션 파일 형식 중 하나이다.
Lottie 파일은 크기가 작고(로딩 속도가 빨라서 UX측면에서 좋다), 벡터 기반으로 되어 있어 다양한 디바이스에서 크기를 자유롭게 조절할 수 있다.
디자인툴에서 이를 제작하고 json형식으로 내려받아 개발시 사용하도록 한다.

서비스 url-> https://www.wise24life.site/login

lottie 파일 적용하기

1. nextjs 환경에서 public 폴더에 위 애니메이션(해당 포스팅 섬네일)이 작성된 json 파일을 넣어두었다.
2. lottie-web 라이브러리를 설치했다.
3. 애니메이션 컴포넌트 만들기

// LoginAnim.tsx
import lottie from 'lottie-web';
import loginJson from 'public/lottie/login.json';

export default function LoginAnim() {
	const containerRef = useRef<HTMLDivElement>(null);
	useEffect(() => {
		const $container = containerRef.current;
		if ($container === null) return;
		lottie.loadAnimation({
			container: $container,
			renderer: 'svg',
			loop: true,
			autoplay: true,
			animationData: loginJson,
		});
	}, []);
	return <div ref={containerRef} className="w-full" />;
}

4. 로그인 페이지 파일에 배치하기!

참고
https://lottiefiles.com/kr/blog/about-lottie/kr-lottie-vs-gif