Lottie(로티) JSON 애니메이션으로 대체하면 GIF 대비 90% 용량 절감, 벡터 기반 무한 해상도, 이벤트 트리거 연동이 모두 가능합니다..aep 원본 파일 양도와 수정 횟수를 명시해야 이후 플로우 변경 시 추가 비용을 막을 수 있습니다.신분증 촬영 가이드 화면에 MP4를 넣었습니다. 기획자 입장에서는 "움직이는 가이드니까 충분하다"고 판단했을 겁니다. 그런데 로그를 보면 정확히 그 화면에서 이탈이 몰립니다.
원인을 추적해 보면 대개 세 가지 중 하나입니다.
이 세 가지는 모두 MP4·GIF라는 소재 포맷의 구조적 한계에서 비롯됩니다. 디자인을 다시 하거나 텍스트를 더 써도 해결되지 않습니다.
고화질 GIF 하나는 2~5MB를 쉽게 넘깁니다. 앱 패키지에 이런 파일이 3~5개 들어가면 초기 로딩 시간이 눈에 띄게 늘어납니다. 사용자는 가입을 시작하기도 전에 기다리다 이탈합니다.
반면 같은 모션을 Lottie JSON으로 만들면 수십 KB 수준입니다. 최신 .lottie 압축 포맷을 쓰면 GIF 대비 90% 이상 용량을 줄일 수 있고, 기존 Lottie JSON보다도 60% 더 작습니다.
MP4와 GIF는 픽셀 고정 포맷입니다. 갤럭시 S24 Ultra의 고해상도 화면에서 제작한 녹화본을 아이폰 SE에서 보면 비율이 맞지 않아 잘리거나 흐릿하게 보입니다.
Lottie는 벡터 기반이라 어떤 화면 크기에서도 선명하게 렌더링됩니다. 신분증 테두리 가이드선이나 카메라 프레임 애니메이션처럼 정확한 위치 안내가 중요한 KYC 화면에서 이 차이는 결정적입니다.
MP4는 그냥 재생됩니다. 사용자가 입력을 완료했든 아직 준비 중이든 상관없이 동일하게 반복됩니다. Lottie는 개발 연동을 통해 이벤트 트리거를 걸 수 있습니다. 예를 들어 비밀번호 입력이 완료되는 순간 체크 애니메이션이 재생되거나, 신분증이 프레임 안에 들어오면 가이드 색상이 바뀌는 식의 연동이 가능합니다.
예산을 효율적으로 쓰려면 퍼널 전체에 모션을 뿌리는 대신, 이탈이 실제로 몰리는 구간만 선별해야 합니다. GA4 또는 앱 내부 이벤트 로그를 열어 드롭오프 비율이 가장 높은 화면 3개를 찾습니다.
핀테크 서비스에서 가장 흔히 나오는 병목 구간은 다음과 같습니다.
이 3개 구간에 각각 3~5초 분량의 Lottie 애니메이션을 적용하는 것이 200만 원대 예산의 현실적인 범위입니다.
외주 작업자에게 UI 시안을 넘길 때 픽셀 이미지가 섞여 있으면 Lottie 변환 품질이 떨어집니다. Figma에서 모든 요소를 벡터 패스로 정리한 뒤 공유하세요.
브리핑 문서에는 다음 항목을 반드시 명시합니다.
브리핑이 구체적일수록 수정 횟수가 줄고 납품 품질이 올라갑니다.
2026년 기준 국내 외주 플랫폼(위시켓, 플로우웍스 등)에서 단건 Lottie 모션의 외주 단가는 난이도에 따라 건당 30~50만 원 수준입니다. 단순 아이콘 전환 모션은 30만 원 이하, KYC처럼 여러 상태 변화가 필요한 가이드 모션은 50만 원 내외로 책정됩니다.
가입 퍼널 핵심 3개 구간 × 평균 40만 원 = 약 120~150만 원이 제작비 기준입니다. 나머지 50~80만 원은 개발 연동 공수와 QA 여유분으로 배정하면 200만 원대 안에서 완성도 있는 팩을 구축할 수 있습니다.
After Effects에는 수식 기반의 Expressions 기능이 있습니다. 작업자가 이를 그대로 두고 JSON으로 내보내면 모바일 Lottie 플레이어에서 렌더링이 안 되는 경우가 생깁니다. 납품 전에 "모든 Expressions를 키프레임으로 Bake해 달라"고 명시적으로 요청하세요.
After Effects의 파티클(Particle), 가우스 블러(Gaussian Blur), 3D 카메라 효과는 Lottie JSON 변환 과정에서 정상 출력이 안 되거나 파일 용량을 폭발적으로 키웁니다. 처음 기획 단계부터 벡터 패스 중심의 플랫 디자인 모션으로 방향을 잡아야 합니다.
최종 산출물은 .lottie 또는 최적화된 .json 파일로 받아야 합니다. 파일 하나당 용량이 수십 KB 단위인지 확인하세요. 만약 수백 KB를 넘는다면 이미지 리소스가 포함되어 있거나 최적화가 안 된 것입니다.
Lottie 파일을 앱에 넣는 방법은 크게 두 가지입니다.
핀테크 앱은 보안 정책상 외부 리소스 호출을 제한하는 경우가 많으므로, 로컬 에셋 배포를 기본으로 설정하고 기업 전용 CDN이 있다면 그쪽을 활용하는 것이 안전합니다.
"금융 약관이 바뀌면 가이드 모션도 바뀌어야 합니다. 원본 파일이 없으면 그때마다 새로 외주를 줘야 합니다."
모션그래픽 외주 계약에서 가장 자주 발생하는 분쟁은 무제한 수정 요구와 원본 파일 미인수입니다.
계약 단계에서 아래 두 가지를 반드시 명시하세요.
.aep)과 Figma 소스를 납품물에 포함. 이후 가입 플로우나 약관이 변경될 때 직접 수정하거나 다른 작업자에게 의뢰할 수 있습니다.Q. Lottie와 Rive 중 어느 것을 써야 하나요?
A. 핀테크 가입 가이드처럼 정해진 순서로 재생되는 안내 모션은 Lottie가 적합합니다. Rive는 마우스 포인터나 실시간 상태 값에 반응하는 게임형 인터랙션에 강점이 있습니다. 두 기술을 혼용하는 경우도 있지만, 200만 원대 예산에서는 Lottie 단일 구성이 현실적입니다.
Q. 외주 작업자를 어디서 찾나요?
A. 위시켓, 플로우웍스 같은 국내 프리랜서 플랫폼에서 'Lottie', 'After Effects 모션그래픽' 키워드로 검색하면 됩니다. 포트폴리오에서 실제 .json 파일 납품 경험이 있는지, 앱 연동까지 해본 사례가 있는지 확인하는 것이 중요합니다.
Q. 개발팀이 Lottie를 처음 써본다면 연동이 어렵지 않나요?
A. iOS, Android, React Native 모두 공식 Lottie 런타임 라이브러리가 있고 문서화가 잘 되어 있습니다. JSON 파일을 지정 경로에 넣고 재생 이벤트를 연결하는 수준이라 경험 있는 개발자라면 반나절 내외로 기본 연동이 가능합니다.
Q. 200만 원 예산으로 몇 개까지 만들 수 있나요?
A. 난이도 중간 수준의 가이드 모션 기준으로 3~5개가 현실적인 범위입니다. 단순 아이콘 전환 모션 위주라면 5개 이상도 가능하고, KYC처럼 복잡한 상태 변화가 있는 모션은 3개로 예산을 집중하는 편이 품질 면에서 유리합니다.
Q. 에이달 스튜디오에 Lottie 모션그래픽 외주를 맡길 수 있나요?
A. 네. 에이달은 기획 단계에서 이탈 퍼널 분석과 브리핑 문서화, After Effects 제작, 개발 핸드오프 설계까지 통합으로 진행합니다. 납품 포맷과 원본 파일 인수 조건도 계약 단계에서 명확히 정리합니다.
화면 녹화본을 가이드로 쓰는 것은 빠르고 저렴해 보이지만, 정작 이탈이 가장 많이 발생하는 KYC·계좌 인증 구간에서 그 한계가 드러납니다. Lottie 기반 UI 모션그래픽은 고가의 영상 프로덕션 없이도 200만 원대 예산 안에서 가입 퍼널의 시각적 완성도와 신뢰감을 높이는 현실적인 대안입니다.
퍼널 분석 → 브리핑 → 제작 → 핸드오프 → 계약 조건까지 각 단계에서 확인해야 할 포인트를 이 글에서 정리했습니다. 어느 구간에서 시작할지 아직 판단이 서지 않는다면, 먼저 로그 데이터를 꺼내 이탈 상위 3개 화면을 찾는 것부터 시작하세요.
에이달 스튜디오에 콘텐츠 제작 문의를 주시면 퍼널 구간 분석부터 Lottie 외주 브리핑 설계까지 함께 검토해 드립니다.
📧 master@adall.co.kr | 📞 02-2664-8631
무료 컨설팅 받아보고 싶다면?
무료 컨설팅 신청하기