안녕하세요, 볼드나인 디자인팀 *지*입니다.
오늘은 로린이의 로티를 도전하며 경험했던 내용을 공유해 보려고 합니다.
Lottie란?
에어비앤비에서 개발한 오픈소스 라이브러리입니다. After Effects(애프터 이펙트)로 추출한 애니메이션 데이터(json)를 오픈소스(Bodymovin)를 이용하여 웹, 앱에 적용할 수 있도록 만들어 줍니다.
로티에 사용되는 파일은 svg의 애니메이션 버전인데, 벡터 기반의 애니메이션이라는 의미입니다.
래스터(Raster) : 픽셀로 구성된 이미지(jpg, png)
벡터(Vector) : 그리드에 점을 설정하는 수학 공식과 선, 곡선을 사용하여 만든 이미지. 벡터 이미지를 확대하거나 축소해도 이미지 품질에는 영향을 주지 않습니다.(ai, svg)
Lottie 공식 홈페이지
Lottie의 장단점.
Lottie 장점
•
벡터 기반이라 용량이 적고 해상도 저하가 없습니다.
•
사용자 행동에 반응하는 인터랙션 애니메니션이 가능합니다.
•
Json 파일을 통해 개발에서도 color, speed, size 등 코드로 속성 값의 변경이 가능합니다.
Lottie 단점
•
제작에 있어 After Effects(애프터 이펙트)라는 작업 툴이 필요합니다.
•
제작 과정이 복잡하여 숙련도가 필요합니다.
Lottie는 현재진행형.
보여드리기 부끄럽지만 작업을 진행했던 Lottie 아이콘입니다.
로티 쉬운 놈이 아니었습니다. 만만하게 봤어요. 제작 과정에서 애프터 이펙트라는 툴의 숙련도가 필요하다 보니 작업이 능숙치 않아 간단한 아이콘 하나를 작업하는데도 시간이 생각보다 많이 소요됐습니다.
아직은 기존 서비스프로그램의 아이콘 정도에 애니메이션 효과를 주어 사용자에게 조금이나마 생동감 있는 서비스를 제공하였지만, 2023년에는 차근차근 하나씩 로딩 유형이나 모달에 새로운 애니메이션 효과를 적용해 볼 예정입니다. 물론 작업의 숙련도를 높여 작업시간도 단축해야 하고요. 역시 배움의 길은 멀고도 험하며 끝이 없다는 걸 다시 한번 새삼 느꼈습니다. 언젠간 도달할 수 있겠죠?
읽어주셔서 감사합니다!