60,114개 path인데
왜 곡선은 거칠었을까

문제: SVG인데 확대하면 외곽이 흔들렸다

분석 대상 artwork_vector.svg에는 PNG, JPEG, WebP를 담는 `` 요소가 없었습니다. 필터, 마스크, 클립 path도 없었습니다. 즉 래스터 이미지를 SVG 안에 넣은 파일이 아니라 실제 path 좌표만 가진 SVG였습니다. 그런데 확대하면 바깥 원과 머리카락, 작은 장식 주변에 픽셀 계단을 따라간 듯한 요철과 조각이 보였습니다.

원인은 “가짜 SVG”가 아니라 래스터에서 유래한 기하학이었습니다. 추적기는 안티앨리어싱된 가장자리의 여러 중간색을 서로 다른 영역으로 읽고, 픽셀 경계를 촘촘한 직선·곡선 좌표로 기록했습니다. 벡터가 된 뒤에도 그 좌표 자체가 거칠면 확대할수록 거친 모양이 더 선명하게 드러납니다.

원본에서 직접 센 값

60,114개 중 53,039개가 작은 추적 조각이었고, 그중 어두운 외곽·노이즈 조각으로 볼 수 있는 작은 dark path가 20,118개였습니다. 색상 띠는 28개였지만 각 띠 안에 작은 조각이 매우 많이 분산되어 있었습니다. 반 픽셀 좌표가 523,692개라는 점도 원본 픽셀 격자를 촘촘히 따라간 흔적과 일치했습니다.

렌더링 전후 비교

왼쪽은 자동 추적 원본을 렌더링한 기준 이미지, 오른쪽은 별도 정리 파이프라인의 clean_redraw.svg 렌더입니다. 정리본은 큰 색면과 외곽을 합치고 작은 조각을 줄였지만, 모든 세부를 똑같이 보존하려는 무손실 결과는 아닙니다.

자동 정리 실험에서 한 일

1. 원본 SVG를 2배 해상도로 렌더링했습니다. 기존 path를 그대로 단순화하는 대신 시각 기준을 다시 만들었습니다.
2. 다운샘플과 약한 블러를 적용했습니다. 픽셀 수준의 계단과 매우 작은 색 조각을 줄일 준비를 했습니다.
3. 원본 계열의 제한된 팔레트로 양자화했습니다. 비슷한 중간색이 끝없이 나뉘는 것을 억제했습니다.
4. 다수결 필터와 작은 연결 요소 제거를 적용했습니다. 고립된 점, halo, 작은 외곽 조각을 병합하거나 제거했습니다.
5. 테두리와 이어진 흰 배경을 깨끗한 사각형으로 대체했습니다. 내부 흰색 하이라이트와 외부 배경을 구분하려 했습니다.
6. 색 영역의 contour를 다시 찾았습니다. 좌표를 단순화하고 부드러운 cubic Bézier path로 변환했습니다.

정리본도 PNG를 포함하지 않는 path 기반 SVG입니다. 다만 “원본 path의 모든 점을 보존”하는 방식이 아니라 렌더된 시각 정보를 바탕으로 색 영역을 재구성했기 때문에 작은 디테일이 합쳐지거나 달라질 수 있습니다.

개선된 것과 잃은 것

이 사례에서 얻은 실용 결론

• SVG 내부에 래스터가 없다고 해서 자동으로 깨끗한 벡터가 되는 것은 아니다
• path 수가 많다는 것은 정보량 또는 노이즈가 많다는 뜻일 수 있으며 품질 점수가 아니다
• 구조만 묶는 무손실 최적화는 파일을 줄일 수 있어도 거친 좌표 자체를 고치지 못한다
• 자동 스무딩은 외곽을 완화하지만 작은 모양과 작가 의도를 바꿀 수 있다
• 웹 표시, 편집, 전문 납품은 서로 다른 합격 기준을 써야 한다
• 정확한 전문 벡터가 필요하면 고해상도·레이어 원본 또는 수동 Bé지어 재작업이 가장 확실하다

웹 표시만 목적이라면 clean_web.svg처럼 강하게 정리된 결과가 실용적일 수 있습니다. 색면을 다시 편집하려면 세부를 더 남긴 정리본이 낫지만, 자동 재구성된 도형이라는 한계는 남습니다. 상표·대형 인쇄·정밀 커팅에는 수동 검수가 필요합니다.