일하다 보면 화면의 특정 부분을 다른 사람에게 설명할 일이 자주 있는데요, 다들 번잡하게 작업하는 경우가 많았습니다. 화면 캡처하고 별도의 이미지 편집기(파워 포인트 등)에 붙여 넣고 편집한 뒤 다시 전달하는 과정이죠.
이 과정을 간단하게 만들고 싶어서 Markbit이라는 작은 도구를 만들었습니다.
https://markbit.abcbox.kr
이미지를 붙여넣거나 파일을 열면 바로 사각형, 마커, 자유선, 텍스트, 블러, 크롭 등을 사용할 수 있고 결과는 클립보드로 복사하거나 PNG로 저장할 수 있습니다.
특히 실제 프로젝트에서도 쓰려고 소스 수준에서 사용할 수도 있게 만들었습니다.
<script type="module" src="https://markbit.abcbox.kr/v1/loader.js"; data-hotkey="ctrl+shift+m" -- 이 줄은 기본값이므로 생략하거나 수정해서 사용할 수 있습니다. ></script>이렇게 넣으면 웹페이지를 캡처해서 바로 Markbit 편집기로 열 수 있습니다. npm을 통한 사용도 준비하고 있습니다.
캡처된 화면 이미지는 서버에 업로드하지 않고 브라우저 안에서 처리하는 local-first 방식입니다. 별도 회원가입도 없습니다.
만들다 보니 다른 개발자나 팀에서도 쓸 수 있을지 궁금해져 독립된 도구로 분리했습니다.
소스도 공개했습니다.
https://github.com/feeva/markbit
현재 MPL 2.0 라이선스로 공개하고 있고 아직 초기 단계라 기능을 많이 늘리기보다는 실제로 사람들이 이런 도구를 사용할지 먼저 확인해보려 합니다. 이미 비슷한 도구들이 있는 것도 같은데 직접 만들어 보고 싶었습니다.
써보시고 불편한 점이나 “이 정도는 있어야 쓸 것 같다”는 의견이 있으면 편하게 알려주세요.