PerfectVector
작성: Irene Kim5분 읽기

Android에서 이미지 벡터화하기: 실제 SVG 만들기

Android 휴대폰에서 사진이나 그림을 SVG로 변환하고 실제 경로가 있는지 확인하세요. 일반 SVG와 Android VectorDrawable XML의 차이도 알아보세요.

목차

이미지를 데스크톱으로 옮기지 않고도 Android 휴대폰에서 벡터화할 수 있습니다. 브라우저 기반 변환기는 PNG, JPG, WebP를 받아 눈에 보이는 도형을 재구성하고 SVG를 다운로드할 수 있게 합니다. 중요한 것은 .svg 확장자만 믿지 않고 결과에 쓸 수 있는 벡터 경로가 있는지 확인하는 일입니다.

이름에서 생기는 혼동도 있습니다. 브라우저와 디자인 도구가 사용하는 일반 SVG는 앱에서 쓰는 Android VectorDrawable XML과 같은 파일이 아닙니다.

휴대폰 작업 흐름
  • 대상이 단순하고 배경이 깨끗한 선명한 이미지를 선택하세요.
  • 브라우저 기반 벡터화 도구에 업로드하고 미리보기를 검사하세요.
  • SVG를 휴대폰의 파일 또는 다운로드 위치에 저장하세요.
  • 사용할 앱에서 열어 경로, 레이어, 크기를 확인하세요.
  • Android 앱 개발용이라면 파일 이름을 바꾸지 말고 Vector Asset Studio에서 호환되는 SVG를 변환하세요.

먼저 어떤 벡터 파일이 필요한지 결정하세요

휴대폰에서 검색하는 대부분의 사용자는 Cricut, 인쇄, 로고 전달, 이후 편집용으로 일반 SVG를 원합니다. 이는 웹 표준 벡터 문서입니다.

Android 개발자에게는 대신 VectorDrawable 리소스가 필요할 수 있습니다. Google의 Vector Asset Studio 문서는 Android Studio가 지원되는 SVG 또는 PSD 아트워크를 가져와 VectorDrawable을 생성할 수 있다고 설명합니다. 두 형식은 목적은 관련되어 있지만 서로 바꿔 사용할 수 없습니다. 일반 SVG는 VectorDrawable이 지원하지 않는 기능을 사용할 수 있습니다.

디자인이나 커팅 앱으로 보낼 파일이라면 SVG를 만드세요. Android 앱의 리소스에 넣을 파일이라면 먼저 SVG를 만들거나 구한 다음 Android Studio로 변환하고 결과를 검사하세요.

Android 브라우저에서 이미지를 벡터화하세요

  1. 휴대폰에서 가장 크고 깨끗한 원본을 찾으세요. 원본 파일이 있다면 스크린샷을 피하세요.
  2. 배경을 잘라내고 촬영한 아트워크의 기울기를 바로잡으세요.
  3. PerfectVector 이미지 벡터화 도구 같은 브라우저 기반 변환기를 여세요.
  4. 이미지를 업로드하고 크게 확대해 재구성된 도형을 검사하세요.
  5. 도구에서 해당 설정을 제공한다면 불필요한 색상이나 영역을 줄이세요.
  6. SVG를 다운로드하고 브라우저 다운로드 목록이나 휴대폰 파일 관리자에서 찾으세요.

브라우저 방식은 출력 품질을 평가하기 전에 특정 앱을 선택할 필요가 없게 합니다. Adobe Capture도 모바일 선택지입니다. Adobe는 모바일 사진을 도형을 포함한 디자인 자산으로 바꾸는 도구라고 설명합니다. 이미 Infinite Design을 사용한다면 내장 Vectorize 기능과 SVG 검사를 활용하는 방법도 있습니다. 어떤 도구를 사용하든 마케팅 표현보다 내보낸 파일을 평가하세요.

이미지를 검사하고 경로로 변환한 뒤 벡터 파일로 저장하며 일반 SVG 용도와 앱 리소스 용도를 확인하는 Android 휴대폰 작업 흐름 개념도
Android나 변환기의 스크린샷이 아닌 모바일 작업 흐름 개념도입니다. SVG를 만들고 경로를 검사한 뒤 올바른 대상으로 보내세요.

SVG가 실제로 유용한지 확인하세요

SVG 컨테이너에는 래스터 이미지가 포함될 수 있으므로 브라우저에서 선명하게 보인다는 것만으로 충분한 증거가 되지는 않습니다. 다음과 같이 실용적으로 확인하세요.

  • 사용할 앱에서 여세요. 도형이 하나의 평면 이미지가 아닌 벡터 객체나 경로로 가져와져야 합니다.
  • 확대하세요. 경로 가장자리는 선명하게 유지되어야 하지만 SVG 안에 비트맵이 포함될 수 있다는 점을 기억하세요.
  • 레이어나 객체를 검사하세요. 평면 로고는 수천 개의 조각이 아닌 적절한 수의 도형으로 구성되어야 합니다.
  • 작은 구멍과 빈 공간을 확인하세요. 글자 내부의 빈 공간은 추적에서 가장 먼저 사라지는 세부 요소인 경우가 많습니다.
  • 실제 크기를 확인하세요. 커팅 및 인쇄 앱은 문서 치수를 다르게 해석할 수 있습니다.

파일을 텍스트로 볼 수 있다면 실제로 추적된 아트워크에는 보통 경로 요소가 들어 있습니다. 포함된 픽셀 데이터를 가리키는 이미지 요소가 있다면 컨테이너의 내용이 여전히 래스터일 수 있다는 신호입니다. 코드를 편집할 필요는 없으며, 대부분은 사용할 앱에서 객체를 확인하는 것으로 충분합니다.

휴대폰에서 잘 변환되는 이미지

제한 요인은 휴대폰 하드웨어가 아닙니다. 원본 품질입니다.

좋은 후보에는 로고, 스티커, 실루엣, 선이 없는 평면 일러스트, 깨끗한 종이에 그린 그림을 정면으로 촬영한 이미지가 있습니다. 어려운 후보에는 얼굴, 풍경, 털, 반사, 그림자, 그라디언트, 작고 압축된 이미지가 있습니다. 이런 이미지는 벡터 아트 스타일로 바꿀 수 있지만 일반 추적만으로 원본에 충실한 단순 로고가 되지는 않습니다.

종이에 그린 아트를 촬영했다면 여백을 좁게 자르고 회전을 보정하며 희미한 선을 지우지 않는 범위에서 종이를 밝게 만드세요. 다른 전처리로 다시 시도할 수 있도록 원본을 보관하세요.

SVG와 VectorDrawable 비교

SVG의 파일 이름만 XML로 바꿔 Android 프로젝트에 넣지 마세요. Vector Asset Studio나 의도적으로 선택한 다른 변환 방법을 사용하세요. 변환 후 앱이 사용할 크기와 테마에서 리소스를 미리 보세요. 복잡한 SVG 필터, 마스크, 텍스트 등은 가져오기 전에 단순화해야 할 수 있습니다.

개발 작업이 아니라면 일반 SVG까지만 만들면 됩니다. Cricut, 간판, 인쇄, 브라우저 작업 흐름에는 보통 Android 리소스 XML이 아닌 해당 파일이 필요합니다.

FAQ

앱 없이 Android에서 이미지를 벡터화할 수 있나요? 네. 브라우저 기반 벡터화 도구에서 이미지를 업로드하고 미리보기를 생성한 뒤 일반 SVG를 다운로드할 수 있습니다. 휴대폰에 저장하고 사용할 앱에서 테스트하세요.

Android에서 벡터화하기에 가장 좋은 이미지 유형은 무엇인가요? 사용 가능한 PNG, JPG, WebP 중 가장 크고 선명한 파일을 사용하세요. 경계가 뚜렷하고 색상이 적은 평면 아트워크는 명암이 있는 사진이나 작은 스크린샷보다 깔끔하게 변환됩니다.

SVG에 실제 벡터 경로가 있는지 어떻게 알 수 있나요? 벡터를 지원하는 대상 앱으로 가져와 도형을 객체나 경로로 선택할 수 있는지 확인하세요. 확대도 도움이 되지만 SVG에 래스터 이미지가 포함될 수 있으므로 객체 검사가 더 확실한 증거입니다.

SVG와 Android VectorDrawable은 같은 형식인가요? 아닙니다. SVG는 웹 벡터 형식이고, VectorDrawable은 지원 기능이 다른 Android 리소스 XML입니다. Android Studio의 Vector Asset Studio는 호환되는 SVG 아트워크를 VectorDrawable로 변환할 수 있습니다.

Sources

  1. Android Developers — 다양한 밀도의 벡터 그래픽 추가 — 공식 Vector Asset Studio 및 VectorDrawable 가져오기 안내.
  2. Android Developers — VectorDrawable 이해하기 — Android 벡터 리소스 형식에 대한 공식 기술 설명.
  3. Adobe — Capture — 모바일 사진을 디자인 자산과 도형으로 바꾸는 작업 흐름에 대한 공식 설명.
  4. PerfectVector — 이미지를 벡터로 변환 — 브라우저 기반 벡터화, 미리보기, SVG 다운로드에 대한 공식 설명.

Android 프로젝트 밖에서 사용할 일반 SVG가 필요하다면 모바일 브라우저에서 이미지를 벡터화하고 재구성된 경로를 검사하세요. 다운로드 파일에 의존하기 전에 사용할 곳에서 테스트하세요.

블로그의 다른 글

이미지를
깔끔하고 편집 가능한 벡터 패스로 바꿔보세요