패션 브랜드 자사몰 리뉴얼을 마치고 메인 히어로 영역에 시네마틱 브랜드 필름을 올렸습니다. 데스크톱에서는 완벽했습니다. 그런데 GA4를 열어보니 모바일 이탈률이 전월 대비 18%포인트 상승해 있었습니다.
원인은 단순합니다. 모바일 로딩 속도가 1초에서 3초로 늘어나면 이탈 확률은 약 32% 오릅니다. 3초를 넘기면 모바일 트래픽의 53%가 페이지를 떠납니다. 반대로 로딩 속도를 0.1초만 단축해도 소매 유통 기준 구매 전환율이 8.4% 오르고 장바구니 담기 비율이 9.1% 증가합니다.
문제는 '영상이 있다'는 사실이 아닙니다. 영상이 어떤 포맷으로 납품되었는가입니다.
MP4는 프레임별 이미지 데이터를 통째로 담습니다. 고화질 브랜드 필름 한 편이 30~80MB에 달하는 건 흔한 일입니다. 모바일 LTE·5G 환경이라도 이 용량은 첫 화면 렌더링을 지연시킵니다.
GIF는 더 심각합니다. 압축 효율이 낮아 짧은 루프 애니메이션 하나가 MP4 동영상보다 수배 무거운 경우가 많습니다. 로딩 지연에 더해 CPU를 과도하게 점유합니다.
구글은 2026년 Core Web Vitals 업데이트에서 INP(Interaction to Next Paint) 의 검색 순위 가중치를 극대화했습니다. INP는 사용자가 버튼을 탭하거나 스크롤할 때 브라우저가 얼마나 빠르게 반응하는지를 측정합니다.
무거운 영상 파일이 메인 스레드(Main Thread)를 점유하면 스크롤이 버벅거리고 INP가 악화됩니다. 이는 SEO 순위 하락과 브랜드 신뢰도 손상으로 직결됩니다. 영상 최적화는 이제 UX 문제인 동시에 검색 노출 문제입니다.
모든 영상을 하나의 포맷으로 해결하려는 접근이 문제의 시작입니다. 콘텐츠 성격에 따라 두 가지 포맷을 나눠 써야 합니다.
WebM은 구글이 개발한 오픈소스 비디오 포맷입니다. 쉽게 말해 MP4보다 훨씬 효율적으로 압축되면서 화질은 동등하게 유지하는 포맷입니다. 투명도(Alpha Channel)도 지원하기 때문에 배경이 투명한 제품 영상에도 적용할 수 있습니다.
인코딩 실무 기준:
FFmpeg 또는 Handbrake로 VP9 또는 AV1 코덱 인코딩<video> 태그 안에 투명 MP4(HEVC)를 폴백(Fallback)으로 적층크로스 브라우징 폴백 처리 없이 WebM만 납품하는 경우, 특정 기기에서 영상이 아예 재생되지 않는 문제가 발생합니다. 납품 사양서에 폴백 미디어 포함 여부를 반드시 확인하세요.
Lottie는 어도비 애프터 이펙트에서 디자인한 애니메이션을 JSON 형태의 벡터 코드로 변환해 브라우저에서 실시간으로 그리는 기술입니다. 벡터이기 때문에 어떤 해상도에서도 화질이 깨지지 않습니다.
여기서 한 단계 더 나아간 것이 dotLottie(.lottie) 포맷입니다. 기존 JSON 텍스트 파일에 Deflate 압축 아카이브 기술을 적용해 파일 크기를 기존 Lottie 대비 최대 50~90%까지 추가 감소시킵니다. 이미지·폰트 등 멀티 자산도 단일 파일로 패키징할 수 있어 HTTP 요청 수도 줄어듭니다.
Lottie 최적화 실무 기준:
Bodymovin 플러그인 내보내기 시 좌표 정밀도 축소, 숨겨진 레이어 제외(Disable hidden layers) 옵션 활성화LottieFiles Advanced Optimizer를 거쳐 .lottie 포맷으로 최종 변환svg 대신 canvas로 설정해 DOM 노드 과부하 방지2026년 Lottie 생태계의 진화:
Lottie는 이제 단순 모션 재생 수준을 넘어섰습니다. 상태 머신(State Machines)을 통한 인터랙티브 모션, 다크 모드 대응 동적 테마, 실시간 물리 시뮬레이터 연동이 가능한 런타임 엔진으로 발전했습니다. 스크롤 트리거 애니메이션이나 마이크로 인터랙션을 자사몰에 구현할 때 이 포맷을 활용하면 JavaScript 라이브러리 의존도 없이 몰입형 경험을 설계할 수 있습니다.
좋은 포맷으로 납품받았더라도 프론트엔드 마크업이 잘못되면 효과가 반감됩니다. 영상 제작을 의뢰할 때 아래 세 가지가 납품 사양에 포함되는지 확인하세요.
① 레이아웃 시프트(CLS) 방지
영상이 로딩되는 동안 주변 텍스트와 버튼이 출렁거리는 현상을 CLS(Cumulative Layout Shift)라고 합니다. 영상 컨테이너에 CSS로 고정 크기를 미리 할당해두면 방지할 수 있습니다. CLS도 Core Web Vitals 지표이기 때문에 SEO에 직접 영향을 줍니다.
② Intersection Observer 기반 지연 로딩(Lazy Loading)
첫 화면 아래에 있는 영상은 사용자가 해당 영역에 도달했을 때만 로딩되도록 제어해야 합니다. 초기 페이지 로드 시 메인 스레드 점유를 최소화하는 핵심 기법입니다.
③ Dynamic Import(동적 자바스크립트 분할)
Lottie 재생 라이브러리를 페이지 초기 로드 시 일괄 불러오면 JavaScript 실행 지연이 생깁니다. Dynamic Import로 필요할 때만 불러오면 INP 점수가 실질적으로 개선됩니다.
이 세 가지는 영상 제작 업체가 아니라 개발팀의 영역이라고 생각하기 쉽습니다. 하지만 납품 포맷과 마크업 사양을 함께 설계해주는 프로덕션과 그렇지 않은 곳의 차이는 실제 자사몰 성과에서 드러납니다.
포맷 최적화는 후반 작업 직전에 결정하는 것이 아닙니다. 아래 각 단계에서 미리 설계되어야 합니다.
방향 설정 단계: 영상이 실사 중심인지 2D 모션 중심인지, 메인 히어로 영역인지 스크롤 트리거 섹션인지에 따라 WebM 또는 dotLottie 포맷이 결정됩니다. 이 판단이 촬영 방식과 후반 파이프라인 전체를 바꿉니다.
기획 설계 단계: 자사몰 메인에 동시 재생될 모션 요소 수를 제한하는 '성능 예산(Performance Budget)'을 크리에이티브 브리프 단계에서 설정합니다. 디자인 욕심과 로딩 속도 사이의 트레이드오프를 이 단계에서 명시적으로 협의해야 합니다.
제작 준비 단계: Lottie 기반 모션을 기획했다면 애프터 이펙트 레이어 구조를 Bodymovin 내보내기에 최적화된 방식으로 설계해야 합니다. 레이어 구조를 나중에 바꾸면 모션 전체를 재작업해야 하는 경우가 생깁니다.
후반 작업 단계: WebM 인코딩 파라미터(코덱, 비트레이트, 해상도 분기), dotLottie 변환 및 최적화, 폴백 미디어 제작이 이루어집니다. 단순히 '파일 변환'이 아니라 타깃 기기와 네트워크 환경을 고려한 인코딩 판단이 필요합니다.
납품·활용 단계: 납품물에는 WebM + 폴백 MP4 세트, dotLottie 파일, 마크업 가이드(CLS 방지 CSS, Lazy Loading 구현 예시, Dynamic Import 코드 스니펫)가 포함되어야 합니다. 영상 파일만 전달하는 납품은 절반짜리 결과물입니다.
앱 서비스 'Kiwi'는 온보딩과 홈 스크린 영역의 고해상도 영상을 경량화된 Lottie 모션으로 교체했습니다. 결과는 사용자 이탈률 10% 감소, 회원 가입 및 구매 전환율 3배 증가였습니다.
2026년 기준 글로벌 모바일 웹의 평균 페이지 용량은 약 2.3MB이며, 이 중 JavaScript 단독 페이로드가 약 468KB에 달합니다. 여기에 최적화되지 않은 브랜드 영상이 더해지면 병목은 배가됩니다. 모션 용량과 JavaScript 최적화는 선택이 아닌 생존 전략입니다.
영상 제작 의뢰 전, 아래 항목을 업체에 직접 질문해보세요. 답변의 구체성이 기술 역량을 판단하는 기준이 됩니다.
<video> 마크업 우선순위 설계 경험이 있는가Q. WebM 포맷은 모든 스마트폰에서 재생되나요?
A. 크롬 기반 안드로이드와 최신 사파리(iOS 16 이상)에서 폭넓게 지원됩니다. 다만 구형 iOS 기기나 일부 브라우저 환경에서는 재생이 안 될 수 있습니다. 이 때문에 <video> 태그 안에 WebM을 우선 순위로 두고, 투명 MP4(HEVC)를 폴백으로 적층하는 방식이 표준입니다. 납품 시 두 포맷이 함께 제공되는지 반드시 확인하세요.
Q. Lottie는 어떤 영상에 적합한가요? 실사 촬영 영상에도 쓸 수 있나요?
A. Lottie는 벡터 기반이기 때문에 2D 일러스트, 캐릭터 애니메이션, 아이콘 모션, 스크롤 트리거 인터랙션, 로딩 인디케이터에 최적입니다. 실사 촬영 영상이나 복잡한 3D 렌더링 결과물에는 적합하지 않습니다. 그 경우에는 WebM을 사용하세요. 두 포맷을 콘텐츠 유형에 따라 나눠 쓰는 것이 핵심입니다.
Q. 기존에 제작된 MP4 영상을 WebM으로 변환만 해도 되나요?
A. 변환 자체는 가능하지만, 원본 MP4의 화질과 비트레이트 설정에 따라 변환 결과물의 품질이 달라집니다. 처음부터 WebM 납품을 목표로 촬영 단계의 원본 품질과 후반 인코딩 파라미터를 함께 설계하는 것이 최적의 결과를 냅니다. 단순 포맷 변환 의뢰보다 처음부터 포맷 사양을 포함한 제작 의뢰를 권장합니다.
Q. dotLottie와 기존 Lottie(JSON) 파일의 차이가 실제로 크게 느껴지나요?
A. 네, 특히 모바일 환경에서 체감 차이가 큽니다. dotLottie는 기존 JSON 파일 대비 크기를 최대 50~90%까지 줄이기 때문에 HTTP 전송 시간이 단축됩니다. 또한 이미지나 폰트 등 멀티 자산을 단일 파일로 패키징할 수 있어 HTTP 요청 수도 줄어듭니다. 2026년 기준으로 Lottie 기반 모션 제작 시 dotLottie 포맷 납품이 사실상 표준으로 자리잡고 있습니다.
Q. 자사몰 개발팀이 없어도 이 최적화를 적용할 수 있나요?
A. 프론트엔드 마크업(CLS 방지 CSS, Lazy Loading, Dynamic Import)은 개발 지식이 필요합니다. 다만 납품 시 구현 가이드와 코드 예시를 함께 받으면 외부 개발자나 카페24·쇼피파이 등 플랫폼의 커스텀 코드 영역에서 적용할 수 있습니다. 납품물에 이 가이드가 포함되는지 사전에 확인하세요.
에이달은 브랜드 영상의 기획·제작·후반 작업뿐 아니라, 자사몰 메인에서 실제로 작동하는 납품물 설계까지 함께 고민합니다. WebM 인코딩 사양, dotLottie 최적화, 크로스 브라우징 폴백 구성, 프론트엔드 마크업 가이드를 포함한 납품 설계가 필요하다면 아래로 문의해 주세요.
콘텐츠 제작 문의 또는 현재 자사몰 영상 환경에 대한 진단 상담을 원하시면 언제든지 연락 주세요.
무료 컨설팅 받아보고 싶다면?
무료 컨설팅 신청하기