무슨 이야기냐면요
원격으로 부모님께 스마트폰 설정을 알려드려 본 적 있으세요? ‘오른쪽 위에 점 세 개 있잖아요, 아니 그거 말고 그 옆에...’ 하다 보면 결국 ‘그냥 제가 가서 해드릴게요’로 끝나죠. 손가락으로 ‘여기!’ 하고 가리키면 3초면 끝날 일인데 말이에요.
AI 에이전트와 일할 때도 비슷한 답답함이 있어요. Claude Code나 Cursor 같은 에이전트가 ‘설정 화면에서 세 번째 탭의 하단 버튼을 누르세요’라고 텍스트로 설명하면, 사람은 그 문장을 다시 화면 위 위치로 바꿔서 찾아야 하거든요.
이 문제를 정면으로 겨냥한 오픈소스 프로젝트가 big-arrow-on-the-screen이에요. 이름 그대로 AI 에이전트가 사용자 화면 위에 큼지막한 화살표, 박스, 텍스트를 직접 그릴 수 있게 해주는 도구예요. 에이전트가 말로 설명하는 대신 화면을 직접 가리킬 수 있게 되는 거죠.
어떻게 동작할까? 투명 오버레이의 원리
이런 도구의 핵심은 투명 오버레이 창이에요. 이게 뭐냐면, 모니터 위에 투명한 셀로판지를 한 장 덮고 그 위에 마커로 그림을 그린다고 생각하면 돼요. 아래 화면은 그대로 보이고, 그림만 위에 떠 있는 거죠. 이걸 제대로 만들려면 몇 가지 조건이 필요해요.
- 항상 위(always-on-top): 어떤 앱을 띄워도 오버레이가 맨 위에 있어야 해요.
- 클릭 통과(click-through): 이게 정말 중요한데요, 오버레이가 마우스 클릭을 가로채면 사용자가 아래 버튼을 못 누르잖아요. 그래서 마우스 이벤트를 무시하고 아래 앱으로 그대로 흘려보내야 해요.
- 좌표 변환: 멀티 모니터나 맥의 레티나 디스플레이처럼 배율이 다른 환경에서는 ‘논리 좌표’와 ‘실제 픽셀 좌표’가 달라요. 에이전트가 스크린샷에서 계산한 위치와 실제로 그리는 위치가 어긋나지 않게 맞추는 게 은근히 까다로운 부분이에요.
1. 에이전트가 스크린샷을 찍어요.
2. 비전 모델로 ‘저장 버튼’이 화면 어디에 있는지 좌표를 찾아요.
3. draw_arrow(to=(1180, 642), label='여기를 누르세요') 같은 식으로 화살표를 그려요.
4. 필요하면 해당 영역에 빨간 박스를 둘러요.
5. 사용자가 보고 직접 클릭해요.
여기서 ‘큼지막한’ 화살표라는 점이 꽤 영리해요. 비전 모델이 추정한 좌표는 몇 픽셀씩 어긋나기 쉬운데, 작은 포인터라면 그 오차가 바로 티가 나지만 커다란 화살표와 박스라면 약간 빗나가도 사람이 충분히 알아볼 수 있거든요.
업계 맥락: ‘대신 해주는 AI’ vs ‘가리켜주는 AI’
요즘 에이전트 업계의 큰 흐름은 Anthropic의 Computer Use나 OpenAI의 에이전트 기능처럼 AI가 직접 마우스와 키보드를 조작하는 방식이에요. 그런데 이 방식엔 분명한 한계가 있어요. 결제, 비밀번호 입력, 보안 설정 변경처럼 AI에게 통째로 맡기기 찜찜한 작업이 많고, AI가 지금 뭘 하는지 사람이 실시간으로 따라가기도 어렵죠.
화면에 그려주는 방식은 정반대 방향이에요. AI는 가리키기만 하고, 실제 조작은 사람이 해요. 흔히 human-in-the-loop라고 부르는, 사람이 매 단계 결정권을 쥐는 구조예요. 권한을 넘겨주지 않아도 되니 안전하고, 사람은 따라 하면서 자연스럽게 사용법을 익히게 되죠.
비슷한 시도로는 Microsoft가 Windows용 Copilot Vision에서 선보인, 화면에서 어디를 눌러야 하는지 짚어주는 하이라이트 기능이 있어요. 발표할 때 쓰는 ZoomIt이나 Presentify 같은 화면 주석 도구도 기술적으로는 같은 뿌리고요. 차이는 펜을 쥔 쪽이 사람이 아니라 AI라는 점, 그리고 오픈소스라서 특정 제품에 묶이지 않고 어떤 에이전트에든 붙일 수 있다는 점이에요.
한국 개발자에게 주는 시사점
활용처는 생각보다 넓어요. 사내 온보딩에서는 신규 입사자가 ‘배포 대시보드 어디서 봐요?’라고 물으면 에이전트가 화면에 바로 표시해줄 수 있어요. 고객 지원에서는 복잡한 관리자 페이지나 금융 앱 사용법 안내에 응용할 수 있고, 키오스크나 은행 앱을 어려워하는 분들을 돕는 서비스로도 확장할 수 있죠. QA와 디버깅에서는 에이전트가 테스트를 돌리다 레이아웃이 깨진 영역을 박스로 표시해주면, 텍스트 리포트를 읽는 것보다 훨씬 빨리 파악할 수 있어요.
직접 만들어보고 싶다면 주말 프로젝트로도 충분해요. Electron이라면 transparent: true, frame: false, alwaysOnTop: true로 창을 만들고 setIgnoreMouseEvents(true)로 클릭 통과를 켜면 기본 골격이 나와요. Tauri에도 set_ignore_cursor_events 같은 비슷한 API가 있고요. 여기에 MCP 서버 하나만 얹으면 내 에이전트 전용 ‘손가락’이 생기는 셈이에요.
다만 보안은 꼭 짚고 넘어가야 해요. 화면 위에 그럴듯한 안내를 띄우는 기술은 피싱에도 쓰일 수 있어요. 에이전트가 웹페이지에 숨겨진 악의적인 지시(프롬프트 인젝션)에 속아서 엉뚱한 버튼을 가리킬 수도 있고요. 화살표를 따를지 말지는 결국 사람이 판단해야 한다는 점, 잊지 마세요.
마무리
에이전트가 ‘말로 설명하는’ 단계에서 ‘손가락으로 가리키는’ 단계로 넘어가면, AI와 사람이 함께 일하는 방식 자체가 달라질 수 있어요.
여러분은 AI에게 조작 권한을 통째로 넘기는 쪽과, AI는 가리키기만 하고 내가 직접 클릭하는 쪽 중 어느 쪽이 더 편하세요? 업무 종류에 따라 답이 달라질까요?
🔗 출처: Hacker News