LottieFiles 무료 애니메이션을 수정해 웹에 넣기 (HTML·React)

작성자:

1 – LottieFiles에서 무료 애니메이션 고르고 다듬기

1.1 – 작업 환경 준비

  1. 바탕화면처럼 찾기 쉬운 자리에 "lottie_web"이라는 폴더를 만듭니다.
  2. 그 안에 "assets"라는 폴더를 하나 더 만듭니다.
  3. 코드 편집기(VS Code 등)에서 새 파일을 만들어 빈 채로 "lottie_memo.txt" 이름으로 "lottie_web" 폴더 안에 저장합니다.

앞으로 내려받는 애니메이션 파일과 직접 만드는 코드가 모두 이 "lottie_web" 폴더 안에 쌓입니다.
"assets" 폴더는 LottieFiles에서 내려받은 애니메이션 파일을 넣어 두는 자리입니다.
"lottie_memo.txt"에는 실습하면서 복사한 주소와 막힌 지점을 적어 둡니다.

폴더와 파일 이름은 영문 소문자로 짓습니다. 한글 이름이나 띄어쓰기가 들어가면 뒤에서 코드에 주소를 적을 때 경로가 어긋나기 쉽습니다.

1.2 – 무료 애니메이션 찾기

  1. 브라우저 주소창을 클릭하고 https://lottiefiles.com/kr/를 입력한 뒤 Enter를 누릅니다.
  2. 화면 위쪽 검색창에 원하는 키워드를 영어로 입력합니다. 예를 들어 loading, success, heart를 넣습니다.
  3. 검색 결과에서 필터의 Free(무료)를 켭니다.
  4. 마음에 드는 애니메이션을 클릭해 상세 페이지를 엽니다.
  5. 상세 페이지에서 라이선스 표기를 확인합니다. Lottie Simple License로 적혀 있으면 무료로 쓸 수 있습니다.

무료 공개 애니메이션은 Lottie Simple License로 상업적 사용까지 가능하고, 출처 표기(크레딧)는 권장이지만 필수는 아닙니다. 다만 수정한 애니메이션을 웹에 올려 배포할 때도 같은 라이선스 조건이 그대로 따라붙습니다. Premium(유료) 애니메이션은 구독이 있어야 씁니다. (2026-09-02 확인, 출처 lottiefiles.com/page/license)

유료 애니메이션이 무료 애니메이션 바로 옆에 섞여 나옵니다. 내려받기 전에 필터의 Free를 켜고 상세 페이지의 라이선스 표기를 한 번 더 확인하면 유료 파일을 잘못 쓰지 않습니다.

1.3 – Lottie Creator에서 애니메이션 열기

  1. 상세 페이지에서 편집 버튼을 클릭합니다. 연필 모양이거나 [Edit] 또는 [Edit in Creator]로 표시됩니다.
  2. 로그인 창이 뜨면 무료 계정으로 로그인합니다. Google 계정으로도 가입할 수 있습니다.
  3. Lottie Creator가 열리고 화면 가운데 캔버스에 애니메이션이 나타납니다.

Lottie Creator(로티 크리에이터)는 브라우저에서 Lottie 애니메이션을 수정하고 내보내는 편집 도구입니다.
프로그램을 따로 설치하지 않고 웹 브라우저 안에서 색과 속도를 바꿀 수 있습니다.
계정 없이도 애니메이션을 볼 수는 있지만, 수정본을 저장하거나 주소로 받으려면 무료 로그인이 필요합니다.

색만 빠르게 바꾸고 싶으면, 애니메이션 상세 페이지에 있는 색 팔레트(Color Palette) 기능을 써도 됩니다. 준비된 색 조합을 클릭하면 편집기를 열지 않고도 색이 바로 바뀝니다.

1.4 – 색과 속도 바꾸기

  1. 왼쪽 레이어 목록에서 색을 바꿀 대상을 클릭하거나, 오른쪽 속성 패널의 색상 항목을 클릭합니다.
  2. 색상 견본을 클릭한 뒤 원하는 색 코드를 입력합니다. 예를 들어 #7BCC12를 넣습니다.
  3. 재생 속도나 길이를 바꾸려면 아래쪽 타임라인의 재생 컨트롤에서 조정합니다.
  4. Space 키를 눌러 미리보기를 재생하고, 다시 눌러 멈춥니다.

색 코드는 #으로 시작하는 여섯 자리 글자로 색을 나타내는 값입니다. 예를 들어 #7BCC12는 연두색입니다.
색을 바꾸면 캔버스의 애니메이션 색이 바로 바뀝니다.
재생 속도는 Lottie Creator에서도 조정할 수 있지만, 웹에 넣을 때 옵션 하나로 더 간단히 바꿀 수도 있습니다. 이 방법은 뒤의 HTML·React 단계에서 다룹니다.

Lottie Creator에서 바꿀 수 있는 주요 항목은 색(칠·선), 재생 속도, 프레임 속도, 레이어 순서, 텍스트, 이미지입니다. (2026-09-02 확인, 출처 lottiefiles.com/lottie-creator)

색 이름을 정할 때는 원본 색을 그대로 따르기보다 내 사이트의 주조색에 맞춰 고릅니다. 밝은 배경 위에 올릴 애니메이션이면 너무 옅은 색은 잘 보이지 않으므로 진한 색을 고르는 편이 눈에 잘 들어옵니다.

1.5 – 파일과 링크 받기

  1. Lottie Creator 오른쪽 위에서 내보내기 버튼을 클릭합니다. [Export] 또는 [Download]로 표시됩니다.
  2. 파일 형식으로 .lottie를 고릅니다. 저장 창이 뜨면 앞서 만든 "lottie_web/assets" 폴더로 이동해 저장합니다.
  3. 파일 이름을 "my_anim.lottie"로 바꿔 저장합니다.
  4. 인터넷 주소로도 받으려면 개발자용 핸드오프 버튼(</> 모양)을 클릭합니다.
  5. Enable Asset Link를 켠 뒤 Asset link에 나온 주소를 복사합니다.
  6. 복사한 주소를 "lottie_memo.txt"에 붙여 넣습니다.

여기서 두 가지 준비물을 마련합니다. 하나는 내 컴퓨터에 저장한 파일이고, 다른 하나는 인터넷 주소(링크)입니다.
Asset link는 https://lottie.host/로 시작하는 주소이며, LottieFiles 서버에 올라간 내 애니메이션을 가리킵니다.
파일과 링크 둘 다 뒤의 HTML·React 단계에서 그대로 씁니다.

내보내기 형식은 두 가지입니다. .lottie(dotLottie)는 하나의 애니메이션과 관련 자원을 압축해 담은 파일이라 용량이 작습니다. .json(Lottie JSON)은 애니메이션을 벡터 데이터로 적은 파일입니다. 웹에서는 용량이 작은 .lottie를 먼저 고려합니다.

1.6 – 직접 해보기

  1. 무료 애니메이션을 하나 골라 Lottie Creator에서 엽니다.
  2. 색을 최소 한 군데 이상 원래와 다른 색으로 바꿉니다.
  3. 바꾼 애니메이션을 "lottie_web/assets/my_anim.lottie"로 내려받습니다.
  4. Asset link 주소를 복사해 "lottie_memo.txt"에 붙여 넣습니다.

무엇을 골랐든 아래로 제대로 됐는지 스스로 따져 봅니다.

지금까지 한 작업이 제대로 됐는지 아래 다섯 가지로 따져 봅니다. 세 가지 이상 맞으면 이 과정을 마친 것으로 봅니다.

  1. 상세 페이지의 라이선스가 무료(Lottie Simple License)로 표시됩니까.
  2. Lottie Creator 미리보기에서 바꾼 색이 화면에 반영됩니까.
  3. "lottie_web/assets" 폴더에 .lottie 파일이 들어 있습니까.
  4. "lottie_memo.txt"에 https://lottie.host/로 시작하는 주소가 적혀 있습니까.
  5. 원본과 다른 색으로 재생됩니까.

코칭 프롬프트

이 부분을 혼자 해 보다 막히면 아래 프롬프트를 대화형 AI(ChatGPT·Claude·Gemini)에 붙여 넣어 한 단계씩 도움을 받습니다.

실습에 쓰던 대화창이 아니라 새 대화창에 붙여 넣습니다. 실습 대화창에는 앞서 주고받은 다른 내용이 남아 있어, 그 위에 얹으면 답이 뒤섞입니다.


아래는 LottieFiles에서 무료 애니메이션을 골라 Lottie Creator에서 색과 속도를 바꾼 뒤 파일과 링크로 내려받는 실습을 점검받기 위한 요청입니다. 답을 한 번에 다 알려 주지 말고, 제가 직접 해내도록 한 단계씩 이끌어 주세요.

제가 지금까지 한 것: {지금까지 한 것}
막힌 지점 또는 화면에 나온 메시지: {막힌 지점}
제가 만들려는 것: {내 소재}

다음 규칙을 지켜 주세요.
1. 정답이나 완성된 결과를 통째로 주지 마세요.
2. 먼저 무엇 때문에 막혔는지 짚어 주세요.
3. 그다음 제가 할 일을 한 단계만 알려 주세요.
4. 제가 그 단계를 해 본 뒤에, 됐는지 확인하는 질문을 던져 주세요.
5. 유료(Marketplace) 애니메이션을 무료로 착각했거나, 로그인을 안 해서 저장·링크가 안 되는 흔한 실수가 보이면 짚어 주세요.
아래는 LottieFiles에서 무료 애니메이션을 골라 Lottie Creator에서 색과 속도를 바꾼 뒤 파일과 링크로 내려받는 실습을 점검받기 위한 요청입니다. 답을 한 번에 다 알려 주지 말고, 제가 직접 해내도록 한 단계씩 이끌어 주세요.

제가 지금까지 한 것: loading 키워드로 무료 애니메이션을 찾아 Lottie Creator를 열고 색을 연두색으로 바꿨습니다.
막힌 지점 또는 화면에 나온 메시지: 내보내기 버튼을 눌러도 저장 창이 안 뜹니다.
제가 만들려는 것: 블로그에 넣을 연두색 로딩 애니메이션.

다음 규칙을 지켜 주세요.
1. 정답이나 완성된 결과를 통째로 주지 마세요.
2. 먼저 무엇 때문에 막혔는지 짚어 주세요.
3. 그다음 제가 할 일을 한 단계만 알려 주세요.
4. 제가 그 단계를 해 본 뒤에, 됐는지 확인하는 질문을 던져 주세요.
5. 유료(Marketplace) 애니메이션을 무료로 착각했거나, 로그인을 안 해서 저장·링크가 안 되는 흔한 실수가 보이면 짚어 주세요.
  1. {지금까지 한 것} — 어디까지 진행했는지 적습니다. 예: “loading 키워드로 무료 애니메이션을 찾아 Lottie Creator를 열었습니다.”
  2. {막힌 지점} — 안 되는 동작이나 화면에 나온 메시지를 적습니다. 예: “내보내기 버튼을 눌러도 저장 창이 안 뜹니다.”
  3. {내 소재} — 만들려는 것을 적습니다. 예: “블로그에 넣을 연두색 로딩 애니메이션.”

AI가 완성된 파일이나 정답을 통째로 주려 하면 “정답 말고, 지금 할 한 단계만 알려 주세요”라고 되물으세요. 막힌 지점을 적을 때 화면에 나온 메시지를 그대로 옮겨 적으면 원인을 더 정확히 짚어 줍니다.

2 – HTML 페이지에 애니메이션 넣기

공식문서

2.1 – 작업 환경 준비

  1. 코드 편집기에서 새 파일을 만듭니다.
  2. 아래 내용을 그대로 붙여 넣습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lottie 연습</title>
</head>
<body>
<h1>내 애니메이션</h1>
</body>
</html>
  1. "index.html" 이름으로 "lottie_web" 폴더 안에 저장합니다.
  2. 저장한 "index.html"을 더블클릭해 브라우저에서 엽니다.

화면에 “내 애니메이션”이라는 글자가 나타납니다.
아직 애니메이션을 넣지 않았으므로 글자만 보입니다.
이 단계에서 확인할 것은 파일이 브라우저에서 열린다는 사실 하나입니다.

2.2 – dotLottie 웹 컴포넌트 붙이기

  1. "index.html"을 편집기에서 엽니다.
  2. <body>와 </body> 사이를 아래 내용으로 바꿉니다.
<body>
<h1>내 애니메이션</h1>

<dotlottie-wc
  src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie"
  autoplay
  loop
  style="width: 300px; height: 300px;">
</dotlottie-wc>

<script type="module" src="https://unpkg.com/@lottiefiles/dotlottie-wc@latest/dist/dotlottie-wc.js"></script>
</body>
  1. src의 주소를 앞서 "lottie_memo.txt"에 적어 둔 내 Asset link로 바꿉니다.
  2. 파일을 저장합니다. Windows는 Ctrl+S, macOS는 ⌘+S를 누릅니다.
  3. 브라우저로 돌아가 F5를 눌러 새로고침합니다.

dotlottie-wc는 HTML 페이지에 Lottie 애니메이션을 넣는 웹 컴포넌트(부품)입니다.
<img> 태그에 사진 주소를 넣으면 사진이 뜨는 것처럼, <dotlottie-wc>의 src에 애니메이션 주소를 넣으면 그 자리에 애니메이션이 재생됩니다.
아래쪽 <script> 한 줄은 이 부품을 인터넷에서 받아 오는 코드입니다. CDN(Content Delivery Network, 파일을 인터넷에서 바로 받아 쓰도록 제공하는 서버)에서 최신판을 받습니다.

dotlottie-wc의 현재 최신 계열은 0.9.x입니다. CDN 주소에 @latest를 쓰면 최신판을 받습니다. (2026-09-02 확인, 출처 npmjs.com/package/@lottiefiles/dotlottie-wc)

예전에 쓰던 lottie-player는 지원이 끝났습니다(2026-09-02 확인, 출처 github.com/LottieFiles/lottie-player). 오래된 예제에서 <lottie-player>를 보더라도, 새로 만들 때는 dotlottie-wc를 씁니다.

새로고침해도 애니메이션이 보이지 않으면 브라우저가 보안상 파일을 막은 경우입니다. 이때는 파일을 직접 여는 대신 로컬 서버로 엽니다. 여는 방법은 아래 2.4에 있습니다.

2.3 – 재생 옵션 바꾸기

  1. <dotlottie-wc> 태그 안에 옵션을 더하거나 값을 바꿉니다. 아래처럼 speed와 mode를 넣습니다.
<dotlottie-wc
  src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie"
  autoplay
  loop
  speed="2"
  mode="bounce"
  style="width: 300px; height: 300px;">
</dotlottie-wc>
  1. 파일을 저장하고 브라우저에서 F5를 눌러 새로고침합니다.

옵션은 태그 안에 이름만 적거나 이름과 값을 함께 적어 재생 방식을 정합니다.
speed를 2로 하면 두 배 빠르게 재생됩니다. Lottie Creator에서 속도를 바꾸지 않아도 이 값 하나로 조정할 수 있습니다.
각 옵션의 뜻은 아래 표와 같습니다.

옵션뜻값 예시
autoplay페이지가 열리면 바로 재생합니다(이름만 적으면 켜집니다)
loop끝나면 처음부터 다시 재생합니다(이름만 적으면 켜집니다)
speed재생 속도입니다. 1이 기본입니다speed="2"
mode재생 방향입니다"forward", "reverse", "bounce"
style크기를 픽셀로 정합니다"width: 300px; height: 300px;"

mode="bounce"는 애니메이션을 끝까지 재생한 뒤 거꾸로 되감아 오가는 방식입니다. 로딩 표시처럼 계속 움직여야 하는 자리에 loop와 함께 쓰면 자연스럽게 반복됩니다.

2.4 – 내려받은 파일을 직접 넣기

  1. 앞 단계에서 "lottie_web/assets"에 저장한 "my_anim.lottie" 파일을 준비합니다.
  2. <dotlottie-wc>의 src를 인터넷 주소 대신 내 파일 경로로 바꿉니다.
<dotlottie-wc
  src="assets/my_anim.lottie"
  autoplay
  loop
  style="width: 300px; height: 300px;">
</dotlottie-wc>
  1. 편집기의 터미널을 열고 "lottie_web" 폴더에서 아래 명령으로 로컬 서버를 켭니다.
npx serve
  1. 터미널에 나온 주소(예: http://localhost:3000)를 브라우저 주소창에 입력해 엽니다.

로컬 서버(local server)는 내 컴퓨터에서 웹 페이지를 인터넷 주소처럼 열어 주는 프로그램입니다.
브라우저는 보안상 파일을 직접 열 때(file://) 일부 자료를 막는데, 로컬 서버로 열면 이 제한을 받지 않아 내 파일을 그대로 읽습니다.
npx serve는 별도 설치 없이 서버를 잠깐 켜는 명령입니다. Node.js(자바스크립트 실행 환경)가 설치돼 있으면 바로 동작합니다.

VS Code를 쓴다면 Live Server 확장 기능을 설치한 뒤, "index.html"에서 마우스 오른쪽 버튼을 눌러 [Open with Live Server]를 골라도 됩니다. 같은 로컬 서버 방식입니다.

파일을 직접 열면(file://) 애니메이션이 보이지 않을 수 있습니다. 인터넷 주소(src="https://lottie.host/...")로 넣을 때는 대개 바로 보이지만, 내려받은 파일(src="assets/...")로 넣을 때는 로컬 서버로 여는 것이 안전합니다.

2.5 – 직접 해보기

  1. 앞서 수정한 내 애니메이션을 HTML 페이지에 넣습니다.
  2. 인터넷 주소(src="https://lottie.host/...")와 내려받은 파일(src="assets/my_anim.lottie") 두 가지 방식으로 각각 넣어 봅니다.
  3. speed 값을 2로 바꿔 봅니다.
  4. loop 옵션을 켜 봅니다.

무엇을 골랐든 아래로 제대로 됐는지 스스로 따져 봅니다.

지금까지 한 작업이 제대로 됐는지 아래 다섯 가지로 따져 봅니다. 세 가지 이상 맞으면 이 과정을 마친 것으로 봅니다.

  1. 브라우저에서 애니메이션이 움직이며 재생됩니까.
  2. loop를 켜면 끝난 뒤 다시 재생됩니까.
  3. speed를 2로 바꾸면 더 빠르게 재생됩니까.
  4. 인터넷 주소로도, 내려받은 파일로도 재생됩니까.
  5. 개발자 도구 콘솔(F12를 눌러 엽니다)에 빨간 오류 메시지가 없습니까.

코칭 프롬프트

이 부분을 혼자 해 보다 막히면 아래 프롬프트를 대화형 AI(ChatGPT·Claude·Gemini)에 붙여 넣어 한 단계씩 도움을 받습니다.

실습에 쓰던 대화창이 아니라 새 대화창에 붙여 넣습니다. 실습 대화창에는 앞서 주고받은 다른 내용이 남아 있어, 그 위에 얹으면 답이 뒤섞입니다.


아래는 HTML 페이지에 dotlottie-wc 웹 컴포넌트로 Lottie 애니메이션을 넣는 실습을 점검받기 위한 요청입니다. 답을 한 번에 다 알려 주지 말고, 제가 직접 해내도록 한 단계씩 이끌어 주세요.

제가 지금까지 한 것: {지금까지 한 것}
막힌 지점 또는 콘솔에 나온 오류 메시지: {막힌 지점}
애니메이션을 넣은 방식(인터넷 주소 또는 내려받은 파일): {넣은 방식}

다음 규칙을 지켜 주세요.
1. 정답 코드를 통째로 주지 마세요.
2. 먼저 무엇 때문에 막혔는지 짚어 주세요.
3. 그다음 제가 고칠 곳을 한 군데만 알려 주세요.
4. 제가 고쳐 본 뒤에, 됐는지 확인하는 질문을 던져 주세요.
5. 지원이 끝난 lottie-player를 쓰고 있거나, script 태그를 빠뜨렸거나, 파일을 로컬 서버 없이 직접 열어 안 보이는 흔한 실수가 보이면 짚어 주세요.
아래는 HTML 페이지에 dotlottie-wc 웹 컴포넌트로 Lottie 애니메이션을 넣는 실습을 점검받기 위한 요청입니다. 답을 한 번에 다 알려 주지 말고, 제가 직접 해내도록 한 단계씩 이끌어 주세요.

제가 지금까지 한 것: index.html에 dotlottie-wc 태그와 script 태그를 넣고 브라우저에서 열었습니다.
막힌 지점 또는 콘솔에 나온 오류 메시지: 글자만 보이고 애니메이션 자리가 비어 있습니다.
애니메이션을 넣은 방식(인터넷 주소 또는 내려받은 파일): assets 폴더의 내려받은 파일.

다음 규칙을 지켜 주세요.
1. 정답 코드를 통째로 주지 마세요.
2. 먼저 무엇 때문에 막혔는지 짚어 주세요.
3. 그다음 제가 고칠 곳을 한 군데만 알려 주세요.
4. 제가 고쳐 본 뒤에, 됐는지 확인하는 질문을 던져 주세요.
5. 지원이 끝난 lottie-player를 쓰고 있거나, script 태그를 빠뜨렸거나, 파일을 로컬 서버 없이 직접 열어 안 보이는 흔한 실수가 보이면 짚어 주세요.
  1. {지금까지 한 것} — 어디까지 진행했는지 적습니다. 예: “index.html에 dotlottie-wc 태그와 script 태그를 넣고 브라우저에서 열었습니다.”
  2. {막힌 지점} — 안 되는 동작이나 콘솔(F12)에 나온 오류를 적습니다. 예: “글자만 보이고 애니메이션 자리가 비어 있습니다.”
  3. {넣은 방식} — 인터넷 주소인지 내려받은 파일인지 적습니다. 예: “assets 폴더의 내려받은 파일.”

AI가 전체 코드를 통째로 주려 하면 “코드 전체 말고, 지금 고칠 한 군데만 알려 주세요”라고 되물으세요. 콘솔 오류는 F12를 눌러 나온 빨간 메시지를 그대로 옮겨 적으면 원인을 더 빨리 찾아 줍니다.

3 – React 앱에 애니메이션 넣기

3.1 – 작업 환경 준비

  1. 터미널을 열고 Node.js가 있는지 확인합니다.
node -v
  1. 버전 숫자가 나오지 않으면 https://nodejs.org/에서 LTS 버전을 내려받아 설치합니다.
  2. "lottie_web" 폴더에서 아래 명령으로 React 프로젝트를 만듭니다.
npm create vite@latest lottie_react -- --template react
  1. 만들어진 폴더로 이동해 필요한 꾸러미를 설치하고 개발 서버를 켭니다.
cd lottie_react
npm install
npm run dev
  1. 터미널에 나온 주소 http://localhost:5173을 브라우저에서 엽니다.

React(리액트)는 화면을 부품 단위로 나눠 만드는 자바스크립트 라이브러리입니다.
Vite(비트)는 React 프로젝트를 빠르게 만들고 실행해 주는 도구이고, npm(엔피엠)은 자바스크립트 꾸러미를 내려받아 설치하는 도구입니다.
npm run dev를 실행하면 화면을 고칠 때마다 브라우저에 바로 반영해 주는 개발 서버가 켜집니다.

React 프로젝트를 만들려면 Node.js가 있어야 합니다. node -v로 버전이 나오면 준비가 된 것입니다. 개발 서버는 Ctrl+C로 끕니다.

3.2 – dotlottie-react 설치하고 컴포넌트 넣기

  1. 개발 서버가 켜져 있으면 터미널에서 Ctrl+C로 잠시 멈춥니다.
  2. 아래 명령으로 React용 Lottie 꾸러미를 설치합니다.
npm install @lottiefiles/dotlottie-react
  1. 앞서 내려받은 "my_anim.lottie" 파일을 프로젝트 안 "public" 폴더로 옮깁니다.
  2. "src/App.jsx" 파일을 열어 내용을 아래로 모두 바꿉니다.
import { DotLottieReact } from '@lottiefiles/dotlottie-react';

function App() {
  return (
    <div>
      <h1>내 애니메이션</h1>
      <DotLottieReact
        src="/my_anim.lottie"
        loop
        autoplay
        style={{ width: 300, height: 300 }}
      />
    </div>
  );
}

export default App;
  1. 다시 npm run dev를 실행하고 브라우저를 새로고침합니다.

DotLottieReact는 React 앱에 Lottie 애니메이션을 넣는 컴포넌트입니다.
"public" 폴더에 넣은 파일은 주소에서 맨 앞에 /를 붙여 가리킵니다. 그래서 "public/my_anim.lottie"는 src="/my_anim.lottie"가 됩니다.
파일 대신 Asset link 주소를 넣고 싶으면 src="https://lottie.host/..."처럼 적어도 똑같이 재생됩니다.

@lottiefiles/dotlottie-react의 현재 최신 계열은 0.19.x입니다. src에는 .lottie 파일과 .json 파일을 모두 넣을 수 있습니다. (2026-09-02 확인, 출처 npmjs.com/package/@lottiefiles/dotlottie-react)

3.3 – 옵션과 크기 조정

  1. <DotLottieReact>에 옵션(prop)을 더하거나 값을 바꿉니다. 아래처럼 speed와 mode를 넣습니다.
<DotLottieReact
  src="/my_anim.lottie"
  loop
  autoplay
  speed={2}
  mode="bounce"
  style={{ width: 300, height: 300 }}
/>
  1. 파일을 저장하면 개발 서버가 화면을 바로 다시 그립니다.

prop(프롭)은 컴포넌트에 넘겨 동작을 정하는 값입니다.
숫자 값은 speed={2}처럼 중괄호로 감싸고, 글자 값은 mode="bounce"처럼 따옴표로 감쌉니다.
자주 쓰는 prop은 아래 표와 같습니다.

prop뜻값 예시
src애니메이션 파일 주소입니다"/my_anim.lottie"
autoplay화면에 뜨면 바로 재생합니다autoplay
loop끝나면 다시 재생합니다loop
speed재생 속도입니다. 1이 기본입니다speed={2}
mode재생 방향입니다"forward", "reverse", "bounce"
playOnHover마우스를 올렸을 때만 재생합니다playOnHover
style크기를 정합니다{{ width: 300, height: 300 }}

마우스를 올렸을 때만 움직이게 하려면 autoplay를 빼고 playOnHover를 넣습니다. 버튼이나 아이콘 위에서 반응하는 애니메이션을 만들 때 씁니다.

3.4 – 버튼으로 재생·정지 제어하기

  1. "src/App.jsx" 파일을 아래 내용으로 모두 바꿉니다.
import { useState } from 'react';
import { DotLottieReact } from '@lottiefiles/dotlottie-react';

function App() {
  const [dotLottie, setDotLottie] = useState(null);

  return (
    <div>
      <h1>내 애니메이션</h1>
      <DotLottieReact
        src="/my_anim.lottie"
        loop
        autoplay
        style={{ width: 300, height: 300 }}
        dotLottieRefCallback={setDotLottie}
      />
      <div>
        <button onClick={() => dotLottie && dotLottie.play()}>재생</button>
        <button onClick={() => dotLottie && dotLottie.pause()}>일시정지</button>
        <button onClick={() => dotLottie && dotLottie.stop()}>정지</button>
      </div>
    </div>
  );
}

export default App;
  1. 파일을 저장하고 브라우저에서 버튼 세 개를 눌러 봅니다.

dotLottieRefCallback은 애니메이션을 제어할 수 있는 조종기(player instance)를 꺼내 주는 prop입니다.
이 조종기를 useState(리액트에서 값을 담아 두는 도구)에 담아 두면, 버튼을 눌렀을 때 play()(재생)·pause()(일시정지)·stop()(정지)을 불러 애니메이션을 제어합니다.
dotLottie && dotLottie.play()는 조종기가 준비된 뒤에만 play()를 부르라는 뜻입니다. 준비 전에 부르면 오류가 나기 때문에 이렇게 확인하고 부릅니다.

[일시정지]는 재생을 그 자리에서 멈춥니다. [정지]는 재생을 멈추고 처음 프레임으로 되돌립니다. 두 버튼의 동작이 다르므로 눌러 보고 차이를 확인합니다.

3.5 – 직접 해보기

  1. 앞서 수정한 내 애니메이션을 React 화면에 넣습니다.
  2. 크기를 style로 조정합니다.
  3. speed나 loop 옵션을 바꿔 봅니다.
  4. [재생]·[일시정지]·[정지] 버튼을 넣어 눌러 봅니다.

무엇을 골랐든 아래로 제대로 됐는지 스스로 따져 봅니다.

지금까지 한 작업이 제대로 됐는지 아래 다섯 가지로 따져 봅니다. 세 가지 이상 맞으면 이 과정을 마친 것으로 봅니다.

  1. 개발 서버 화면(http://localhost:5173)에 애니메이션이 재생됩니까.
  2. speed나 loop 값을 바꾸면 화면에 반영됩니까.
  3. [정지] 버튼을 누르면 애니메이션이 멈춥니까.
  4. [재생] 버튼을 누르면 다시 움직입니까.
  5. 브라우저 콘솔(F12를 눌러 엽니다)에 빨간 오류 메시지가 없습니까.

코칭 프롬프트

이 부분을 혼자 해 보다 막히면 아래 프롬프트를 대화형 AI(ChatGPT·Claude·Gemini)에 붙여 넣어 한 단계씩 도움을 받습니다.

실습에 쓰던 대화창이 아니라 새 대화창에 붙여 넣습니다. 실습 대화창에는 앞서 주고받은 다른 내용이 남아 있어, 그 위에 얹으면 답이 뒤섞입니다.


아래는 React 앱에 @lottiefiles/dotlottie-react로 Lottie 애니메이션을 넣고 버튼으로 재생·정지를 제어하는 실습을 점검받기 위한 요청입니다. 답을 한 번에 다 알려 주지 말고, 제가 직접 해내도록 한 단계씩 이끌어 주세요.

제가 지금까지 한 것: {지금까지 한 것}
막힌 지점 또는 터미널·콘솔에 나온 오류 메시지: {막힌 지점}
제가 만들려는 동작(옵션 조정 또는 버튼 제어): {만들려는 동작}

다음 규칙을 지켜 주세요.
1. 정답 코드를 통째로 주지 마세요.
2. 먼저 무엇 때문에 막혔는지 짚어 주세요.
3. 그다음 제가 고칠 곳을 한 군데만 알려 주세요.
4. 제가 고쳐 본 뒤에, 됐는지 확인하는 질문을 던져 주세요.
5. 꾸러미 설치를 빠뜨렸거나, public 파일 경로 앞 슬래시를 빠뜨렸거나, 조종기가 준비되기 전에 play를 부르는 흔한 실수가 보이면 짚어 주세요.
아래는 React 앱에 @lottiefiles/dotlottie-react로 Lottie 애니메이션을 넣고 버튼으로 재생·정지를 제어하는 실습을 점검받기 위한 요청입니다. 답을 한 번에 다 알려 주지 말고, 제가 직접 해내도록 한 단계씩 이끌어 주세요.

제가 지금까지 한 것: dotlottie-react를 설치하고 App.jsx에 DotLottieReact를 넣어 애니메이션을 띄웠습니다.
막힌 지점 또는 터미널·콘솔에 나온 오류 메시지: 재생 버튼을 눌러도 아무 반응이 없습니다.
제가 만들려는 동작(옵션 조정 또는 버튼 제어): 재생·일시정지·정지 버튼으로 애니메이션을 제어하기.

다음 규칙을 지켜 주세요.
1. 정답 코드를 통째로 주지 마세요.
2. 먼저 무엇 때문에 막혔는지 짚어 주세요.
3. 그다음 제가 고칠 곳을 한 군데만 알려 주세요.
4. 제가 고쳐 본 뒤에, 됐는지 확인하는 질문을 던져 주세요.
5. 꾸러미 설치를 빠뜨렸거나, public 파일 경로 앞 슬래시를 빠뜨렸거나, 조종기가 준비되기 전에 play를 부르는 흔한 실수가 보이면 짚어 주세요.
  1. {지금까지 한 것} — 어디까지 진행했는지 적습니다. 예: “dotlottie-react를 설치하고 App.jsx에 DotLottieReact를 넣었습니다.”
  2. {막힌 지점} — 안 되는 동작이나 터미널·콘솔(F12) 오류를 적습니다. 예: “재생 버튼을 눌러도 아무 반응이 없습니다.”
  3. {만들려는 동작} — 옵션 조정인지 버튼 제어인지 적습니다. 예: “재생·일시정지·정지 버튼으로 제어하기.”

AI가 App.jsx 전체를 통째로 주려 하면 “전체 파일 말고, 지금 고칠 한 군데만 알려 주세요”라고 되물으세요. 오류는 터미널 메시지와 브라우저 콘솔(F12) 메시지를 둘 다 옮겨 적으면 원인을 더 정확히 짚어 줍니다.

댓글 남기기