엑스 표시 Lottie를 상업적으로 사용해도 되나요?

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

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

모든 프레임은 Google의 CDN https://fonts.gstatic.com/s/e/notoemoji/latest/274c/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 원본

엑스 표시

Symbols entry: Cross mark.

엑스 표시 (❌)는 Google Noto가 손으로 만든 애니메이션 Lottie 이모지입니다. 1024×1024 캔버스에서 60 fps로 반복되며 파일 크기는 약 60–90 KB로, 정적 PNG가 가는 곳이라면 어디든 사용할 수 있습니다.

모션 덕분에 엑스 표시은 정적 캐릭터보다 무게감이 큽니다. 랜딩 페이지·온보딩 히어로·반응 스티커·인앱 축하처럼 한 박자 타이밍이 필요한 메시지에 사용하세요.

엑스 표시 애니메이션이 잘 어울리는 곳

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

HTML + lottie-web (CDN)

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

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

React + lottie-react

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

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

export function CrossMark274c() {
  const [data, setData] = useState<unknown>(null);
  useEffect(() => {
    fetch("https://fonts.gstatic.com/s/e/notoemoji/latest/274c/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/274c/lottie.json에서 직접 제공됩니다. 본 사이트는 파일을 미러링하거나 수정하지 않으며 브라우저가 fonts.gstatic.com에서 바로 가져옵니다. Google이 애니메이션을 업데이트하면 사이트가 자동으로 새 버전을 사용합니다.
lottie-web 없이도 이 Lottie를 쓸 수 있나요?: 네. Bodymovin 호환 렌더러라면 모두 동작합니다: lottie-web, lottie-react, Lottie iOS/Android, Skottie, dotLottie. 형식은 일반 Lottie JSON v5.8.1이라 벤더 종속이 없습니다.