그라데이션·질감·붓 터치·사진을 그대로 보여주려면 원본 품질 SVG가 안전합니다. 로고의 색면과 선을 편집하거나 매우 단순한 형태를 무한 확대해야 한다면 순수 벡터 SVG를 시험하세요.
파일 안에는 무엇이 들어 있나
SVG는 XML 기반 컨테이너이므로 내부에 벡터 도형만 들어가야 하는 것은 아닙니다. `
| 구분 | 원본 품질 SVG | 순수 벡터 SVG |
|---|---|---|
| 핵심 구조 | SVG 안에 고해상도 래스터 이미지를 포함 | 윤곽과 색면을 path 좌표로 기록 |
| 원본과의 시각적 유사성 | 높음. 현재 canvas를 그대로 보존 | 추적 결과에 따라 달라짐 |
| 색면 개별 편집 | 어려움. 포함 이미지 전체가 한 덩어리 | 가능하지만 path가 많으면 작업이 무거움 |
| 무한 확대 | 아님. 높은 해상도로 픽셀감을 늦출 뿐 | path 자체는 해상도 독립적 |
| 복잡한 사진·일러스트 | 적합 | 대개 파일이 커지고 노이즈가 늘어남 |
| 로고·아이콘·실루엣 | 보존용으로 가능 | 편집 목적이라면 더 적합 |
원본 품질 SVG의 장점과 한계
DrowPack은 현재 canvas를 PNG 데이터로 만들고 SVG의 이미지 요소 안에 포함합니다. 사용자는 1x부터 10x까지 확대 선명도를 선택할 수 있지만, 원본 크기와 브라우저 메모리에 따라 실제 배율은 안전한 범위로 제한됩니다. 이 방식은 그라데이션과 작은 하이라이트를 path로 억지로 나누지 않으므로 원본과 비슷하게 보이기 쉽습니다.
잘 맞는 경우
- 사진, 페인팅, 수채화, 브러시 질감처럼 연속적인 색 변화가 많을 때
- 외부 시스템이 SVG 확장자를 요구하지만 내부 개별 도형 편집은 필요 없을 때
- 웹 화면에서 원본 느낌을 유지하는 것이 가장 중요한 경우
- 자동 추적으로 수만 개 path가 생기는 것을 피하고 싶을 때
피해야 할 오해
- 10x를 선택했다고 모든 원본이 실제 정보까지 10배 선명해지는 것은 아닙니다.
- 포함된 이미지를 확대하면 결국 래스터 픽셀이 드러날 수 있습니다.
- Illustrator에서 열 수 있어도 눈, 머리카락, 배경이 각각 편집 가능한 도형으로 나뉘는 것은 아닙니다.
- SVG 컨테이너 오버헤드와 포함 이미지 때문에 같은 PNG보다 파일이 작아진다고 보장할 수 없습니다.
순수 벡터 SVG의 장점과 한계
순수 벡터 모드는 이미지의 색과 밝기 경계를 찾아 path를 만듭니다. 단순한 로고나 실루엣은 적은 수의 명확한 도형으로 정리될 수 있지만, 안티앨리어싱된 픽셀과 질감까지 색면으로 해석하면 아주 작은 path가 급격히 늘어날 수 있습니다.
잘 맞는 입력
- 배경과 주제가 명확하게 분리된 단색 실루엣
- 색상 수가 적고 경계가 선명한 로고와 아이콘
- 굵고 닫힌 선으로 그린 흑백 선화
- 인쇄·커팅·크기 변형을 위해 실제 path가 필요한 단순 도형
어려운 입력
- 머리카락, 눈 하이라이트, 반투명 효과가 많은 일러스트
- 노이즈와 압축 자국이 있는 작은 JPG
- 사진, 광원 그라데이션, 천·종이 질감
- 흰 배경과 내부 흰색 디테일이 동시에 있어 배경 제거 기준이 모호한 그림
픽셀 가장자리를 그대로 따라 만든 수만 개의 path는 확대해도 계단 모양 좌표를 유지할 수 있습니다. 복잡도는 높아졌지만 작가가 의도한 부드러운 곡선을 복원한 것은 아닙니다.
입력 종류별 선택표
| 입력 | 먼저 시도할 형식 | 이유 | 순수 벡터를 시도할 조건 |
|---|---|---|---|
| 사진 | PNG/JPG 또는 원본 품질 SVG | 연속 색조와 질감 보존 | 포스터라이즈된 그래픽 효과가 목적일 때만 |
| 복잡한 캐릭터 일러스트 | 원본 품질 SVG | 작은 장식과 색 변화 유지 | 색면 수를 줄인 별도 버전을 준비했을 때 |
| 단순 컬러 일러스트 | 둘 다 비교 | 편집성·파일 크기 균형 필요 | 윤곽이 선명하고 색상 수가 적을 때 |
| 흑백 선화 | 순수 벡터 SVG | 밝기 기준으로 선을 분리하기 쉬움 | 가는 선이 끊기면 threshold와 노이즈만 소폭 조정 |
| 로고·아이콘 | 순수 벡터 SVG | 도형 편집과 크기 변형에 유리 | 작은 JPG라면 더 큰 원본을 먼저 확보 |
| 실루엣·스티커 외곽 | 순수 벡터 SVG | 주제와 배경 구분이 단순함 | 배경 제거 후 외곽이 닫혔는지 확인 |
둘 중 하나를 고르는 비교 절차
- 최종 사용 목적을 한 문장으로 적습니다. “웹에 원본처럼 보이기”인지 “색면을 편집하기”인지 먼저 구분합니다.
- 원본 품질 SVG를 기본값으로 생성합니다. 100%와 400% 확대에서 시각 품질과 파일 크기를 기록합니다.
- 입력에 맞는 빠른 벡터 모드를 선택합니다. 처음부터 모든 고급 값을 올리지 않습니다.
- 동일한 두 지점을 비교합니다. 외곽선 하나와 가장 작은 내부 디테일 하나를 정해 흰 틈·모양 변화·누락을 봅니다.
- SVG 구조와 용량을 확인합니다. 편집기에 열어 path 수가 작업 가능한 수준인지, 브라우저 미리보기가 무거운지 확인합니다.
- 목적을 만족하는 더 단순한 쪽을 고릅니다. 차이가 보이지 않으면 복잡도가 낮은 결과가 관리하기 쉽습니다.
최종 파일 검수
- 사용할 앱에서 SVG가 정상적으로 열리는가
- 400% 확대에서 외곽이 의도한 모양인가
- 흰 배경과 내부 하이라이트가 올바르게 구분되었는가
- 작은 글자나 로고의 구멍이 막히지 않았는가
- 순수 벡터의 path 수와 파일 크기가 편집 가능한 수준인가
- 원본 품질 SVG를 순수 벡터라고 설명하고 있지 않은가
자동 추적은 빠른 출발점입니다. 상표, 대형 인쇄, 정밀 커팅처럼 곡선 정확도가 중요한 작업은 결과를 기준으로 수동 베지어 정리 또는 원본 벡터 소스를 사용하는 편이 안전합니다.