Lottie는 Android, iOS, 웹 브라우저, React 등과 호환되는 고품질 JSON 인코딩 애니메이션입니다. 여기서 Lottie가 무엇인지 자세히 알려 드리겠습니다.
Lottie를 어떻게 사용하는지 알 수 있는 가장 좋은 방법은 Lottie를 임베드하는 것입니다. 이 단계적 설명을 따라 좋아하는 Lottie를 React 앱에 임베드하는 방법을 알아보세요.
1. Lottie 선택하기
자신의 애니메이션을 선택하거나 LottieFiles에서 다양한 무료 애니메이션 중 하나를 선택할 수 있습니다. 애니메이션이 Lottie 형식(.json)으로 되어 있는지 확인하세요.
이 단계적 설명에서는 아래 애니메이션을 사용하겠습니다.
2. React 개발 환경 설정
Windows의 팬이세요? Mac만 사용하시나요? 아니면 노트북에서 Ubuntu를 사용하시나요? 사실 이건 중요하지 않습니다. 이 설명에서는 온라인 개발 환경으로 CodeSandbox를 사용하여 브라우저를 쓰는 모든 컴퓨터에서 누구나 따라 할 수 있습니다. 특히 이 샌드박스는 앱을 렌더링하여 HTML 출력, 즉 Lottie가 실행되는 것을 볼 수 있습니다.
2.1 Codesandbox에서 '새 React 프로젝트 시작' 가기
이렇게 하면 공식 create-react-app 스타터로 만들어진 보일러플레이트 React 프로젝트가 만들어집니다.
이제 반짝반짝 빛나는 새로운 React 앱으로 빌드를 시작할 수 있습니다.
2.2 Lottie 플레이어 React 컴포넌트 추가
먼저 React 앱에 Lottie 애니메이션을 렌더링하기 위한 React 컴포넌트를 추가하여 Lottie를 렌더링할 수 있도록 합니다. 왼쪽 창에서 "종속성" 영역을 찾아 "종속성 추가"를 사용하여 React-Lottie를 검색하고 결과에서 이를 선택합니다.
3. Lottie 적용
이제 Lottie를 추가하고 React 앱을 편집하여 Lottie 호출을 포함할 준비가 되었습니다.
3.1 Lottie 자산을 저장할 디렉터리 생성
Codesandbox에서 "src" 위에서 마우스 커서를 움직이고 "새 디렉터리"를 선택한 후, Lottie의 이름을 지정합니다. 이 폴더 안에서 kiss-of-the-heart.json라는 새 파일을 만듭니다.
샌드박스는 다음과 같이 보일 것입니다.
CodeSandbox의 중간 창에 이(비어있는) 파일이 보입니다.
3.2 다운로드한 Lottie의 로컬 사본을 열고 Lottie가 코딩된 Lottie JSON을 이 파일을 보여주는 중간 창에 붙여 넣습니다.
참고: 단축키를 활용하는 것이 좋습니다. 다음 3가지가 도움이 됩니다.
- Ctrl + A(모두 선택)
- Ctrl + C(모두 복사)
- Ctrl + V(모두 붙여 넣기)
파일은 다음과 같이 보일 것입니다.
4. Lottie 사용
마지막 단계입니다. 이제 React 앱은 Lottie 플레이어 컴포넌트를 사용하여 Lottie 파일을 사용해야 합니다. 이를 위해 App.js 파일을 편집합니다.
4.1 react-lottie 플레이어 컴포넌트와 Lottie JSON 파일을 임포트합니다.
App.js 파일 시작 부분에 다음을 추가합니다.
import React from 'react';
import './styles.css';
import Lottie from 'react-lottie';
import animationData from './lotties/kiss-of-the-heart';
이제 임포트 목록이 다음과 같이 보일 것입니다.
4.2 코드 교체
위 코드를 아래 코드로 교체하세요.
export default function App() {
const defaultOptions = {
loop: true,
autoplay: true,
animationData: animationData,
rendererSettings: {
preserveAspectRatio: "xMidYMid slice"
}
};
return (
<div>
<Lottie
options={defaultOptions}
height={400}
width={400}
/>
</div>
);
}
지금 시작해 보세요
Lottie 애니메이션을 사용하는 것은 이렇게 간단합니다. LottieFiles에는 최고의 애니메이터들이 만든 방대한 애니메이션 라이브러리가 있으며, 무료로 사용할 수 있습니다. 세계 최고 수준의 애니메이션을 찾아 보세요. 로딩 시간 낭비 없이 더 멋진 페이지를 만들 수 있습니다.
