대상: 상세 롱 이미지를 PNG 슬라이스로 쌓아 올리는 디자이너·운영. 슬라이스 높이·명명·용량·지연 로딩 CLS 없이 검수하려는 경우입니다. 원격 Mac에 배치·로그를 두면 프리셋이 고정됩니다.
구성: 매트릭스·대조표·PNG-24·인덱스·M4 로그·FAQ·실행 단계. 링크: 화이트 QC·PNG-8·CLI.
목차
롱 이미지 시나리오와 성능 리스크
거대 단일 PNG는 디코딩·LCP에 불리합니다. 슬라이스는 지연 로딩에 유리하나 잘못된 컷·높이는 이음·CLS를 만듭니다. 프리셋 없는 덤프는 옵스 추적 불가입니다.
결정 매트릭스:
| 신호 | 통과 | 보류 |
|---|---|---|
| 디코딩 | 슬라이스당 약 2~4MP, 첫 페인트 전 2장 이하 | 한 장 6MP+ 또는 모바일 1.5MB+ 무손실 |
| UX | 모듈 경계에서 컷 | 가격·본문 가름 |
| 알파 | 필요 구간만·매트 문서 | 흰 패널 실수 알파 |
| 추적 | 매니페스트에 SKU·인덱스·프리셋 | 버전 없는 덤프 |
슬라이스 높이와 브레이크포인트 대조표
높이는 요청·바이트·무결성 타협입니다. 뷰 높이 1.2~2.0배 출발, 모듈 틈으로 컷.
| CSS 너비 | @2x 너비 | 높이(px) | 메모 |
|---|---|---|---|
| 375 | 750 | 1400~2000 | LCP 분리 시 더 짧게 |
| 390 | 780 | 1500~2100 | 노치 세이프 |
| 428+ | 856+ | 1600~2400 | 바이트 통과 시 가늠 |
| 데스크톱 | 1200~1600 | 별 매니페스트 | 늘리기 금지 |
바이트 예산 합의(예: 무손실 후 400KB 경고·800KB 불합격).
PNG-24 대 인덱스 색 역치
플랫·사진 혼합은 표로 고정합니다.
| 특성 | 모드 | 게이트 |
|---|---|---|
| 그라데이션·부드러운 그림자 | PNG-24+α | 100% 밴딩 없음 |
| 플랫·≤6색·딱딱한 경계 | 인덱스 ≤256 | pngquant 고정 |
| 질감 위 텍스트 | PNG-24 | sRGB 선명도 |
| 장식 행 | WebP·AVIF 검토 | 매니페스트 코덱 기록 |
원격 Mac 배치 디렉터리 구조와 로그
원격 M4는 캠페인별 트리 격리로 재실행이 쉽습니다.
~/batch/pdp-long/{id}/{preset}/아래in/·slice/·opt/·quarantine/logs/run-*.jsonl— 경로·바이트·도구·합격
검수: 매니페스트 일치·장변≤4096·ICC 동일·실패 티켓·이음 샘플.
출시 전 지연 로딩·플레이스홀더 검수 FAQ
플레이스홀더?
실제 너비·높이 예약·LQIP·스켈레톤. 썸네일 늘리기 금지. LCP 구간은 즉시 로드.
모바일 높이?
표 기준 1.2~2.0× 뷰포트, 모듈 사이 컷. 분석 단말 반영.
PNG-24 vs 인덱스?
그라데이션·알파는 24. 인덱스는 밴딩 통과 행만.
원격 M4 이유?
프리셋 고정·병렬·JSONL 감사.
실행 단계: 수출 파라미터·슬라이스 명명·최대 변 픽셀·투명 가장자리
- sRGB 임베드·8비트·인터레이스 끔·너비=스토어 마스터·높이=가이드(짝수 권장).
- 전체 무손실 최적화 후 매니페스트 표시 행만 pngquant.
- 명명
{tenant}_{sku}_{idx3}_w{width}_h{height}_{kind}_srgb_v{preset}.png—kind는 hero·spec·story·legal. - 장변 ≤4096px 매니페스트 검증, 고해상 마스터는 웹용 다운스케일.
- 그림자 중앙 컷 금지·알파 인접 시 1px 오버랩·플로팅 제품은 단일 슬라이스 우선·라이트·다크 테마 스팟.
인용값: 4096px 상한 · 높이 1400~2400px(폭별) · 400KB 경고·800KB 불합격 예시 · 첫 페인트 전 슬라이스 2장 이하.
로그인 없이 열람
롱 상세 PNG 슬라이스 수출·최적화는 원격 Mac M4에 맡기기
Mac mini M4로 sRGB·JSONL 배치를 고정하세요. 패키지·요금·도움말·블로그는 로그인 없이 열 수 있습니다.