2026년 디자인 납품은 PNG 마스터 일괄 수출에 WebP·AVIF를 더하는 혼용이 일반적입니다. 파라미터표와 인계 절차가 없으면 소재 일관성이 무너져 색 프로필·알파·브라우저별 차이가 납니다. 여기서는 색 공간·sRGB·투명도·용량 임계값 비교표, 권장 수출 설정, Mac·원격 M4용 HowTo, 디자인→프론트 검수 체크리스트를 한 번에 정리합니다.
① WebP·AVIF·PNG를 혼용하는 이유
PNG는 알파가 있는 마스터로, WebP·AVIF는 용량 절감용 파생에 적합합니다. PNG(또는 벡터)를 원본으로 고정하고 스크립트로 파생하면 소재 일관성과 재현 가능한 일괄 수출이 맞습니다. 도구별 PNG 프리셋은 Affinity·Sketch·Figma 일괄 PNG 파라미터, 협업 맥락은 PNG·WebP 협업 글을 보세요.
② 포맷 비교: 색 공간·sRGB·투명도·용량 임계값
엔지니어링과 합의할 기준표입니다. 임계값은 팀·제품별로 조정하고 README에 예외를 남깁니다.
| 비교 항목 | PNG(마스터) | WebP(파생) | AVIF(파생) |
|---|---|---|---|
| 색 공간 | sRGB 8bit 권장; 16bit 웹 납품은 합의 후 | 8bit sRGB 중심; 특이 ICC는 검증 후 | BT.709/sRGB 계열; HDR는 별도 검증 |
| sRGB 통제 | 명시적 sRGB 수출·P3→sRGB 변환 | 항상 동일 PNG에서 재인코딩 | 동일 마스터에서만 생성 |
| 투명도 | 풀 알파; 아이콘·UI·마스크에 적합 | 알파 지원; straight/premultiplied 정책 문서화 | 알파 지원; Safari 등 스팟 체크 |
| PNG 대비 용량(경험칙) | 기준 100%(참조) | 종종 PNG 대비 25~50%↓; 무손 WebP는 최적 PNG와 유사할 수 있음 | 사진은 WebP 대비 20~40%↓ 가능; 플랫 UI는 변동 |
| 파일 용량 임계값(생성 시점 가이드) | 마스터 항상 보관 | @2x PNG ~80–120KB↑ 또는 아이콘 ~30–50KB↑면 WebP | 히어로 등 WebP/PNG ~150–250KB↑면 AVIF 검토 |
| 폴백·호환 | 레거시·QA 기준 | <picture>+PNG |
WebP/PNG 폴백 |
PNG 압축은 ImageOptim vs CLI 참고; WebP·AVIF 품질 플래그도 스크립트에 고정하세요.
③ 권장 수출 파라미터(일괄 친화)
- PNG: sRGB 8bit·필요 시만 알파·배율은 한 장 스펙으로 동결.
- WebP: 승인 후
cwebp -q 75~85등; 픽셀 일치면 무손. - AVIF: 프리셋 고정 후 대표 2~3화면에서 PNG/WebP와 비교.
- 명명: 동일 stem(
hero@2x.*)으로 소재 일관성.
④ HowTo: Mac에서 일괄 수출 단계
- sRGB 고정 및 P3 자산 명시적 변환.
- PNG 마스터 일괄 수출 — 공유 프리셋·합의 경로(예:
dist/png). - WebP·AVIF —
find/Makefile 등; 인코더 버전 기록. - 알파 스팟 체크 — 미리보기·브라우저 밝은/어두운 배경.
- 파라미터표·매니페스트를 티켓/PR에 첨부.
4K 대량 수출은 원격 M4 4K PNG 가이드 참고.
⑤ 디자인→프론트엔드 납품 검수 체크리스트
- 스펙: sRGB·배율·포맷 규칙·인코더 요약 첨부.
- 해상도·투명도: 픽셀 일치·레티나 규칙 통일·알파 번짐·오염 없음.
- 용량·명명: 임계값 대비 이상치 사유·kebab-case·공백 금지·i18n 경로.
- 매니페스트: CSV/JSON(basename·포맷·크기·바이트·선택 체크섬).
- 브라우저·a11y: Chrome+Safari·
<picture>확인·장식/의미·alt. - 라이선스: 폰트·아이콘 웹 사용 허용.
PNG 위주 납품은 Sketch/Figma PNG 검증 체크리스트와 함께 쓰세요.
⑥ 원격 M4 일괄 검증 시 유의사항
원격 Mac mini M4에서 스크립트를 돌리면 로컬 절전·발열 이슈를 줄입니다. 병렬 인코딩은 메모리를 보고, 인코더 버전·입력 해시를 로그에 남기면 소재 일관성 추적이 쉽습니다. SSH/VNC 가이드는 로그인 없이 읽을 수 있습니다.
⑦ 요약
PNG 마스터 + 동결 파라미터의 WebP·AVIF가 2026년 디자인 납품의 실용 패턴입니다. 표로 색·sRGB·투명도·용량 기준을 맞추고, 체크리스트로 프론트 인계를 닫으세요. 대량 작업은 원격 M4에서 재현성을 높이면 됩니다.
⑧ 다음 단계
기술 인사이트·홈·관련 글(일괄 PNG, PNG·WebP 협업, PNG 압축). 전용 Mac이 필요하면 대여·요금을 로그인 없이 확인한 뒤 진행하세요.
WebP·AVIF·PNG 파이프라인을 원격 M4로 확장
원격 Mac mini M4에서 인코딩·매니페스트·브라우저 검증을 돌리면 디자인 납품과 소재 일관성이 재현하기 쉽습니다.