PNG를 Android VectorDrawable로: 가져오기 점검표

Android Studio는 PNG를 벡터 경로로 추적하지 않습니다. Vector Asset Studio는 SVG나 PSD 파일을 가져와 지원되는 도형을 VectorDrawable XML로 변환합니다. 따라서 안정적인 PNG 작업은 두 단계입니다. 픽셀을 실제 SVG로 추적하고, 그 SVG를 Android Studio로 가져옵니다.

PNG를 VectorDrawable로 바로 바꾸는 변환기는 두 단계를 결합할 수 있습니다. 단순한 아이콘에는 편리할 수 있지만 같은 확인이 필요합니다. 출력에 경로가 있고 원본과 일치하며 의도한 뷰포트를 사용하고 Android 가져오기 도구가 표현할 수 없는 기능을 피하는지 확인하세요.

Flutter 인터페이스에는 Flutter SVG 자산 작업 과정을 따르세요. Android 고유 형식인 VectorDrawable XML로 바꾸는 대신 flutter_svg로 SVG를 선언하고 렌더링합니다.

.NET MAUI 프로젝트에는 MAUI 이미지 리소스 점검표를 사용해 원본, 빌드 출력, 표시 크기를 확인하세요. Android 고유 형식인 VectorDrawable 가져오기 단계를 적용하기 전에 해당 프로젝트의 이미지 처리 과정을 따르세요.

간단한 작업 순서

1. 사진이나 질감 대신 깔끔한 아이콘 형태의 PNG로 시작합니다.
2. SVG로 추적하고 포함된 PNG가 아니라 편집 가능한 경로가 있는지 확인합니다.
3. 실루엣을 바꾸지 않고 불필요한 도형과 과도한 노드를 줄입니다.
4. Android Studio의 Vector Asset Studio로 SVG를 가져옵니다.
5. 생성된 XML에서 뷰포트, 경로, 채우기, 스트로크, 그라디언트, 클리핑 동작을 확인합니다.
6. 앱이 지원하는 가장 오래된 Android 버전에서 실제 크기로 드로어블을 시험합니다.

직접 변환기와 SVG 경유 방법 중 선택하기

두 방법은 같은 결과에 도달하지만 확인할 수 있는 단계가 다릅니다.

중간에 SVG를 사용하는 방법이 대개 점검하기 쉽습니다. 추적 결과와 PNG를 비교하고 개별 도형을 살펴보며, 구멍을 수정하고 불필요한 경로를 줄인 다음 Android Studio에서 다시 변환할 수 있습니다.

직접 변환기가 무조건 잘못된 것은 아닙니다. 예를 들어 SVG2Vector는 현재 SVG 등 다른 입력과 함께 PNG-VectorDrawable 변환을 안내합니다. XML을 완성 자산이 아니라 후보로 취급하세요. Android Studio에서 미리 보고 경로를 확인한 뒤 아래와 같은 기기 확인을 진행하세요(SVG2Vector).

1단계: PNG를 실제 SVG 경로로 만들기

사용 가능한 가장 깔끔한 원본으로 시작하세요. 가장자리가 뚜렷하고 팔레트가 제한적인 평면 아이콘이 좋은 후보입니다. 사진, 부드러운 그림자, 발광, 질감은 작은 도형을 많이 만들면서도 유용한 Android 자산이 되지 않을 수 있습니다.

PNG의 원래 해상도를 사용하세요. 흐린 아이콘을 확대하면 픽셀만 추가되고 빠진 가장자리 정보는 복원되지 않습니다. 의도치 않은 배경 사각형을 제거하고 추적 전에 단색, 여러 색상, 그라디언트 중 어떤 자산을 원하는지 정하세요.

픽셀 추적하기

원본을 PerfectVector의 PNG-SVG 변환기에 업로드하거나 결과를 확인할 수 있는 다른 추적 도구를 사용하세요. 원본이 휴대폰에 있고 먼저 일반 SVG가 필요하다면 Android 휴대폰 SVG 작업 과정을 따르세요. 의도한 인터페이스 크기에서 SVG와 PNG를 비교한 뒤 벡터 편집기에서 열어 도형을 선택하세요.

다음을 확인하세요.

• 깔끔한 외곽 실루엣
• 유지된 구멍과 여백
• 예상한 색상 영역 수
• 불필요한 점이나 배경 상자가 없음
• 촘촘한 점 연결 없이 매끄러운 곡선
• 그림을 올바르게 감싸는 viewBox

.svg 확장자는 추적이 이루어졌다는 증거가 아닙니다. W3C 포함 콘텐츠 명세에 따르면 SVG는 <image> 요소로 래스터 콘텐츠를 담을 수 있습니다. 그림이 사각형 하나로 선택되거나 크게 확대할 때 픽셀이 보인다면 Android Studio로 넘어가기 전에 포함 래스터 진단을 사용하세요.

도움이 되는 부분만 단순화하기

Android가 생성된 도형을 파싱하고 그려야 하므로 경로 복잡도가 중요합니다. 모든 작업에 통하는 목표 노드 수는 없습니다. 단순한 곡선에 수십 개의 점이 촘촘히 있다면 살펴봐야 하지만, 불규칙한 일러스트 가장자리에는 실제로 더 많은 점이 필요할 수 있습니다.

원본과 비교하며 떨어진 조각을 제거하고 명백히 불필요한 점 연결을 단순화하세요. 정리하면서 모서리가 바뀌거나 작은 구멍이 닫히면 실행을 취소하세요. 노드가 너무 많은 SVG 가이드는 유용한 세부 요소와 불필요한 경로를 구분하는 방법을 설명합니다.

두 번의 변환, 세 번의 확인

2단계: Android Studio로 SVG 가져오기

Android의 현재 Vector Asset Studio 작업 과정은 로컬 SVG나 PSD 파일을 받고, 미리보기를 보여 주며, XML 벡터 드로어블을 생성합니다(Android Developers).

1. Project 창에서 res 폴더를 마우스 오른쪽 버튼으로 클릭합니다.
2. New > Vector Asset을 선택합니다.
3. 자산 유형으로 **Local file (SVG, PSD)**를 선택합니다.
4. SVG를 선택하고 미리보기에서 오류나 시각적 변화를 살펴봅니다.
5. 리소스 이름과 의도한 크기를 설정합니다.
6. Next로 진행하고 저장 위치를 확인한 뒤 Finish를 선택합니다.

생성한 리소스는 앱의 drawable 리소스 아래에 XML로 저장합니다. 검토한 SVG를 편집 가능한 원본으로 보관하세요. 나중에 외관을 바꿔야 한다면 서로 무관한 두 버전을 수동으로 관리하지 말고 SVG를 편집해 드로어블을 다시 생성하세요.

SVG를 VectorDrawable로 가져올 때 무엇이 유지될까요?

VectorDrawable은 완전한 SVG 렌더러가 아닙니다. Vector Asset Studio는 정해진 일부 기능만 지원하므로 브라우저에서 올바르게 보이는 SVG도 가져오는 과정에서 바뀔 수 있습니다.

이 범위는 현재 Vector Asset Studio 호환성 표에 근거합니다. 가져오기 도구는 가운데 정렬된 스트로크만 지원한다고도 설명합니다. 원본이 안쪽이나 바깥쪽 스트로크를 사용한다면 가져오기 전에 채워진 도형으로 확장하거나 가장자리를 다시 그리세요.

그라디언트는 버전을 추가로 확인해야 합니다. VectorDrawable API 문서는 API 수준 24부터 fillColor와 strokeColor에 그라디언트나 색상 상태 목록 값을 사용할 수 있다고 설명합니다. evenOdd와 nonZero fillType 옵션도 API 수준 24부터라고 설명합니다(VectorDrawable API 참고 문서). 앱이 이전 버전을 지원한다면 Android Studio 미리보기만으로 판단하지 말고 빌드가 사용하는 실제 호환성 경로를 시험하세요.

결과를 채택하기 전에 생성된 XML 읽기

VectorDrawable XML을 직접 작성할 필요는 없지만 빠른 구조 검토로 여러 가져오기 문제를 발견할 수 있습니다.

너비, 높이, 뷰포트

루트 <vector> 요소는 표시 크기와 그리기 좌표를 구분합니다.

• android:width와 android:height는 기본 드로어블 치수로 대개 dp 단위입니다.
• android:viewportWidth와 android:viewportHeight는 경로에서 사용하는 좌표 공간을 정의합니다.

너비와 높이만 바꾸면 같은 도형의 표시 크기가 달라집니다. 뷰포트를 바꾸면 경로 좌표가 표시 영역에 대응하는 방식이 바뀝니다. 아이콘이 잘리거나 여백이 많거나 늘어나 보이면 이 네 값을 SVG의 viewBox와 의도한 자산 크기와 비교하세요.

경로와 페인트

각 <path>에는 android:pathData가 있고 명령은 SVG의 d 속성과 같은 일반적인 경로 문법을 따릅니다. 있는 경우 fillColor, strokeColor, strokeWidth, 선 끝, 선 연결, fillType을 검토하세요.

낯선 경로 명령을 삭제해서 최적화하지 마세요. 먼저 미리보기와 원본을 비교하고 도형을 확인하기 쉬운 SVG 원본에서 단순화하세요.

그룹과 클리핑

그룹에는 이동, 크기 조절, 회전, 피벗 값이 들어갈 수 있습니다. <clip-path>는 보이는 도형을 제한합니다. 결과가 어긋나거나 마스크 영역이 사라지면 그룹 계층을 확인하고 원본 SVG의 변환 및 클리핑 구조와 비교하세요.

앱에서 실제로 사용할 위치에서 드로어블 시험하기

가져오기 미리보기는 Android Studio가 파일을 파싱했다는 증거입니다. 실행 중 자산이 올바르다는 증거는 아닙니다.

다음 채택 점검표를 사용하세요.

• 일반 UI 크기에서 드로어블이 PNG의 의도한 실루엣과 일치합니다.
• 구멍, 글자 안쪽 공간, 겹치는 영역이 올바르게 유지됩니다.
• 단색 채우기와 스트로크가 의도한 색상을 사용합니다.
• 가장 오래된 지원 Android 버전에서 그라디언트가 올바르게 렌더링됩니다.
• 뷰포트가 의도한 여백과 종횡비를 유지합니다.
• 앱에서 사용하는 밝은 상태, 어두운 상태, 비활성 상태, 색조 적용 상태에서 아이콘을 알아볼 수 있습니다.
• XML에 의도치 않은 조각이나 명백히 과도한 경로 데이터가 없습니다.
• 가져오기 미리보기뿐 아니라 실제 컴포넌트에서 시험했습니다.
• 원본 PNG와 편집 가능한 SVG 원본을 보관했습니다.

최소 지원 버전을 대표하는 에뮬레이터나 기기 하나 이상에서 실제 dp 크기로 시험하세요. 색조가 바뀌는 상태나 테마도 확인하세요. 기술적으로 유효한 경로도 여백, 시각적 굵기, 색상 전제가 주변 아이콘 세트와 다르면 문제가 될 수 있습니다.

전체 아이콘군을 변환한다면 먼저 대표 샘플에 이 과정을 적용하세요. UI 키트 변환 작업 과정은 공유 뷰포트, 시각적 크기, 색상 동작, 세트 전체의 전달 확인을 다룹니다.

PNG를 유지해야 할 때

VectorDrawable은 단순한 아이콘과 일러스트에 가장 적합합니다. Android 안내는 많은 앱 시작 이미지를 포함한 세밀한 그래픽에 래스터 자산이 더 적합할 수 있다고 경고합니다. 벡터 드로어블의 초기 로딩 비용이 래스터 이미지보다 높을 수 있다고도 설명하며, 긴 그리기 시간을 피하려면 벡터 자산을 200 × 200 dp 이하로 유지할 것을 권장합니다(Android Developers).

원본이 다음 요소에 의존한다면 래스터를 유지하거나 다시 설계하세요.

• 사진의 세부 요소
• 부드러운 질감, 흐림, 복잡한 그림자
• 많은 작은 색상 영역
• 외관을 결정하는 지원되지 않는 효과
• XML 검토와 관리가 어려워질 만큼 촘촘한 도형

목표는 모든 PNG를 교체하는 것이 아닙니다. 세밀한 그림을 비용이 많이 드는 경로 더미로 만들지 않으면서, 크기를 바꿀 수 있는 경로 도형 덕분에 Android 자산이 작아지거나 선명해지거나 테마 적용이 쉬워지는 곳에 VectorDrawable을 사용하는 것입니다.

PerfectVector로 진행하는 방법

PerfectVector는 첫 번째 변환을 처리합니다. 적합한 아이콘을 PNG에서 SVG로 변환하고 추적된 도형을 원본과 비교한 뒤 편집 가능한 원본으로 보관할 SVG를 다운로드하세요. 이후 Vector Asset Studio로 파일을 가져와 생성된 XML을 점검하세요.

전체 과정으로 결과를 판단하세요.

1. 추적이 원본 실루엣과 구멍을 유지했나요?
2. SVG 도형이 편집 가능하고 포함된 래스터가 없나요?
3. Android Studio가 필요한 채우기, 그라디언트, 클리핑, 변환을 가져오나요?
4. 실제 크기와 최소 API 수준에서 드로어블이 올바르게 렌더링되나요?

깔끔한 SVG는 파일 전달을 개선하지만 지원되지 않는 Android 기능을 작동하게 하지는 않습니다. 대상 환경에서 외관을 충실히 재현할 수 없다면 디자인을 단순화하거나 PNG를 유지하세요.

FAQ

Android Studio에서 PNG를 VectorDrawable로 직접 변환할 수 있나요? 아니요. 현재 Vector Asset Studio는 PNG가 아니라 로컬 SVG나 PSD 파일을 가져옵니다. 먼저 PNG를 실제 SVG로 추적하거나 직접 변환기를 사용한 뒤 Android Studio에서 결과 XML을 점검하세요.

SVG는 항상 실제 벡터인가요? 아니요. SVG는 이미지 요소로 래스터 콘텐츠를 포함할 수 있습니다. 가져오기 전에 벡터 편집기에서 열거나 마크업을 살펴보고 의도한 그림이 경로나 다른 벡터 도형으로 구성되어 있는지 확인하세요.

SVG 그라디언트가 Android VectorDrawable에서 작동하나요? Vector Asset Studio는 선형, 방사형, 각도 그라디언트를 지원하지만 실행 중 지원은 생성 XML과 Android 버전 전략에 따라 달라집니다. VectorDrawable API는 API 수준 24부터 그라디언트 채우기와 스트로크 색상을 설명하므로 앱이 지원하는 가장 오래된 버전에서 자산을 시험하세요.

가져온 뒤 구멍, 마스크, 텍스트가 바뀐 이유는 무엇인가요? 가져오기 도구는 제한된 SVG 범위를 지원합니다. 채우기 규칙은 버전을 고려해 시험해야 하고, 클리핑은 제한적이며, 텍스트는 지원되지 않습니다. 필요한 텍스트를 윤곽선으로 만들고 클리핑 구조를 단순화한 뒤 드로어블을 채택하기 전에 Android 미리보기와 SVG를 비교하세요.

Android 앱의 모든 PNG를 VectorDrawable XML로 바꿔야 하나요? 아니요. 단순한 아이콘과 일러스트가 가장 적합합니다. 의도적으로 다시 그려 더 단순한 경로 도형을 만들지 않는 한 사진, 질감이 많은 이미지, 복잡한 효과, 지나치게 세밀한 그림은 래스터 자산으로 유지하세요.

Sources

1. Android Developers — 여러 밀도의 벡터 그래픽 추가 — Vector Asset Studio의 SVG 및 PSD 가져오기, 지원 SVG 범위, 성능 주의 사항, 생성 드로어블 리소스를 설명합니다.
2. Android Developers — VectorDrawable API 참고 문서 — 뷰포트, 페인트, 채우기 규칙, API 수준 동작을 포함한 vector, path, group, clip-path XML 속성을 정의합니다.
3. W3C — SVG 포함 콘텐츠 — SVG가 이미지 요소로 래스터 이미지 콘텐츠를 담을 수 있음을 확인합니다.
4. Inkscape 매뉴얼 — 이미지 추적 — 래스터 픽셀 추적과 원래 비트맵 작업의 차이를 설명합니다.
5. SVG2Vector — PNG-VectorDrawable 변환 — 작업 과정 비교에서 다룬 현재 직접 변환기 방법을 제공합니다.

---

실제 사용할 아이콘을 시험할 준비가 되었나요? PNG를 SVG로 변환하고 경로를 확인한 뒤 검토한 파일을 Android Studio로 가져오세요. 뷰포트, 색상, 구멍, 실행 중 렌더링이 점검표를 통과한 후에만 드로어블을 채택하세요.