Skip to main content
Noto Lottie
๊ธฐ๋ฆ„ ๋žจํ”„
Fluent 3D
Unicode ์›๋ณธ

๊ธฐ๋ฆ„ ๋žจํ”„

Diya lamp (๐Ÿช”) from Objects.

๊ธฐ๋ฆ„ ๋žจํ”„ ์• ๋‹ˆ๋ฉ”์ด์…˜์€ Google Noto Emoji Animation ์„ธํŠธ์˜ ์ผ๋ถ€์ž…๋‹ˆ๋‹ค. ๋ฒกํ„ฐ Lottie ํ˜•์‹์ด๋ผ ์–ด๋–ค ํฌ๊ธฐ์—์„œ๋„ ๊น”๋”ํ•˜๊ฒŒ ๋ Œ๋”๋ง๋˜๋ฉฐ 100 KB ๋ฏธ๋งŒ์œผ๋กœ ์œ ์ง€๋ฉ๋‹ˆ๋‹ค. Unicode ์ฝ”๋“œํฌ์ธํŠธ: U+1FA94.

์ด Lottie๋Š” ๐Ÿช”์™€ ๋™์ผํ•œ ์˜๋ฏธ๋ฅผ ๋‹ด์Šต๋‹ˆ๋‹ค: Diya lamp (๐Ÿช”) from Objects. ์• ๋‹ˆ๋ฉ”์ด์…˜์€ ๊ทธ ์ˆœ๊ฐ„์„ ๋” ๊ฐ•ํ•˜๊ฒŒ ์ „๋‹ฌํ•  ๋ฟ์ž…๋‹ˆ๋‹ค.

๊ธฐ๋ฆ„ ๋žจํ”„ ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์ž˜ ์–ด์šธ๋ฆฌ๋Š” ๊ณณ

  • ๋žœ๋”ฉ ํŽ˜์ด์ง€ ํžˆ์–ด๋กœ/๊ธฐ๋Šฅ ๊ฐ•์กฐ โ€” ์ •์  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/1fa94/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/1fa94/lottie.json"
  background="transparent"
  speed="1"
  style="width: 160px; height: 160px"
  loop
  autoplay>
</lottie-player>
HTML + lottie-web (CDN)
loadAnimation()์„ ์ง์ ‘ ํ˜ธ์ถœ. ๋ฃจํ”„ยท์†๋„ยท์„ธ๊ทธ๋จผํŠธ ์™„์ „ ์ œ์–ด.
<div id="lottie-diya-lamp-1fa94" 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-diya-lamp-1fa94"),
    renderer: "svg",
    loop: true,
    autoplay: true,
    path: "https://fonts.gstatic.com/s/e/notoemoji/latest/1fa94/lottie.json"
  });
</script>
React + lottie-react
TypeScript ์ปดํฌ๋„ŒํŠธ. ๋งˆ์šดํŠธ ์‹œ JSON์„ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.
import Lottie from "lottie-react";
import { useEffect, useState } from "react";

export function DiyaLamp1fa94() {
  const [data, setData] = useState<unknown>(null);
  useEffect(() => {
    fetch("https://fonts.gstatic.com/s/e/notoemoji/latest/1fa94/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/1fa94/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+1FA94
ํ˜•์‹
Bodymovin Lottie ยท 60fps ยท 1024ร—1024
๋ผ์ด์„ ์Šค
Apache 2.0 ยท Google Noto

์• ๋‹ˆ๋ฉ”์ด์…˜ ์ถœ์ฒ˜: Google Noto Emoji Animation (Apache License 2.0). Google์ด fonts.gstatic.com์—์„œ ํ˜ธ์ŠคํŒ…ํ•ฉ๋‹ˆ๋‹ค.

์–‘๋ง
์šด๋™ํ™”
ํ•˜์ดํž
๋ฐœ๋ ˆ ์Šˆ์ฆˆ
์™•๊ด€
์กธ์—… ๋ชจ์ž
๋ฐ˜์ง€
์›์„
๋ฉ”๊ฐ€ํฐ
์ข…
๋…ธ๋ž˜ ์Œํ‘œ
์ƒ‰์†Œํฐ