디자인하고 기록하는

부제목 : HTML 웹에 Lottie 애니메이션을 추가하려면 - 리액션 UI (2) 이전 글 HTML 웹에 Lottie 애니메이션을 추가하려면 - 리액션 UI (1) 구현 내용 감정 이모티콘으로 내용에 대한 피드백 표시 선택하면 움직이는 모션이 보이는 UI 디자인 모션의 이미지는 Lottie 에서 무료로 제공하는 리소스를 사용하여 구현한다. 또한, 웹 사이트 singsong-pen.tistory.com 1편은 Lottie 기본 사용법을 다룬 내용이 있어요. 안보신 분들은 다녀오세요! 👋🏻 1편에 작업을 하던 중 한 가지 문제점을 발견했다. 🧐 문제점 선택을 하기 전에는 default 이미지가 보여져야하는데, 사용하려는 리소스는 모션의 처음 상태가 빈 화면인 것이다. 😱 '리액션 2' 처럼 👍 가 진하게 ..

구현 내용 감정 이모티콘으로 내용에 대한 피드백 표시 선택하면 움직이는 모션이 보이는 UI 디자인 모션의 이미지는 Lottie 에서 무료로 제공하는 리소스를 사용하여 구현한다. 또한, 웹 사이트 내 리소스 경량화가 중요했기 때문에 gif보다 가벼운 Lottie 라이브러리를 선택했다. 일단 Lottie 사용법부터 보자! 👊 Lottie 란? Airbnb가 공개한 애니메이션 라이브러리, 웹에서도 보다 가볍게 애니메이션 파일을 불러 올 수 있고, 다양한 플랫폼에 대응이 잘된다. Bodymovin이라는 After Effects 플러그인을 사용하여 애니메이션을 JSON 파일로 내보낼 수 있어 개발자도 쉽게 애니메이션을 적용 할 수 있다. 단점이라면, 안드로이드 저사양 단말에서는 지원이 안되기 때문에 분기처리가 필..