👋 들어가며
저는 글을 쓰거나 이슈를 공유할 때 화면 캡처를 정말 자주 합니다. 캡처한 이미지 위에 사각형으로 영역을 강조하고, 화살표로 "여기를 보세요"를 표시하고, 민감한 정보는 블러로 가리는 일이 거의 일상입니다.
🔗 ASIS 페이지: kimkyuhoi.github.io/ASIS
📦 GitHub 저장소: KimKyuHoi/ASIS
🤔 왜 직접 만들었나요?
화면을 캡처할 때는 보통 그냥 이미지를 남기려는 게 아닙니다. "여기를 봐주세요", "이 부분이 문제예요", "이쪽을 강조하고 싶어요"처럼 무언가를 짚어서 전달하고 싶을 때가 대부분입니다.
그런데 맥의 기본 캡처(네이티브 도구)는 이 지점에서 너무 불편했습니다. 이미지를 캡처한 다음 어떤 부분을 강조하거나 문제를 표시하려고 하면, 마크업 도구의 단축키가 제대로 지정되어 있지 않아 매번 마우스로 메뉴를 헤매야 했습니다. 도형 하나 그리고 색 바꾸는 단순한 작업이 흐름을 자꾸 끊었습니다.
"캡처한 다음에 강조하고 소통하는 과정을, 단축키로 쉽게쉽게 할 수는 없을까?"
이 생각이 쌓이다가 결국 직접 만들어보기로 했습니다. 이름은 ASIS로 지었습니다. AS-IS / TO-BE라고 할 때의 그 AS-IS, 즉 원하는 모습(To-Be)으로 바꾸기 전의 '현재 상태'를 뜻합니다. 무엇이든 제가 원하는 형태로 만들어가기 전, 그 출발점이 되어줬으면 하는 마음으로 붙인 이름입니다.
✨ ASIS는 이런 기능들이 있어요
ASIS는 macOS 13 이상에서 동작하는 캡처 & 어노테이션 도구입니다. Electron 36, React 19, TypeScript로 만들었습니다.
⇧⌘A로 영역 캡처를 시작하면 화면 위에 바로 그릴 수 있는 도구들이 뜹니다. 핵심은 캡처 → 주석 → 공유까지가 끊기지 않고 한 흐름으로 이어진다는 점입니다.
8가지 어노테이션 도구
가장 공들인 부분입니다. 모든 도구가 단축키로 즉시 전환되고, 그려놓은 요소는 언제든 다시 선택해 편집할 수 있습니다.
- 선택 (
V) — 그려진 도형과 요소를 클릭해 선택하고 이동·크기 조절·회전. 선택한 상태에서 블러는 강도를, 하이라이트는 색상을 바꿀 수 있습니다. 제가 가장 답답했던 "다시 편집하기"가 자연스럽게 됩니다. - 사각형 (
R) / 원 (O) — 영역을 사각형·원으로 강조. 색상 변경과 회전·크기 조절을 지원합니다. - 화살표 (
A) — 방향과 지점 가리키기. 색상 변경과 회전을 지원합니다. - 펜 (
P) — 자유 드로잉. 굵기 6단계와 색상 변경을 지원합니다. - 하이라이트 (
H) — 기본 노란색 형광펜으로 강조하며, 색상도 바꿀 수 있습니다. - 블러 (
B) — 민감 정보 가리기. 블러 강도를 6단계로 조절합니다. - 텍스트 (
T) — 캡처 위에 바로 텍스트 입력. 폰트 선택과 색상 팔레트를 지원합니다.
여기에 ⌘Z / ⌘⇧Z 실행 취소·다시 실행, Delete로 요소 삭제, 요소 순서를 바꾸는 Z-order 메뉴까지 넣어서 그림판처럼 자연스럽게 다룰 수 있게 했습니다.
실제로 회사에서 성과 발표회를 할 때 이 점이 큰 도움이 됐습니다. 캡처한 화면에서 강조하고 싶은 표현이나 짚어야 할 부분을 단축키로 빠르게 표시할 수 있어서, 발표 자료를 준비하면서 "여기를 이렇게 보여주고 싶다"는 의도를 깔끔하게 담아낼 수 있었습니다. 직접 만든 도구가 실무에서 제 몫을 하는 걸 보니 만족감이 컸습니다.
GIF 녹화 — 만들고 나서 제일 자주 쓰는 기능
만들 때는 부가 기능 정도로 생각했는데, 막상 완성하고 나니 제일 많이 쓰는 기능이 됐습니다. 화면 영역을 선택하면 그대로 GIF로 녹화해서 내보낼 수 있습니다.
특히 Git 이슈에 버그 재현 과정을 첨부하거나, 팀원분들께 "이게 이렇게 동작해요"라고 설명할 때 정말 편했습니다. 말이나 정적인 스크린샷 여러 장으로 설명하던 걸 GIF 하나로 대체하니 전달이 훨씬 빨랐거든요. 별도 프로그램 없이 영역만 잡으면 끝나니까, "이거 GIF로 보여주면 한 방인데" 싶은 순간마다 망설임이 사라졌습니다.
그 외 편의 기능들
- 다중 디스플레이 지원 — 모니터가 여러 대인 환경에서도 정확한 좌표로 캡처합니다.
- 클립보드 복사 & 히스토리 — 결과 이미지를 클립보드로 복사해 어디든 바로 붙여넣고, 세션 중 복사·핀한 캡처를 트레이 메뉴에서 다시 불러올 수 있습니다.
만들면서 느낀 점
이 프로젝트를 마치며 가장 크게 든 생각은, 사실 기능 그 자체보다 '만드는 경험'이 달라졌다는 점이었습니다.
예전 같으면 "맥 캡처 도구를 직접 만든다"는 건 마음속 위시리스트에만 올려두고 끝났을 일입니다. Electron 세팅, 화면 녹화 권한 처리, 다중 디스플레이 좌표 계산, GIF 인코딩… 하나하나가 처음 다뤄보는 영역이라 시작할 엄두조차 잘 안 났을 겁니다.
그런데 AI가 발전하면서, 생각만 하고 만들지 못했던 것들을 실제 프로젝트로 옮기는 일이 부쩍 쉬워졌습니다. 막히는 지점에서 빠르게 길을 찾고, 낯선 API도 곧장 시도해볼 수 있으니 "한번 만들어볼까?"와 "다 만들었다" 사이의 거리가 확 줄어든 느낌입니다. 요즘 들어 이런 사이드 프로젝트를 부담 없이 시작하게 되는 이유가 여기에 있는 것 같습니다.
마치며
ASIS는 지금도 계속 다듬어 가고 있습니다. 써보시다가 불편한 점이나 버그가 있다면 ASIS 페이지의 FAQ·문의와 버그 제보 메뉴에서 받고 있으니 편하게 남겨주시면 감사하겠습니다.
직접 쓰려고 만든 도구지만, 저처럼 캡처에서 작은 답답함을 느끼셨던 분이라면 분명 도움이 될 거라고 생각합니다. 많은 사랑 부탁드립니다. 😊