브라우저에서 끝내는 이미지 표시 도구

zozincanvas는 블로그, 문서, SNS에 올릴 이미지를 빠르게 정리하려고 만든 도구입니다. 얼굴, 이름, 연락처 같은 민감한 부분은 블러로 가리고, 설명이 필요한 부분은 화살표, 도형, 텍스트로 표시합니다.

이미지는 서버로 전송하지 않고 현재 브라우저 안에서만 처리합니다. 편집이 끝나면 PNG, JPG, WEBP로 내려받으면 됩니다.

스크린샷 한 장을 정리할 때 쓰는 순서

오류 화면을 공유한다고 하면 먼저 원본을 올리고 이름, 이메일, 주문번호처럼 공개하면 안 되는 부분부터 블러로 가립니다. 그다음 설명할 버튼에는 화살표를 하나 넣고, 필요한 경우에만 짧은 텍스트를 붙입니다. 표시를 여러 개 겹치면 원래 화면을 읽기 어려워서 한 장에는 핵심 표시를 세 개 안쪽으로 두는 편이 낫습니다.

블러를 끝낸 뒤에는 캔버스를 확대해서 작은 글자가 남았는지 다시 봅니다. 특히 브라우저 탭 제목, 주소창 아래의 계정 이름, 화면 구석의 알림에는 정보가 작게 남기 쉽습니다. 다운로드한 파일도 한 번 열어 확인한 다음 공유합니다.

파일을 다루는 방식

파일 선택에는 브라우저 FileReader를 쓰고, 편집 결과는 Canvas에서 PNG, JPG, WebP 데이터로 만들어 다운로드합니다. 편집 과정에 업로드 API나 계정 저장소를 사용하지 않습니다. 새로고침하면 편집 중인 캔버스는 복구되지 않으므로 오래 작업할 이미지는 중간 결과를 내려받는 편이 안전합니다.

형식 선택 기준

앱 화면처럼 글자와 선이 많은 캡처는 PNG가 잘 맞습니다. 사진은 JPG로 저장하면 용량을 줄이기 쉽고, 웹 게시물이 WebP를 지원한다면 WebP도 선택할 수 있습니다. JPG는 투명 영역이 검게 저장되지 않도록 흰 배경을 합쳐 내보냅니다.