이미지를 Illustrator에서 편집 가능한 SVG 선화로 변환하는 방법

설명서 조판을 맡은 디자이너에게 제품 선화 한 묶음이 도착합니다. 클라이언트의 요청은 단 하나. "인쇄에서 뭉개지지 않게 선을 전체적으로 조금 굵게 해 주세요." 파일은 SVG니까 30초짜리 작업이어야 합니다. 전체 선택, 획 두께 값 올리기, 끝. 그런데 첫 파일을 Illustrator에서 열어 보니 조정할 획이 하나도 없습니다. '선'처럼 보이던 것들이 전부 가늘고 긴 채우기 도형 — 평행한 외곽선 두 개 사이를 검정으로 채운 패스 — 이었던 것입니다. 두께를 바꾸려면 패스를 하나씩 오프셋해야 하고, 30초짜리 작업은 한나절 작업이 됩니다.

'이미지 SVG 변환'을 검색해서 이런 파일을 받아 본 적이 있다면, 문제는 Illustrator도, 당신도 아닙니다. SVG가 트레이스된 방식이 문제입니다.

SVG인데도 Illustrator에서 편집이 안 되는 이유

'SVG'는 컨테이너의 이름일 뿐, 내부가 어떻게 만들어졌는지는 보장하지 않습니다. 무료 이미지→SVG 변환기 대부분과 Illustrator의 기본 이미지 추적은 어두운 영역의 가장자리를 찾아 그 영역을 채우기 패스로 감싸는 방식입니다. Adobe의 이미지 추적 문서가 설명하는 그대로, 래스터 아트는 벡터 도형이 됩니다. 로고나 실루엣, 레이저 커팅이라면 그것이 정답입니다.

하지만 기술 선화에는 오답입니다. 그려진 선 하나가 외곽선 트레이스를 거치면 '검정으로 채워진 가늘고 긴 다각형'이 됩니다. 확대·축소도 인쇄도 문제없지만, 기술 도면에서 가장 자주 필요한 작업 — 선 두께 변경 — 이 더 이상 편집 가능한 속성이 아니게 됩니다. Illustrator 커뮤니티에 "트레이스했더니 선 중심의 패스가 아니라 외곽선이 나오는 이유가 뭔가요?"라는 질문이 반복해서 올라오는 이유가 바로 이것입니다.

설명서, IFU, 조립 가이드에 정말 필요한 것은 획 기반 SVG입니다. 눈에 보이는 선 하나하나가 fill: none과 stroke-width를 가진 하나의 패스로, 그려진 선의 중심선(센터라인)을 따라 존재하는 상태. 이렇게 되어 있으면 선 두께는 숫자 하나일 뿐이고, Illustrator에서 한 번의 편집으로 전체를 바꿀 수 있습니다.

'채워진 외곽선'과 '획/센터라인'의 차이

Illustrator의 이미지 추적에도 '중심선' 획 모드가 있지만, 단순한 균일 두께 아트워크에 맞춰져 있어서 실제 제품 도면에서는 곡선이 조각나거나 가까운 선들이 붙어 버리기 쉽습니다. 트레이스 후에 고치는 것보다 생성 단계에서부터 획 기반 SVG를 만드는 것이 확실한 길입니다.

워크플로 1 — 단순한 도판: SVG를 바로 생성

공구, 조작 패널, 제스처 다이어그램, 단일 제품 뷰처럼 비교적 단순한 대상이라면, 텍스트로 묘사하고 SVG를 네이티브 출력 형식으로 생성하는 것이 가장 빠릅니다. ManualFig는 프롬프트를 획 네이티브 SVG 모델에 전달하므로, 패스는 나중에 트레이스되는 것이 아니라 처음부터 센터라인 형태의 획으로 태어납니다.

아래 데스크 램프는 출력 모드를 SVG로 선택하고 다음 프롬프트에서 바로 생성한 것입니다:

이 파일(SVG 다운로드, 4.3 KB)의 내부는 38개 요소 — 패스 28, 원 7, 직선 2, 폴리라인 1 — 이고, 전부가 fill: none인 획입니다. 실질 선 두께는 한 종류(1000×750 viewBox 기준 2.5)로 통일되어 있어, Illustrator에서 열면 균일한 획의 집합으로 바로 편집할 수 있습니다.

워크플로 2 — 복잡한 도판: 이미지를 먼저 만들고 SVG로 변환

SVG 직접 생성에는 복잡도의 상한이 있습니다. 기계 부품의 미세한 디테일, 촘촘한 내부 구조, 사실적인 비례가 필요한 도판은 모델이 자유롭게 그릴 수 있는 래스터 이미지 쪽이 완성도를 끌어올리기 쉽습니다. 그런 경우는 두 단계로 나눕니다. 먼저 래스터 선화를 생성(또는 업로드)해서 내용을 완전히 확정한 뒤, SVG로 변환합니다.

먼저 생성한 래스터 램프(일반 PNG 선화):

같은 이미지를 ManualFig에서 원클릭으로 SVG 변환한 결과:

변환된 파일(SVG 다운로드, 3.8 KB)은 33개 요소입니다. 암 세그먼트, 힌지, 베이스 타원 같은 선화 부분은 획 기반이고, 선 두께는 6개의 CSS 클래스에 한 번만 정의되어 있어 Illustrator에서 클래스 단위로도 선택 단위로도 다시 스타일링할 수 있습니다. 한편 채우기 도형도 2개 남아 있습니다. 화살표 촉입니다. 이 부분은 정확하게 적어 두겠습니다:

이것이 현재 기술의 정직한 상태입니다. 화살표 촉처럼 의도적으로 솔리드여야 하는 기호는 채우기로 남는 것이 오히려 맞습니다. 중요한 것은 도면 본체 — 나중에 두께를 바꾸고 싶어질 선들 — 가 획으로 도착한다는 점입니다.

같은 램프, 두 가지 경로: 실제로 무엇이 다른가

위의 두 파일을 다운로드해서 Illustrator에서 나란히 열어 보세요. 선택하고 스타일을 바꿀 때의 감촉 차이가 어떤 스크린샷보다 많은 것을 말해 줍니다.

Illustrator에서 획 두께 조정하기

획 기반 SVG라면, 첫 문단의 '전체 굵게' 작업은 정말 30초면 끝납니다:

1. Illustrator에서 SVG를 엽니다(편집하려면 '가져오기'가 아니라 '열기').
2. 선택 → 모두 선택 후 컨트롤 패널이나 획 패널에서 새 두께를 입력합니다 — 획이 있는 모든 패스가 한 번에 갱신됩니다.
3. 부분적으로 바꾸려면 선택 → 동일 → 획 두께로 같은 두께의 패스만 선택해(예: 주요 외곽선과 힌지 디테일을 따로) 개별 조정합니다.
4. 크기를 조절하기 전에 '획과 효과 크기 조절'(환경 설정 → 일반)을 확인해서, 선 두께가 우연이 아니라 의도대로 스케일되게/고정되게 하세요.

변환 파일은 두께가 소수의 클래스로 정리되어 있어 3번 단계가 특히 잘 작동합니다. 위 램프의 6가지 두께는 이름 붙은 6단계 선 위계처럼 다룰 수 있습니다.

변환 전에 배경을 지워야 하나요?

변환의 경우, 흰색이나 무지 배경이면 도형의 경계가 명확해서 ManualFig로 생성한 선화는 그대로 깨끗하게 변환됩니다. 배경이 복잡한 사진이나 스크린샷을 변환하려면 사진을 그대로 벡터화하지 말고 먼저 선화로 변환하세요(사진을 선화로 변환하는 가이드 참고). 사진의 음영을 그대로 벡터화하면, 이 글이 피하려는 바로 그 '채우기 영역 범벅'이 만들어집니다.

최종 납품은 PNG와 SVG 중 무엇으로?

짧게 요약하면: 도판이 '한 곳, 한 크기'로만 쓰이면 PNG, 두 가지 이상의 크기로 쓰이거나 하류에서 누군가 다시 스타일링할 가능성이 있으면 SVG입니다. 판단 기준의 자세한 내용은 제품 선화 활용 가이드에 있습니다. 인쇄와 웹에 모두 나가는 설명서라면 획 기반 SVG를 원본으로 보관하는 것이 안전합니다. PNG로 내리는 것은 내보내기 한 번이고, 선 두께는 언제나 편집 한 번 거리에 있습니다.

직접 만들어 보기

이 글의 두 램프는 모두 같은 도구에서 수작업 보정 없이 나온 결과물입니다:

1. ManualFig를 열고 도판을 텍스트로 묘사하거나 기존 이미지를 업로드합니다.
2. 바로 생성하려면 출력 모드에서 SVG를 선택하고, 이미지를 생성했다면 결과에서 SVG로 변환을 누릅니다.
3. 내보낸 SVG를 Illustrator에서 열고 필요한 대로 획을 다시 스타일링합니다.

단순한 도판은 SVG로 바로 생성하고, 디테일이 필요한 도판은 이미지를 먼저 완성한 뒤 변환하세요. 어느 경로든 선은 '선인 척하는 외곽선'이 아니라 선으로 도착합니다.

관련 도구: 그림 설명서 생성기, 설명서용 사진→라인 드로잉 변환.