탭·iOS 홈·PWA 설치까지 PNG 사다리가 한 브리프에 묶입니다. Mac 운영용 2026 매트릭스: 슬롯별 크기·maskable 80% 안전 원·sRGB·용량·unsharp 게이트를 원격 M4에서 JSONL로 재현합니다.
왜 아이콘 PNG는 브리프 하나에 제품이 셋인가
- 기하: 탭·
180×180·192/512는 크롭 규칙이 달라 한 마스터 동시 만족이 어렵습니다. - maskable: 스쿼클이 가장자리를 잘라 로고가 붙으면 실패합니다.
- 색: 비태그 PNG는 sRGB 셸에서 표류—
sips전 ICC 정책을 고정합니다. - 대량: 해시·
stat상한은 워커에 둡니다.
색·포맷·다른 안전 영역: sRGB·P3·WebP·AVIF vs PNG·소셜 배너·iOS 아이콘·ICNS.
슬롯 매트릭스: favicon·터치 아이콘·매니페스트·maskable
| 납품 슬롯 | 대표 PNG WxH | 주요 리스크 | 핸드오프 규칙 |
|---|---|---|---|
| 탭 favicon | 32×32(16 선택) |
축소 번짐 | 벡터형만 약한 unsharp |
apple-touch-icon |
180×180 |
iOS 모서리 크롭 | 패딩 ≥10%(헤어라인 14%) |
Manifest icons[] |
192·512 |
purpose 누락 |
any+별도 512 maskable |
| Maskable | 512×512 |
스쿼클 클리핑 | 중앙 원 ∅80%·외곽 블리드 |
고정 macOS 단계: sips·magick·매니페스트
ImageMagick 빌드 고정·sips --version JSONL. ICC 경로는 조직 표준에 맞춥니다.
1단계 — 정사각 마스터를 sRGB로 정규화
sips --matchTo "/System/Library/ColorSync/Profiles/sRGB Profile.icc" master.png --out master_srgb.png정적 PNG의 ICC 규칙과 맞추고, 태그를 제거해야 하면 색 일치 후 ICC 무손실 재압축 가이드의 스트립 레시피를 사용합니다.
2단계 — sips로 결정적 크기 출력
sips -z 32 32 master_srgb.png --out favicon-32.png
sips -z 180 180 master_srgb.png --out apple-touch-icon-180.png
sips -z 192 192 master_srgb.png --out pwa-192.png
sips -z 512 512 master_srgb.png --out pwa-512-any.png16×16은 .ico 번들용으로만 추가.
3단계 — favicon 선택적 unsharp
magick favicon-32.png -colorspace sRGB -filter Lanczos -resize 32x32! -unsharp 0x0.45+0.45+0.006 favicon-32-sharp.pnghalo 방지·512 maskable에는 샤프 생략.
4단계 — maskable
핵심을 변의 80% 지름 원 안에. 크롬 DevTools → Application → Manifest로 증빙.
5단계 — 해시·링크 정합
shasum -a 256 pwa-512-any.png >> icons-manifest.sha256
test "$(stat -f%z pwa-192.png)" -le 55000 && echo "192 OK"rel="icon"·터치·manifest와 해시·파일명 일치(캐시 버스트).
원격 M4 검수 체크리스트
- 기하: WxH 스펙 일치·짝수 정사각이면 홀수 거절.
- sRGB:
magick identify -verbose로Colorspace: sRGB·ICC 합의 확인. - 바이트(시작값·CDN에서 조정):
32≤12KB·180≤45KB·192≤55KB·512 any≤180KB·512 maskable≤220KB. - unsharp: 삼항을 JSONL에 기록.
- 스모크: 스테이징에서 안드로이드 크롬·iOS 사파리 “홈 화면에 추가” 캡처 보관.
정책 한 줄
- Maskable: 중앙 원 지름
0.8×min(W,H)·외곽=블리드. - 터치 패딩: 기본
≥10%·헤어라인은14%검토. - 셸 게이트:
test "$(stat -f%z pwa-192.png)" -le 55000.
SVG favicon을 쓰더라도 PWA 설치와 SVG를 막는 구형 인트라넷을 위해 PNG 사다리를 병행하는 경우가 많습니다.
FAQ
512 겸용? maskable 패딩이 이미 충분할 때만—아니면 manifest에 행 분리.
터치가 더 어둡게? sRGB matchTo 재실행·수출 감마 vs Safari 대조.
다음 단계: 원격 M4 배치
리브랜딩 후 원격 Mac mini M4에서 sips·magick·stat를 동일 툴체인으로 돌리세요. 홈·구매·대여·요금·패키지·도움말·기술 인사이트(공개 블로그).