영상 없이 움직이는 인포그래픽
Lottie가 바꾼 것 — 가볍고 선명한 홈페이지 애니메이션
- Lottie는 움직임을 영상이 아닌 '데이터(JSON 텍스트)'로 저장하는 애니메이션 파일입니다.
- 단순한 그래픽이라면 GIF·영상보다 훨씬 가볍고, 아무리 키워도 선명합니다.
- 실사 영상은 대체할 수 없으니, 아래 비교표로 자리마다 맞는 포맷을 고르세요.
홈페이지에 '움직임'을 넣기가 왜 어려웠을까
움직이는 요소는 시선을 붙잡습니다. 서비스 과정을 설명하는 짧은 애니메이션 하나가 긴 문단보다 빨리 이해되기도 합니다. 그래서 많은 회사가 메인 화면에 배경 영상이나 GIF(움짤)를 넣습니다.
문제는 무게입니다. 영상과 GIF는 화면의 모든 점(픽셀)을 프레임마다 저장하기 때문에, 길이가 몇 초만 늘어도 용량이 커집니다. 특히 GIF는 몇 초짜리도 수 MB에 이르기 쉽고, 크게 띄우면 흐릿해집니다. 예쁜 움직임을 넣었는데 사이트가 느려지는 이유가 여기에 있습니다.
Lottie란? 움직임을 '데이터'로 저장한 파일
Lottie(로티)는 애니메이션을 JSON이라는 텍스트 형식으로 저장한 파일입니다. JSON은 프로그램이 주고받는 데이터를 글자로 적어 둔 형식인데, Lottie는 여기에 "이 도형이 0초에 여기 있다가 2초에 저기로 간다" 같은 정보를 담습니다. 브라우저는 이 설명을 읽어 그 자리에서 그림을 그려 냅니다.
2015년 디자인 툴용 플러그인(Bodymovin)에서 출발했고, 2017년 에어비앤비 개발자들이 앱에서 재생하는 라이브러리를 만들며 'Lottie'라는 이름을 붙였습니다. 지금은 웹, iOS, 안드로이드에서 두루 쓰입니다.
LottieFiles가 단순한 도형 하나가 4초간 움직이는 장면으로 실험한 결과, GIF는 142KB, Lottie는 약 1.2KB였습니다. 아주 단순한 장면이라 실제 차이는 디자인마다 다르지만, LottieFiles는 수 MB짜리 GIF가 Lottie로는 수 KB에 그치는 경우가 많다고 설명합니다.
무엇이 다른가 — 용량, 선명도, 수정
용량. 픽셀을 저장하지 않으니 재생 시간이 길어져도 용량이 크게 늘지 않습니다. 압축 포맷인 dotLottie(.lottie)를 쓰면 일반 Lottie JSON보다 흔히 50~80% 더 줄어든다고 LottieFiles는 설명합니다.
선명도. 선과 좌표로 그리기 때문에 스마트폰부터 대형 모니터까지 어떤 크기에서도 깨지지 않습니다. 배경을 완전히 투명하게 만들 수 있어 어떤 색 위에 올려도 테두리가 지저분해지지 않습니다.
수정. 브랜드 색을 바꾸거나 문구를 고칠 때 영상처럼 처음부터 다시 렌더링할 필요가 없습니다. 파일 안의 색상 값이나 텍스트를 바꾸면 되는 경우가 많습니다.
참고로 같은 움직임이라면 GIF보다 동영상이 오히려 가볍습니다. 구글의 웹 개발 가이드(web.dev)는 3.7MB GIF를 MP4로 바꾸면 551KB가 된 예를 소개합니다(2018). '움짤은 가볍다'는 생각은 사실과 다릅니다.
우리 회사 사이트, 어디에 쓰면 좋을까
메인 화면(히어로). 무거운 배경 영상 대신, 서비스를 상징하는 그래픽이 천천히 움직이는 장면을 넣으면 첫 화면이 빨리 뜨면서도 밋밋하지 않습니다.
과정 설명. "상담 → 설계 → 제작 → 오픈" 같은 단계를 순서대로 나타나게 하면, 고객이 글을 다 읽지 않아도 흐름을 이해합니다.
아이콘과 버튼. 체크 표시, 장바구니, 문의 버튼에 짧은 반응 애니메이션을 주면 눌렀다는 느낌이 분명해집니다. 스크롤이나 클릭에 반응하도록 만들 수도 있습니다.
숫자와 도표. 누적 고객 수, 만족도 같은 수치를 막대가 자라나는 모습으로 보여 주면 같은 숫자도 훨씬 강하게 기억됩니다.
만능은 아닙니다 — 쓰기 전에 알아 둘 점
Lottie는 그래픽 전용입니다. 카메라로 찍은 제품·매장·인물 영상은 표현할 수 없으니, 실사가 필요한 자리는 여전히 동영상이 맞습니다. 또 Gmail, Outlook 같은 대부분의 이메일과 일부 메신저에서는 재생되지 않아, 뉴스레터에는 GIF가 현실적입니다.
한 페이지에 애니메이션을 너무 많이 넣으면 기기가 그림을 그리는 부담이 쌓입니다. 화면에 보일 때만 불러오고, 화면 밖으로 나가면 멈추게 설정하는 것이 기본입니다. 그리고 애니메이션 속 글자는 검색엔진이 읽기 어려우니, 핵심 문구는 반드시 일반 텍스트로도 적어 두세요.
움직임은 거들 뿐, 메시지는 텍스트로 남겨야 합니다.
저장 포인트 — 영상 vs GIF vs Lottie 한눈에
| 항목 | 영상 | GIF | Lottie |
|---|---|---|---|
| 파일 크기 | 중간~큼 | 큼 | 아주 작음 |
| 확대 선명도 | 해상도 한계 | 깨짐 | 항상 선명 |
| 투명 배경 | 까다로움 | 테두리 거침 | 지원 |
| 수정 | 다시 렌더링 | 다시 제작 | 색·문구 교체 |
| 실사 표현 | 최고 | 화질 낮음 | 불가 |
| 추천 자리 | 제품·브랜드 실사 | 이메일·메신저 | 아이콘·과정·수치 |
홈페이지 리뉴얼이나 상세페이지 제작 전에 이 표를 저장해 두고, 움직이는 요소마다 어떤 포맷이 맞는지 확인해 보세요.
지금 할 수 있는 세 가지
- 움직이는 요소부터 목록으로 만드세요
메인 화면 배경 영상, GIF 배너, 움직이는 아이콘 등 우리 사이트에서 움직이는 것을 모두 적어 봅니다. 의외로 오래된 GIF가 여러 개 숨어 있는 경우가 많습니다. - '그래픽'인지 '실사'인지 나누세요
도형, 아이콘, 도표처럼 그린 것이라면 Lottie 후보입니다. 사람·제품·공간을 찍은 것이라면 압축한 동영상(MP4·WebM)으로 두는 편이 맞습니다. - 한 곳만 바꾸고 속도를 비교하세요
가장 무거운 요소 하나를 먼저 바꾼 뒤, 구글 PageSpeed Insights로 전후 점수를 비교해 보세요. 효과를 숫자로 확인하면 다음 결정이 쉬워집니다.
우리 사이트의 무거운 움직임, 어디서 줄일 수 있을까요?
사이트 주소만 보내주시면 배경 영상·GIF·이미지 용량을 점검하고, 가볍게 바꿀 수 있는 자리를 정리해 드립니다. 영업 전화는 하지 않습니다.
무료 사이트 진단 신청하기 →
참고 자료: LottieFiles 'What is Lottie' 소개 및 Lottie vs GIF 비교(2026 업데이트), LottieFiles 엔지니어링 블로그 Lottie vs 래스터 애니메이션 테스트(2020), LottieFiles dotLottie 최적화 가이드(2022), LottieFiles 런타임 성능 문서, web.dev 'GIF를 동영상으로 교체하기'(2018)
