혜르미온느

이번 배포건에 포함되는 업무 중 하나는 개선된 ui를 적용하는 것이었다. 정말 단순하게 생각하면 디자인 -> 퍼블리싱 -> 개발로 나는 변경된 마크업만 적용시켜주면 되었다. 근데 여기서 lottie가 사용되는 조건이 있었다. 버튼을 눌러 레이어를 오픈한다. 레이어 닫기 버튼이 lottie로 animation 동작을한다. 레이어 닫기 버튼이 유지된다. 레이어가 닫힐 때, lottie로 animation 동작을 한다. 의 시나리오를 가지고 있었다. 여기서 문제가 발생했는데, 레이어가 열고 닫힐 때마다 로띠를 실행시켜주려면 play 후, onComplate 되었을 때 destroy를 시켜주어야한다. 이때, destroy되며 lottie svg가 사라진다. (json을 svg형식으로 랜더링함) 멈추어있는 버전의..

Lottie란 로티란 에어비앤비에서 개발한 라이브러리이다. (그래서 로티 공식 홈페이지를 들어가면 에어비엔비 로고가 뜬다) 유명 프로그램 에프터 이팩트로 추출한 애니메이션 데이터를 json 형식으로 추출하여 웹/앱 등에 적용할 수 있게 해준다. Lottie 장점 백터 기반이다. (svg의 애니메이션화 라고 생각하면 된다. 백터기반이기 때문에 용량은 적고, 높은 해상도를 가지고 있다.) 적용이 쉽다. Lottie가 gif보다 나을까? 로티는 백터기반이기 때문에 기본적으로 적은 용량을 가지고 있다. 그라디언트 혹은 부드러운 움직임 등이 들어간 영상에서 gif는 그래픽을 수행하고 압축하는데 상당한 어려움을 겪는다. gif는 lottie 파일보다 약 3,000배 작다. https://airbnb.io/lotti..