Skip to main content
Noto Lottie
๋ธŒ์ด ํ‘œ์‹œ: ์ค‘๊ฐ„ ์–ด๋‘์šด ํ”ผ๋ถ€ํ†ค
Fluent 3D
Unicode ์›๋ณธ

๋ธŒ์ด ํ‘œ์‹œ: ์ค‘๊ฐ„ ์–ด๋‘์šด ํ”ผ๋ถ€ํ†ค

People & Body entry: Victory hand: medium-dark skin tone.

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

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

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

ํ”๋“œ๋Š” ์†
์†๋“ฑ
์ซ™ ํŽธ ์†๋ฐ”๋‹ฅ
์†๋ฐ”๋‹ฅ
๋ฒŒ์นธ์‹ ์ธ์‚ฌ
๊ผฌ์ง‘๋Š” ์†๊ฐ€๋ฝ
๊ผฌ์ง‘๋Š” ์†
๋ธŒ์ด ํ‘œ์‹œ
๋ฟ” ๋ชจ์–‘ ์†์ง“