React Native에서 SVG 그래픽 사용하기

React Native에서 SVG 그래픽을 활용해 앱 UI를 개선하는 방법을 알아보겠습니다. react-native-svg 라이브러리를 사용해 SVG 이미지와 애니메이션을 구현하는 방법을 다루며, 반응형 디자인을 위한 최적화 팁도 함께 제공합니다.

 

SVG와 React Native의 만남: 왜 SVG인가?

SVG(Scalable Vector Graphics)는 이미지의 해상도를 잃지 않고 무한히 확대할 수 있는 벡터 기반의 그래픽 형식입니다. React Native에서 SVG를 사용하는 것은 간단한 아이콘부터 복잡한 그래픽까지 다양한 요구사항을 만족시킬 수 있기 때문에, 현대 앱 개발에서 매우 유용합니다.

 

예를 들어, 쇼핑몰 앱을 개발 중일 때 제품의 카테고리를 나타내는 아이콘을 반응형으로 만들어야 한다고 가정해 봅시다. PNG와 같은 비트맵 이미지를 사용할 수도 있지만, 화면 크기가 다르거나 해상도가 높은 디바이스에서는 이미지가 깨지거나 흐릿하게 보일 수 있습니다. 반면 SVG 이미지는 해상도에 상관없이 선명한 그래픽을 유지하기 때문에 반응형 UI를 구현할 때 매우 유리합니다.

 

react-native-svg 소개 및 설치 방법

react-native-svg란?

react-native-svg는 React Native에서 SVG 파일을 다룰 수 있도록 지원하는 라이브러리입니다. SVG를 JSX 코드로 렌더링하며, 다양한 그래픽 요소들을 화면에 구현할 수 있게 도와줍니다. 특히, 복잡한 UI를 구현하거나 반응형 그래픽을 필요로 할 때 유용합니다.

설치 및 기본 설정 방법

먼저 react-native-svg를 설치해야 합니다. 터미널에서 다음 명령어를 실행하여 설치할 수 있습니다.

npm install react-native-svg

 

또는 yarn을 사용하는 경우 다음과 같이 설치합니다.

yarn add react-native-svg

 

설치 후, iOS와 Android에서 사용 가능한지 확인하려면 프로젝트를 다시 빌드하는 것이 좋습니다.

npx react-native run-android
npx react-native run-ios

 

SVG 이미지 활용하기

기본 SVG 이미지 렌더링

SVG를 사용하려면 Svg 컴포넌트와 다양한 SVG 요소(Circle, Rect, Path 등)를 사용할 수 있습니다. 아래는 간단한 SVG 이미지를 렌더링하는 예시입니다.

import React from 'react';
import { Svg, Circle } from 'react-native-svg';

const MySvgComponent = () => {
	return (
		<Svg height="100" width="100">
			<Circle cx="50" cy="50" r="40" stroke="blue" strokeWidth="2.5" fill="green" />
		</Svg>
	);
};

export default MySvgComponent;

 

위 코드에서는 Circle 컴포넌트를 사용해 원형 SVG 이미지를 렌더링하고 있습니다. 이렇게 간단한 SVG 요소들을 조합하여 다양한 이미지를 만들 수 있습니다.

복잡한 SVG 요소와 속성 다루기

복잡한 SVG 이미지를 사용할 때는 Path 요소를 활용해 다각형이나 복잡한 모양을 그릴 수 있습니다. Path는 d 속성을 통해 SVG의 경로를 정의하며, 원하는 모양을 그리는 데 큰 유연성을 제공합니다.

import React from 'react';
import { Svg, Path } from 'react-native-svg';

const ComplexSvgComponent = () => {
	return (
		<Svg height="200" width="200">
			<Path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent" />
		</Svg>
	);
};

export default ComplexSvgComponent;

 

SVG 애니메이션 구현하기

애니메이션을 추가하는 방법

애니메이션을 추가하려면 react-native-svg와 함께 애니메이션 라이브러리를 사용할 수 있습니다. 예를 들어 react-native-reanimated 라이브러리를 사용하면 SVG 요소에 애니메이션 효과를 쉽게 추가할 수 있습니다.

import React from 'react';
import Animated, { useSharedValue, useAnimatedProps, withTiming } from 'react-native-reanimated';
import { Svg, Circle } from 'react-native-svg';

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

const AnimatedSvgComponent = () => {
	const radius = useSharedValue(40);
    
	const animatedProps = useAnimatedProps(() => ({
		r: withTiming(radius.value, { duration: 1000 }),
	}));

	return (
		<Svg height="100" width="100">
			<AnimatedCircle cx="50" cy="50" animatedProps={animatedProps} stroke="blue" strokeWidth="2.5" fill="green" />
		</Svg>
	);
};

export default AnimatedSvgComponent;

 

위 예시에서는 useSharedValue와 useAnimatedProps를 사용해 Circle의 반지름을 애니메이션으로 조정하고 있습니다. 이를 통해 SVG 이미지에도 애니메이션 효과를 추가하여 사용자 경험을 개선할 수 있습니다.

 

반응형 SVG 그래픽 구현

다양한 해상도에 대응하는 SVG 사용 방법

반응형 SVG 그래픽을 구현하기 위해서는 ViewBox 속성을 활용하는 것이 중요합니다. ViewBox는 SVG의 크기를 변경할 때 비율을 유지하며, 화면 크기에 맞춰 적응하는 데 도움을 줍니다.

<Svg height="100%" width="100%" viewBox="0 0 100 100">
	<Circle cx="50" cy="50" r="40" stroke="blue" strokeWidth="2.5" fill="green" />
</Svg>

 

위 코드에서는 height와 width를 100%로 설정하여 다양한 화면 크기에서도 SVG가 잘 적응하도록 설정했습니다.

 

마무리하며

SVG는 React Native에서 그래픽을 다루는 데 있어 매우 유용한 도구입니다. 특히 반응형 디자인과 애니메이션을 구현할 때 SVG는 뛰어난 유연성을 제공합니다. 이번 글에서는 react-native-svg 라이브러리를 사용해 SVG 이미지를 렌더링하고 애니메이션을 추가하는 방법을 알아보았습니다. 이러한 기술들을 적극 활용하여 더 나은 사용자 경험을 제공하는 앱을 개발해보면 좋을 것 같습니다.