React Native SVG 가져오기 가이드: react-native-svg + SvgXml

SVG(Scalable Vector Graphics)는 React Native 개발에서 점점 더 중요한 그래픽 자산 형식이 되었습니다. PNG, JPG 같은 비트맵 형식과 비교하면 SVG는 확대해도 선명함을 유지하고, 파일 크기가 더 작고, 스타일 제어도 유연합니다. 이 글에서는 React Native 프로젝트에서 SVG 파일을 가져와 사용하는 두 가지 대표적인 방법과 함께, 코드 예시와 성능 최적화 팁을 정리합니다.

React Native에서 SVG를 쓰는 이유

SVG는 모바일 앱 개발에서 다음과 같은 장점을 제공합니다.

완전한 확장성: 화면 크기나 해상도가 달라도 선명함이 유지됩니다.
더 작은 파일 크기: 여러 개의 PNG 세트를 두는 것보다 가벼운 경우가 많습니다.
동적 스타일링: props로 색상, 크기 등의 속성을 바꿀 수 있습니다.
플랫폼 일관성: iOS와 Android에서 동일한 방식으로 렌더링됩니다.

핵심 의존성: react-native-svg

React Native에서 SVG를 쓰려면 먼저 react-native-svg를 설치해야 합니다. 이 라이브러리가 SVG 파일을 네이티브 방식으로 렌더링하게 해 줍니다.

npm install react-native-svg
# 또는
yarn add react-native-svg

참고로 React Native 0.60 이상에서는 보통 자동 링크가 됩니다. 그보다 오래된 버전은 수동 링크가 필요할 수 있습니다.

방법 1: react-native-svg-transformer 사용

가장 추천하는 방식입니다. 웹 React처럼 SVG 파일을 컴포넌트로 바로 import할 수 있습니다.

설치와 설정

먼저 transformer를 설치합니다.

npm install --save-dev react-native-svg-transformer
# 또는
yarn add --dev react-native-svg-transformer

그다음 프로젝트 루트의 metro.config.js를 만들거나 수정합니다.

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();

  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer"),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"],
    },
  };
})();

사용 예시

설정 후에는 SVG 파일을 직접 import하면 됩니다.

import React from "react";
import { View } from "react-native";
import Logo from "./assets/logo.svg";

const MyComponent = () => (
  <View>
    <Logo width={100} height={100} fill="#3B82F6" />
  </View>
);

export default MyComponent;

이 방식은 SVG를 일반적인 React Native 컴포넌트처럼 취급하게 해 주기 때문에 프로젝트 전반에서 재사용하기 쉽습니다.

장점

타입 안정성과 좋은 개발 경험
props를 통한 동적 스타일 제어
빌드 시점 변환 기반이라 성능이 좋음

적합한 경우

정적 아이콘 라이브러리
디자인 시스템의 고정 자산

방법 2: SvgXml로 동적 로딩

react-native-svg의 SvgXml 컴포넌트는 XML 문자열에서 SVG를 렌더링합니다. 런타임에 동적으로 처리해야 하는 경우에 더 유연합니다.

기본 사용법

import React from "react";
import { SvgXml } from "react-native-svg";

const svgMarkup = `
  <svg width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="#10B981" />
  </svg>
`;

const DynamicIcon = () => <SvgXml xml={svgMarkup} width="100%" height="100%" />;

export default DynamicIcon;

파일에서 동적으로 로드하기

파일 시스템이나 네트워크에서 SVG를 읽어야 한다면 SvgXml이 특히 유용합니다.

import React, { useState, useEffect } from "react";
import { SvgXml } from "react-native-svg";
import RNFS from "react-native-fs";

const LoadableSvg = ({ filePath }) => {
  const [xml, setXml] = useState("");

  useEffect(() => {
    async function loadSvg() {
      try {
        const svgContent = await RNFS.readFile(filePath);
        setXml(svgContent);
      } catch (error) {
        console.error("Error loading SVG file", error);
      }
    }
    loadSvg();
  }, [filePath]);

  return xml ? <SvgXml xml={xml} width="100%" height="100%" /> : null;
};

장점

런타임 동적 로딩 가능
API나 원격 서버의 SVG도 처리 가능
사용자 생성 콘텐츠에도 유연하게 대응

주의점 복잡하거나 자주 바뀌는 SVG를 반복 렌더링하면 런타임 XML 파싱 비용 때문에 성능 문제가 생길 수 있습니다.

SVG 파일 저장과 구성

React Native 프로젝트에서는 보통 SVG 파일을 assets 폴더 아래에 정리하고, 다른 자원처럼 import해서 사용합니다.

권장 디렉터리 구조:

src/
  assets/
    icons/
      arrow-left.svg
      arrow-right.svg
    logos/
      brand-primary.svg
      brand-secondary.svg
  components/
    icon.tsx

SVG Viewer에서 미리보기와 검증

React Native 프로젝트에 SVG를 넣기 전에 SVG Viewer에서 먼저 확인하는 편이 좋습니다.

viewBox 확인: 잘림이나 배율 문제가 없도록 설정이 올바른지 확인
불필요한 코드 정리: 디자인 툴이 넣은 메타데이터와 속성 제거
패스 검증: 패스 데이터가 완전하고 과도하게 복잡하지 않은지 확인
배율 테스트: 다양한 크기에서 시각적으로 문제없는지 미리보기

이 과정을 거치면 모바일 디바이스에서 디버깅하는 시간을 많이 줄일 수 있습니다.

성능을 위한 SVG 최적화

React Native에서 SVG를 쓸 때는 파일 최적화가 특히 중요합니다.

패스 단순화: SVG Optimizer나 SVGO로 포인트 수를 줄입니다.
불필요한 요소 삭제: 숨겨진 레이어와 빈 그룹을 제거합니다.
중복 스타일 병합: 반복 속성을 공통 스타일로 정리합니다.
정밀도 조절: 좌표 소수점은 보통 2~3자리면 충분합니다.

최적화된 SVG는 더 빨리 로드되고, 리스트 스크롤처럼 렌더링 빈도가 높은 상황에서도 더 안정적으로 동작합니다.

실무 권장 사항

프로젝트 경험 기준으로 보면 다음 항목이 특히 유용합니다.

일관된 파일명 규칙: icon-home.svg, logo-brand.svg처럼 명확한 규칙을 정합니다.
공통 컴포넌트로 래핑: Icon 컴포넌트를 만들어 import와 사용 방식을 중앙 관리합니다.
타입 정의 추가: TypeScript 타입을 붙여 개발 경험을 개선합니다.
지연 로딩 전략: 큰 아이콘 세트는 한 번에 묶지 말고 필요할 때 불러옵니다.

정리

React Native에서 SVG를 쓰는 방법은 여러 가지이며, 무엇이 맞는지는 상황에 따라 달라집니다.

정적 아이콘 세트: react-native-svg-transformer가 가장 좋은 개발 경험을 제공합니다.
동적 콘텐츠: SvgXml이 런타임 로딩과 처리에 적합합니다.
성능 민감한 화면: SVG를 미리 최적화하고 복잡도를 통제하는 편이 좋습니다.

어떤 방법을 택하든, 먼저 SVG Viewer에서 파일 품질을 확인해 두는 것이 좋습니다. 적절한 워크플로와 도구를 갖추면 SVG는 React Native 앱에서 매우 안정적인 그래픽 자산이 됩니다.

다음 단계

import 전에 SVG Viewer로 viewBox, 정렬, 배율을 확인합니다.
SVG Optimizer로 복잡도를 줄여 모바일 렌더링을 가볍게 만듭니다.
바로 붙여 쓸 컴포넌트 코드가 필요하면 SVG to React Native를 사용합니다.

React Native SVG 가져오기 가이드: react-native-svg + SvgXml