LottieFiles 블로그

1. Lottie 선택하기 안드로이드 앱을 위한 Lottie를 선택하세요. 나만의 Lottie를 사용해도 되지만, LottieFiles에서 무료로 제공하는 수많은 Lottie 애니메이션 [https://lottiefiles.com/featured] 중 하나를 선택할 수 있어요. 선택된 Lottie는 안드로이드용 LottieFiles 앱 [https:...

Lottie는 Android, iOS, 웹 브라우저, React 등과 호환되는 고품질 JSON 인코딩 애니메이션입니다. 여기서 [https://lottiefiles.com/what-is-lottie] Lottie가 무엇인지 자세히 알려 드리겠습니다. Lottie를 어떻게 사용하는지 알 수 있는 가장 좋은 방법은 Lottie를 임베드하는 것입니다. 이 단계...

Lottie가 처음인, 애니메이션이 처음인 당신을 위해. Lottie가 무엇인지부터, Lottie와 GIF 비교까지! 이번 글에서 핵심만 간단히 설명해 드릴게요. 1. Lottie vs GIF 요즘 디자이너 사이에서 가장 인기있는 웹 애니메이션 형식을 꼽으라면 단연 Lottie와 GIF일 것입니다. GIF, 한국에서는 ‘움짤’ 이라는 단어로 더 친숙할 ...

고객의 이목 을 끌어야 성공하는 현대 사회에서, 성공을 위해 가장 중요한 건 최소 비용으로 가장 큰 성과를 이끌어낼 수 있는 능력입니다. 저화질 유저 인터페이스는 이목을 집중하지 못하지만, 고화질 그래픽은 고객의 눈길을 사로잡죠. 그러나 고화질 그래픽을 활용할 때 저장, 전송 및 렌더링 비용을 균형 있게 조정해야 하는 문제는 쭉 이어져 왔습니다. Lottie...

사람들을 연결하는 공간인 인터넷을 더 역동적으로 만드는 건 이미지일 거예요. 온라인 커뮤니티나 채팅창에서 긴 문장보다 감정을 대변해주는 이미지 또는 움짤(움직이는 이미지) 하나가 소통을 더 효율적으로 만들어주기도 하고요. 웹사이트에 적절히 삽입된 그래픽 하나가 전체적인 무드를 살려주기도 해요. 이런 이미지들은 보통 PNG, SVG 등과 같은 파일 형식...

지금까지는 상호작용을 활용한 Lottie 애니메이션의 경우 하나의 상호작용(클릭, 커서 올리기, 탐색, 반복, 토글 등을 할 때 애니메이션 재생)을 활용하는 경우가 대부분이었죠. 따라서 오픈소스 라이브러리인 Lottie 인터랙티비티(Lottie-Interactivity [https://github.com/LottieFiles/lottie-interactiv...

이 글을 읽고 계신다면 iOS 앱에 마법을 한번 부려보고 싶은 분이시겠죠. 이번에는 앱을 돋보이게 하고 사용자를 즐겁게 할 그런 환상적인 마법을 한층 더 멋지게 만들 방법을 알아보겠습니다. iOS 앱에 사용되는 Lottie 애니메이션에 마법의 가루를 뿌려 보세요. 어떻게 할 수 있냐고요? 물론, 다양한 방법이 있지만, 여기에서는 Lottie를 사용하는 ...

어떤 로고에나 애니메이션 효과를 줄 수 있는 능력을 가졌다면 어떨까요? 모션 디자이너와 복잡한 소프트웨어 없이 그저 화장실에 다녀올 짧은 시간 안에 회사 로고에 애니메이션 효과를 줄 수 있다고 상상해 보세요. 네, 바로 LottieFlies와 함께라면 가능하죠. 단지 SVG to Lottie 툴을 사용해 Adobe After Effects [https:/...

여러분이 웹사이트, 앱, 마케팅 자료 등에 사용하기 딱 좋은 Lottie 애니메이션을 찾았다고 가정해 봅시다. 그런데 색상이 마음에 안든다던가, 재생속도가 빠르다던가, 크기가 너무 작다는 문제가 있을 수 있겠죠 하지만 걱정하지 마세요. Lottie Editor를 사용하면 모든 Lottie 애니메이션을 쉽게 편집할 수 있습니다. 여러분이 전문 디자이너가 아...

디자인은 단지 미학에 관한 것만이 아닙니다. 디자인에서 모션은 인간 중심의 디자인 접근법에서 즐거운 사용자 인터페이스와 시각적인 스토리텔링을 가져다 주는 열쇠이죠. 모션의 요소들이 콘텐츠를 더욱 매력적이고 친근하게 만들어 주어 콘텐츠를 만족스러운 경험으로 탈바꿈해줍니다. 아이콘이나 일러스트레이션, 텍스트와 로고(몇 가지를 들자면)에 모션을 포함하면 네비게이...

시선을 사로잡는 앱을 디자인하고 싶으신가요? 애니메이션을 활용하면 앱 디자인의 수준을 한 단계 높일 수 있습니다. 애니메이션은 앱 인터페이스를 인상적이고, 매력적이고, 이용하기 쉽게 만들죠. 하지만 앱 인터페이스에 필요한 애니메이션을 실제로 디자인하거나 사용하려면 어떻게 해야 할까요? 애니메이션을 통한 디자인 시 고려해야 할 모범 사례와 활용해 볼 애니메...

여러분은 지금 50%의 확률로 스마트폰에서 이 글을 읽고 계실 겁니다. 그렇지 않다면 5~10초 후 스마트폰 잠금 화면에 앱 알림이 떠서 소셜 미디어를 보거나, 음식을 주문하거나, 자주 사용하는 e커머스 플랫폼에서 쇼핑하실 수도 있겠죠. 이 글을 통해서 사용자의 관심을 사로잡고 이를 수익으로 전환할 수 있는 모바일 앱의 사용자 인터페이스를 디자인하는 방법...