♥는 하트 이모지의 모션 버전입니다. Google은 정적 글리프와 동일한 의미를 전달하되 표정·동작 안의 흐름을 살리는 방식으로 루프를 설계했습니다.
애니메이션은 이벤트 & 게임 카테고리의 정적 글리프가 암시만 하는 순간을 확장합니다 — 미소가 더 커지고, 사물이 반응하고, 제스처가 완성됩니다. 모션이 노이즈가 아니라 명료함을 더하는 자리에 어울립니다.
하트
Heart suit — Activities emoji. Mood: love.
하트 애니메이션이 잘 어울리는 곳
- 랜딩 페이지 히어로/기능 강조 — 정적 SVG 히어로를 하트 애니메이션으로 교체해 비디오 없이 모션을 추가합니다.
- 빈/성공/에러 상태 — "완료!"나 "아직 없습니다" 같은 카피와 함께 사용해 페이지가 정지해 보이지 않게 합니다.
- 메신저 반응·스티커 — 64–128 px 크기로 렌더링; GIF보다 가볍고 어떤 DPR에서도 선명합니다.
- 온보딩·툴팁 일러스트 — 기능을 설명하는 동안 포컬 포인트로 사용; ~1.2초 루프는 일반적인 주의 시간과 잘 맞습니다.
- 마케팅·소셜 카드 — 블로그, 체인지로그, 제품 발표에 임베드해 정적 이모지가 밋밋해 보일 때 사용합니다.
프로젝트에 하트 임베드하기
스택에 맞는 스니펫을 고르세요. 모든 스니펫은 Google CDN의 동일한 Lottie JSON을 가리키므로 별도 호스팅이 필요 없습니다.
Lottie JSON URL
원본 URL. 모든 Lottie 호환 렌더러에 사용 가능.
https://fonts.gstatic.com/s/e/notoemoji/latest/2665_fe0f/lottie.json<lottie-player> 웹 컴포넌트
빌드 없이 사용하는 HTML. 모든 최신 브라우저에서 작동.
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player
src="https://fonts.gstatic.com/s/e/notoemoji/latest/2665_fe0f/lottie.json"
background="transparent"
speed="1"
style="width: 160px; height: 160px"
loop
autoplay>
</lottie-player>HTML + lottie-web (CDN)
loadAnimation()을 직접 호출. 루프·속도·세그먼트 완전 제어.
<div id="lottie-heart-suit-2665" style="width:160px;height:160px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<script>
lottie.loadAnimation({
container: document.getElementById("lottie-heart-suit-2665"),
renderer: "svg",
loop: true,
autoplay: true,
path: "https://fonts.gstatic.com/s/e/notoemoji/latest/2665_fe0f/lottie.json"
});
</script>React + lottie-react
TypeScript 컴포넌트. 마운트 시 JSON을 가져옵니다.
import Lottie from "lottie-react";
import { useEffect, useState } from "react";
export function HeartSuit2665() {
const [data, setData] = useState<unknown>(null);
useEffect(() => {
fetch("https://fonts.gstatic.com/s/e/notoemoji/latest/2665_fe0f/lottie.json").then((r) => r.json()).then(setData);
}, []);
if (!data) return null;
return (
<Lottie
animationData={data}
loop
autoplay
style={{ width: 160, height: 160 }}
/>
);
}베스트 프랙티스
- 1× 또는 2× DPR로 렌더링하세요. 원본이 1024 px라 256 px까지 또렷합니다.
- 폴드 아래는 지연 로드하세요. lottie-web 자체가 ~50 KB gzipped이므로 플레이어가 화면에 들어오기 전까지 인스턴스화를 미룹니다.
prefers-reduced-motion을 존중하세요. autoplay를 멈추고 Unicode 문자 ♥ 또는 정적 Noto PNG로 폴백합니다.- JSON을 자체 CDN에 캐싱하세요. Google의 gstatic 사본은 이미 글로벌 엣지에 있지만 동일 출처 프록시가 커넥션을 유지합니다.
- Lottie 파일을 수정하지 마세요. Google이 표준 애니메이션을 갱신하므로 오버레이/컬러 필터로 보강하세요.
애니메이션 이모지 FAQ
- 하트 Lottie를 상업적으로 사용해도 되나요?
- 네. Google Noto Emoji Animation은 Apache License 2.0으로 배포됩니다. 개인 및 상업 프로젝트에서 사용·수정·재배포 가능하며 소스를 번들링할 때 저작권 표시와 라이선스만 유지하면 됩니다.
- 애니메이션은 정확히 어디서 오나요?
- 모든 프레임은 Google의 CDN https://fonts.gstatic.com/s/e/notoemoji/latest/2665_fe0f/lottie.json에서 직접 제공됩니다. 본 사이트는 파일을 미러링하거나 수정하지 않으며 브라우저가 fonts.gstatic.com에서 바로 가져옵니다. Google이 애니메이션을 업데이트하면 사이트가 자동으로 새 버전을 사용합니다.
- lottie-web 없이도 이 Lottie를 쓸 수 있나요?
- 네. Bodymovin 호환 렌더러라면 모두 동작합니다: lottie-web, lottie-react, Lottie iOS/Android, Skottie, dotLottie. 형식은 일반 Lottie JSON v5.8.1이라 벤더 종속이 없습니다.
에셋 출처
- 코드포인트
- U+2665
- 형식
- Bodymovin Lottie · 60fps · 1024×1024
- 라이선스
- Apache 2.0 · Google Noto
애니메이션 출처: Google Noto Emoji Animation (Apache License 2.0). Google이 fonts.gstatic.com에서 호스팅합니다.