Project
zozincanvas
zozincanvas는 이미지 올리고, 가릴 건 가리고, 표시할 건 표시한 다음 바로 저장하려고 만든 정적 이미지 편집기다. 블로그에 캡처 올리기 전에 이름, 얼굴, 전화번호 같은 걸 빨리 지우는 용도에 맞췄다.
핵심은 서버 업로드가 없다는 점이다. 이미지는 브라우저 안에서만 읽고, Canvas 위에서 바로 편집한다. 굳이 작은 캡처 하나 가리려고 무거운 편집툴을 켜거나, 민감한 이미지를 다른 서비스에 올릴 필요 없게 만들었다.
문제 정의
개발 기록을 쓰다 보면 화면 캡처가 자주 필요하다. 에러 메시지, 관리자 화면, 계정 설정, 결제 화면, 채팅 기록 같은 이미지를 그대로 올리면 안 되는 경우가 많다. 문제는 이 작업이 자주 생기는데도 매번 포토샵이나 큰 편집 앱을 여는 건 과하다는 점이다.
단순히 모자이크 한 번 넣으려고 이미지를 외부 편집 서비스에 올리는 것도 찝찝하다. 캡처 안에는 이름, 이메일, 토큰 일부, 내부 URL처럼 작게 보여도 민감한 정보가 섞일 수 있다. 그래서 이 도구의 첫 기준은 기능이 많은 편집기가 아니라, 공유 전에 빠르게 가리고 표시하는 브라우저 도구였다.
사용 흐름
사용자는 이미지를 끌어다 놓고, 필요한 부분에 블러를 칠하거나 도형을 올린 다음 결과 파일을 다운로드한다. 블로그 글에 넣을 이미지라면 이름과 계정 정보는 블러로 가리고, 설명해야 할 버튼이나 메뉴는 사각형과 화살표로 표시한다. 사용 목적이 명확해서 화면 흐름도 업로드, 편집, 다운로드 세 단계로 잡았다.
가장 많이 생각한 상황은 공개 글을 쓰기 직전이다. 글은 거의 다 썼는데 캡처 하나 때문에 편집 앱을 켜고, 저장 위치를 찾고, 다시 브라우저로 돌아오는 흐름이 끊긴다. zozincanvas는 그 시간을 줄이는 쪽에 맞췄다. 고급 합성이나 레이어 작업보다 빠른 표시와 빠른 저장이 더 중요하다.
예를 들어 관리자 화면 설명 글을 쓴다면 계정 이메일과 내부 프로젝트명은 블러로 가리고, 독자가 눌러야 할 버튼은 화살표로 표시한다. 오류 해결 글이라면 에러 메시지의 핵심 줄은 남기고 토큰, 절대 경로, 사용자 이름은 덮는다. 이런 작업은 복잡하지 않지만 빠뜨리면 공개 후에 수정하기 번거롭다.
핵심 기능
- 이미지 업로드와 드래그 앤 드롭
- 펜, 블러 브러시, 사각형, 둥근네모, 원, 선, 화살표
- 스티커와 텍스트 박스 추가
- 색상 선택, 헥사코드 입력, 스포이드
- 도형, 스티커, 텍스트 선택 후 이동과 크기 조절
- PNG, JPG, WEBP 다운로드
구현 방식
구조는 일부러 단순하게 잡았다. 빌드 도구도 없고 의존성도 없다. HTML, CSS, JavaScript만 두고 Cloudflare Pages 같은 정적 호스팅에 바로 올리는 방식이다.
이미지는 File API로 읽고 Canvas에 그린다. 펜과 블러는 픽셀에 바로 반영하고, 도형, 스티커, 텍스트는 객체로 따로 들고 있어서 나중에 다시 선택해서 옮기거나 크기를 바꿀 수 있다. 입력은 PointerEvent 기준으로 묶어서 마우스와 터치를 같이 다룬다.
블러 브러시는 사용자가 칠한 위치를 기준으로 원본 픽셀을 처리한다. 도형과 텍스트는 바로 이미지에 굳혀버리면 수정하기 어렵기 때문에 객체로 들고 있다가 렌더링할 때 합친다. 이 구조 덕분에 텍스트 위치를 다시 옮기거나, 표시 박스 크기를 바꾸거나, 다운로드 직전에 전체 결과를 다시 그릴 수 있다.
처음부터 복잡한 프로젝트 파일 저장 기능은 넣지 않았다. 이 도구는 긴 편집 세션보다 짧은 캡처 정리에 맞춰져 있다. 사용자가 이미지를 올리고 몇 분 안에 결과를 내려받는 흐름이면 충분하다. 오래 보관해야 하는 작업물은 전문 편집기가 더 맞다.
개인정보 처리 기준
이미지 편집 도구에서 가장 중요한 기준은 원본 이미지가 어디로 가는지다. zozincanvas는 서버 업로드를 전제로 하지 않는다. 사용자가 선택한 파일은 브라우저에서 읽고, 편집 결과도 브라우저에서 만든다. 로그인, 서버 저장, 이미지 히스토리 같은 기능을 붙이지 않은 것도 이 기준 때문이다.
물론 브라우저 안에서 처리한다고 해서 사용자가 모든 위험에서 자동으로 벗어나는 건 아니다. 가려야 할 영역을 덜 가리거나, 원본 파일을 따로 공유하면 문제는 여전히 생긴다. 그래서 도구는 사용자가 빠르게 확인하고 다시 저장할 수 있게 만드는 데 집중한다. 민감한 캡처를 올리기 전에 한 번 더 보는 습관을 돕는 정도가 현실적인 역할이다.
한계와 개선 내역
현재 방향의 한계도 분명하다. 전문 편집기처럼 복잡한 레이어 그룹, 히스토리 복원, 벡터 내보내기, 세밀한 텍스트 스타일을 모두 다루지는 않는다. 모바일 화면에서는 손가락 입력이 편하지만 정밀한 위치 조정은 데스크톱보다 어렵다. 큰 이미지를 많이 다룰 때는 브라우저 메모리도 고려해야 한다.
그래서 개선은 기능을 무작정 늘리는 쪽보다 반복 작업을 줄이는 쪽으로 본다. 예를 들어 자주 쓰는 색상, 기본 화살표 스타일, 캡처용 저장 품질, 마지막 선택 도구 유지 같은 작은 기능이 실제 사용에는 더 도움이 된다. 도구가 무거워지면 처음 만든 이유가 흐려지기 때문에, 빠른 편집 흐름을 해치지 않는 선에서만 늘리는 게 기준이다.
또 하나의 기준은 편집 결과를 다시 확인하기 쉽게 만드는 것이다. 사용자가 저장 버튼을 누른 뒤에도 이미지가 너무 작아져 글자가 읽히는지, 블러가 충분한지, 표시한 박스가 설명하려는 위치를 정확히 가리키는지 볼 수 있어야 한다. 캡처 공유 도구는 결과를 예쁘게 만드는 것보다 공개 실수를 줄이는 쪽이 먼저다.
운영 상태
실제 서비스는 https://zc.zozindev.com/에서 돈다. 소스코드는 GitHub에 공개해뒀다.
개인정보가 들어간 이미지를 다루는 도구라서 운영 원칙도 단순하다. 이미지를 외부 서버로 보내지 않는다. 편집은 현재 브라우저 안에서 끝나고, 다운로드할 때만 결과 이미지를 만든다.