PNG 색 관리는 목업과 실제가 엇갈리는 대표 지점입니다. Display P3와 sRGB 화면에서 같은 PNG가 다르게 보여도 디자인 납품 검수는 한 가지 승인 룩을 요구합니다. 디자이너·운영·프론트 소재 담당자를 위해 도구별 ICC·색 설명 파일 비교표, 프리뷰 검증, 투명 채널 체크, 원격 Mac 3단계, 명명·아카이브 규칙을 묶었습니다.
① 왜 화면마다 색이 다르게 보일까
대부분의 이슈는 작업 색 공간·수출 변환·뷰어 해석 불일치입니다. 광역 디스플레이 작업물은 sRGB 밖 색을 쓰기 쉬운데, 변환 없이 태그만 맞추면 클립·재매핑이 납니다. 태그된 sRGB PNG도 무태그 UI와 섞이면 체감 색이 달라집니다. ICC·알파·블렌딩 처리 차이는 그라데이션·브랜드 컬러·그림자에서 먼저 드러납니다.
고일치 납품은 웹·앱 PNG에 납품 의도 하나로 고정하는 것이 핵심입니다. 보통 Display P3 마스터를 sRGB로 명시 변환한 빌드를 표준으로 README에 남기고, 디자인 파일 프로파일과 PNG 임베드 정책을 사양에 포함하세요.
② 수출 프리셋 비교표: 도구별 ICC·색 설명 파일
팀 합의용 표입니다. “sRGB PNG” 의미를 통일하고 버전 업 시 메뉴를 재검증하세요.
| 도구 | 문서·작업 공간 | PNG 수출: 프로파일·ICC | 일반적인 웹 납품 |
|---|---|---|---|
| Figma | 파일별 색 설정·sRGB/P3 프리뷰 구분 | 웹용은 sRGB 명시 수출 | sRGB 8비트·임베드는 팀 정책 |
| Sketch | 캔버스 문서 프로파일 | 수출 시 sRGB; “문서 동일”은 문서화 | sRGB UI·마케팅 |
| Affinity | 문서 작업 ICC | Export Persona: ICC on/off + 필요 시 sRGB 변환 | sRGB 납품 + P3 마스터 변환 |
| Photoshop | 지정 vs 변환 구분 | 보내기: sRGB·임베드는 규칙 준수 | sRGB 배치 전 변환 |
| 미리보기 | 뷰어(디스플레이·ICC 반영) | 스팟 체크만 | 브라우저 대조·단독 승인 금지 |
슬라이스 설정은 Affinity·Sketch·Figma 일괄 PNG 가이드와 함께 두면 플레이북이 한곳에 모입니다.
프리뷰 검증 단계(화면 간)
| 단계 | 할 일 | 합격 기준 |
|---|---|---|
| 1 | 기준 Mac 미리보기·검사기로 임베드 프로파일 확인 | 목업 대비 급변 없음·사양과 일치 |
| 2 | Safari·Chrome #FFF/#0B0B0B 배경 | 브랜드색 안정·토큰 hex Δ 허용 내 |
| 3 | 100%·CSS 표시 크기 | 선명·노이즈·이중 스케일 없음 |
| 4 | sRGB 외장 vs P3 노트북 | README에 sRGB/P3 기대치 명시 |
투명 채널 검수 포인트
- 스트레이트 vs 프리멀티플라이드: 별도 규정 없으면 웹 PNG는 스트레이트 알파인지 확인.
- 프린지·헤일로: 명·암 배경에서 가장자리 띠 없음 → 매트·평탄화·수출 배경 재점검.
- 투명 픽셀의 RGB: 완전 투명부에 불필요한 색이 없는지(압축·블렌드 후 노출 방지).
- 비트 깊이: 일반 웹은 8비트 RGBA; 고비트는 알파 반올림 특성이 달라질 수 있음.
③ 원격 Mac 검증 프로세스(세 단계)
원격 Mac은 절전·스로틀·임시 디스플레이 설정을 줄여 대량 PNG 배치 후에도 검수 조건을 동일하게 유지합니다.
- 기준 환경 고정: macOS·디스플레이 프로파일·수출 프리셋 버전 표준화.
README-color.md에 Display P3 마스터 →/distsRGB PNG 등 경로를 명시. - 배치·선택 자동 검사: 원격에서 배치 실행 후 치수·용량·알파 등 스크립트 검사. 히어로는 위 프리뷰 표로 스팟 검사.
- 매니페스트 승인: 티켓에 파일명·해상도·바이트·색 의도·툴 빌드 첨부 → 동급 환경에서 재현.
원격 Mac M4·4K PNG 일괄 수출과 병행하세요. 연결은 도움말(SSH/VNC)을 참고합니다.
④ 일괄 검수: 명명과 아카이브
폴더·파일명이 색·스케일을 드러내면 디자인 납품 검수가 확장됩니다.
- 폴더:
sources/p3/,dist/web-srgb/, 선택qa/screenshots/. - 파일명:
@2x,dark, 필요 시-srgb등 토큰. - 매니페스트: 릴리스당 CSV/JSON —
path, width, height, bytes, colorIntent, checksum. - 버전: git 태그·디자인 파일 버전과 매니페스트를 연결해 ICC 규칙 추적.
⑤ FAQ: 색 어긋남·투명 가장자리
Q: sRGB 수출인데 Windows Chrome이 더 탁해 보여요.
A: 실제 변환 여부·sRGB 모니터 대조·CSS 필터·무태그 자산 혼용을 확인하세요.
Q: 그라데이션 띠짐은 색 관리 탓인가요?
A: 비트·디더 이슈가 흔하고, P3→sRGB 거친 변환도 밴딩을 키웁니다. 16비트에서 단계적으로 8비트 sRGB로 내리세요.
Q: 다크 모드에서 투명 로고에 옅은 테두리.
A: 프리멀티 불일치·밝은 매트·알파 프린지 의심 → 매트·평탄화 수정 후 검정 배경에서 재검수.
Q: PNG마다 ICC를 넣어야 하나요?
A: 제품 단위로 한 번 정하고, 팀 전원 동일 규칙·감사 시 문서화가 PNG 색 관리의 핵심입니다.
요약
P3 작업과 sRGB 납품을 분리하고 ICC 정책을 통일하며, 프리뷰·알파 검수를 구조화하면 화면 간 이슈가 줄어듭니다. 대량 작업은 원격 Mac으로 조건을 고정하세요. 표·체크리스트·매니페스트가 디자인 납품 검수의 골격입니다.
다음 단계: 디자인 시나리오용 원격 Mac
MacPng 홈에서 개요를 확인하고 구매·대여·요금에서 디자인 시나리오 패키지용 원격 Mac을 선택하세요. 일괄 수출·색 QA·장시간 검증을 본업 PC와 분리할 수 있습니다. 도움말의 SSH/VNC로 빠르게 온보딩하세요.