버그를 발견한 순간, 텍스트로 상황을 설명하려다 시간을 낭비한 경험이 있을 것이다. PromptShot의 그리기 기능과 단축키(Alt+Shift+S)를 쓰면, 브라우저에서 발견한 버그의 상태와 재현 경로를 캡처·주석·프롬프트 복사까지 한 흐름으로 처리할 수 있다.
텍스트만으로 버그 상황을 기술할 때 생기는 문제
버그를 텍스트로 설명하는 일은 생각보다 까다롭다. "오른쪽 상단 버튼을 누르면 모달이 이상하게 뜬다"는 문장을 받은 개발자는 어떤 버튼인지, 어떻게 이상한지 확인하기 위해 다시 질문해야 한다. 그 왕복이 쌓이면 간단한 버그 하나에도 맥락 공유만 수십 분이 걸린다.
특히 Cursor나 Claude 같은 AI 코딩 도구에 버그를 설명할 때, 텍스트만 붙여 넣으면 도구가 UI 상태를 추측해야 한다. 추측이 틀리면 엉뚱한 수정 코드가 나온다. 결국 개발자가 다시 맥락을 보완하는 루프가 반복된다.
문제는 두 가지다.
- 위치: 텍스트로는 "어디에 있는 요소인지"를 정확히 전달하기 어렵다.
- 상태: 에러 메시지, 깨진 레이아웃, 빈 영역 등 시각적 상태는 캡처 없이 설명하면 정보가 줄어든다.
그리기 도구로 화면에 직접 표시하고, 그 이미지와 함께 프롬프트를 LLM에 붙여 넣는 방식이 이 문제를 해결하는 가장 빠른 경로다.
PromptShot 그리기 도구로 버그 위치를 어떻게 표시할까?
PromptShot의 그리기 도구는 캡처 직후 바로 활성화된다. 별도 이미지 편집기를 열 필요가 없다.
영역을 드래그해 캡처하면 편집 패널이 열리고, 여기서 선택할 수 있는 도구는 다음과 같다.
| 도구 | 용도 | 버그 리포트에서 쓰는 방식 |
|---|---|---|
| 펜(자유 드로잉) | 특정 영역에 자유롭게 표시 | 깨진 텍스트나 이미지 경계에 동그라미 |
| 형광펜 | 반투명 강조 | 에러 메시지 텍스트 강조 |
| 화살표 | 방향 지시 | "이 버튼을 누른 뒤 저 팝업이 열림" 순서 표시 |
| 텍스트 | 짧은 주석 | "여기서 클릭 → 404" 같은 재현 경로 메모 |
예를 들어, 가상의 시나리오를 생각해 보자. 결제 플로에서 "다음" 버튼이 특정 해상도에서 잘리는 버그를 발견했다고 가정하면, 화살표로 버튼 위치를 가리키고 텍스트 도구로 "1280px에서 clip 발생"이라고 짧게 메모한다. 이 이미지 하나가 세 문단짜리 텍스트 설명보다 정확하다.
캡처 범위는 전체 화면이 아니라 문제가 발생한 컴포넌트 영역만 잘라도 된다. 오히려 범위를 좁히면 LLM이 어디에 집중해야 하는지 명확해진다.
클립보드 즉시 복사로 버그 리포트 프롬프트를 작성하는 방법
주석 작업이 끝나면 Alt+1 또는 Alt+2로 복사 대상을 선택한다.
- Alt+1: PNG 이미지만 클립보드에 복사
- Alt+2: 프롬프트 텍스트 + PNG 이미지를 함께 클립보드에 복사
버그 리포트 프롬프트를 만들 때는 Alt+2를 쓴다. 복사된 내용을 Cursor, Claude, ChatGPT에 그대로 붙여 넣으면 이미지와 텍스트 맥락이 동시에 전달된다.
프롬프트 텍스트 부분에는 캡처한 URL, 브라우저 정보, 캡처 시각이 자동으로 포함된다. 여기에 직접 한 줄을 추가해 재현 조건을 붙이면 완성도 높은 버그 리포트 프롬프트가 된다.
실제로 AI 코딩 도구에 붙여 넣는 프롬프트 구조는 이런 형태다.
[캡처 이미지 첨부됨]
URL: /checkout
재현 환경: Chrome 124, 1280×800
재현 단계:
1. 장바구니에서 '결제하기' 클릭
2. 배송 정보 입력 후 '다음' 클릭
3. 위 이미지처럼 버튼이 뷰포트 밖으로 잘림
예상 동작: 버튼 전체가 화면 안에 표시됨
실제 동작: 버튼 오른쪽 일부가 잘려 클릭 불가
위 이미지와 재현 단계를 기반으로 원인을 분석하고 수정 방향을 제안해 주세요.
이 구조를 매번 타이핑하지 않아도 된다. PromptShot에서 프롬프트 템플릿을 저장해 두면, 다음 버그부터는 캡처 → 주석 → 붙여넣기 세 단계로 끝난다.
Alt+Shift+S로 이슈 트래킹을 어떻게 빠르게 처리할까?
Alt+Shift+S는 PromptShot의 전역 캡처 단축키다. 브라우저 외 어떤 창에서도 작동하며, 누르는 순간 드래그 선택 모드로 바로 진입한다.
이슈 트래킹 도구(Linear, Jira, GitHub Issues 등)와 함께 쓸 때 흐름이 단순해진다.
단계별 프로세스:
- 브라우저에서 버그 발견
- Alt+Shift+S → 버그 영역 드래그 캡처
- 그리기 도구로 위치·상태 표시
- Alt+2 → 프롬프트 + 이미지 클립보드 복사
- AI 코딩 도구에 붙여 넣어 원인 분석 또는 수정 코드 요청
- 수정 코드 확인 후 이슈 트래커에 동일 이미지로 티켓 생성
5번과 6번 사이에서 Alt+1로 이미지만 따로 복사해 이슈 트래커에 첨부하는 것도 자연스러운 흐름이다. LLM용 프롬프트와 이슈 트래커 첨부 이미지를 같은 캡처에서 각각 뽑아 쓸 수 있다.
이 흐름에서 별도로 저장하거나 파일을 열 필요가 없다. 모든 처리는 브라우저 안에서 로컬로 이뤄지고, 페이지 내용은 외부로 전송되지 않는다. 버그가 발생한 페이지가 내부 스테이징 환경이거나 미공개 기능이더라도 안심하고 쓸 수 있다.
버그 유형별 캡처 방식 선택 기준
버그 유형마다 캡처 전략이 약간 다르다.
| 버그 유형 | 권장 캡처 범위 | 그리기 도구 조합 |
|---|---|---|
| 레이아웃 깨짐 | 문제 컴포넌트 포함 섹션 전체 | 화살표 + 텍스트("의도한 영역") |
| 에러 메시지 | 에러 토스트/모달만 좁게 | 형광펜으로 메시지 강조 |
| 빈 영역(데이터 없음) | 빈 컨테이너 포함 카드 영역 | 펜으로 동그라미 + "여기가 비어 있음" |
| 클릭 불가 요소 | 버튼/링크 주변 | 화살표로 가리키기 + "클릭 안 됨" |
| 반응형 깨짐 | 브라우저 창 전체 | 화살표로 양쪽 경계 표시 |
한 가지 주의할 점이 있다. 너무 넓은 영역을 캡처하면 LLM이 어디를 봐야 할지 흐려진다. 문제 요소 주변 50~100px 정도의 맥락만 포함하는 것이 오히려 더 정확한 분석을 이끌어 낸다.
자주 묻는 질문
PromptShot 그리기 도구는 캡처 후 별도 편집 앱 없이 바로 쓸 수 있나요?
캡처 직후 편집 패널이 열리므로 별도 앱 전환 없이 펜, 형광펜, 화살표, 텍스트 도구를 바로 쓸 수 있다. 작업이 끝나면 Alt+1(이미지) 또는 Alt+2(프롬프트+이미지)로 클립보드에 복사해 AI 도구나 이슈 트래커에 붙여 넣는다.
캡처한 이미지나 페이지 내용이 외부 서버로 전송되나요?
모든 처리는 브라우저 로컬에서만 이뤄진다. 페이지 내용, 캡처 이미지, 주석 데이터는 외부로 전송되지 않는다. 내부 스테이징 환경이나 미공개 기능 화면에서 캡처해도 데이터가 외부에 남지 않는다.
Alt+Shift+S 단축키가 다른 앱과 충돌하면 어떻게 하나요?
PromptShot 확장 설정에서 단축키를 변경할 수 있다. Chrome의 확장 프로그램 단축키 관리 페이지(chrome://extensions/shortcuts)에서 사용자 정의 키 조합으로 바꾸면 된다.
버그 리포트 프롬프트 템플릿을 저장해서 재사용할 수 있나요?
PromptShot에서 자주 쓰는 프롬프트 텍스트를 미리 저장해 두면 다음 캡처부터 자동으로 포함된다. 재현 단계나 환경 정보 형식을 고정해 두면 매번 동일한 구조의 버그 리포트가 만들어진다.
Claude나 Cursor 외 다른 AI 도구에도 붙여 넣을 수 있나요?
Alt+2로 복사된 내용은 이미지와 텍스트를 함께 담은 클립보드 데이터다. ChatGPT, Claude, Cursor 등 이미지 입력을 지원하는 AI 도구라면 동일하게 붙여 넣어 쓸 수 있다.
버그를 발견한 순간부터 AI 코딩 도구에 전달하기까지 — PromptShot의 드래그 캡처, 그리기 도구, Alt+Shift+S 단축키를 조합하면 텍스트로 상황을 설명하는 왕복 없이 버그의 위치·상태·재현 경로를 담은 리포트 프롬프트를 한 번에 만들 수 있다. 브라우저에서 바로 시작해 보고 싶다면, PromptShot 드래그 캡처로 다음 버그부터 적용해 보자.
Top comments (0)