디자인하고 기록하는

부제목 : 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 파일로 내보낼 수 있어 개발자도 쉽게 애니메이션을 적용 할 수 있다. 단점이라면, 안드로이드 저사양 단말에서는 지원이 안되기 때문에 분기처리가 필..

iOS Safari에서는 웹사이트의 바로가기 아이콘 이미지와 타이틀을 미리 설정하여 사용자들이 쉽게 인식할 수 있도록 지원하는데 이를 가능하게 하는 방법 중 하나는 메타 태그를 이용하는 것이다. 단, 그 전에 알고 넘어가야할 2가지가 있다. 웹 상단 탭에 보여지는 아이콘인 파비콘과 사이트를 공유했을 때 나타나는 OG이미지 설정이다. 1. 파비콘 (favicon) 파비콘은 웹페이지에 접속했을때, 상단 탭에 보여지는 아이콘으로 즐겨찾기 아이콘 (favorite icon)의 줄임말. 책갈피, 즐겨찾기 추가를 했을 때 보여지는 아이콘이다. 2. 오픈 그래프 (OG) 오픈그래프(OG, 오픈 그래프 프로토콜, 어떤 HTML 문서의 메타정보를 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들..