브라우저에서만 돌아가는 이미지 압축 툴 만들면서 겪은 고민들
사이드 프로젝트로 이미지 도구 사이트를 하나 만들고 있는데, 서버 없이 순수 브라우저에서만 처리하는 걸 원칙으로 잡다 보니 생각보다 고민할 게 많더라구요. 공유 겸 의견 여쭤봅니다.
배경
이력서 사진, 증명사진 같은 걸 채용 사이트나 시험 접수처에 올릴 때 용량 초과나 규격 오류로 막히는 경우가 꽤 있잖아요. 저도 몇 번 겪고 나서 "이거 자동으로 처리해주는 도구 하나 만들어보자" 싶어서 시작했습니다.
원칙은 하나로 잡았어요 — 파일을 서버로 안 보낸다. 증명사진 같은 민감한 이미지를 다루는 거라, 회원가입도 없고 업로드도 없이 전부 클라이언트에서 처리하는 쪽으로 갔습니다.
막혔던 지점들
배경 제거: remove 류 API를 쓰면 편한데, 결국 서버로 이미지를 보내야 해서 원칙에 어긋나더라구요. 그래서 브라우저에서 돌아가는 세그멘테이션 모델(약 30MB)을 클라이언트에 로드해서 처리하는 방식으로 갔습니다. 첫 실행 시 모델 다운로드 때문에 로딩이 좀 걸리는 게 트레이드오프인데, 이후엔 캐시돼서 괜찮더라구요.
압축 목표치 맞추기: "300KB 이하로 줄여주세요" 같은 요구를 맞추려면 quality를 고정값으로 인코딩하는 게 아니라, 목표 용량에 도달할 때까지 quality를 단계적으로 낮춰가며 재인코딩하는 루프가 필요했어요. 무한루프 안 걸리게 하한선(quality 0.5 이하로는 경고 띄우고 멈춤) 잡는 것도 은근히 신경 쓸 부분이었습니다.
모바일 터치 크롭: 비율 고정 크롭에 pan/zoom을 직접 구현하려다가, 결국 검증된 라이브러리(react-easy-crop) 쓰는 쪽으로 방향을 틀었어요. "제로 의존성" 욕심보다 모바일 터치 엣지케이스 리스크가 더 크다고 판단했습니다.
결과물
이런 고민들 거쳐서 지금은 이력서/공무원시험/여권사진 규격에 맞춰 크롭·리사이즈·배경정리·압축을 한 번에 처리하는 기능까지 붙이고 있어요.
https://www.compressdeck.com
혹시 클라이언트 사이드 이미지 처리(특히 WASM 기반 세그멘테이션 모델) 다뤄보신 분 계시면 최적화 팁 있으면 나눠주시면 감사하겠습니다.
