화면 클릭만으로 AI 코더에게 수정 지시

화면을 클릭해 '여기 이렇게 고쳐'라고 메모를 남기면, 그 메모가 AI 코딩 도구가 실행할 작업 파일로 바뀐다. 크롬(Chrome) 확장 프로그램 '드로브리지(Drawbridge)'가 하는 일이다. 커서(Cursor)·클로드 코드(Claude Code)·코덱스(Codex)·윈드서프(Windsurf) 같은 도구와 브라우저를 오가는 피드백 루프를 겨냥했다. 공개 이후 깃허브 별 950여 개를 모으며 빠르게 주목받고 있다.

무슨 일인가

지금까지 AI 코딩 도구에 UI 수정을 시키려면, 눈에 보이는 문제를 일일이 글로 설명해야 했다. '이 버튼을 오른쪽으로 8px 옮기고 색을 바꿔' 같은 지시를 텍스트로 옮기는 일 자체가 번거로웠다. 드로브리지는 이 과정을 시각화한다. 실행 중인 웹 앱 위에서 UI 요소를 직접 클릭해 코멘트를 달거나, 특정 요소에 묶이지 않는 여백·정렬 문제는 자유롭게 사각형을 그려 표시한다. 마치 피그마(Figma)에 주석을 달듯 화면에 바로 지시를 남기는 방식이다.

핵심 짚어보기

메모를 남기면 확장 프로그램이 선택한 요소의 정보, 위치 좌표, 화면 캡처를 함께 붙잡아 프로젝트 안에 읽기 쉬운 마크다운과 구조화된 JSON 파일로 저장한다. 작업은 '할 일·진행 중·완료' 상태로 관리된다. 이후 커서나 클로드 코드에서 지정된 명령을 실행하면, AI 도구가 이 작업 큐를 읽어 코드를 고친다. 사람은 '무엇을 고칠지'를 화면에서 짚고, AI는 '어떻게 고칠지'를 코드로 옮기는 분업이 성립하는 셈이다. 확장 프로그램이 새로고침돼도 열려 있던 탭에 스크립트를 다시 주입해 작업이 끊기지 않도록 한 점, 로컬 파일(file://) 페이지에도 붙일 수 있게 한 점 등 실사용을 염두에 둔 세부도 챙겼다. 설치는 크롬 개발자 모드에서 확장 폴더를 불러오고, 대상 프로젝트의 로컬 폴더를 연결하는 방식이다.

1인기업 실전 적용 포인트

• 디자인 QA 시간 단축: 랜딩페이지·웹앱을 직접 훑으며 어긋난 UI를 클릭·메모하면, 수정 지시서를 따로 쓸 필요 없이 작업 파일이 자동 생성된다.
• 외주·협업 소통 대체: '여기가 이상하다'를 말로 설명하는 대신 화면에 표시해 넘기면, 의사소통 오류와 재작업을 줄일 수 있다.
• 캡처·좌표까지 함께 전달: 메모에 스크린샷과 위치 정보가 자동으로 붙으므로, AI가 맥락을 더 정확히 파악해 엉뚱한 곳을 고칠 확률이 낮아진다.
• 여러 도구와 병행: 커서·클로드 코드·코덱스·윈드서프를 함께 쓰는 1인 개발자라면, 어떤 도구를 쓰든 같은 작업 큐로 지시를 통일할 수 있다.

전망 / 주의점

로컬 파일 접근 권한을 여는 크롬 확장이라는 점에서, 신뢰할 수 있는 프로젝트에만 연결하는 신중함이 필요하다. 그럼에도 '말로 설명하는 코딩'에서 '가리켜서 지시하는 코딩'으로의 전환은, 디자인과 개발을 혼자 오가는 1인기업의 작업 흐름을 눈에 띄게 줄여 줄 수 있다.

출처: Hacker News / GitHub breschio/drawbridge (https://github.com/breschio/drawbridge)