닻 Lottie를 상업적으로 사용해도 되나요?

네. Google Noto Emoji Animation은 Apache License 2.0으로 배포됩니다. 개인 및 상업 프로젝트에서 사용·수정·재배포 가능하며 소스를 번들링할 때 저작권 표시와 라이선스만 유지하면 됩니다.

애니메이션은 정확히 어디서 오나요?

모든 프레임은 Google의 CDN https://fonts.gstatic.com/s/e/notoemoji/latest/2693/lottie.json에서 직접 제공됩니다. 본 사이트는 파일을 미러링하거나 수정하지 않으며 브라우저가 fonts.gstatic.com에서 바로 가져옵니다. Google이 애니메이션을 업데이트하면 사이트가 자동으로 새 버전을 사용합니다.

lottie-web 없이도 이 Lottie를 쓸 수 있나요?

네. Bodymovin 호환 렌더러라면 모두 동작합니다: lottie-web, lottie-react, Lottie iOS/Android, Skottie, dotLottie. 형식은 일반 Lottie JSON v5.8.1이라 벤더 종속이 없습니다.

DBEmoji

Noto Lottie

Fluent 3D

Unicode 원본

닻

Anchor (⚓) from Travel & Places.

닻 애니메이션은 Google Noto Emoji Animation 세트의 일부입니다. 벡터 Lottie 형식이라 어떤 크기에서도 깔끔하게 렌더링되며 100 KB 미만으로 유지됩니다. Unicode 코드포인트: U+2693.

이 Lottie는 ⚓와 동일한 의미를 담습니다: Anchor (⚓) from Travel & Places. 애니메이션은 그 순간을 더 강하게 전달할 뿐입니다.

닻 애니메이션이 잘 어울리는 곳

랜딩 페이지 히어로/기능 강조 — 정적 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/2693/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/2693/lottie.json"
  background="transparent"
  speed="1"
  style="width: 160px; height: 160px"
  loop
  autoplay>
</lottie-player>

HTML + lottie-web (CDN)

loadAnimation()을 직접 호출. 루프·속도·세그먼트 완전 제어.

<div id="lottie-anchor-2693" 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-anchor-2693"),
    renderer: "svg",
    loop: true,
    autoplay: true,
    path: "https://fonts.gstatic.com/s/e/notoemoji/latest/2693/lottie.json"
  });
</script>

React + lottie-react

TypeScript 컴포넌트. 마운트 시 JSON을 가져옵니다.

import Lottie from "lottie-react";
import { useEffect, useState } from "react";

export function Anchor2693() {
  const [data, setData] = useState<unknown>(null);
  useEffect(() => {
    fetch("https://fonts.gstatic.com/s/e/notoemoji/latest/2693/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

애니메이션은 정확히 어디서 오나요?: 모든 프레임은 Google의 CDN https://fonts.gstatic.com/s/e/notoemoji/latest/2693/lottie.json에서 직접 제공됩니다. 본 사이트는 파일을 미러링하거나 수정하지 않으며 브라우저가 fonts.gstatic.com에서 바로 가져옵니다. Google이 애니메이션을 업데이트하면 사이트가 자동으로 새 버전을 사용합니다.
lottie-web 없이도 이 Lottie를 쓸 수 있나요?: 네. Bodymovin 호환 렌더러라면 모두 동작합니다: lottie-web, lottie-react, Lottie iOS/Android, Skottie, dotLottie. 형식은 일반 Lottie JSON v5.8.1이라 벤더 종속이 없습니다.