Remotion - 아이콘 옵션

개요

Remotion에서 아이콘을 사용하는 방법은 여러 가지가 있다. 현재는 유니코드 이모지를 사용하고 있으며, 고도화 시 아래 옵션들을 고려할 수 있다.

1. 현재 방식 - 유니코드 이모지

<span style={{ fontSize: 64 }}>🚌</span>
  • <span> 태그 안에 이모지 텍스트를 직접 입력
  • OS 기본 폰트(Windows: Segoe UI Emoji)가 렌더링
  • 별도 라이브러리 불필요, 코드 간단

주의사항

플랫폼마다 이모지 모양이 다를 수 있음 (Windows, Mac, 렌더링 서버 차이)

2. 고도화 옵션

옵션 1: lucide-react (추천)

import { MapPin, Bus, Car } from "lucide-react";
 
<MapPin size={64} color="#22c55e" />
  • 설치: npm install lucide-react
  • 일관된 디자인, 간편한 사용
  • 아이콘 종류가 매우 많음

참고 링크

옵션 2: 인라인 SVG

<svg width={64} height={64} viewBox="0 0 24 24" fill="none">
  <path d="M12 2C8.13 2 5 5.13 5 9..." fill="#22c55e" />
</svg>
  • 외부 의존성 없음
  • 색상, 크기 완전히 제어 가능
  • 코드가 길어지는 단점

옵션 3: SVG 파일 import

import LogoSvg from "./assets/logo.svg";
 
<img src={LogoSvg} width={64} height={64} />
  • 브랜드 로고 등 정교한 SVG에 적합
  • public/ 폴더에 넣고 staticFile()로도 사용 가능

옵션 4: Lottie 애니메이션

import { Lottie } from "@remotion/lottie";
import animationData from "./assets/car.json";
 
<Lottie animationData={animationData} />
  • 패키지: npm install @remotion/lottie
  • 움직이는 아이콘 지원
  • JSON 파일 필요

참고 링크

정리

방식난이도일관성애니메이션추천 상황
이모지⭐낮음X빠른 프로토타입
lucide-react⭐⭐높음X일반적인 UI 아이콘
인라인 SVG⭐⭐⭐높음X브랜드 커스텀
Lottie⭐⭐⭐높음O움직이는 아이콘

그래프 뷰

백링크