투명 PNG 테두리 잔상 없이 내보내기

웹에 올릴 PNG/SVG를 내보낼 때 매트(matte) 색을 지정하지 말아야 하는 이유와 실전 설정

• 매트 색을 쓰면 완전 투명 픽셀은 그 색으로 채워지고, 반투명 가장자리는 그 색이 섞여 저장돼. 결과적으로 페이지 배경이 다르면 하얀/검은 테두리(halo) 가 보여.

• 해결책은 스트레이트(비-프리멀티플라이) 알파로 내보내는 것. 프리멀티플라이(=매팅된) 알파는 특정 배경색이 섞여 가장자리가 물들어 보여.

최소 가이드

• PNG, WebP: 배경 레이어 꺼두기(체커보드 보이게) → 매트: 없음(None) → Straight/Unpremultiplied alpha 선택.

• SVG: fill="none"을 사용하고 외곽선(anti‑alias)이 배경에 의존하지 않도록 래스터 효과를 피함.

• 동영상/모션(웹용): 가능하면 WebM (VP9/AV1) + Straight alpha. 배경 합성은 웹에서.

앱별 빠른 설정

• Photoshop: Export As… → PNG → Transparency 체크, Matte: None. 필요하면 Channels에서 Straight 유지.

• Illustrator: Asset Export → PNG → Background color: Transparent(매트 없음). 효과는 벡터 유지.

• Figma: Export → PNG → Transparent background 켜기. (커뮤니티 플러그인 일부는 프리멀티 처리하니 기본 내보내기 권장)

• After Effects: Output Module → Format: QuickTime/WebM → Channels: RGB + Alpha → Premultiplied가 아니라 Straight 선택.

흔한 증상 & 즉치 처방

• 흰/검은 테두리 보임 → 매트가 들어간 파일. 배경 꺼서 재내보내기 + Straight alpha.

• 짙은 배경에서 가장자리 색 틀어짐 → 소스가 프리멀티. Knockout/Remove Matte 불가하면 원본에서 재수출이 정석.

• 다크/라이트 테마 모두에서 자연스럽게 보이게 하려면 → 매트 없이 투명이 정답.