온라인 둥근 모서리 추가

둥근 처리가 파일 자체에 새겨져 있어야 할 때

CSS의 border-radius는 살아있는 웹페이지에서는 둥근 모서리를 잘 처리하지만, 브라우저가 이를 렌더링해준다고 믿을 수 없는 상황이 많습니다. 이메일 클라이언트는 border-radius를 흔히 무시하거나 제거하므로, 마케팅 이메일 속 둥근 상품 사진이나 아바타는 파일 자체에 이미 투명한 모서리가 담겨 있어야만 둥글게 보입니다. 같은 한계가 PDF, 이미지를 그대로 표시하는 네이티브 앱 화면, 슬라이드 덱, 그리고 업로드된 자산을 사이트의 스타일시트를 적용하지 않고 렌더링하는 소셜 플랫폼에서도 나타납니다. 앱 아이콘과 파비콘 작업도 자주 마주치는 경우입니다. 일부 플랫폼은 정사각형 PNG를 자동으로 마스킹해주지만, 미리보기 자산, 아이콘의 마케팅용 스크린샷, 또는 자체 마스크를 적용하지 않는 화면에서는 원본 이미지를 직접 둥글게 처리해두면 사용자가 실제로 보게 될 마스킹된 버전과 시각적으로 일관성을 유지할 수 있습니다. 아바타와 프로필 이미지도 같은 논리를 따릅니다 — 둥근 아바타를 더 큰 평탄화된 그래픽(수료증, 명찰, 하나의 이미지로 내보낸 카드 레이아웃, 동영상 썸네일)에 합성해야 한다면, 평탄화하기 전에 이미 원본 픽셀 안에 둥근 처리가 있어야 합니다. 원본 요소에만 적용된 CSS 반경은 정적 이미지로 구워질 때 살아남지 못하기 때문입니다. 처리가 전적으로 브라우저에서 이루어지므로, 서버로 보내고 싶지 않은 자료 — 개인정보가 담긴 스크린샷, 미공개 상품 사진, 내부 도구용 자산 — 에도 이 작업이 적용됩니다. 모서리를 둥글게 만들기 위해 그 무엇도 어디로도 전송되지 않습니다.