Lottie JSON에 이미지 포함
Lottie JSON과 필요한 이미지를 추가하고, 선택한 애니메이션의 이미지를 하나의 JSON 파일에 포함시킵니다. .lottie와 ZIP 파일도 불러올 수 있습니다. 참조를 확인하고 만든 애니메이션의 동작을 확인한 뒤 이미지를 포함한 JSON으로 전달할 수 있습니다.
할 수 있는 일
이미지를 JSON 안으로
외부 파일 참조를 이미지 데이터로 바꾸어 이미지를 포함한 Lottie JSON을 만듭니다.
참조와 이미지 대조
애니메이션이 필요로 하는 소재를 확인할 수 있습니다. 이미지가 부족하면 추가하고, 같은 이름의 후보가 있으면 사용할 소재를 선택합니다.
만든 파일로 확인
포함한 뒤의 JSON을 다시 읽은 미리보기에서 이미지와 움직임을 확인한 다음 저장할 수 있습니다.
사용 방법
JSON과 필요한 이미지 추가
Lottie JSON과 참조하는 이미지를 추가합니다. 폴더 구성을 유지해 추가하면 참조와의 대응을 확인하기 쉬워집니다.
대상과 이미지 대응 확인
대상 애니메이션을 선택하고 참조 이미지 상태를 확인합니다. 부족한 소재나 여러 후보를 해결하세요.
이미지를 포함한 JSON 만들기
모든 참조가 해결되면 'JSON 만들기'를 누릅니다. 이미지를 다른 것으로 바꾸는 편집이나 이미지 자동 생성은 하지 않습니다.
결과 미리보기를 확인하고 저장
만든 JSON의 표시를 확인하고 내려받습니다. 확인용 속도나 배경을 바꿔도 저장하는 JSON은 바뀌지 않습니다.
이럴 때 편리
이미지를 포함한 애니메이션을 하나로 전달
별도 이미지를 보내는 것을 잊을 위험을 줄이고 싶을 때 필요한 이미지를 JSON 안에 포함해 공유할 수 있습니다.
이미지 외부 참조 묶기
옮긴 곳에서 이미지의 상대 경로가 맞지 않게 되는 것을 피하려고 참조 이미지를 포함한 파일을 준비합니다.
이미지를 포함하는 원리와 저장 형식
외부 참조에서 데이터 URI로
보통은 이미지 경로나 파일 이름을 참조합니다. 포함할 때는 이미지를 문자열로 나타낸 데이터를 JSON에 넣습니다.
포함은 용량 줄이기가 아님
Base64에서는 이미지 데이터 크기가 약 4/3이 됩니다. 이미지를 포함한 JSON은 원본 JSON보다 커지므로 저장 후 용량도 확인하세요.
JSON 포함과 .lottie 동봉
이 화면에서는 JSON 하나에 이미지 데이터를 넣습니다. .lottie는 JSON과 소재를 압축 패키지로 묶습니다. 사용할 곳이 받아들이는 형식에 따라 구분해 쓰세요.
자주 묻는 질문
이미지를 포함하면 파일 크기가 커지나요?
네. 원본 JSON에 이미지 데이터를 추가하고 Base64로 나타내므로 보통 커집니다. 용량을 줄이기 위한 이미지 압축 기능은 아닙니다.
.lottie로 묶는 방법과 무엇이 다른가요?
출력이 다릅니다. 이 화면은 이미지를 포함한 JSON을, 이미지 포함 Lottie 만들기는 소재를 함께 넣은 .lottie를 만듭니다. 사용하는 앱이나 라이브러리가 지원하는 형식에 따라 선택하세요.
참조 이미지가 부족하면 어떻게 되나요?
부족한 소재를 추가해야 합니다. 같은 이름의 후보가 여러 개면 사용할 파일을 선택합니다. 필요한 참조를 해결할 때까지 JSON을 만들 수 없습니다.
이미지 URL에서 자동으로 가져오나요?
외부 이미지 URL을 자동으로 가져오지 않습니다. 필요한 소재를 직접 추가하고 대응하는 참조를 확인하세요.
원본 JSON이나 이미지가 바뀌나요?
원본 파일은 덮어쓰지 않고 새 JSON을 저장합니다. 대상이나 소재 대응을 바꾼 뒤에는 다시 만들어야 합니다.
모든 Lottie를 JSON으로 만들 수 있나요?
Lottie로 불러올 수 있고 필요한 소재가 해결되는 것이 대상입니다. 테마나 대화형 상태 등 이어받을 수 없는 확장 정보를 포함한 입력은 이 화면에서 만들 수 없습니다.
입력과 결과
- 입력
- Lottie JSON과 필요한 직접 가진 이미지. .lottie·ZIP도 불러올 수 있습니다. 일반적인 JSON을 동영상으로 바꾸는 기능은 아닙니다.
- 출력
- 선택한 애니메이션 하나. 참조하는 이미지 데이터를 포함한 JSON.
- 확인
- 생성물 미리보기를 쓸 수 있게 되면 저장. 소재 추가나 대응 변경 후에는 다시 만듦.