Vue에서 json 파일로 움짤만들기 (Lottie)

안녕하세요. 오늘의 주제는 '웹 프론트엔드에서 어떻게 움짤을 적용할까??' 입니다.

 

디자인 팀에서 어느날 gif 대신 json 파일을 드릴테니 애니메이션처럼 적용해주실 수 있냐고 전달을 받았습니다..!

모바일팀에서 이미 이런 작업을 많이 해왔기에 'Lottie'라는 키워드를 알려주셔서 꽤 수월하게 해결할 수 있었습니다.

 

 

우선 Json 파일로 움짤 만들기에 앞서서 저는 2가지 사항이 궁금했습니다.

 

1. Json 파일을 뷰(vue) 에서 어떻게 읽어서 사용할지?

2. Lottie 를 vue 프로젝트에 어떻게 적용할지?

 

 

1. Json 파일을 뷰(vue) 에서 어떻게 읽어서 사용할지?

저희 프로젝트에서는 기존에 `@assets/js/....png` 형식으로 resource들을 읽어왔었기 때문에 json 도 동일한 방식으로 접근했습니다.

다만 json 파일은 import 만으로 가져와지지 않았고, require를 사용해서 파일을 읽어보기도 했지만, 의도대로 동작하지 않았습니다.

그래서 혹시 웹에 있는파일은 읽어올 수 있는지 확인하고자 `http://path.json`을 `:src` 안에 넣었더니 파일이 잘 노출되는것을 확인할 수 있었고, 파일만 잘 읽어오면 될것 같다고 판단 할 수 있었습니다.

참조링크 를 통해서 아래처럼 json 파일을 들고왔습니다.

 

import searching from '../../assets/js/searching.json';

1. 상대경로로 우선 json 파일을 먼저 읽어보았습니다.

2. <template></template> 안에서 확인해보니 파일은 잘가져왔는데, lottie-vue-player 내부에 :src 로 넘기니 잘 읽히지 않았습니다.

3. :src 안에 문자열을 넣어줘야해서 JSON.stringfy()를 활용해서 문자를 넣어주면 해당 파일을 읽게 됩니다.

 

<template>
    (...생략)
    <div class="lottie-container">
        <lottie-vue-player
            :src="JSON.stringify(searching)"
            :speed="1"
            loop
            autoplay
        ></lottie-vue-player>
    </div>
</template>
<script>
import searching from '../../assets/js/searching.json';

export default {
	data() {
		return {
			searching: searching,
		};
	},
};
</script>

 

 

 

 

2. Lottie 를 vue 프로젝트에 어떻게 적용할지?

해당 내용은 아래 Lottie-Player 문서를 참조해보면 좋을것같습니다. 

https://docs.lottiefiles.com/lottie-player/components/lottie-vue/usage