[개발] FECONF25 로띠 세션에서 알게 된 닷로띠를 실무에 적용하기

보통 컨퍼런스를 듣고 와서

"아~ 재밌었다~"로 끝나게 되면...

기억 지속이 잘 안된다

 

그럼 답은 뭐다?

"이론 및 실습"

 

괜히 대학교 과목이 이론 3시간 실습 1시간으로 구성된 게 아님

(기억 속에 주마등처럼 스쳐지나가는 수많은 레시테이션 시간들...크아악)

 

아무튼 개발 컨퍼런스? 실제로 실무에 유의미하다라는 증거를 남기고자...

글을 씁니다

---

배경

(2025년 8월 25일 오후 8시 쯤에 있었던 실화를 재구성했습니다)

 

FECONF25를 듣고 와서

우리 스쿼드 디자이너님께 로띠 이야기를 했다

 

우리 디자이너님께 헌정한 로띠 세션 후기 글은 요기 👇

https://developer-dreamer.tistory.com/181

[FECONF25] 개발자를 위한 모션 그래픽 솔루션: Lottie의 기술 진화와 활용전략

 

디자이너님께서는 의외로 닷로띠를 처음 들어본다고 하셨고,

같이 밥을 먹으면서 신나서 설명해드렸다

 

회의실에서 내려와서 디자이너님은 팀 채널에 닷로띠를 소개하는 글을 올렸다

 

수연님께서 컨퍼런스 내용 공유해주신 내용 중 테스트해보면 좋을만한 내용 제안드립니다!
Lottie JSON(.json) 모션 중 150kb가 넘어가는 용량이 큰 파일이 많습니다.
dotLottie 라는 (.lottie) 확장자로 변환하면 용량이 70%가량 줄어듭니다!
변환하고 잘 돌아가는지 테스트해보고 교체하면 좋을 것 같아요!!

 

나도 신나서 댓글을 달았다

Feconf25 갔다가 업어온 내용인데요
Gif 82.7kb -> lottie 36.4kb ->.lottie 3.5kb (예시 슬라이드 내용)
이런 용량 최적화가 가능한 것 같아 디자이너님께 공유드렸습니다!

 

그때, 시니어 개발자님이

'근데 닷로띠 쓰면 용량 적은 대신 메모리 많이 먹을걸요?'

라는 의문을 제시해주심

 

근데 내가 세션에서 들었던 내용은 오히려 'json보다 닷로띠가 메모리 효용이 좋다'였음

그래서 슬라이드를 공유해드림

 

 

시니어 개발자님 반응:

오~ 메모리 효율 짱 좋은데? 저는 호랑이 담배피던 시절 개발자라 닷로띠가 그새 발전했나봐요 ㅎㅎ

 

그래서 도입 시도해봐도 괜찮을 것 같다는 결론을 내림

 

---

닷로띠 어떻게 쓰는 건데?

그냥 슥! 도입하면 될 줄 알았는데

닷로띠는 로띠랑 다르게 코드 세팅이 필요했다

 

디자이너님이 '수연님 닷로띠 그냥은 못넣는 것 같은데 요거 참고해서 나중에 넣어주세용' 라고 보내주셨다

 

https://lottiefiles.com/blog/working-with-lottie-animations/introducing-dotlottie-open-source-file-format

Introducing dotLottie: An Open-Source File Format | LottieFiles

 

일단 추가 패키기 설치가 필요함

 

1. 패키지 설치

@lottiefiles/dotlottie-react

 

요걸 설치해줘야 한다

 

2. DotLottiePlayer.tsx

그리고 DotLottiePlayer 코드가 필요함

import { CSSProperties, useEffect } from 'react';

import { DotLottieReact } from '@lottiefiles/dotlottie-react';

interface DotLottiePlayerProps {
  src: string;
  className?: string;
  style?: CSSProperties;
  loop?: boolean;
  autoplay?: boolean;
  onComplete?: () => void;
  speed?: number;
}

const DotLottiePlayer = ({
  src,
  className = '',
  style = {},
  loop = false,
  autoplay = true,
  onComplete,
  speed = 1,
}: DotLottiePlayerProps) => {
  useEffect(() => {
    if (onComplete && !loop) {
      console.warn(
        'onComplete callback is set but may not work as expected with dotLottie. Consider using loop or monitoring playback state.',
      );
    }
  }, [onComplete, loop]);

  return (
    <DotLottieReact
      src={src}
      className={className}
      style={style}
      loop={loop}
      autoplay={autoplay}
      speed={speed}
    />
  );
};

export default DotLottiePlayer;

 

폴더 넣는 위치는 각 프로젝트마다 다를 듯

 

3. lottie.d.ts

그리고, lottie.d.ts 파일도 추가해준다 (.lottie 확장자 인식)

declare module '*.lottie' {
  const src: string;
  export default src;
}

declare module '*.lottie?url' {
  const src: string;
  export default src;
}

 

4. 필요한 곳에서 닷로띠 파일을 import

닷로띠 플레이어 src 속성에 닷로띠파일 경로를 import해서 집어넣으면 됨

import 닷로띠파일이름 from '@/닷로띠파일경로/닷로띠파일이름.lottie?url';
import DotLottiePlayer from '@/닷로띠플레이어경로/DotLottiePlayer';

// 중략
return (
// 중략
 <DotLottiePlayer src={닷로띠파일이름} style={{ width: '100%' }} loop />
 // 중략
 );
 };

 

5. 주의할 점

내가 해봤을 땐 로띠->닷로띠로 변환한 파일을 적용해봤을 때, 화면에 보이는 요소 크기가 좀 달라졌음

로띠일 때보다 닷로띠로 바꿨을 때 요소 크기가 작아져서, 크기랑 위치를 재조정했음

 

만약 적용하더라도 실제로 눈으로 한 번 확인하고 커밋하는 거 추천~

 

---

결과

적용 전 - 로띠	적용 후 - 닷로띠
194kb	15kb

 

wow!! 194kb -> 15kb

92.3% 용량 감소!!

 

this is 혁신, i think

 

---

아무튼 이 글 읽으시는 분들도

상황 보시고 적절하게 닷로띠 적용하셔서 용량 손해보는 일 없으시길 ㅇㅇ

 

이만!^^

 

작성: 2025.10.09. 오후 10시 51분