디자이너와 개발자가 자주 겪는 Lottie 핸드오프 FAQ - Figma Config Watch Party Seoul

Transcript

1. 디자이너와 개발자가 자주 겪는 Lottie 핸드오프 FAQ 유진의, LottieFiles jinny@lottiefiles.com
2. 우리는 왜 같은 애니메이션을 두 고도 다른 걸 보는가?
3. 발표자 소개 유진의 • • 프론트엔드 엔지니어 @ LottieFiles dotLottie 엔진(ThorVG), Lottie Creator
4. 인트로 - 이 밤, 우리가 나눌 이야기 개발자 디자이너 "디자이너님… 이거 안 돌아가요" "ㅠㅠ…"
5. 인트로 - 이 밤, 우리가 나눌 이야기 개발자 디자이너 디자이너와 개발자의 평행우주
6. 인트로 - 이 밤, 우리가 나눌 이야기 디자이너 한밤중에 서로의 탓을 하지 않기 위한 짧은 가이드 개발자
7. FAQ #1 - "이건 왜 다르게 보여요?"
8. 1. 렌더링 이슈 AE의 모든 효과가 Lottie에서 지원되진 않음 → 공식 Lottie Feature 지원 목록 체크하기
9. 1. 렌더링 이슈 플레이어 뿐만 아니라 '플러그인' 지원여부도 각각 확인 내보내고, 가져오는 모든 구간에서 확인필요
10. 1. 렌더링 이슈 비트맵 이미지 대신 Shape 레이어 이용 → 정확한 렌더링 보장 → 꼭 필요한 영역에만 이미지 활용하기 벡터 요소가 비트맵으로 표현되는 케이스가 있어요 → 기기 해상도에 따라 깨져보여요
11. 1. 렌더링 이슈 폰트 불일치 이슈 • • • Font Asset을 제대로 내보내지 않았거나 Shape Layer 변환을 까먹음 개발 환경에서의 폰트 로딩 오류 / 차이 출처 : https://forum.lottiefiles.com/t/the-text-is-shown-differently-by-os/2145 → '폰트 내보내기'를 항상 체크하고 빠른 핸드오프를 원한다면 Shape로 변환하여 내보내기
12. 1. 렌더링 이슈 Gradient, Mask, Shadow, LayerEffect, Expressions, Text Range는 렌더링 차이가 발생하기 쉬운 피쳐 → 고급 기능이 지원되지 않는 플레이어가 다수있으며 → 플러그인과 플레이어의 표현 방식이 다름 → 하드웨어 제약사항에 따라 다르게 표현/무시 될 수 있음 • • 다른 피쳐로 동일하게 구현할 수 있다면, 우회하여 구 현권장 불가피하다면 핸드오프 후 결과확인을 꼼꼼하게
13. 1. 렌더링 이슈 디자이너/개발자 간 같은 뷰어로 미리보기 권장 • • 같은 유전자를 공유하는 Viewer/Player 확인은 필수 많은 케이스에서 서로 다른 버전을 사용하는 경 lottie-player, lottie-web → LottieFiles Preview (https://app.lottiefiles.com/preview) dotLottie → dotLottie Viewer (https://lottiefiles.github.io/dotlottie-web/) 뷰어/플레이어를 같은 종류로 Align하기
14. FAQ #2 - "이거 왜 멈췄어요?"
15. "이럴려고 모션을 쓴게 아닌데…"
16. 2. 애니가 멈추는 이유 Lottie는 기본적으로 자동 재생 설정 필요 (autoPlay: true) → autoplay 속성을 빼먹으면 자동재생이 안돼요
17. 2. 애니가 멈추는 이유 반복 재생하려면 JSON 혹은 플레이어에 loop: true 명시 → loop가 없으면 한번만 재생돼요 특정 시점 이후(스크롤 등) 보이는 애니메이션에게 는
18. 번외 : 당신의 애니가 이상한데서 멈추는 이유
19. 2. 애니가 멈추는 이유 마커가 설정되진 않았을까요? e.g) 워크스페이스 만지다가 Segments 설 정을 잘못 건드린 경우
20. 2. 애니가 멈추는 이유 불필요한 구간설정 여부를 확인하세요 JSON 파일에서 "markers" 유무 → 의도하지 않았다면 세그먼트 제외하기
21. FAQ #3 - "이건 왜 이렇게 무거워요?"
22. 3. 파일 사이즈가 너무 클 때 비트맵 이미지 남용 → .png 등 리소스 포함됨 → 용량 급증 (수 MB 이상 가 능) 😅
23. 3. 파일 사이즈가 너무 클 때 숨김처리 Layer, Opacity: 0 → 유저에게 보이지 않는 레이어는 제외하고 Export
24. 3. 파일 사이즈가 너무 클 때 Unused Glyph • • 폰트 파일 사용시 쓰지 않는 글리프까지 로딩됨 또는 사용하지 않는 글리프가 Shape로 Export됨 → 가능하면 텍스트는 Shape로 변환하고, 사용 글리프만 포함되 도록 설정
25. 3. 파일 사이즈가 너무 클 때 Segments 설정 후 특정 구간만 계속 사용할 때 • • 0~30초 구간만 사용하는 경우 30~60초 구간은 버려지고 있음 → Marker(Segments)를 쓰지 않고 해당 구간만 Export
26. 3. 파일 사이즈가 너무 클 때 → 파일 압축, Optimized Lottie 활용하기
27. FAQ #4 - "iOS에선 잘 되는데 안드로이드에선 왜 안보여 요?"
28. 4. 크로스플랫폼 렌더링 문제 가장 많이 받는 고질적인 문제 플랫폼별 라이브러리 구현이 다를 수 밖에 없기 때문에 어쩔 수 없이 발생하는 가장 근본적인 문제 → 해결책이 없나?
29. 4. 크로스플랫폼 렌더링 문제 전 플랫폼 호환가능한 Lottie Player 플랫폼별 결과물이 항상 동일해야하는 Strict한 요구사항은 dotLottie Player를 이용
30. 4. 크로스플랫폼 렌더링 문제 with
31. 4. 크로스플랫폼 렌더링 문제 플랫폼별 동일한 렌더링 결과 보장
32. 4. 크로스플랫폼 렌더링 문제 파일용량 압축효과는 덤으로 -72%
33. FAQ #5 - "이미지가 안 떠요"
34. 5. 이미지 경로 로딩 문제 분명 나는 잘 Export 했는데, 이상하게 보임 출처 : https://forum.lottiefiles.com/t/lottie-files-not-showing-up-in-preview-test-lottie/5207
35. 5. 이미지 경로 로딩 문제 경로 기반으로 이미지 에셋이 포함 + 해당 이미지를 제대로 서빙하지 못함
36. 5. 이미지 경로 로딩 문제 Encoded 이미지 에셋으로 내보내거나
37. 5. 이미지 경로 로딩 문제 개발자의 도움을 받으세요 → 이미지 embed 방식을 base64로 변경
38. FAQ #6 - "잘 나오는데 앱이 너무 느려 요"
39. 6. 성능 드랍의 주범들 (Blur 외) • • • Blur, Drop Shadow, Glow → GPU 렌더링 비용 큼, 프레임 저하 (꼭 필요한 피쳐인지 생각해보기) 복잡한 Path Animation, Expression, 다수의 레이어 → 모바일 렌더링 부담 플레이어에 따라 최적화 상태 다름 → 검증된 라이브러리를 이용하고 → 필요시 크로스플랫폼 Player 이용 (e.g, dotLottie)
40. 정리 - wrap-up & 실전 팁 💡
41. 정리 / wrap-up • • Feature 특성/지원정보 확인하기 → Plugin과 Player 간의 지원정보 → 렌더링 차이 : Gradient, Expressions, Mask, Shadow, Text Range → 앱/웹 성능문제 : Blur/Drop Shadow, Path Animation 올바른 Player/Viewer 사용 → 디자이너와 개발자가 서로 같은 결과 바라보고 기대하기 → 전 플랫폼 호환 / 유사 성능 보장 / 파일압축 → dotLottie 이용해보기
42. 번외 - <휴먼 최적화>
43. 핸드오프 잘하는 마음가짐 - 우리가 싸우는 이유는 기술이 아니라 마음입니다 - ✅ "이거 왜 깨지지?" 전에 → 같은 뷰어에서 먼저 확인해보기 🤝 서로 다른 툴로 미리보기한 뒤 “깨졌다” 판단 금지! 👉 LottieFiles Preview, dotLottie Viewer 등 공통 기준 세팅!
44. 핸드오프 잘하는 마음가짐 - 우리가 싸우는 이유는 기술이 아니라 마음입니다 - ✅ “이건 왜 또 안 돼요…” 보다, → 지원 여부 먼저 체크하고 시작하기 🧩 “혹시 이 효과는 플레이어에서 안 될 수도 있어요~” 📋 Lottie 공식 지원 목록 참고 공유 = 불필요한 시간낭비 방지! Lottie 지원정보
45. 핸드오프 잘하는 마음가짐 - 우리가 싸우는 이유는 기술이 아니라 마음입니다 - ✅ 수정요청은 “버그”가 아니라 “조정사항” 💬 “이거 깨졌어요” → “혹시 이 파트가 이렇게 표현되면 더 자연스러울까요?” 🤗 서로의 입장에서 어긋남을 설명해주는 말투, 갈등 줄이는 지름길
46. 핸드오프 잘하는 마음가짐 - 우리가 싸우는 이유는 기술이 아니라 마음입니다 - ✅ 피드백 주기 전에 “플레이어, 플랫폼, 버전” 먼저 확인 🧠 “iOS 17 Safari에서만 이상하게 보여요!” 👉 플랫폼 명시 없이 말하면 서로 헛수고 😓
47. 핸드오프 잘하는 마음가짐 - 우리가 싸우는 이유는 기술이 아니라 마음입니다 - ✅ 실시간 수정보다 미리 가이드 문서화 📝 애프터이펙트 내 애니메이션 스타일 가이드 or 자주 깨지는 피쳐 정리 👉 자주 반복되는 문제 최소화!
48. 핸드오프 잘하는 마음가짐 - 우리가 싸우는 이유는 기술이 아니라 마음입니다 - ✅ 애니메이션 QA도 “테스트”라는 걸 인지 🧪 디자이너도 개발자처럼 테스트 기준 세우기 👉 “이 상태면 완료”, “이건 예외” 기준 있으면 줄줄이 수정 피함!
49. 핸드오프 잘하는 마음가짐 - 우리가 싸우는 이유는 기술이 아니라 마음입니다 - ☕ "힘들 땐 같이 커피 마시기 " 👉 때로는 말보다 진심이 더 통하는 법. 같이 보고 웃고, 같이 고치면 더 잘됩니 다 :)
50. 결론 "우리는 결국 같은 애니메이션을 보고 있 었다"
51. 6. 결론 • • 공감과 배려가 최고의 최적화 이 밤, 다툼 없이 끝내는 Lottie 핸드오프 정리 끝
52. Lottie 관련 문의는 언제든지 환영 • • jinny@lottiefiles.com / support@lottieFiles.com linkedin.com/in/jinui 발표자료 QR 유진의 링크드 인 발표자 료
53. LottieFiles Figma to Lottie 지원기능정보 LottieFiles for After Effects 지원기능정보 플러그인 지원기능 정보
54. https://lottie.link/community/join LottieFiles 커뮤니티와 함께 하세요!
55. We Lottie You!