일관된 UI 키트를 위해 PNG 아이콘을 SVG로 변환하기
PNG 아이콘 폴더를 일관된 SVG 세트로 만드세요. UI 키트 전체의 아트보드, 시각적 크기, 색상, 경로, 전달 점검을 통일하는 방법을 알아보세요.
목차
폴더 전체를 한 번에 변환하지 마세요. 가장 단순한 아이콘, 가장 복잡한 아이콘, 곡선 도형, 뚫린 부분이 있는 아이콘을 포함한 작은 그룹에서 시작하세요. 샘플로 SVG 규칙을 정한 뒤 나머지 세트에 적용하세요. 잘못된 추적 결정이 수십 개의 파일로 퍼지기 전에 찾아낼 수 있습니다.
변환 자체는 한 단계일 뿐입니다. 쓸 만한 UI 키트에는 공유 좌표계, 일관된 시각적 크기, 예측 가능한 색상 동작, 편집 가능한 경로, 실제 제품에서의 전달 점검도 필요합니다.
간단한 작업 순서
- PNG 세트 목록을 만들고 중복이나 누락된 원본을 찾으세요.
- 대표 아이콘을 선택하고 공통 격자, 여백, 채우기 또는 스트로크 모델, 색상 규칙을 정하세요.
- 샘플 아이콘을 실제 경로로 변환하세요.
- 실루엣, 노드, 빈 공간, 색상 영역을 검사하세요.
- 벡터 편집기 하나에서 세트를 통일한 뒤 나머지 아이콘을 변환하고 검수하세요.
- 실제 UI와 자산 처리 과정에서 내보낸 SVG를 테스트하세요.
어떤 PNG 아이콘을 SVG로 만들지 결정하세요
경계가 뚜렷한 평면 아이콘은 좋은 추적 후보입니다. 다른 이미지에는 다른 방법이 필요합니다. 변환기를 열기 전에 폴더를 분류하세요.
남은 원본이 PNG가 아니라 아이콘 컨테이너라면 먼저 형식에 맞는 ICO를 SVG로 또는 ICNS를 SVG로 작업 과정으로 복구하세요. 이후 결과를 아래의 같은 UI 키트 규칙에 맞게 통일하세요.
| 원본 아이콘 | 권장 방법 | 이유 |
|---|---|---|
| 단색 또는 제한된 색의 평면 아이콘 | SVG로 추적한 뒤 통일 | 보이는 디자인이 이미 깨끗한 도형으로 구성됨 |
| 픽셀 아트 아이콘 | 래스터 격자 유지 또는 의도적으로 다시 그리기 | 자동으로 매끄럽게 하면 의도한 픽셀 구조가 사라질 수 있음 |
| 그라디언트, 빛 번짐, 질감이 있는 아이콘 | 래스터 유지 또는 그림 먼저 단순화 | 추적이 연속적인 세부 사항을 많은 작은 도형으로 나눌 수 있음 |
| 문자로 편집 가능한 텍스트가 있는 아이콘 | 원래 디자인 파일 찾기 또는 레터링 다시 그리기 | 추적은 텍스트를 윤곽선으로 바꾸며 폰트를 복구하지 않음 |
| 기존 벡터에서 내보낸 PNG | 원래 SVG를 찾아 다시 내보내기 | 다시 추적하면 더 깨끗한 원본 기하 구조를 버리게 됨 |
SVG 파일 이름은 픽셀이 벡터 경로가 되었다는 증거가 아닙니다. SVG 내장 콘텐츠 명세에 설명된 것처럼 형식상 <image> 요소로 래스터 이미지를 포함할 수 있습니다. 내보낸 파일이 여전히 사각형 이미지 하나로 선택되거나 높은 배율에서 픽셀 블록이 보인다면 키트에 넣기 전에 내장 래스터 점검을 사용하세요.
추적 전에 UI 키트 규칙을 정하세요
각각 깨끗한 아이콘도 함께 놓으면 일관되지 않을 수 있습니다. 원래 PNG가 아직 따르지 않더라도 먼저 세트 규칙을 기록하세요.
좌표 공간 하나를 선택하세요
같은 구성 요소 크기를 공유할 아이콘에는 하나의 viewBox를 사용하세요. 숫자가 24×24 또는 16×16일 필요는 없으며 시스템에 맞으면 됩니다. SVG는 viewBox 사각형을 표시되는 뷰포트에 매핑하므로 바깥 크기가 같아도 내부 그림의 위치가 일관되어야 도움이 됩니다. SVG 2 좌표계 명세가 이 매핑을 정의합니다.
다음을 기록하세요.
- 공통
viewBox - 의도한 시각적 중심과 기준선
- 최소 내부 여백
- 일반적인 시각적 범위를 의도적으로 넘어도 되는 부분
채우기 또는 스트로크 모델을 선택하세요
채워진 실루엣, 중심 경로와 선 속성을 편집할 수 있는 스트로크, 문서화된 혼합 중 어떤 방식으로 세트를 만들지 결정하세요. 스트로크 기반 윤곽 세트에는 일관된 끝 모양, 연결 모양, 시각적 굵기가 필요합니다. 채우기 세트에는 일관된 빈 공간과 가장자리 처리가 필요합니다. 추적은 가는 스트로크를 닫힌 윤곽으로 바꿀 수 있으므로 미리보기만 믿지 말고 기하 구조를 검사하세요.
색상 제어 방식을 결정하세요
단색 시스템에는 대상이 아이콘 토큰에 매핑할 수 있는 반복 가능한 색상 규칙을 사용하세요. 여러 색의 아이콘에는 허용 팔레트와 변경 가능한 영역을 정의하세요. 눈에 보이는 목적이 없는 한 안티앨리어싱이 남긴 작고 거의 같은 색은 유지하지 마세요.
대표 샘플부터 변환하세요
어려운 경우를 드러내는 아이콘 4~6개를 고르세요. 원이나 호, 대각선, 작은 내부 공간이나 구멍, 세트에서 가장 복잡한 아이콘을 포함하세요. 여러 색을 사용한다면 해당 아이콘도 포함하세요.
1. PNG를 준비하세요
확보할 수 있는 가장 깨끗한 내보내기를 사용하세요. 실수로 생긴 배경 사각형을 제거하고 일관되게 자르며, 픽셀을 늘리려고 작고 흐린 원본을 확대하지 마세요. 품질을 잃지 않고 PNG를 SVG로 변환하기 원본 준비 가이드가 추적 관련 세부 사항을 다룹니다.
모든 원본의 손대지 않은 사본을 보관하세요. 기억에 의존하지 않고 SVG를 원본과 비교할 수 있으면 정리를 판단하기 쉽습니다.
2. 샘플 아이콘을 추적하세요
자동 벡터화 도구나 디자인 소프트웨어의 추적 도구를 사용하세요. Illustrator의 현재 Image Trace는 색상, 경로, 모서리, 노이즈 컨트롤을 제공합니다. Figma의 현재 Vectorize는 추적 후 색상 모드를 제공하며 복잡하거나 저해상도인 이미지는 잘 벡터화되지 않을 수 있다고 설명합니다(Adobe Image Trace; Figma Vectorize).
브라우저에서 작업하려면 PerfectVector의 PNG-SVG 변환기에 샘플을 업로드하세요. 미리보기를 원본과 비교하고 도형과 색상 영역을 검사한 뒤 벡터 편집기에서 통일할 SVG를 다운로드하세요. 폴더의 나머지를 처리하기로 결정하기 전에 대표 그룹부터 실행하세요.
Figma가 키트의 마스터 편집기라면 Figma Vectorize와 외부 SVG 작업 과정 비교로 같은 샘플에서 두 방법을 비교하세요. 가져온 뒤 편집해야 하는 구멍과 색상 영역을 포함해 도형을 평가하세요.
3. 미리보기뿐 아니라 경로를 검사하세요
각 결과를 벡터 편집기에서 열고 도형을 선택하세요. SVG 경로는 SVG 2 경로 명세의 직선과 곡선 선분을 포함한 명령과 좌표로 구성됩니다. 실루엣을 보존할 만큼 충분한 노드가 필요하며 보편적인 목표 개수는 없습니다.
다음을 찾으세요.
- 단순한 곡선 주변의 밀집한 노드 연속
- 잡티나 배경 사각형
- 같은 가장자리의 겹친 복사본
- 안티앨리어싱으로 생긴 작은 색상 조각
- 추적 중 닫힌 구멍이나 글자 내부 공간
- 선택 가능한 경로 대신 래스터 사각형 하나
단순한 도형이 점 아래 묻혀 있다면 단순화 전에 노드가 너무 많은 문제 진단을 사용하세요. 과도한 정리는 모서리를 움직이고 작은 공간을 닫을 수 있으므로 편집한 경로를 PNG와 비교하세요.
아이콘을 한 세트로 통일하세요
샘플 추적의 구조가 정상이라면 공유 격자 위에 놓고 함께 검수하세요. 이 단계에서 세트가 시스템이 됩니다.
실제 인터페이스 크기와 더 큰 편집 배율에서 세트를 확인하세요.
| 항목 | 세트 전체에서 비교할 내용 | 흔한 실패 |
|---|---|---|
| 좌표 공간 | 같은 viewBox와 의도한 배치 | 같은 구성 요소에서 아이콘 위치나 크기가 달라짐 |
| 시각적 크기 | 경계 상자 너비뿐 아니라 느껴지는 덩어리 크기 | 가는 아이콘이 복잡한 아이콘보다 작아 보임 |
| 정렬 | 기준선, 중심, 의도한 범위 넘김 | 원과 뾰족한 도형이 낮거나 중심에서 벗어나 보임 |
| 굵기 | 스트로크 너비 또는 채워진 가장자리 두께 | 아이콘 하나가 주변보다 진하게 느껴짐 |
| 모서리와 곡선 | 반지름 표현과 접선 품질 | 일부 모서리는 선명하고 일부는 부풀어 보임 |
| 경로 구조 | 선택 가능한 도형과 관리 가능한 노드 | 모습은 맞아도 파일 하나가 편집하기 어려움 |
| 색상 동작 | 승인 팔레트와 토큰 매핑 | 거의 같은 채우기 때문에 색 변경이 예측 불가능함 |
| 이름 | 안정적인 구성 요소 및 파일 이름 | 중복되거나 모호한 자산이 전달됨 |
시각적 보정은 허용됩니다. 원과 사각형이 같은 크기로 보이려면 원이 사각형을 담는 상자보다 약간 더 커야 할 수 있습니다. 규칙은 모든 도형을 동일한 기하 범위에 강제로 넣는 것이 아니라 문서화된 격자에 근거한 일관된 인식입니다. 인쇄용 시각 일정 카드 작업 과정은 이 구분을 그림 상자, 별도 라벨, 치수가 있는 PDF 페이지에 적용합니다.
카드 레이아웃 전에 도형을 편집해야 하는 일상 활동 그림 세트에는 대표 그림 하나를 시각 지원 자료 그림 변환기로 처리하세요. 라벨은 분리하고 변환한 그림이 의도한 의미를 유지하는지 확인하세요.
PerfectVector에서는 어떻게 적용하나요?
PerfectVector는 원본 준비와 세트 통일 사이의 추적 단계에 적합합니다. 대표 PNG 샘플을 편집 가능한 벡터 도형으로 재구성한 뒤 키트에 중요한 기준으로 평가하세요.
- 각 아이콘이 실루엣과 빈 공간을 보존하나요?
- 의도한 영역을 선택하고 색을 바꿀 수 있나요?
- 곡선이 관리할 수 있는 수의 노드를 사용하나요?
- 직접 추적하거나 앱 내부에서 추적한 것보다 통일하기 쉬운가요?
샘플이 통과하면 나머지 적합한 PNG를 변환하고 같은 마스터 파일로 가져와 세트 전체를 검수하세요. 실패하면 더 많은 아이콘을 처리하기 전에 원본이나 추적 방법을 바꾸세요. PerfectVector가 디자인 시스템의 시각적 정렬과 이름 결정을 대신하지는 않습니다.
원본을 잃지 않고 정리하세요
파일을 두 계층으로 유지하세요.
- 원본 보관: 손대지 않은 PNG, 원래 디자인 파일, 출처 메모
- 편집용 마스터: 공유 격자에 맞춰 통일한 벡터 아이콘
- 전달용 내보내기: 제품이 사용하는 최적화된 SVG
도형은 마스터에서 편집한 뒤 전달 파일을 다시 생성하세요. 별도 내보내기를 직접 편집하면 사본마다 수정이 달라질 수 있으므로 피하세요. SVG에 색 변경, 형태 변경, 캔버스 수정이 필요하다면 SVG 편집 과정을 사용하고 수정된 구조를 마스터 세트에 반영하세요.
재사용 가능한 웹 아이콘으로 전달한다면 그림 승인 후 SVG symbol 스프라이트 작업 과정을 따르세요. 앱에 넣기 전에 심벌 ID, 중첩 참조, 좌표 범위, 페인트 규칙, 인스턴스 이름을 확인합니다. 인터페이스가 캔버스에 아이콘을 그린다면 Path2D로 SVG 경로를 캔버스에 매핑하고 좌표 변환, 색상, 구멍, 실제 렌더링 해상도를 SVG 마스터와 대조하세요.
Penpot이 디자인 라이브러리 대상이라면 나머지 키트를 추가하기 전에 샘플 SVG를 캔버스에 삽입하고 색상 영역 하나와 윤곽 하나를 테스트하세요. Penpot SVG 가져오기 가이드는 프로젝트 파일 가져오기와 그림 삽입을 구분하며 Penpot 자체 도형, 원시 SVG 콘텐츠, 편집 가능한 라벨을 확인하는 방법을 설명합니다. 모습은 맞지만 키트에 필요한 편집을 지원하지 못하는 아이콘을 찾아낼 수 있습니다.
전달 전에 중요한 모든 환경, 즉 디자인 라이브러리, 앱 구성 요소, 빌드 또는 최적화 단계에서 몇 개의 아이콘을 테스트하세요. 시스템에서 사용한다면 비활성화와 반전 색상 상태도 확인하세요. 구조적으로 깨끗한 파일도 색상이나 크기 전제가 구성 요소와 맞지 않으면 키트에서 실패할 수 있습니다. Android가 대상이면 자산을 앱에 넣기 전에 PNG-VectorDrawable 가져오기 체크리스트로 뷰포트 크기, 채우기, 경로 복잡도, 가져오기 지원을 확인하세요. Godot 프로젝트에는 Godot SVG 가져오기 체크리스트로 텍스처 가져오기 유형을 선택하고 래스터 크기, 오버샘플링, 지원되는 그림을 확인하세요. Unity 프로젝트에는 Unity SVG 가져오기 체크리스트로 편집기와 호환되는 가져오기 도구를 선택하고 UI Toolkit 또는 스프라이트 대상을 확인하세요.
SwiftUI 프로젝트에는 SVG 자산 카탈로그 및 렌더링 과정을 확인해 이름 있는 이미지 리소스, 원본 또는 템플릿 색상 동작, 최종 표시 크기를 검증하세요.
UI 키트 전달 체크리스트
- 모든 추적 아이콘이 확보 가능한 가장 깨끗한 원본에서 나왔습니다.
- 아이콘이 문서화한
viewBox, 여백, 정렬 규칙을 공유합니다. - 실제 UI 크기에서 시각적 크기와 굵기가 일관됩니다.
- 채우기 및 스트로크 아이콘이 시스템의 모델을 따릅니다.
- 색상 영역이 승인 팔레트 또는 토큰 규칙에 예측 가능하게 매핑됩니다.
- 곡선이 명확한 경로 혼잡 없이 충실도에 충분한 노드를 사용합니다.
- 실수로 들어간 내장 래스터, 배경 상자, 중복 가장자리가 없습니다.
- 파일과 구성 요소 이름이 고유하고 안정적입니다.
- 제품의 일반 최적화 단계 이후 내보낸 세트를 테스트했습니다.
- 원본 보관, 편집용 마스터, 전달 파일을 분리해 보관합니다.
FAQ
모든 PNG 아이콘을 일괄 변환한 뒤 정리해도 되나요? 가능하지만 대표 샘플부터 시작하는 편이 안전합니다. 가장 어려운 도형을 포함한 몇 개를 변환하고 격자와 경로 규칙을 정한 뒤 나머지를 처리하세요. 그렇지 않으면 잘못된 추적 선택 하나 때문에 폴더 전체에서 반복 정리가 필요할 수 있습니다.
모든 SVG 아이콘에 같은 viewBox를 써야 하나요?
같은 UI 구성 요소를 공유하는 아이콘에는 보통 같은 viewBox가 유용하지만 내부 그림은 시각적 조정이 필요할 수 있습니다. 좌표 공간은 일관되게 유지하고 원, 뾰족한 도형, 유난히 복잡한 아이콘에는 문서화된 범위 넘김이나 여백 변경을 허용하세요.
UI 아이콘에는 노드가 몇 개 있어야 하나요? 보편적인 숫자는 없습니다. 의도한 실루엣, 모서리, 빈 공간을 보존하는 최소한의 노드를 사용하세요. 비슷한 복잡도의 아이콘을 비교하고 단순한 곡선에 점이 밀집해 있다면 조사하세요.
SVG 세트가 완성된 뒤에도 PNG 아이콘을 보관해야 하나요? 그렇습니다. 원래 PNG와 이전 디자인 원본을 보관하세요. 출처를 제공하며 추적을 다시 해야 할 때 시각적 참고가 됩니다. 편집은 통일한 벡터 마스터에서 하고 전달용 SVG는 그 마스터에서 생성하세요.
Sources
- W3C — SVG 좌표계, 변환, 단위 — SVG 뷰포트, 좌표계,
viewBox, 표시 영역으로의 그림 매핑을 정의합니다. - W3C — SVG 경로 — 편집 가능한 SVG 경로 구조를 이루는 직선과 곡선 명령을 정의합니다.
- W3C — SVG 내장 콘텐츠 — SVG에 벡터 경로 대신 래스터 이미지 내용이 들어갈 수 있음을 확인합니다.
- Adobe Illustrator — Image Trace로 이미지 벡터화 — 현재 래스터 추적 과정과 편집 가능한 경로 출력을 설명합니다.
- Figma Learn — 정적 이미지를 벡터 레이어로 변환 — Figma의 현재 Vectorize 과정, 색상 모드, 원본 이미지 한계를 설명합니다.
폴더 전체보다 가장 어려운 몇 개의 아이콘부터 시작하세요. 샘플 PNG를 SVG로 변환하고 경로와 색상 영역을 검사한 뒤, 선택한 결과를 UI 키트 규칙에 맞게 통일하고 작업 범위를 늘리세요.
