SwiftUI에서 SVG 사용하기: 에셋 추가와 색상 제어
Xcode 이미지 세트에 SVG를 추가하고 에셋 이름으로 불러온 뒤 원본 또는 템플릿 렌더링을 선택하세요. 실제 크기에서 색상, 간격, 전달할 앱을 확인하세요.
목차
SwiftUI 앱에 포함하는 정적 SVG는 Xcode 에셋 카탈로그에 넣고 에셋 이름으로 이미지를 불러오세요. 그런 다음 원래 색상을 유지할지 색조가 적용된 실루엣으로 만들지 결정하세요. Apple은 Xcode 12에서 SVG 이미지 에셋을 추가했습니다. 릴리스 노트는 배포 대상 iOS 13, iPadOS 13, macOS 10.15 이상에서 벡터가 보존된다고 명시합니다.
이 카탈로그 작업 흐름은 앱 실행 중 SVG 파일을 다운로드하는 것과 다릅니다. 사용자 지정 SF Symbol을 만드는 것과도 다릅니다. 아트워크를 바꾸거나 렌더러 패키지를 추가하기 전에 전달 방식을 선택하세요.
이 이미지에 맞는 방식 선택하기
SVG는 소스 파일입니다. 앱이 이를 받고 사용하는 방식이 다음 단계를 결정합니다.
| 필요한 것 | 시작 방식 | 검증할 사항 |
|---|---|---|
| 앱에 포함된 정적 로고나 일러스트레이션 | 에셋 카탈로그의 일반 이미지 세트 | 에셋 이름, 색상, 경계, 빌드 출력 |
| 런타임에 제공되는 SVG 파일 | 명시적인 SVG 렌더링 솔루션 | 렌더러 지원 기능과 로딩 및 오류 동작 |
| SwiftUI에서 도형을 직접 제어하는 형태 | 네이티브 Shape/Path 코드 | 경로 변환, 비율, 스타일 |
| 텍스트처럼 굵기와 정렬이 필요한 사용자 지정 심벌 | SF Symbols 템플릿 작업 흐름 | 필요한 변형, 안내선, 주석, 검증 |
이 안내는 첫 번째 방식을 사용합니다. 작은 두 색상 컵은 두 가지 별도 실수를 쉽게 보여 줍니다. 산호색 김의 색상이 사라지는 것과 열린 손잡이가 채워지는 것입니다. 둘 다 진단에 복잡한 일러스트레이션이 필요하지 않습니다.
UI 키트 준비 안내는 세트의 일관성을 만드는 더 넓은 작업을 다룹니다. 여기서의 질문은 확인된 SVG 하나가 어떻게 SwiftUI의 Image에 도달하는지입니다.
눈으로 확인할 특징이 있는 작은 소스 준비하기
이 직접 만든 예제를 CupMark.svg로 저장하세요.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path d="M12 26H43V45Q43 54 34 54H21Q12 54 12 45Z"
fill="#147D73"/>
<path d="M43 30H48Q55 30 55 37Q55 44 48 44H43"
fill="none" stroke="#147D73" stroke-width="5"/>
<path d="M24 19Q18 14 25 8M35 19Q29 14 36 8"
fill="none" stroke="#EB8067" stroke-width="4" stroke-linecap="round"/>
</svg>컵은 청록색이고 김 스트로크 두 개는 산호색이며 손잡이 안은 비어 있습니다. 이 세 속성을 검토 목록에 유지하세요. SVG에는 텍스트, 외부 이미지, 필터, 스크립트가 없어 카탈로그 실험을 위한 간결한 시작 파일이 됩니다.
자신의 아트워크는 가져오기 전에 소스를 살펴보세요. 빈 캔버스가 과도하면 뷰 치수가 맞아도 아이콘이 작아 보입니다. 흰 배경 사각형은 템플릿 실루엣의 일부가 됩니다. 포함된 사진은 주변 경로와 다른 콘텐츠로 남습니다. 포함된 래스터 확인은 이를 구분하는 데 도움이 됩니다.
편집 가능한 마스터는 앱 전달용 사본과 별도로 보관하세요. 아이콘에 글자가 있다면 마스터에서 원하는 글꼴이나 외곽선 전략을 정하세요. SVG 글꼴 변경 작업 흐름을 참고하세요. SwiftUI 텍스트 스타일 변경은 이미지 내부의 글자 확인을 대신하지 않습니다.
일반 이미지 세트로 추가하기
일반적으로 Assets.xcassets인 앱 에셋 카탈로그를 여세요. 새 이미지 세트를 추가하고 CupMark로 이름을 지정하세요. SVG를 알맞은 이미지 칸으로 드래그하세요. Apple의 에셋 카탈로그 안내는 세트 생성, 리소스 가져오기, Attributes 인스펙터를 통한 변형 제공을 설명합니다.
이 예제에는 이미지 세트를 사용하세요. 소스가 .svg로 끝난다는 이유만으로 심벌 이미지 작업 흐름을 선택하지 마세요.
가져온 후 카탈로그 미리보기와 빌드 진단을 확인하세요. 카탈로그가 이를 사용할 앱 타깃에 속하는지 확인하세요. 에셋 설정에 플랫폼이나 모양 변형이 있다면 미리보기가 모든 설정을 대표한다고 가정하지 말고 관련 설정에 원하는 이미지가 있는지 확인하세요.
CupMark는 아래에서 사용하는 이미지 리소스 이름입니다. 다운로드 URL이나 디자인 폴더의 원본 SVG 경로가 아닙니다. Apple의 Image 초기화 함수는 번들에서 이름으로 리소스를 찾으며 기본은 메인 번들입니다. 이미지가 다른 리소스 번들에 속한다면 그 번들을 명시적으로 제공하세요.
전달 메모에서 파일 이름과 에셋 이름을 구분하세요. 팀원이 원본 디자인 파일 이름을 바꾸지 않고 에셋 세트 이름을 바꿀 수 있으며 코드는 실제 불러오는 리소스 이름을 따라야 합니다.
원본과 템플릿 렌더링 비교하기
CupMark 이미지 세트를 추가한 후 다음 뷰를 사용하세요.
import SwiftUI
struct CupComparison: View {
var body: some View {
HStack(spacing: 24) {
Image("CupMark")
.renderingMode(.original)
.resizable()
.scaledToFit()
.frame(width: 48, height: 48)
.accessibilityLabel("Cup with rising steam")
Image("CupMark")
.renderingMode(.template)
.resizable()
.scaledToFit()
.frame(width: 48, height: 48)
.foregroundStyle(Color.blue)
.accessibilityLabel("Cup with rising steam")
}
.padding()
}
}왼쪽 인스턴스는 원본 렌더링을 명시적으로 요청합니다. 오른쪽은 템플릿 렌더링을 요청하고 전경 스타일로 파란색을 제공합니다. Apple의 템플릿 렌더링 문서는 투명하지 않은 픽셀이 전경색을 취하는 것으로 템플릿 모드를 정의합니다. 이는 실루엣 처리이며 SVG 경로 하나만 색을 바꾸는 명령이 아닙니다.
컵의 경우 오른쪽 버전은 김과 컵 모두 파란색이어야 합니다. 산호색과 청록색의 구분은 의도적으로 사라집니다. 손잡이 구멍은 비어 있어야 합니다. 앱에서 김을 컵과 독립적으로 바꿔야 한다면 템플릿 이미지 하나가 경로별 스타일을 제공하기를 기대하지 말고 부분을 따로 노출하는 전달 구조를 선택하세요.
수정자는 크기 결정도 명시합니다. resizable()은 이미지 크기 조절 동작을 활성화하고 scaledToFit()은 48포인트 프레임 안에서 종횡비를 유지합니다. 뷰 프레임과 아트워크 캔버스는 별도 경계입니다. SVG 내부의 추가 여백은 여전히 소스의 일부입니다.
이는 프로젝트에서 시도할 문서 기반 예제이며 네이티브 렌더링 테스트 결과를 보고하는 것은 아닙니다. 아이콘을 사용할 최소 크기를 포함하여 실제 빌드된 앱을 확인하세요. 명확한 48포인트 미리보기가 16포인트에서도 두 김 스트로크가 유용하다는 것을 입증하지는 않습니다.
파일을 바꾸기 전에 눈에 보이는 결과 진단하기
이미지 누락, 색상 변경, 좋지 않은 작은 크기의 실루엣에는 서로 다른 해결책이 필요합니다.
| 증상 | 첫 확인 | 유용한 다음 작업 |
|---|---|---|
| 이미지가 나타나지 않음 | 리소스 이름, 번들, 타깃, 카탈로그 빌드 진단 | 경로 편집 전에 검색이나 가져오기 해결 |
| 모든 부분이 한 색이 됨 | 원본과 템플릿 렌더링 | 고정된 여러 색상 아트워크에는 원본 사용 |
| 색조가 큰 사각형을 채움 | 소스의 불투명 배경 | 마스터에서 의도하지 않은 배경 도형 제거 |
| 아이콘이 너무 작아 보임 | SVG 캔버스 내부의 빈 영역 | 캔버스를 고친 뒤 다시 내보내기 |
| 김이나 좁은 구멍이 불명확함 | 최종 표시 크기와 소스 세부 요소 | 의도적으로 단순화하고 작은 버전 검토 |
| 디자인 편집기와 기능이 다르게 보임 | 특정 SVG 기능과 가져오기 진단 | 단순한 전달용 사본 테스트 또는 다른 지원 형식 선택 |
한 번에 한 단계씩 바꾸세요. 소스에 올바른 구멍이 이미 있다면 다시 추적해도 에셋 이름 오타는 고쳐지지 않습니다. 검색은 작동하지만 템플릿 모드가 색상 구분을 없앤다면 SVG에 색상을 추가해도 선택한 렌더링 모드는 바뀌지 않습니다.
보이는 텍스트 옆의 아이콘은 컨트롤 전체 맥락에서 접근성 이름을 검토하세요. 예제는 각 비교 이미지에 설명을 제공합니다. 이름이 이미 있는 컨트롤 옆의 장식용 반복에는 다른 접근성 처리가 필요할 수 있습니다. 비교 뷰의 라벨을 모든 배치에 기계적으로 적용하지 마세요.
런타임 SVG와 SF Symbols를 별도의 결정으로 유지하기
이름 있는 카탈로그 이미지는 임의의 SVG XML을 가져와 파싱하는 API가 아닙니다. 파일이 앱 빌드 후에 들어온다면 그 입력을 명시적으로 처리하는 렌더러를 선택하세요. 예를 들어 SVGView 프로젝트 README는 SwiftUI로 작성한 SVG 파서와 렌더러를 설명합니다. 파일이 실제로 사용하는 SVG 기능을 평가하세요. 패키지의 폭넓은 지원 목표가 전체 입력 세트의 올바른 렌더링 증거는 아닙니다.
로딩, 실패, 지원하지 않는 파일 동작을 런타임 기능의 일부로 유지하세요. 필요한 것이 이미 에셋 카탈로그 방식으로 처리되는 정적 이미지라면, 오래된 답변에서 SwiftUI가 SVG 이미지를 사용할 수 없다고 했다는 이유만으로 패키지를 추가하지 마세요.
사용자 지정 SF Symbols에는 다른 소스 계약이 있습니다. Apple은 심벌 변형과 정렬 정보를 포함한 템플릿 기반 생성 및 검증 작업 흐름을 설명합니다. 일반 컵 SVG를 이미지 세트에 넣는다고 이 속성이 생기지는 않습니다. 앱에 심벌 동작이 필요할 때 그 작업 흐름을 사용하고 필요한 템플릿 구조를 유지하세요.
플랫폼 전달 형식은 독립적으로 확인할 가치가 있습니다. 같은 아트워크를 Android에도 보낸다면 VectorDrawable 전달 안내를 따르세요. 한 플랫폼의 가져오기 도구가 받아들였다고 다른 플랫폼도 받는다는 뜻은 아닙니다.
아이콘이 PNG로만 있는 경우
편집 가능한 소스가 없고 PNG가 단순한 아이콘이라면 PerfectVector의 PNG에서 SVG로 변환 도구로 이 작업 흐름을 위한 아트워크 후보를 준비할 수 있습니다. 아이콘 부분을 자르고 미리보기에서 사라진 구멍, 합쳐진 세부 요소, 원치 않는 배경 도형을 살펴본 뒤 원본과 비교하세요. 채택한 SVG를 다운로드하고 같은 이미지 세트 및 렌더링 모드 확인으로 테스트하세요.
원본 벡터가 있다면 사용하세요. 사진이나 효과가 많은 이미지는 래스터가 모양을 더 잘 보존한다면 그대로 유지하세요. 벡터화는 도형을 준비하며 Xcode 카탈로그를 컴파일하거나 리소스 번들을 선택하거나 필요한 변형이 있는 SF Symbols 템플릿을 만들지 않습니다.
에셋 전달 전에 카탈로그 이름, 원하는 원본 또는 템플릿 동작, 시각적 최소 크기, 재생성에 사용하는 소스 파일을 기록하세요. 앱에서 밝은 배경과 어두운 배경 및 지원되는 모양 변형을 테스트하세요. 블로그의 아트워크 안내는 전달 단계 전에 필요한 소스 준비를 다룹니다.
FAQ
SwiftUI가 에셋 카탈로그의 SVG를 사용할 수 있나요? 네. Xcode는 SVG 이미지 에셋을 지원합니다. 파일을 일반 이미지 세트에 추가하고 Image로 이름 있는 리소스를 불러오세요. 이를 임의 런타임 SVG 파일 지원으로 취급하지 말고 배포 대상과 실제 카탈로그 빌드를 검증하세요.
SVG가 한 색이 된 이유는 무엇인가요? 렌더링 모드를 확인하세요. 템플릿 렌더링은 보이는 이미지를 전경색 실루엣으로 사용합니다. 아트워크의 원래 색상 구분이 필요하다면 원본 렌더링을 사용하세요.
Image가 웹 URL에서 SVG를 불러올 수 있나요? 이름을 받는 Image 초기화 함수는 리소스 검색이며 URL 기반 SVG 파서가 아닙니다. 런타임 SVG 파일에는 실제 입력으로 검증하는 적절한 렌더링 및 로딩 작업 흐름이 필요합니다.
SVG 이미지 세트는 사용자 지정 SF Symbol과 같은 것인가요? 아닙니다. 사용자 지정 심벌은 필요한 구조, 변형, 정렬 정보, 검증을 갖춘 템플릿을 사용합니다. 일반 SVG 이미지 세트가 그런 심벌 속성을 자동으로 제공하지는 않습니다.
Sources
- Apple — Xcode 12 릴리스 노트 — SVG 이미지 에셋 지원과 문서화된 벡터 보존 배포 대상.
- Apple — 에셋 카탈로그로 에셋 관리하기 — 에셋 세트, 가져오기 칸, 변형.
- Apple — Image init(_:bundle:) — 이름 있는 리소스와 번들 검색.
- Apple — Image.TemplateRenderingMode — 원본과 템플릿 렌더링 모드.
- Apple — resizable(capInsets:resizingMode:) — 명시적인 이미지 크기 조절 동작.
- Apple — scaledToFit() — 종횡비를 유지하며 맞추기.
- Apple — 앱용 사용자 지정 심벌 이미지 만들기 — 사용자 지정 심벌 템플릿, 변형, 검증.
- Exyte — SVGView — SwiftUI용 별도 SVG 파싱 및 렌더링 솔루션.
세트를 가져오기 전에 아이콘 하나를 원하는 크기와 색상 모드로 확인하세요. PNG만 남았다면 SVG 후보 파일을 준비하고 구멍과 배경을 살펴본 뒤 빌드된 앱에서 채택한 파일을 검증하세요.
