Figma 오토 레이아웃으로 UI는 빨라지지만, PNG 일괄 수출은 가장자리 번짐·서브픽셀 틈·srcset 불일치가 남습니다. 디자이너·프론트엔드 에셋용 2026 납품 매트릭스로 수출 설정, 서브픽셀 리스크, 정수 @1x/@2x/@3x, 원격 Mac mini M4에서의 일괄 검수를 한 번에 정리합니다.
인수 규칙은 Sketch/Figma PNG 체크리스트, Affinity·Sketch·Figma 파라미터 워크플로, OpenClaw 자동 명명·검증과 연계하세요. 색은 sRGB/P3·ICC·재압축 글을 참고합니다.
고통점과 시나리오
오토 레이아웃은 분수 간격을 쓰고, 래스터화 시 도구마다 반올림이 달라집니다.
- 흐릿한 아이콘: 24×24pt인데 프레임이 23.7px면 1× 수출에서 글리프가 번짐.
- 슬라이스 틈: 인접 프레임이 1px 미만으로 어긋나 타일·스프라이트에서 줄이 깜빡임.
- @2x 불일치: 1×만 또는 1.5× 커스텀은
srcset매핑이 꼬임. - 색 편차: sRGB ICC 없으면 브라우저·Figma 미리보기가 엇갈림.
배치 납품에선 한 프레임 오류가 감시 폴더·매니페스트까지 전염됩니다. 원격 Mac에서 Figma 빌드·디스플레이를 동결하고 수출 폴더 워터마크·아카이브와 맞추면 분산이 줄어듭니다.
PNG 수출 파라미터 표
UI PNG 슬라이스의 팀 SSOT입니다. 풀블리드 등 예외는 README에만 허용합니다.
| 항목 | 권장 | 이유(디자인·프론트) |
|---|---|---|
| 수출 형식 | PNG(투명) | UI 알파 무손실, JPEG 테두리 회피. |
| 프레임 경계 @1× | 가로·세로 정수 픽셀 | 서브픽셀 드리프트 제거, background-size 단순화. |
| 레이아웃 그리드 | 1px 그리드+스냅, 8pt 리듬 | 패딩·마진이 픽셀 경계에 안착. |
| 서브픽셀 좌표 | 금지 권장, 인스펙터에서 정수화 | 분수 X/Y는 @2x/@3x에서 누적. |
| 수출 배율 | 1×, 2×, 3×만 | @1x/@2x/@3x·srcset와 무반올림 대응. |
| 커스텀 % 배율 | 기본 끔, 승인 시만 | 비정수 크기로 배치 검증 실패. |
| 슬라이스 단위 | 컴포넌트/프레임당 1파일 | diff·CI 회귀에 유리. |
| 색 | 문서 sRGB, ICC 삽입 | 웹 기본 정렬, 아래 체크리스트. |
@1x/@2x/@3x: 논리 1×(pt) 설계, 픽셀은 round(프레임×배율), 배율 ∈ {1,2,3}. 100×40pt → 100×40·200×80·300×120px(199×79 금지).
sRGB·ICC 검수(빠른 체크리스트)
- 웹/Android 주 경로: 문서 sRGB.
- Mac에서
sips -g profile·exiftool 샘플; 규정 시 무ICC 배치 반려. - P3 마케팅 에셋은 폴더 분리, UI PNG와 비혼합.
일괄 검증 플로우(원격 M4)
원격 Mac mini M4에서 실행해 노트북을 비우고 도구 버전을 통일합니다.
- 동결: Figma 빌드·폰트·디스플레이 프로파일을 README에 기록.
- 치수: 배율별
pixel = pt × scale검증, 이상 시 제약·분수 좌표 수정. - 짝수 변(선택): 풀블리드 배경은 짝수 WxH 요구 가능.
- 알파 샘플: ~5%를 400% 확대, 단색면 반투명 후광 없는지 확인.
- ICC: 아이콘은 10%~전량 스캔, 기준은 브랜드 정책.
- Manifest:
파일→sha256→WxHJSON, 실패만 재수출. - 아카이브: 날짜 tar, OpenClaw는 감시·재시도·로그와 정렬.
sips·PNG QA를 병렬 실행하세요.
크로스 도구 일관성
Sketch·Affinity와 (1) pt 1× 그리드 (2) 동일 배율 집합 (3) 공통 명명([email protected]) (4) sRGB를 맞추면 Xcode·Android·웹 간 조용한 리스케일이 줄어듭니다. 투명도는 Figma vs Sketch로 대조하세요.
FAQ
Figma가 더 선명해 보여요. 캔버스와 브라우저 보간이 다릅니다. 수출본을 미리보기 100%로 재고, 브라우저는 1× 논리 너비로 비교하세요.
간격은 소수여도 되나요? 스펙은 가능하지만 수출 프레임 경계는 정수 픽셀을 유지하세요.
Outline stroke? 벡터엔 도움될 수 있으나 라이브 정렬 의존 시 깨질 수 있어 샘플 1건 선검증.
압축 시점? QA 후 무손실(oxipng 등)만, 바이트 로그. ImageOptim vs CLI 참고.