1) 배경
- 과거 Xcode는 벡터 에셋을 사실상 PDF 중심으로 운용했고, SVG는 지원이 제한적이었습니다. 이 관성이 남아 많은 팀에서 “SVG 금지, PDF 사용” 규칙이 굳어졌습니다.
- 현재는 SVG도 추가 가능하지만, 스펙 전체가 아니라 서브셋만 안정적으로 동작합니다. 복잡한 효과가 들어간 SVG는 렌더링 차이, 누락, 색 왜곡 등의 리스크가 있습니다.
2) PDF vs SVG — 선택 기준
| 기준 | PDF(권장) | SVG(조건부 허용) |
|---|---|---|
| 호환성/안정성 | 매우 높음 | 복잡도에 따라 이슈 |
| 표현 일관성 | 기기/OS 간 일관적 | OS/기기/다크모드별 차이 가능 |
| 디자인 파이프라인 | 변환/검증 표준화 쉬움 | 원본 보존·다중 플랫폼 공유 유리 |
| 틴트/템플릿 | 안정적 | 일부 에셋에서 레이어/색 문제 |
| 복잡 효과(필터/마스크 등) | 사전 평탄화 후 안전 | 서브셋 밖이면 실패 가능 |
| 앱 아이콘 | 전용 아이콘 세트 필요(벡터 불가) | 사용 불가 |
권장 전략
1. 기본은 벡터 PDF 사용.
2. 단순 아이콘/일러스트(단색/경로 위주)는 사전 검증 후 SVG 허용.
3. 문제가 있는 SVG는 디자인 툴에서 평탄화/윤곽선화 후 재수출, 그래도 이슈면 PDF 전환.
3) SVG가 깨지는 대표 원인과 예방
- 미지원 기능:
filter,mask,clipPath,pattern, 외부 CSS, 복합 gradient/transform, 폰트 임베딩 등
→ Flatten/Expand, 텍스트 윤곽선(Outline) 처리, 외부 스타일 제거 - 색상/레이어 문제: 블렌드 모드/그룹/투명도 조합
→ 레이어 병합/평탄화, 단순 path 위주로 정리 - 선(Stroke) 이슈: 정렬/두께/대각선에서 깜빡임
→ Stroke를 Fill 경로로 변환, 정수 좌표 스냅 - OS/디바이스별 차이: 빌드 타임 래스터화, 렌더러 차이
→ 시뮬레이터+실기기 교차 검증(@1x~@3x, 라이트/다크)
4) 디자인 전달 체크리스트(SVG 사용 전)
- 텍스트 → Outline(윤곽선) 변환(폰트 의존성 제거)
- 외부 CSS/스타일 제거(인라인/단순 스타일로)
- filter/mask/clipPath/pattern 미사용 또는 Flatten 결과물로 대체
- stroke → fill 변환(두께/정렬 이슈 회피)
- 불필요한 그룹/트랜스폼 제거(좌표 평탄화)
- 라이트/다크 모드, @1x~@3x에서 실기기 표현 확인
5) Asset Catalog 설정 팁(PDF/SVG 공통)
Assets.xcassets에 에셋 드래그- Scales = Single Scale(벡터 유지)
- Render As
- 단색 아이콘 → Template Image(틴트 적용)
- 원본 색 유지 → Original Image
- 다크 모드 대응 → Appearances: Any, Dark 변형 제공
- 아이콘/심볼 간격/정렬 → 캔버스 기준 Baseline/Inset 일관성 유지
6) 트러블슈팅
- SVG가 흐리게 보임/계단 현상 → 빌드 타임 래스터화 여부 확인, 크기/좌표 정수 스냅, PDF 대체 검토
- 색이 다르게 보임 → 투명도/블렌드 확인, 레이어 병합 후 재수출
- 일부 요소가 사라짐 → 미지원 기능 제거 후 Flatten, 가능하면 PDF 변환
- 다크 모드에서 반전/부자연 → Appearances 분기 제공, Template 사용 시 틴트 맵핑 확인
7) 팀 컨벤션 제안(실무용)
- Default: PDF, Exception: SVG(체크리스트 통과 + 실기기 스크린샷 첨부)
- 디자인 전달물은 SVG와 PDF 동시 제공 요청(문제 시 즉시 대체)
- PR 템플릿에 “새 SVG 에셋 체크리스트 통과/실기기 확인” 항목 추가
- 공용 아이콘은 SF Symbols 우선 검토(적용 가능 시 심볼 사용)
8) FAQ
Q1. 이제 SVG만 써도 되나요?
A1. 단순 에셋은 가능하지만, 복잡 SVG는 리스크가 큽니다. PDF 우선을 유지하세요.
Q2. 벡터 PDF면 1x만 넣으면 되나요?
A2. 네. Single Scale로 충분하며 시스템이 스케일링합니다.
Q3. 앱 아이콘에 벡터를 쓸 수 있나요?
A3. 아니요. 앱 아이콘은 전용 래스터 규격을 따릅니다.
Q4. SF Symbols와 일반 SVG 차이?
A4. SF Symbols는 전용 스펙이며 일반 SVG와 1:1 호환이 아닙니다.
결론
- Xcode는 SVG를 지원하지만, 지원 서브셋과 표현 일관성의 한계로 PDF가 더 안전합니다.
- 팀 차원에서 “기본 PDF, 단순 SVG는 검증 후 허용” 규칙으로 운영하는 것이 유지보수/품질/속도 측면에서 유리합니다.
iOS Dev