레이어를 잃지 않고 PSD를 SVG로? 유지되는 내용 알아보기
PSD에는 도형 레이어, 편집 가능한 텍스트, 마스크, 픽셀이 있지만 SVG가 모두 유지하지는 못합니다. 먼저 내보내거나 평탄화하거나 추적할 부분을 알아보세요.
목차
모든 Photoshop 레이어를 동등한 SVG 레이어로 변환할 수는 없습니다. PSD에는 도형 레이어, 편집 가능한 텍스트, 마스크, 효과, Smart Objects, 일반 픽셀이 섞일 수 있습니다. SVG는 경로, 텍스트, 그룹, 이미지를 표현하지만 이러한 객체가 Photoshop의 문서 모델에 깔끔하게 대응하지는 않습니다. 가장 안전한 방법은 기존 벡터 콘텐츠를 직접 내보내 유지하고 재사용할 벡터 원본이 없는 래스터 그림만 추적하는 것입니다.
빠르게 결정하기
- PSD에 이미 깔끔한 도형 경로가 있다면 유지하거나 벡터 편집기로 옮기세요.
- 대상 프로그램에 글꼴이 있고 SVG 텍스트를 안정적으로 처리할 때만 편집 가능한 텍스트를 텍스트로 유지하세요. 그렇지 않으면 전달용 복사본을 윤곽선 처리하세요.
- 마스크, 효과, Smart Objects, 픽셀 레이어는 전달 가능한 레이어 구조가 아니라 보이는 외관으로 취급하세요.
- 평탄화한 그림을 편집 가능한 도형으로 만들기만 하면 된다면 저장된 합성 이미지를 검토하고 추적하세요.
- 최종 SVG를 열어 객체를 확인하세요.
.svg확장자가 레이어 유지나 픽셀의 경로 변환을 증명하지는 않습니다.
PSD 레이어와 SVG 레이어는 다릅니다
Photoshop의 Layers 패널은 문서를 어떻게 편집하는지 나타냅니다. SVG는 렌더러가 무엇을 그리는지 설명합니다. 서로 다른 역할입니다.
| PSD 콘텐츠 | 적합한 방법 | SVG에서 예상할 결과 |
|---|---|---|
| 도형 레이어 또는 Photoshop 경로 | 기존 데이터를 직접 유지하거나 이동 | 내보내기가 벡터 도형을 유지하면 편집 가능한 경로 |
| 편집 가능한 텍스트 | 편집 가능한 상태로 유지 또는 복사본 윤곽선 처리 | 편집 가능한 텍스트에는 글꼴이 필요함; 윤곽선은 외관을 유지하지만 텍스트 편집을 잃음 |
| 픽셀 레이어 | 벡터 도형이 유용할 때만 추적 | 새 경로가 보이는 픽셀을 근사 |
| 레이어 마스크 또는 클리핑 마스크 | 의도적으로 다시 만들거나 평탄화 | 보이는 잘림은 유지될 수 있지만 Photoshop 편집 설정은 유지되지 않음 |
| Smart Object | 먼저 원본 소스 열기 | 배치된 결과만으로는 렌더링된 픽셀만 보일 수 있음 |
| 레이어 효과, 질감, 부드러운 그림자 | 래스터 유지 또는 단순화 | 부드러운 효과는 흔히 픽셀이나 많은 도형으로 바뀜 |
Adobe의 현재 Image Assets 작업 과정은 이름을 지정한 레이어나 레이어 그룹에서 SVG 자산을 생성할 수 있습니다. 같은 문서는 그룹 안에 도형과 편집 가능한 텍스트가 있어도 레이어 그룹 자산이 평탄화된다고 설명합니다. 즉 출력으로 SVG를 선택해도 Photoshop 계층이 동등한 SVG 계층으로 바뀌지는 않습니다.
변환 전에 파일 내용 조사하기
무엇을 바꾸든 먼저 PSD를 복제하세요. 이후 Layers, Paths, Properties, Smart Objects 패널을 살펴보세요.
- 픽셀 레이어를 숨기세요. 유용한 그림이 남으면 이미 유지할 만한 벡터 도형이 있을 수 있습니다.
- 각 텍스트 레이어를 선택하세요. 윤곽선 처리하거나 옮기기 전에 글꼴 계열과 굵기를 기록하세요.
- Smart Objects를 여세요. 연결된 Illustrator 파일이나 다른 벡터 원본은 렌더링된 미리보기를 추적하는 것보다 좋습니다.
- 마스크와 효과를 켜고 끄세요. 편집 가능한 구성이 중요한지 최종 외관만 중요한지 정하세요.
- 저장된 합성 이미지를 확인하세요. 다른 컴퓨터에서 다르게 열리면 평탄화 작업 전에 확인한 복사본을 다시 저장하세요.
Adobe는 선택한 레이어를 별도 파일로 내보내기도 설명합니다. 별도 내보내기는 자산 사이의 유용한 경계를 유지할 수 있지만 원래 PSD 레이어 묶음처럼 동작하는 SVG 하나를 만들지는 않습니다.
방법 1: 벡터 콘텐츠 유지하기
도형 레이어, 펜 경로, 단순한 편집 가능한 텍스트, 원본 벡터 소스가 남아 있는 Smart Objects에 사용하세요.
용도별로 묶인 자산을 하나씩 이동하거나 내보내고 Illustrator, Inkscape 등의 SVG 편집기에서 여세요. 사각형 이미지 하나가 아니라 경로와 그룹이 있는지 확인하세요. 텍스트를 계속 편집해야 한다면 Photoshop 문서가 없는 다른 컴퓨터에서 SVG를 열어 의도한 글꼴이 로드되는지 확인하세요. 로고와 제작 파일에는 편집 가능한 텍스트 원본을 보관하고 윤곽선 처리한 전달용 복사본을 만드세요.
좋은 벡터 원본을 추적기에 넣기 위해 평탄화하지 마세요. 추적은 렌더링된 외관을 다시 그리므로 노드를 추가하고 곡선을 바꾸며 텍스트를 근사 윤곽선으로 만들 수 있습니다. 원래 도형이 더 깔끔한 시작점입니다.
방법 2: 보이는 그림을 평탄화한 뒤 추적하기
유용한 디자인이 픽셀로만 존재하거나 PSD에 저장된 외관이 남아 있는 가장 좋은 원본일 때 추적을 사용하세요. 평면 로고, 배지, 아이콘, 레터링, 색상 경계가 뚜렷한 일러스트가 대개 적합합니다. 사진, 미묘한 그라디언트, 붓 질감, 부드러운 그림자는 대개 적합하지 않습니다.
추적 전에 다음을 확인하세요.
- 벡터에 표시되면 안 되는 것을 숨깁니다.
- 전달에 필요한 배경이나 투명 배경 위에 그림을 놓습니다.
- 의도한 출력 크기에서 작은 글자 안쪽 공간, 구멍, 가는 글자를 확인합니다.
- PSD에 신뢰할 수 있는 병합 보기가 없다면 호환 복사본을 저장하거나 고품질 PNG로 내보냅니다.
- 원본 PSD를 유지합니다. 추적 결과는 문서 대체물이 아니라 새로운 전달용 자산입니다.
SVG 2 포함 콘텐츠 모델에 따라 SVG에는 래스터 이미지를 포함할 수 있습니다. 따라서 형식만 바꾸는 변환기는 추적하지 않고 평탄화한 PSD 픽셀을 SVG 안에 넣을 수 있습니다. 확대하고 객체 유형을 확인하면 이러한 가짜 벡터 결과를 발견할 수 있습니다.
PerfectVector로 진행하는 방법
PerfectVector는 지원되는 PSD나 PSB를 저장된 병합 호환 이미지로 엽니다. 브라우저가 그 이미지를 로컬에서 준비하고 벡터화 전에 검토하도록 요청합니다. 원래 Photoshop 문서를 업로드하거나 레이어, 마스크, 편집 가능한 텍스트, 효과, 경로, 아트보드, Smart Objects를 재구성한다고 주장하지 않습니다. Photoshop-SVG 작업 과정은 준비된 픽셀을 SVG 경로로 재구성합니다.
따라서 레이어 유지가 아니라 추적 방법입니다. 저장된 합성 이미지가 올바른 외관이고 원래 Photoshop 구성보다 편집 가능한 경로 도형이 유용할 때 사용하세요. 변환 후 실루엣, 색상 영역, 글자 도형, 여백, 노드 구조를 확인하세요. PSD에 이미 깔끔한 벡터 원본이 있다면 직접 옮기세요.
SVG에 무엇이 유지되었는지 확인하기
첫 미리보기를 믿지 말고 다운로드한 SVG를 벡터 편집기에서 다시 여세요.
- 색상 영역 하나를 선택하세요. 이미지 사각형 일부가 아니라 경로나 도형으로 동작해야 합니다.
- Layers나 Objects 패널을 여세요. PSD 레이어 이름을 기대하기보다 관리 가능한 그룹 구조를 확인하세요.
- 곡선과 글자 안쪽 공간을 확대하세요. 평평해진 곳, 의도치 않은 닫힘, 노이즈가 있는 가장자리를 확인하세요.
- 채우기 색상 하나를 바꾸세요. 실제 경로는 주변 영역을 바꾸지 않고 색상을 바꿀 수 있어야 합니다.
- 픽셀이 계속 보이는 영역이 있으면 소스에서
<image>요소를 검색하세요. - 실제 대상 프로그램으로 SVG를 가져와 크기, 글꼴, 마스크, 효과를 확인하세요.
보이는 모든 조각이 하나의 객체처럼 동작하면 파괴적인 경로 작업 전에 SVG 그룹 해제 진단을 사용하세요. 파일은 그룹이 아니라 복합 경로 하나나 포함 이미지일 수 있습니다.
PSD를 PSD로 유지해야 할 때
편집 가능한 텍스트, 조정 레이어, 마스크, Smart Objects, 아트보드, 사진 질감, 효과가 계속 필요하다면 Photoshop을 원본으로 유지하세요. SVG는 크기를 바꿀 수 있는 그래픽 도형의 좋은 전달 형식이지만 Photoshop 문서의 대체물은 아닙니다.
편집 가능한 원본 PSD와 제작용 자산 SVG라는 두 파일이 남을 수 있습니다. 이는 적절한 전달 방식입니다. 두 파일이 서로 다른 편집 가능성을 유지합니다.
FAQ
모든 레이어를 그대로 유지해 PSD를 SVG로 변환할 수 있나요? 안정적으로는 어렵습니다. 일부 도형과 텍스트는 SVG로 옮길 수 있지만 Photoshop 마스크, 효과, Smart Objects, 조정 레이어, 레이어 이름, 픽셀 레이어에는 일대일 대응되는 SVG 요소가 없습니다. 기존 벡터 객체를 먼저 유지하고 나머지는 렌더링된 외관으로 취급하세요.
PSD-SVG 결과에 레이어가 하나뿐인 이유는 무엇인가요? 변환기가 평탄화된 합성 이미지를 사용하거나 래스터 이미지 하나를 포함했을 가능성이 높습니다. SVG 객체 하나가 복합 경로나 그룹일 수도 있으므로 여전히 래스터라고 생각하기 전에 객체 유형을 확인하세요.
Photoshop 파일을 SVG로 저장하면 픽셀이 벡터화되나요? 아니요. SVG에는 래스터 이미지가 들어갈 수 있습니다. 형식 내보내기는 추적 없이 SVG 컨테이너에 픽셀을 넣을 수 있습니다. 그림이 경로로 선택되고 객체 단위로 편집 가능한지 확인하세요.
Photoshop에서 SVG를 내보내기 전에 텍스트를 윤곽선 처리해야 하나요? 외관을 고정해야 하고 텍스트 편집이 더 이상 필요하지 않다면 전달용 복사본을 윤곽선 처리하세요. 문구나 현지화가 바뀔 수 있다면 편집 가능한 텍스트 원본을 보관하세요. 윤곽선 처리는 글꼴 편집을 유지하지 않고 글자를 경로로 바꿉니다.
PerfectVector가 PSD에서 Photoshop 레이어를 복원할 수 있나요? 아니요. PerfectVector는 지원 파일의 저장된 병합 호환 이미지를 사용해 보이는 이미지를 경로로 추적합니다. 원래 Photoshop 레이어 묶음이나 편집 가능한 문서 기능을 재구성하지 않습니다.
Sources
- Adobe — 레이어에서 이미지 자산 만들기 — SVG 자산 생성과 레이어 그룹 자산의 평탄화를 설명합니다.
- Adobe — 레이어를 파일로 내보내기 — 현재 레이어별 내보내기 동작을 설명합니다.
- Adobe — Photoshop에서 도형과 경로 그리기 — Photoshop의 도형, 펜, 경로 도구를 정의합니다.
- W3C — SVG 포함 콘텐츠 — SVG에 래스터 이미지 데이터가 들어갈 수 있는 이유를 설명합니다.
- PerfectVector — Photoshop-SVG 변환 — 지원되는 저장 합성 이미지 작업과 레이어 복원 제한을 설명합니다.
저장된 합성 이미지가 필요한 원본이라면 Photoshop-SVG 변환기에서 검토하고 벡터화하세요. 이후 SVG를 다시 열어 중요한 영역이 경로인지 확인하세요.
