디자이너·프론트 에셋 담당은 Figma Dev Mode로 간격을 빠르게 공유하지만, 납품 주석 슬라이스 PNG는 정수 프레임·@1x–@3x 정수 배율·단일 sRGB·일관된 파일명을 지켜야 합니다. 2026 매트릭스로 Dev Mode의 맹점과 원격 M4 일괄 검수를 한 흐름에 묶었습니다.
재작업은 대개 세 가지입니다: 슬라이스 내 소수 레이아웃(2×·3×에서 흐림·1px 어긋남), 미리보기≠디스크 PNG(스케일 차), ICC 미정의(ZIP·윈도 검수까지 색 표류). 정렬·그리드는 Figma 오토 레이아웃 PNG 픽셀 정렬, 색은 sRGB·P3 체크리스트와 용어를 맞추세요.
수출 파라미터 표
Dev Mode는 검수를 돕지만 수출 프리셋이 계약입니다. README에 표를 붙여 Export 전에 고정하세요.
| 파라미터 | 권장(웹·앱 UI) | 비고 |
|---|---|---|
| 포맷 | PNG(8비트 RGBA) | UI 크롬·투명이면 JPEG 비권장. |
| 배율 | 1×, 2×, 3×만 | 임의 %는 srcset·CI와 충돌. |
| 프레임 경계 | 1× 기준 X,Y,폭,높이 정수 | 소수 원점은 고배율에서 누적 오차. |
| 색 | 단일 sRGB 정책(ICC 임베드 또는 프로필 없음+문서화) | 플러그인 이중 프로파일 금지. |
| 배경 | 스펙대로 투명 또는 단색 | 배경 포함 시 알파 QA 붕괴. |
| 슬라이스 이름 | Component_state@2x.png 등 토큰과 정렬 |
레이어=파일명, 엄격 번들러는 공백 금지. |
README 규칙: 논리 폭(pt)=1× px 폭; s∈{1,2,3}에서 기대 round(프레임_w×s) 오차 0px; 투명 슬라이스는 알파 필수.
일괄 검수 체크리스트
무거운 검사는 원격 Mac mini M4에서—sips·magick identify·짧은 파이썬으로 수백 장 처리. 도구 간 표 비교는 Affinity·Sketch·Figma 일괄 PNG 파라미터와 맞추세요.
- 매니페스트 일치: 수출 파일 수가 슬라이스 목록과 같고, 배율별 중복·누락이 없어야 합니다.
- 기하 게이트: 각 PNG 가로·세로가 논리 프레임 픽셀×스케일과 ±0 px로 일치하는지 검증합니다.
- 알파 프로브: 투명 스펙이면 400%·히스토그램으로 헤일로 점검.
- sRGB 게이트: magick·exiftool로 ICC 샘플을 README와 대조, 예외 폴더 없으면 첫 드리프트는 실패.
- 명명 린트: 접두, 상태 접미,
@2x토큰, 금지 문자를 셸 스크립트로 강제합니다. - 바이트 상한(선택): SKU별
max_bytes, 압축 시 도구 버전을 매니페스트에 기재. - 감사 로그: sha256·버전·pass/fail을 JSONL에 남기고 통과분만
out/.
감시·에이전트는 팀 런북과 동일 JSONL 필드를 쓰면 grep으로 추적 쉬움. 스크립트 녹색=래스터 계약 합의로 스샷 논쟁을 끊습니다.
자주 묻는 질문(FAQ)
Q. Dev Mode 픽셀이 프로덕션과 동일한가요?
근사일 뿐입니다. PNG는 중립 뷰어 100%·타깃 브라우저(논리 CSS 크기)로 판정하세요.
Q. Dev Mode CSS를 그대로 코드에?
힌트만. 그리드에 맞춰 반올림—소수 값 그대로는 1px 오차 재발.
Q. 주석 오버레이가 감시 파이프를 망가뜨리나요?
슬라이스엔 보통 제외. 전체 캡처 ZIP은 주석이 섞일 수 있어 입력을 슬라이스 폴더로 한정하세요.
다음 단계
기술 인사이트·홈·요금·도움말은 로그인 없이 열람 가능합니다.
수출·QA를 Apple Silicon 한 노드에 고정
프리셋 동결·M4 배치 게이트로 엔지니어링 1-pass PNG.