로티랩을 찾게 된 계기는 기존에 Lottie 파일 제작을 애프터 이펙트에 의존했는데, 간단한 벡터 애니메이션을 만드는데 오버스펙 및 번거로움이 컸기 때문이다. 처음에 사용해본 LottieFiles는 간단한 벡터 애니메이션 제작도 어려울 정도로 사용성 부분에서 최악이었다.
하지만 로티랩 계정을 만들고 원하던 애니메이션을 제작하고 JSON 파일로 뽑아내는 데는 5분도 걸리지 않았고, 피그마를 처음 사용할 때의 기분과 비슷했다. 빠르고 효과적이고 심플했다.
벡터 애니메이션의 기본기
로티랩에서 제공하는 벡터 관련 기능은 기본 도형, 펜, 텍스트(폰트가 다양하지는 않음), Skew, 패스 기반 애니메이션 등 기본기는 갖추고 있다. 애니메이션 모드에서 키를 잡는 것도 너무 심플한 게 단점이긴 한데, 한두 번 사용해보면 충분히 적응된다. 기본적인 Ease는 당연히 지원된다.
Export
제작한 애니메이션을 다양한 형태로 사용할 수 있는데, 임베디드 링크, iFrame, JSON URL, 다운로드를 지원한다. GIF, MP4도 지원하는데, 이는 실제 프로덕트 적용보다는 프로토타이핑 혹은 시연 목적으로 사용될 것 같다. 대부분 JSON 파일로 다운받아서 개발자에게 전달할 텐데, 현재 워터마크를 삭제하는 데 유료 버전 사용이 필요하고, 워터마크가 있는 JSON 버전은 무료로 다운로드가 가능하다. 그리고 JSON은 편집이 쉽다는 장점이 있다. 😏
마무리
예전에 비해 로티랩을 사용하면서 벡터 기반 애니메이션 제작이 굉장히 편해졌다. 다양한 프론트엔드 프레임워크에서 로티 파일을 재생하는 라이브러리도 굉장히 편리하게 지원한다. 물론 제품의 사용성을 해치지 않는 범위 내에서 애니메이션을 사용하기를 권장한다.