Lottie가 처음인, 애니메이션이 처음인 당신을 위해. Lottie가 무엇인지부터, Lottie와 GIF 비교까지! 이번 글에서 핵심만 간단히 설명해 드릴게요.
1. Lottie vs GIF
요즘 디자이너 사이에서 가장 인기있는 웹 애니메이션 형식을 꼽으라면 단연 Lottie와 GIF일 것입니다. GIF, 한국에서는 ‘움짤’ 이라는 단어로 더 친숙할 이 용어는 가장 대중적으로 사용되는 애니메이션 포맷이죠. GIF는 꽤 오랜 시간 전부터 우리 곁에 함께한, 그래서 더욱 친숙한 포맷입니다. 여러 웹 페이지나 SNS에서도 GIF는 쉽게 발견됩니다. 반면 Lottie는 디자이너가 아니라면 쉽게 접하지 못한 포맷일 것입니다. 최근 출시된 애니메이션 파일 형식 Lottie는 JSON을 기반으로 하는 애니메이션 형태입니다. 하지만 Lottie는 출시되자마자 특유의 효율성으로 업계에서 큰 인기를 얻었고, 이제는 전통의 강자 GIF와 어깨를 나란히 할 만큼 유명세를 타고 있답니다! Lottie vs GIF에 대해 자세히 알아보기 전에, 이 두 가지 형식이 정확히 무엇인지 간단히 살펴보도록 하죠.
2. 그래서 Lottie가 뭔가요?
Lottie 라는 이름은, 독일의 영화 감독 Charlotte “Lotte” Reiniger이름을 딴 애니메이션 파일 형식입니다. 높은 품질의 인터랙티브 애니메이션을 만들고, 편집하고, 테스트하고, 표시할 수 있는 툴이죠. 최근 스토어 상위 500개 어플리케이션들이 애니메이션 포맷을 Lottie로 전환하여 사용자와의 소통을 강화하고 있습니다. Lottie 애니메이션은 iOS, 안드로이드, 리액트 네이티브 어플리케이션에서 수정 없이 사용할 수 있답니다.
Lottie 파일은 당신이 구현하고자 하는 모든 것을 구현해낼 수 있습니다. 최소한의 시간 내에 번거로움 없이 고품질의 멋진 애니메이션을 제공하는 효율을 가지고 있죠. 또한 Lottie 애니메이션은 언제든지 편집과 수정이 가능합니다.
3. 그렇다면 GIF는 어떤 것인가요?
GIF, 그래픽 인터체인지 포맷은 1987년 미국의 컴퓨터 과학자 스티브 윌하이트에 의해 발명된 애니메이션 포맷입니다. GIF의 아버지, 윌 하이트는 가능한 한 작은 용량의 파일로 애니메이션을 표시하는 방법을 만들기 위해 GIF를 발명했습니다. GIF를 쉽게 설명하자면, GIF는 음악 없이 재생되는 작은 비디오라고 할 수 있습니다. 대신 GIF에는 일시중지를 할 수 있는 버튼이 없어, 웹 페이지를 닫을 때까지 GIF는 계속 반복됩니다.
수년간 GIF는 인터넷 속 유행이라고 할 수 있는 “밈(meme)” 시장을 사로잡았습니다. 텀블러, 버즈피드, 레딧과 같은 여러 SNS와 웹사이트에서 활발히 사용되며 인기를 얻었죠. GIF로 만들어진 밈은 재미있고, 사용하기 쉽다는 장점이 있죠. GIF는 사용자 간 대화와 컨텐츠를 더욱 흥미롭게 만들기 위해 사용자가 원하는 모든 것을 제공합니다.
4. 디자이너의 입장에서, Lottie와 GIF중에 무엇을 사용하는게 좋은 건가요?
아마 가장 궁금하셨던 질문이 아닐까 싶은데요, 이번 글에서는 총 5가지의 측면에서 Lottie와 GIF를 비교해드리려고 합니다.
첫째, 파일의 크기
Lottie를 다른 애니메이션 형식과 구별하는 가장 큰 장점 중 하나는 파일의 크기입니다. Lottie 파일은 기반이 되는 JSON의 크기가 매우 작기 때문에 파일의 크기가 매우 작다는 장점이 있습니다. 때문에 다운로드 속도가 매우 빠르고, 디스크 공간을 아주 적게 사용하죠. 이 말은 즉, 사용자가 페이지를 로드할 때 걸리는 로딩 시간 또한 매우 빨라진다는 것입니다. 로딩 시간을 줄여준다는 것, 끌리지 않나요?
반면 GIF 파일은 불과 4~5초밖에 되지 않는 애니메이션에도 5MB정도를 사용합니다. 이는 웹 페이지를 개발하는 사람에게 정말 부담스러운 용량입니다. 아주 작은 애니메이션을 활용할 때에도 마찬가지로 로딩 시간이 많이 걸릴 수 밖에 없고, 때문에 크고 긴 시간동안 구동되는 애니메이션을 GIF로 활용하기란 불가능에 가깝죠.
둘째, 품질
백문이 불여일견이라고, Lottie와 GIF를 똑같이 만들어 비교해 보면 품질의 차이가 확연하게 느껴지는데요. Lottie 애니메이션(왼쪽)을 보면 부분을 확대해도 흐릿해지거나 희미해지지 않습니다. 확대하거나 줄여도 선명하고 생동감 있는 고품질의 애니메이션을 구현하죠. 또한 Lottie의 품질은 JSON을 통해 코드화되어 있기 때문에 다른 곳으로 옮겨도 그 품질이 그대로 보존됩니다. 반면 GIF는 확대하거나 줄였을 때 크게 깨지는 모습을 확인할 수 있죠. 움직임의 부분에서도 GIF는 조금 뻑뻑한 느낌을 주는 반면, Lottie는 부드러운 모션을 보여줍니다. 또한 GIF를 사용할 때, 사용자는 이미지의 퀄리티나 로딩 시간을 고를 수 있는데, 빠른 로딩을 고르면 고를수록 이미지의 질은 낮아집니다. 웹 사이트 방문자의 입장에서 어떤 애니메이션이 더욱 매력적일지는 말하지 않아도 아시겠죠?
셋째, 커스텀 기능
여기서 사용자 지정은 일반적인 커스터마이징을 의미하지 않습니다. 웹사이트에 애니메이션을 적용하기 전에 하는 다양한 편집들은 Lottie를 사용하는 제게 있어서는 기획의 단계에 더욱 가깝죠. 진정한 커스터마이징은 이미 모두 작업이 끝난 파일을 자유자재로 수정하는 것이 아닐까요? Lottie와 함께라면 어떤 순간에서든지 애니메이션을 편집할 수 있기 때문에 커스터마이징의 기회는 무궁무진합니다. 예를 들어 이미 모션을 다 입힌, 작업이 끝난 애니메이션 파일이라도, 배경색을 검은색, 파란색, 분홍색, 녹색 및 투명하게 변경할 수 있습니다. 전체 화질을 방해하지 않고 애니메이션 속도 또한 변경할 수 있고, 웹 페이지 작업을 하는 모든 단계에서 Lottie 애니메이션을 편집하여 최종 수정 작업을 수행하거나 필요한 내용을 변경할 수 있습니다. 이 모든 수정과 편집은 Lottie 에디터를 통해 아주 쉽고 간편하게 진행되죠.
반면 GIF를 보면, GIF의 커스터마이징은 어느정도 제한된 부분이 많습니다. 우선 수정을 할 때 화질방해가 자주 생기고, 좀 더 세밀한 부분을 수정하는 것은 어렵죠.
넷째, 투명도
Lottie 파일을 GIF 파일과 함께 배치해 보면 차이가 매우 확연한데요. Lottie 애니메이션은 벡터 속성의 애니메이션이기 때문에 매우 부드럽게 웹에 적용됩니다.
반면 GIF 파일은 비트맵 방식을 사용하기때문에 애니메이션의 가장자리가 울퉁불퉁하고 들쭉날쭉해 전체적인 사용자 경험에 방해가 되죠.
다섯째, 워크플로우
Lottie를 만드는 일반적인 방법은 Adobe After Effects에서 제작한 애니메이션을 Lottie 파일로 내보내는 것입니다. 기존 Adobe After Effects 사용자는 Lottie Files Plugin을 사용하여 Lottie 콘텐츠 생성을 즉시 시작할 수 있습니다. 굳이 어떤 매체를 배울 필요 없이, 플러그인 하나로 Lottie 파일을 만들고 활용할 수 있는 것이죠. Adobe After Effects를 안다면 진입장벽이 0에 가깝습니다. Adobe After Effects에 익숙하지 않은 디자이너들의 경우에도 에디터 사용에 대한 포괄적인 교육 시간을 따져봤을 때, 불과 몇 시간 안에 Lottie 콘텐츠를 만들 수 있죠. Lottie 파일을 만든 이후에는 Lottie 에디터를 통해 Lottie를 시현해보고 수정할 수 있습니다. 애니메이션 제작에 있어 매우 간단한 워크플로우를 제공하죠. 또한 Lottie는 다양한 무료 Lottie 애니메이션을 제공하기도 하고, Lottie를 제작한 창작자라면 자신의 창작물을 마켓에서 판매할 수 있는데요. Lottie 파일스 홈페이지의 마켓플레이스에서 애니메이션을 사고 팔 수 있습니다.
반대로 GIF 파일은 파일의 문제점이 드러나는 측면이 바로 워크플로우인데요. Lottie 파일과 달리 GIF 파일의 생성 방법은 매우 복잡하고, 배경이나 객체의 색상을 변경하거나 커스터마이징 할 방법이 거의 없을 정도로 제한된 활용성을 가지고 있습니다.
자 이렇게 다섯가지 측면에서 비교한 GIF와 Lottie, 잘 보셨나요? 만약 끌리셨다면, 한번쯤 Lottie를 만들어보고 사용해보시는 것을 추천드립니다. 아마 이 모든 장점을 바로 경험하실 수 있을거예요.
아직도 Lottie가 감이 안오신다구요?
짧게 요약해드리자면, Lottie 파일은 웹/앱 환경에서 활용하고자 하는 애니메이션을 제작하고, 테스트하기 위한 플랫폼입니다. 애니메이터, 디자이너, 개발자, 엔지니어, 마케터 모두가 함께 애니메이션을 쉽게 활용할 수 있도록 보다 사용자 친화적으로 만든 협업을 위한 플랫폼이죠. Lottie 파일은 다양한 도구 및 플러그인 기능을 제공하여 애니메이션 검색, 생성 및 구현을 보다 쉽고 효율적으로 지원합니다.
여기 Lottie에 대한 더욱 자세한 내용이 담긴 유튜브 동영상을 통해 Lottie를 더욱 깊이 알아보세요!
Lottie와 함께, 다양한 모션의 디지털 컨텐츠를 제작해보세요.
