개발자가 UI 버그를 발견하고 AI 코딩 도구에 설명하는 과정은 생각보다 손이 많이 간다. 스크린샷을 찍고, 파일로 저장하고, Cursor나 Copilot 창을 열어 "이 버튼의 padding이 의도한 것과 다릅니다"라는 문장을 직접 타이핑한다. 이 흐름에서 진짜 병목은 캡처 자체가 아니라 맥락을 손으로 옮기는 과정이다. PromptShot은 브라우저 안에서 영역을 드래그하면 PNG 이미지와 코드 리뷰용 프롬프트를 클립보드에 동시에 올려 그 병목을 없앤다.
웹 개발 흐름에서 캡처·설명 타이핑이 실제로 느린 이유
영역 캡처 자체는 1초다. 문제는 그 앞뒤다. 전체 화면 캡처 도구는 필요 없는 영역까지 잘라야 하고, 운영체제 기본 스크린샷은 파일 시스템 어딘가에 떨어진다. 그 파일을 AI 채팅창에 첨부하고, 거기에 "이 컴포넌트의 레이아웃이 모바일에서 깨집니다. flex-wrap 속성을 확인해 주세요"라는 맥락을 별도로 입력해야 한다.
바이브 코딩(vibe coding) 방식으로 작업하는 경우엔 이 반복이 더 빨리 쌓인다. 화면을 보면서 수정하고, 수정 결과를 다시 AI에게 보여주는 루프가 짧기 때문에, 캡처-저장-설명-첨부 4단계가 그대로 마찰로 남는다.
결국 필요한 건 두 가지다. 특정 UI 영역만 정확히 자르는 것, 그리고 그 영역에 대한 설명 프롬프트가 이미지와 함께 자동으로 따라오는 것.
드래그로 클립보드에 이미지와 프롬프트를 동시에 올리는 방식
PromptShot은 크롬 익스텐션으로 설치되며, 단축키 Alt+Shift+S를 누르면 화면에 캡처 모드가 활성화된다. 원하는 UI 영역을 드래그하면 두 가지가 클립보드에 올라간다.
- 드래그한 영역의 PNG 이미지
- 해당 영역을 기술하는 코드 리뷰용 텍스트 프롬프트 (
Alt+1은 이미지만,Alt+2는 이미지+프롬프트)
Cursor에서는 채팅창에 Ctrl+V만 하면 이미지와 프롬프트가 붙여넣어진다. GitHub Copilot Chat도 동일하다. 타이핑 없이 캡처 직후 AI에게 맥락을 전달할 수 있는 구조다.
특히 UI 버그 리포트 작성 시 유용한 점은, 프롬프트가 "이 스크린샷에서 무엇이 문제인지 설명해 주세요"처럼 열린 질문이 아니라 컴포넌트 분석과 코드 수정을 유도하는 형식으로 구성된다는 것이다. 드래그 한 번이 맥락 타이핑 전체를 대체한다.
관련 자동화 흐름은 크롬 익스텐션 자동 설치 가이드에서 확인할 수 있다.
단축키와 클립보드 연동으로 개발 루프를 짧게 유지하는 방법
단축키는 키맵을 바꿀 수 있다. 기본값은 아래와 같다.
| 단축키 | 동작 |
|---|---|
Alt+Shift+S |
캡처 모드 활성화 |
Alt+1 |
이미지만 클립보드에 복사 |
Alt+2 |
이미지 + 코드 리뷰 프롬프트를 클립보드에 복사 |
Alt+2가 핵심이다. 이 단축키 하나로 다음 동작이 모두 완료된다.
- 지정 영역 PNG 캡처
- 코드 리뷰용 프롬프트 텍스트 생성
- 두 가지를 클립보드에 동시 저장
Cursor 채팅창, Copilot Chat, ChatGPT 등 붙여넣기를 지원하는 모든 AI 인터페이스에서 그대로 Ctrl+V로 전달된다. 파일 저장 경로를 신경 쓸 필요도, 첨부 버튼을 찾을 필요도 없다.
실제 개발 루프에서 이 구조가 가진 이점은 컨텍스트 스위칭이 줄어든다는 점이다. 브라우저에서 Cursor로 전환할 때 캡처 파일을 탐색기에서 찾는 동작이 사라진다. 드래그하고, 붙여넣고, 다음 대화로 넘어간다.
민감한 코드가 외부 서버로 전송되지 않는 이유
개발 환경에서 스크린샷 도구를 쓸 때 가장 현실적인 우려는 페이지 내용이 어딘가에 올라가는 것이다. 사내 스테이징 서버 화면, 미출시 기능 UI, 로컬호스트에서 돌아가는 관리자 패널 등은 외부 서버로 나가서는 안 된다.
PromptShot은 모든 처리를 브라우저 안에서 끝낸다. 캡처, 프롬프트 생성, 클립보드 저장 전 과정이 로컬에서만 이루어지며, 어떤 이미지나 텍스트도 외부 서버로 전송되지 않는다. 확장 프로그램이 네트워크 요청을 하는 순간은 없다.
이 구조가 실질적으로 의미하는 바는 간단하다.
-
localhost:3000에서 열린 개발 서버 화면을 캡처해도 된다 - VPN 안쪽 스테이징 환경에서도 동일하게 쓸 수 있다
- 회사 정책상 화면 데이터 외부 전송이 제한된 환경에서도 충돌이 없다
크롬 익스텐션이 실제로 어떤 권한을 요청하는지는 웹스토어 권한 목록에서 직접 확인할 수 있다. activeTab 권한과 clipboardWrite 권한만 사용한다. 백그라운드 네트워크 연결 권한은 없다.
AI와 브라우저를 동기화해 디자인 피드백과 컴포넌트 추출에 활용하는 요령
코드 리뷰 프롬프트는 버그 리포트에만 쓰이지 않는다. 디자인 핸드오프나 컴포넌트 추출 작업에서도 동일한 흐름이 유효하다.
예를 들어, 피그마 없이 브라우저에서 직접 컴포넌트 스펙을 AI에게 물어보는 경우를 생각해보자. 특정 카드 컴포넌트를 드래그 캡처하고 Alt+2로 프롬프트와 함께 Cursor에 붙여넣으면, AI는 이미지와 텍스트 맥락을 함께 받아 더 정확한 CSS나 React 컴포넌트 코드를 제안할 수 있다. "이 카드의 shadow와 border-radius를 Tailwind로 재현해 줘"처럼 직접 요청을 이어 붙이면 충분하다.
디자이너가 버그를 리포트할 때도 마찬가지다. 형광펜이나 화살표 같은 마크업 기능은 PromptShot이 직접 제공하지 않지만, 캡처 후 이미지 편집 도구에서 표시를 추가하고 다시 Cursor에 첨부하는 방식으로 조합할 수 있다.
AI와 브라우저를 동기화한다는 말은 결국 두 창 사이의 맥락 전달 비용을 줄인다는 뜻이다. PromptShot은 그 비용을 드래그 한 번으로 압축한다.
자주 묻는 질문
PromptShot은 어떤 AI 도구와 함께 쓸 수 있나요?
클립보드 붙여넣기를 지원하는 모든 AI 인터페이스에서 쓸 수 있다. Cursor, GitHub Copilot Chat, ChatGPT, Claude 등이 해당된다. 이미지와 프롬프트를 클립보드에서 읽어들이는 구조라면 별도 연동 설정 없이 Ctrl+V로 전달된다.
전체 페이지가 아닌 특정 영역만 캡처할 수 있나요?
캡처 모드에서 마우스로 드래그해 원하는 영역만 선택한다. 전체 화면 캡처나 특정 DOM 요소 기준 자동 감지 방식이 아니라, 픽셀 단위로 영역을 직접 지정하는 방식이다.
로컬호스트 환경에서도 캡처가 되나요?
된다. localhost나 내부 IP 주소로 접근하는 스테이징 서버 화면도 동일하게 캡처할 수 있다. 모든 처리가 브라우저 로컬에서 이루어지기 때문에 외부 네트워크 접근이 필요하지 않다.
생성되는 프롬프트 형식을 수정할 수 있나요?
현재 버전에서는 프롬프트 템플릿을 직접 편집하는 기능은 제공되지 않는다. 캡처 후 Cursor 등 AI 채팅창에 붙여넣은 뒤 추가 요청 문장을 이어 입력하는 방식이 현실적이다.
크롬 외 브라우저에서도 동작하나요?
현재는 크롬(Chromium 기반 포함)을 지원한다. Edge처럼 크롬 웹스토어 익스텐션을 설치할 수 있는 Chromium 기반 브라우저에서는 동작을 확인할 수 있다.
캡처, 저장, 설명 타이핑으로 이루어지는 버그 리포트 루프는 익숙하다고 해서 효율적인 것이 아니다. 드래그하고, Alt+2를 누르고, 붙여넣는 세 동작으로 이미지와 코드 리뷰 프롬프트를 동시에 AI에게 전달하는 구조가 갖춰지면, 반복이 짧아지고 AI 응답의 품질도 맥락이 충분해진 만큼 따라온다. 크롬 웹스토어에서 PromptShot을 검색하거나 즉시 설치하여 타이핑 수작업이 없는 버그 리포팅을 시작하세요.
더 보기: https://chromewebstore.google.com/detail/hoeepglnndmnchkfpndccdjncpenoooc?utm_source=item-share-cb
Top comments (0)