Revideo 이모지 활용

이모지를 그대로 <Txt text="🚀" /> 처럼 쓰면 브라우저마다 다르게 렌더된다. 일관된 결과를 원하면 이모지 전용 폰트를 명시적으로 불러와야 한다.

---

⚠️ 문제: 이모지가 브라우저마다 다르게 보임

환경	이모지 렌더링
Chrome (Windows)	세그먼트 컬러 이모지
Chrome (Mac)	애플 이모지
Chrome (Android)	구글 노토 이모지
Headless renderer (Revideo CLI)	시스템에 따라 다름 (보통 작거나 깨짐)

해결책: 이모지를 지원하는 폰트(예: Noto Color Emoji)를 명시적으로 로드해서 모든 환경에서 동일하게 보이게 한다.

---

🛠️ 해결: 이모지 폰트 명시 + <Txt fontFamily>

1단계: src/global.css 작성

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@600&family=Noto+Color+Emoji&display=swap');

Google Fonts에서 Lexend(본문용) + Noto Color Emoji(이모지용) 한 번에 로드. display=swap는 폰트 로딩 중에도 텍스트가 보이게 함.

2단계: src/project.ts에서 import

import {makeProject} from '@revideo/core';
import example from './scenes/example?scene';
import './global.css';  // ← 이 줄 추가

export default makeProject({
  scenes: [example],
});

3단계: <Txt>에서 fontFamily 지정

import {Txt, makeScene2D} from '@revideo/2d';
import {waitFor} from '@revideo/core';

export default makeScene2D('scene', function* (view) {
  yield view.add(
    <Txt text={'Hello 🚀'} fontFamily={"Lexend, 'Noto Color Emoji'"} />,
  );
  yield* waitFor(1);
});

동작 원리:

• 텍스트는 Lexend 폰트로 렌더
• 이모지(예: 🚀, 🎉)는 Noto Color Emoji로 폴백 렌더
• 모든 환경에서 동일하게 보임

---

📋 추천 이모지 폰트

폰트	특징	라이선스
Noto Color Emoji	구글, 컬러 이모지, 가장 범용	OFL (오픈소스)
Noto Emoji	흑백 이모지, 가벼움	OFL
Twemoji Mozilla	트위터 스타일 이모지	OFL
Apple Color Emoji	Mac/iOS 환경 한정	Apple

⚠️ Apple Color Emoji는 라이선스 제한이 있어 상업 프로젝트엔 부적합. Noto 계열 권장.

---

🖼️ 다국어 폰트도 함께 쓰는 패턴

/* src/global.css */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Noto+Color+Emoji&display=swap');

<Txt
  text="안녕하세요 🎉"
  fontFamily="'Noto Sans KR', 'Noto Color Emoji'"
/>

한국어 본문 + 이모지를 한 줄에서 자연스럽게 섞을 수 있다. CSS 폰트 fallback 순서가 핵심.

---

⚠️ 주의사항

• font-display: swap 같은 옵션 안 쓰면 폰트 로딩 전 텍스트가 안 보일 수 있음
• 이모지 폰트는 파일 크기가 큼 (Noto Color Emoji는 ~10MB). 필요한 것만 로드 권장
• 일부 환경에서는 Google Fonts CDN이 막혀 있을 수 있음 → self-host 고려

---

🎯 다음 단계

• Rive·3D: 후속 손자 페이지
• 씬 작성 패턴: Revideo Scene Flow 이해하기 → Revideo 시작하기 → 이전 hub
• 이모지 디버깅: 콘솔에서 <Txt> 노드의 computed fontFamily 확인

🔗 공식 리소스

• Revideo Emojis: https://midrender.com/revideo/docs/guide/designing-animations/emojis
• Custom Font: https://midrender.com/revideo/docs/animations/custom-font
• Noto Color Emoji: https://fonts.google.com/noto/specimen/Noto+Color+Emoji

상위 문서: ← Revideo 애니메이션 & 디자인 출처: Revideo 공식 문서 — Emojis + Custom Font 한글화 (2026-07-29) 공급사: Revideo (현 Midrender)

변경 이력

날짜	변경
2026-07-29	초안 작성 — 이모지 브라우저 차이 + Noto Color Emoji + Lexend fontFamily 패턴 + 다국어 fallback 한글화
2026-07-29	메타데이터 블록을 본문 하단으로 이동