Project
zozincanvas
zozincanvas는 이미지 올리고, 가릴 건 가리고, 표시할 건 표시한 다음 바로 저장하려고 만든 정적 이미지 편집기다. 블로그에 캡처 올리기 전에 이름, 얼굴, 전화번호 같은 걸 빨리 지우는 용도에 맞췄다.
핵심은 서버 업로드가 없다는 점이다. 이미지는 브라우저 안에서만 읽고, Canvas 위에서 바로 편집한다. 굳이 작은 캡처 하나 가리려고 무거운 편집툴을 켜거나, 민감한 이미지를 다른 서비스에 올릴 필요 없게 만들었다.
핵심 기능
- 이미지 업로드와 드래그 앤 드롭
- 펜, 블러 브러시, 사각형, 둥근네모, 원, 선, 화살표
- 스티커와 텍스트 박스 추가
- 색상 선택, 헥사코드 입력, 스포이드
- 도형, 스티커, 텍스트 선택 후 이동과 크기 조절
- PNG, JPG, WEBP 다운로드
구현 방식
구조는 일부러 단순하게 잡았다. 빌드 도구도 없고 의존성도 없다. HTML, CSS, JavaScript만 두고 Cloudflare Pages 같은 정적 호스팅에 바로 올리는 방식이다.
이미지는 File API로 읽고 Canvas에 그린다. 펜과 블러는 픽셀에 바로 반영하고, 도형, 스티커, 텍스트는 객체로 따로 들고 있어서 나중에 다시 선택해서 옮기거나 크기를 바꿀 수 있다. 입력은 PointerEvent 기준으로 묶어서 마우스와 터치를 같이 다룬다.
운영 상태
실제 서비스는 https://zc.zozindev.com/에서 돈다. 소스코드는 GitHub에 공개해뒀다.
개인정보가 들어간 이미지를 다루는 도구라서 운영 원칙도 단순하다. 이미지를 외부 서버로 보내지 않는다. 편집은 현재 브라우저 안에서 끝나고, 다운로드할 때만 결과 이미지를 만든다.