SVG는 스케일에 강하지만 실서비스에서는 PNG 묶음이 자주 필요합니다. 2026 납품에서 선명도는 「고 DPI」가 아니라 출력 픽셀 = 논리 픽셀 × 배율로 결정됩니다. 비교표로 sRGB·Display P3, @2x/@3x·DPI 메타데이터, 도구·CLI 요지, 원격 Mac M4 검수 체크리스트를 정리했습니다.
① 색 공간 의사결정 비교표
Mac PNG 색 관리·sRGB/P3 체크리스트와 같이 팀은 「마스터 색 공간」과 「배포 색 공간」을 문서로 고정해야 합니다. 아래는 SVG→PNG 래스터화 시 의사결정용 표입니다.
| 시나리오 | 권장 출력 색 | 마스터 권장 | 잘못 고를 때 리스크 |
|---|---|---|---|
| 웹·미니앱·대부분 운영 소재 | sRGB 8비트 PNG | P3 화면에서 작업해도 보내기 전 sRGB 변환 | ICC 태그만 바꾸고 변환 없음 → 타 기기 채도 이상·탁해 보임 |
| 브랜드 키비주얼·광색역이 필요한 기획 번들 | 별도 규약 Display P3 폴더 + 명세 | P3 마스터 SVG·디자인 파일 유지 | 기본 sRGB 패키지와 혼재 → 프론트가 잘못된 경로 참조 |
| iOS 슬라이스·앱 내 리소스 | 일반적으로 sRGB(팀 HIG 문서 준수) | iOS 아이콘·PNG 납품 매트릭스와 정렬 | @3x 누락·색역이 심사 자산과 불일치 |
| 인쇄용이 아닌 화면 프리뷰 PNG | sRGB 프리뷰 + 인쇄는 CMYK 전용 라인 | 300 DPI 프리뷰만을 단일 진실원으로 삼지 않기 | 화면 배율과 인쇄 스크린 혼동 |
② 논리 픽셀·배율·DPI 대응
기억할 핵심은 배율은 가로·세로 픽셀에 곱한다는 것입니다. 논리 너비 W·높이 H(pt 또는 CSS px)를 기준으로 한 예입니다. DPI 열은 메타데이터로 자주 쓰이는 관례(72/96 기준에서 @2x는 144/192 등)를 보여 주며, 검수의 기준은 항상 픽셀 치수입니다.
| 접미사·배율 | PNG 픽셀(가×세) | 흔한 DPI 메타데이터(관례) | 검수 한 줄 |
|---|---|---|---|
| 기준 @1x | W × H |
72 또는 96(도구 기본) | 표기된 논리 치수와 일치 |
| @2x | (W×2) × (H×2) |
144(72×2) 또는 192(96×2) | 가·세 모두 1x의 정수배 |
| @3x | (W×3) × (H×3) |
216 또는 288 | 동일 + 엔지니어링 명명 규칙과 일치 |
viewBox만 있을 때는 기준 너비를 먼저 합의한 뒤 배율별 PNG를 만드세요. 야간 대량 큐는 원격 Mac M4·4K PNG 일괄 수출처럼 「고정 버전 + manifest」가 재현성에 유리합니다.
③ 디자인 도구·일괄 스크립트 파라미터
Affinity·Sketch·Figma 일괄 PNG와 같이 쓸 때도 보내기 픽셀 = 논리×배율, 색은 기본 sRGB입니다.
| 방식 | 파라미터 요지 | 적합한 경우 |
|---|---|---|
| Figma·Sketch | PNG + 2x·3x 또는 사용자 정의 「w×배율」; 색 구성은 sRGB | 컴포넌트 UI·원고와 효과 일치가 중요할 때 |
| Affinity Designer·Photo | SVG 열기 → 픽셀 단위로 치수 고정 → sRGB 프로파일로 변환 후 일괄 | 복잡한 그라데이션·인쇄 원고와 동일 출처 |
| Adobe Illustrator | 에셋 보내기·스크립트: 픽셀 단위 w/h; sRGB 구성에 맞춤 | 다수 아트보드·액션·스크립트 성숙 팀 |
| Inkscape CLI | inkscape file.svg --export-type=png --export-width=<W×scale>(또는 높이 한쪽 고정으로 왜곡 방지) |
헤드리스 배치·빌드 파이프라인 |
| rsvg-convert(librsvg) | rsvg-convert -w $((W*scale)) -o out.png in.svg; 버전·폰트 고정 |
경량·CI·launchd에 넣기 쉬움 |
PDF 래스터화와 비교할 때는 PDF→PNG DPI·색 체크리스트를 함께 보세요. 공통 원칙은 먼저 픽셀을 정하고 DPI를 논한다는 것입니다.
④ 원격 Mac M4 배치 검수 체크리스트
macOS·폰트·CLI 버전을 고정한 뒤 티켓 부속으로 출력해 쓰세요.
| 검사 항목 | 수행 방법 | 합격 기준 |
|---|---|---|
| 픽셀 계약 | 스크립트 또는 sips -g pixelWidth -g pixelHeight 표본 |
「논리 W/H × 해당 배율」과 일치(문서에 ±0 명시) |
| 배율 명명 | @2x @3x 또는 디렉터리 규약 대조 |
프론트 srcset·Xcode 리소스 규칙과 동일 |
| 투명·가장자리 | #FFF / #0B0B0B 배경에서 미리보기 | 의도치 않은 색 번짐·반투명 잡색 없음 |
| 색 의도 | ICC 포함·제거 표본 | README-color와 일치; sRGB 패키지에 「가짜 P3」 태그 없음 |
| 재현성 | 동일 버전의 다른 원격 머신에서 동일 입력 재실행 | 픽셀 일치 또는 문서화된 허용차(예: 안티앨리어싱) |
| 실패 재실행 | manifest에 실패 경로 기록 | 단일 파일만 재시도·전체 재처리 불필요 |
⑤ FAQ
구조화된 Q&A는 상단 FAQPage JSON-LD를 참고하세요. 본문 요약:
Q: DPI만 300으로 올리면 더 선명해지나요?
A: 픽셀이 그대로면 많은 웹 시나리오에서 체감이 없습니다. 늘려야 할 것은 가로·세로 픽셀입니다.
Q: SVG에 시스템 폰트를 썼더니 원격 배치에서 깨집니다.
A: 래스터 전에 텍스트를 윤곽선화하거나 원격 Mac에 동일 글꼴 패밀리를 설치해 줄바꿈·자간이 어긋나지 않게 하세요.
Q: @2x와 @3x를 같은 스케일 스크립트로 돌려도 되나요?
A: scale=2, 3으로 루프하면 됩니다. @3x를 다시 축소해 @2x로 속이지 마세요 — 부드러워집니다.
요약·다음 단계
2026 납품: 논리×배율로 픽셀 고정, 배포는 기본 sRGB·P3는 분리 패키지, 원격 Mac에서 체인 고정 후 표로 검수합니다. 기술 인사이트에서 이어 읽고, 홈·패키지·구매·도움말(로그인 불필요)·가격을 참고하세요.
원격 Mac 「디자인 시나리오」 패키지
SVG→@2x/@3x PNG를 원격 Mac M4에서 돌리면 로컬 방해와 버전 드리프트를 줄입니다. 아래 링크는 로그인 없이 열 수 있습니다.