[RN / Expo] Vector Icon vs Image Icon(SVG or PNG)

 

아이콘을 어떤 방식으로 쓰느냐는 개발 스타일, 팀 규모, 퍼포먼스, 확장성, 디자인 툴 체계 등 여러 요소에 따라 갈린다.

두 방법을 현업에서의 사용 경향과 함께 객관적 수치, 장단점, 추천 상황으로 비교 분석해보자!

 

 

✅ 두 가지 방법 요약

방식	설명	예시
Vecotr Icon (폰트 기반)	@expo/vector-icons처럼 폰트형 아이콘 사용	<Inoicons name="search" size={24} />
SVG 또는 PNG 이미지 아이콘	.svg, .png 등 이미지 파일을 import하여 사용	<Image source={require('./search-icon.png')} />

 

 

 

📊 실제 사용 비율 (대략적인 현업 트렌드)

아이콘 방식	현업 사용 비중(2024 기준 예상)
Vector Icon	70~80%
SVG 또는 PNG 이미지 아이콘	20~30%

 

 

 

🎯 각 방식의 장단점 비교

항목	Vector Icons	SVG/PNG 이미지 아이콘
설정 편의성	✅ 이미 Expo에 내장, 별도 설정 불필요	⛔ SVG는 라이브러리 설치 필요 (react-native-svg)
다양성	✅ Ionicons, FontAwesome, Feather 등 수천 개	⛔ 직접 디자인/수급해야 함
커스터마이징	✅ 색상, 크기, 애니메이션 변경 쉬움	⭕ SVG는 가능 / PNG는 제한적
성능(용량)	✅ 매우 가벼움 (폰트 한 번 로드)	⛔ 이미지 파일 여러 개 로드 시 무거울 수 있음
디자인	⛔ 디자이너와 1:1로 완전 동일하긴 어려움	✅ Figma 디자인을 그대로 사용 가능
브랜드 로고	⛔ 없음	✅ 직접 만든 svg/png로 가능

 

 

 

🚀 추천 상황

상황	추천 방식
빠르게 MVP, 프로토타입 만들 때	💛 Vector Icon
디자이너가 있는 팀에서 Figma 기반 정밀 UI 구현할 때	SVG or PNG 아이콘
통일된 아이콘 스타일 유지가 중요한 앱 (ex. 설정, 쇼핑몰)	💛 Vector Icon
브랜드 특화 아이콘, 자체 캐릭터 사용	SVG or PNG 아이콘

 

 

 

 

---

 

+) 추가 질문

“아이콘을 이미지 파일로 업로드하지 않고, 직접 코드로 그리면 성능이 좋아지지 않을까?” 하는 생각은

실제로 React Native 앱 퍼포먼스를 고민하는 개발자들이 가장 많이 하는 고민 중 하나야.

 

✅ 직접 SVG 코드로 아이콘을 그리는 것이 일반적인 이미지 파일(PNG 등)을 사용하는 것보다 퍼포먼스에 유리할 수 있다!

✅ 하지만 폰트 기반 아이콘이나 벡터 아이콘 라이브러리보다 더 퍼포먼스가 좋다고는 단정하기 어렵다.

 

 

 

 

 

🔥결론

• 현업에서도 직접 그리는 건 극히 드물다.
• 브랜드 아이덴티티, 컨셉이 중요한 혹은 사용자 인터렉션, 애니메이션이 더 요구되는 것들에 한해서 일부 svg 이미지만을 사용하기도 함. 디자인팀에서 svg 이미지 제공
• 보통은 '라이브러리 아이콘(vector icons) + svg 이미지 조합'으로 많이 사용한다.