런타임 및 개발자

Bodymovin과 LottieFiles After Effects 플러그인중 어떤게 더 나을까요?

10 가지의 핵심 모션 디자인 기능에 대해 알아보세요

1. Lottie 선택하기 안드로이드 앱을 위한 Lottie를 선택하세요. 나만의 Lottie를 사용해도 되지만, LottieFiles에서 무료로 제공하는 수많은 Lottie 애니메이션 [https://lottiefiles.com/featured] 중 하나를 선택할 수 있어요. 선택된 Lottie는 안드로이드용 LottieFiles 앱 [https://lottiefiles.com/android]을 사용하여 애니메이션이 동일한  안드로이드에서 작동되는지 꼭 테스트 해봐야 합니다. 가끔 Lottie 안드로이드 플레이어에서 지원하는 기능으로는 만들어지지 않는 애니메이션이 있거든요. LottieFiles에서 애니메이션 아래에 있는 QR 코드를 앱으로 스캔하면 애니메이션을 미리 보기 할 수 있습니다. 안드로이드용 LottieFiles 다운받기2. 프로젝트 설정하기 Lottie를 사용하는 방법은 아주 간단해요. 여러분이 IDE로 안드로이드 스튜디오(Android Studio)를 사용

Lottie는 Android, iOS, 웹 브라우저, React 등과 호환되는 고품질 JSON 인코딩 애니메이션입니다. 여기서 [https://lottiefiles.com/what-is-lottie] Lottie가 무엇인지 자세히 알려 드리겠습니다. Lottie를 어떻게 사용하는지 알 수 있는 가장 좋은 방법은 Lottie를 임베드하는 것입니다. 이 단계적 설명을 따라 좋아하는 Lottie를 React 앱에 임베드하는 방법을 알아보세요. 1. Lottie 선택하기 자신의 애니메이션을 선택하거나 LottieFiles [https://lottiefiles.com/featured]에서 다양한 무료 애니메이션 중 하나를 선택할 수 있습니다. 애니메이션이 Lottie 형식(.json)으로 되어 있는지 확인하세요. 이 단계적 설명에서는 아래 애니메이션을 사용하겠습니다. 키스 오브 하트 [https://lottiefiles.com/18304-kiss-of-the-heart]2. React

Lottie가 처음인, 애니메이션이 처음인 당신을 위해. Lottie가 무엇인지부터, Lottie와 GIF 비교까지! 이번 글에서 핵심만 간단히 설명해 드릴게요. 1. Lottie vs GIF 요즘 디자이너 사이에서 가장 인기있는 웹 애니메이션 형식을 꼽으라면 단연 Lottie와 GIF일 것입니다. GIF, 한국에서는 ‘움짤’ 이라는 단어로 더 친숙할 이 용어는 가장 대중적으로 사용되는 애니메이션 포맷이죠. GIF는 꽤 오랜 시간 전부터 우리 곁에 함께한, 그래서 더욱 친숙한 포맷입니다. 여러 웹 페이지나 SNS에서도 GIF는 쉽게 발견됩니다. 반면 Lottie는 디자이너가 아니라면 쉽게 접하지 못한 포맷일 것입니다. 최근 출시된 애니메이션 파일 형식 Lottie는 JSON을 기반으로 하는 애니메이션 형태입니다. 하지만 Lottie는 출시되자마자 특유의 효율성으로 업계에서 큰 인기를 얻었고, 이제는 전통의 강자 GIF와 어깨를 나란히 할 만큼 유명세를 타고 있답니다! Lottie

고객의 이목을 끌어야 성공하는 현대 사회에서, 성공을 위해 가장 중요한 건 최소 비용으로 가장 큰 성과를 이끌어낼 수 있는 능력입니다. 저화질 유저 인터페이스는 이목을 집중하지 못하지만, 고화질 그래픽은 고객의 눈길을 사로잡죠. 그러나 고화질 그래픽을 활용할 때 저장, 전송 및 렌더링 비용을 균형 있게 조정해야 하는 문제는 쭉 이어져 왔습니다. Lottie와 함께하기 이전까지는 말이죠! 이제 Lottie와 함께해보세요. Lottie가 제공하는 가벼운 애니메이션 그래픽 형식이 이 문제를 해결해 주니까요. Lottie는 기존 그래픽 형식에서는 불가능했던, 여러 동적 기능으로 어플리케이션을 더 가볍고 견고하게 만들어줄 겁니다. Lottie는 웹과 모바일 플랫폼, IoT뿐만 아니라 데스크톱과 노트북에서도 별도의 소프트웨어 없이 재생할 수 있는 애니메이션 포맷입니다. LottieFiles [https://lottiefiles.com/]를 지금 켜보시면, 페이지에서 바로 애니메이션이 재

사람들을 연결하는 공간인 인터넷을 더 역동적으로 만드는 건 이미지일 거예요. 온라인 커뮤니티나 채팅창에서 긴 문장보다 감정을 대변해주는 이미지 또는 움짤(움직이는 이미지) 하나가 소통을 더 효율적으로 만들어주기도 하고요. 웹사이트에 적절히 삽입된 그래픽 하나가 전체적인 무드를 살려주기도 해요. 이런 이미지들은 보통 PNG, SVG 등과 같은 파일 형식으로 만들어지는데요. 개발자, 애니메이터, 디자이너 분들이 많이 제작하지만 요즘에는 전문가가 아닌 분들도 쉽게 만들 수 있는 환경이 되었어요. 그래서 용어가 이미 익숙한 분도 아마 많을 거예요. 이렇게 이용자가 늘다 보니 PNG, SVG 외에도 다양한 사용 사례를 만들 수 있는 이미지 형식들이 생겼어요. Lottie [https://lottiefiles.com/] 는 그중에서도 특히 많은 주목을 받고 있어요. 그래서 이번 글에서는 PNG, SVG, 그리고 Lottie를 비교해 봅니다. 총 6개의 비교 기준을 두고, 각 포맷의

웹페이지를 멋지게 꾸미고 싶으세요? Lottie를 사용하면 웹사이트에 멋진 애니메이션을 쉽게 추가할 수 있습니다. Lottie 애니메이션 [https://lottiefiles.com/what-is-lottie]은 아주 작은 파일 형식이기 때문에 웹사이트를 느리게 만들지 않고 생동감을 불어넣어요. 게다가, 확대하고 축소해도 화질이 떨어지지 않죠. 그럼 Lottie 애니메이션을 어디에서 받을 수 있을까요? 아마 애니메이터가 이미 맞춤 애니메이션을 만들었거나, LottieFiles 플러그인 [https://lottiefiles.com/plugins/after-effects]을 사용해 Adobe After Effects에서 애니메이션을 내보냈을 겁니다. 아니면 LottieFiles [https://lottiefiles.com/featured]에서 수 천개의 무료 애니메이션을 찾을 수도 있어요. Lottie Editor나 색상 팔레트 기능 [https://lottiefiles.com/fe

지금까지는 상호작용을 활용한 Lottie 애니메이션의 경우 하나의 상호작용(클릭, 커서 올리기, 탐색, 반복, 토글 등을 할 때 애니메이션 재생)을 활용하는 경우가 대부분이었죠. 따라서 오픈소스 라이브러리인 Lottie 인터랙티비티(Lottie-Interactivity [https://github.com/LottieFiles/lottie-interactivity])를 통해 Lottie 애니메이션과 상호작용하는 방식을 바꾸고 이를 최대한 쉽게 만들고자 합니다. 이번 블로그 글에서는 현재 사용할 수 있는 기능을 소개해 드리겠습니다. 상호작용 연결이란 무엇인가요? 상호작용 연결(Interaction chaining)이란 Lottie [https://lottiefiles.com/interactivity#LI-chaining] 인터랙티비티를 통해 Lottie 애니메이션과 상호작용하는 새로운 방식을 말합니다. 이 새로운 기능을 통해 여러 사용 가능한 상호작용 및 플레이어 관련 이벤트에 따라

이 글을 읽고 계신다면 iOS 앱에 마법을 한번 부려보고 싶은 분이시겠죠. 이번에는 앱을 돋보이게 하고 사용자를 즐겁게 할 그런 환상적인 마법을 한층 더 멋지게 만들 방법을 알아보겠습니다. iOS 앱에 사용되는 Lottie 애니메이션에 마법의 가루를 뿌려 보세요. 어떻게 할 수 있냐고요? 물론, 다양한 방법이 있지만, 여기에서는 Lottie를 사용하는 방법을 배워 볼게요. 이 글에서 다룰 내용 글을 다 읽고 나면 iOS 앱에 커스텀 Lottie 애니메이션을 활용하는 방법을 이해하고 직접 해보실 수 있을 거예요. 그러면 함께 만들어볼 애니메이션을 확인해 볼까요. Lottie가 뭐죠? Lottie는 JSON 기반의 애니메이션 파일 형식을 말합니다. 디자이너가 Lottie를 통해 어느 플랫폼에서나 정적 애셋만큼 쉽게 애니메이션을 활용할 수 있죠. 자세한 내용은 여기에서 읽어 보세요. 알겠어요. 이제 준비됐어요! 뭐부터 시작할까요? 좋습니다. 그럼 먼저 Xcode를 열고 새 iOS

어떤 로고에나 애니메이션 효과를 줄 수 있는 능력을 가졌다면 어떨까요? 모션 디자이너와 복잡한 소프트웨어 없이 그저 화장실에 다녀올 짧은 시간 안에 회사 로고에 애니메이션 효과를 줄 수 있다고 상상해 보세요. 네, 바로 LottieFlies와 함께라면 가능하죠. 단지 SVG to Lottie 툴을 사용해 Adobe After Effects [https://lottiefiles.com/plugins/after-effects]없이 어떤 로고에든 애니메이션 효과를 줄 방법이 여기에 있습니다. 영상 보기: Adobe After Effects 없이 로고에 애니메이션 효과 주기 아래 비디오 튜토리얼을 시청하거나 아래로 스크롤하여 기록된 안내 사항을 확인해 보세요. 튜토리얼을 따라 연습할 수 있는 연습 파일 [https://www.figma.com/community/file/1083403045231684111/Animate-your-Logo]은 여기에서 다운로드하실 수 있습니다. 1.

여러분, 한번 상상해 보시겠어요? 프로젝트 작업을 위한 완벽한 Lottie 애니메이션 열심히 찾다가  웹사이트, 앱 또는 마케팅 자료에 딱 맞는 애니메이션을 겨우 찾아낸 상황! 그런데 기쁨도 잠시…색상이 틀리거나 텍스트가 잘못되었거나, 재생 속도가 너무 빠르거나 크기가 너무 작은 파일이라면? 상상만해도 답답하죠. 이제 걱정하지 마세요. Lottie Editor를 사용하면 디자이너가 아니더라도 어떤 Lottie 애니메이션이든 쉽게 편집할 수 있습니다. Lottie Editor로 차원, 레이어, 재생 속도, 프레임 속도, 색상 등 다양하고 섬세한 조절이 가능하거든요. 동영상 보기: Lottie Editor를 사용한 애니메이션 편집 방법 자세한 내용은 아래의 튜토리얼 영상을 참조하거나 문서 버전을 통해 내용을 확인하실 수 있습니다. 튜토리얼을 따라 진행하려면 튜토리얼의 디자인 자산을 클릭하세요. 그럼 시작해 볼까요? 1. Lottie 애니메이션을 준비하세요 준비된 Lottie 애니메