이미지 여백 자동 자르기

여백, 손으로 자르지 마세요

배경을 지운 상품 사진(누끼)이나 로고 PNG는 둘레에 투명한 빈 공간이 크게 남아 있는 경우가 많고, 스캔한 그림이나 캡처 화면에는 흰 테두리가 붙어 있어요. 이런 여백이 있으면 상세페이지·문서에 넣을 때 위치가 어긋나고 크기 맞추기가 번거로워요. 그림을 넣고 여백 자르기를 누르면 둘레에서 같은 색이 이어지는 부분을 찾아 내용에 딱 맞게 잘라요.

설정

• 여백 색 — ‘자동’은 네 모서리의 색을 여백으로 보고 잘라요. 모서리에 그림 일부가 걸쳐 있거나 여백 색이 확실하면 흰색·검정·투명을 직접 고르세요.
• 허용 오차 — 여백 색과 이만큼 비슷한 색까지 여백으로 봐요. JPG·스캔본은 여백에 미세한 얼룩이 있어서 10~20%가 알맞고, 너무 높이면 그림의 옅은 부분까지 잘릴 수 있어요.
• 남길 여백 — 딱 맞게 자른 뒤 둘레에 여백 색으로 일정한 여백을 다시 둘러요. 로고를 배치할 때 4~20px 정도 숨 쉴 공간을 두면 좋아요.
• 결과 표시 — 위·아래·왼쪽·오른쪽에서 각각 몇 px을 잘랐는지와 바뀐 크기를 보여 줘요.

어떻게 동작하나요

ImageMagick 7의 trim 기능을 웹어셈블리(magick-wasm)로 브라우저 작업자에서 돌려요. 여백 색을 고르면 그 색으로 1px 테두리를 먼저 두른 뒤 잘라서, 모서리 색과 상관없이 고른 색만 여백으로 봐요. 휴대전화 사진의 회전 정보는 반영하고, 파일은 서버로 보내지 않아요.

한계

그림자나 그러데이션처럼 여백 색이 점점 바뀌는 배경은 잘 안 잘릴 수 있어요. 움직이는 GIF는 첫 장면만 잘라 PNG로 저장해요. 원하는 영역을 직접 고르려면 사진 자르기를 쓰세요.

참고한 자료

• ImageMagick — -trim 과 -fuzz 옵션
• ImageMagick 예제 — Trimming(여백 자르기)과 테두리를 먼저 두르는 방법
• magick-wasm 0.0.45 (Apache-2.0)