UI 버그를 텍스트로 설명하다 보면 반드시 막히는 순간이 있다. "헤더 오른쪽 버튼이 모바일에서 잘려요"라고 써도, LLM은 실제 레이아웃을 볼 수 없어 엉뚱한 CSS를 제안한다. PromptShot으로 해당 영역을 드래그 캡처하면 PNG 이미지와 LLM용 프롬프트가 클립보드에 동시에 복사된다. 그 상태로 Cursor나 ChatGPT에 붙여넣으면 된다.
UI 수정과 버그 리포트에서 스크린샷 질문이 필요한 이유
텍스트만으로 UI 문제를 설명하는 방식에는 구조적인 한계가 있다. 레이아웃 깨짐, 색상 불일치, 특정 컴포넌트의 겹침 같은 시각적 버그는 아무리 글로 정확히 써도 LLM이 재현하기 어렵다. 결국 LLM은 문제를 추측하고, 개발자는 그 추측을 바탕으로 수정을 시도하고, 맞지 않으면 다시 설명하는 루프를 반복하게 된다.
이미지를 함께 넘기면 그 루프가 짧아진다. 실제 화면이 컨텍스트가 되므로, LLM은 문제를 추측하는 대신 보이는 것에 집중해 답한다. 특히 다음 상황에서 효과가 두드러진다.
- 특정 뷰포트에서만 재현되는 레이아웃 버그
- 디자인 파일과 실제 구현 사이의 간격·색상 차이
- 서드파티 컴포넌트를 커스터마이징할 때 어느 클래스가 적용됐는지 확인
- 버그 리포트를 작성할 때 재현 화면을 첨부하면서 동시에 수정 방향을 묻는 경우
전체 화면을 캡처해서 붙이면 LLM에 불필요한 정보가 너무 많이 들어간다. 수정이 필요한 컴포넌트만 잘라서 넘기는 편이 답변 품질이 높다. 그게 영역 드래그 캡처를 쓰는 이유다.
PromptShot으로 영역을 드래그해 이미지와 프롬프트를 동시에 복사하는 과정
PromptShot은 Chrome 확장 프로그램으로, 설치 후 브라우저 위에서 직접 동작한다. 외부 앱 전환 없이 캡처부터 LLM 붙여넣기까지 한 흐름으로 이어진다.
1단계: 확장 프로그램 설치
Chrome 웹 스토어에서 PromptShot을 설치한다. 설치가 완료되면 주소창 오른쪽 퍼즐 아이콘 영역에 PromptShot 아이콘이 생긴다.
2단계: 영역 캡처 시작 (Alt+Shift+S)
캡처하고 싶은 페이지에서 Alt+Shift+S를 누른다. 커서가 십자선으로 바뀌고 드래그 모드가 활성화된다. 마우스를 드래그해 캡처할 영역을 선택하면 된다. 버튼 하나, 카드 컴포넌트 하나처럼 정확히 문제가 있는 부분만 잡는 것이 핵심이다.
3단계: 캡처 형식 선택 (Alt+1 또는 Alt+2)
영역을 드래그한 뒤 두 가지 형식 중 하나를 고른다.
| 단축키 | 복사 내용 | 적합한 상황 |
|---|---|---|
Alt+1 |
PNG 이미지만 클립보드에 복사 | 이미지를 별도 파일로 저장하거나 GitHub 이슈에 첨부할 때 |
Alt+2 |
LLM용 프롬프트 텍스트 + PNG 이미지를 함께 복사 | Cursor, ChatGPT, Claude에 바로 붙여넣을 때 |
AI 코딩 질문 목적이라면 Alt+2가 기본이다. 화면에 보이는 영역 이미지와 함께 "이 화면의 UI를 분석해 주세요"처럼 미리 구성된 프롬프트 텍스트가 클립보드에 올라간다. LLM 창을 열고 Ctrl+V만 누르면 이미지와 질문이 동시에 붙여넣어진다.
4단계: LLM에 붙여넣고 추가 질문 작성
Cursor의 채팅 패널, ChatGPT 입력창, Claude 대화창 어디든 Ctrl+V로 붙여넣은 다음 구체적인 질문을 이어 쓴다. 예를 들어 이런 식이다.
[붙여넣은 이미지]
[자동 생성된 프롬프트]
추가 질문: 이 버튼이 모바일 375px 뷰포트에서 오른쪽으로 잘리는 이유와
수정 방법을 알려줘. 현재 Tailwind CSS를 쓰고 있어.
이미지가 컨텍스트를 담당하므로 "왼쪽 위에 있는 파란 버튼"처럼 위치를 글로 설명할 필요가 없다. LLM이 직접 본다.
효율적인 이미지 기반 코딩 질문 흐름에 대한 추가 가이드는 AI 코딩 프롬프트 작성법 에서 확인할 수 있다.
브라우저 로컬에서 처리가 완결되는 이유가 중요한가?
캡처된 이미지와 생성된 프롬프트는 PromptShot 서버로 전송되지 않는다. 모든 처리는 브라우저 내부에서 로컬로 이뤄진다. 페이지 콘텐츠, DOM 구조, 입력한 텍스트 중 어느 것도 외부로 나가지 않는다.
이 구조가 특히 중요한 경우가 있다.
- 사내 관리 페이지나 스테이징 환경처럼 외부에 공개되면 안 되는 화면을 캡처할 때
- 고객 데이터가 일부 보이는 대시보드에서 레이아웃 버그를 수정할 때
- 회사 정책상 화면 내용을 외부 서비스에 전송하기 어려운 환경
클립보드에 올라간 이미지는 사용자가 직접 LLM에 붙여넣는 순간에만 이동한다. 어디에 붙여넣을지는 사용자가 결정한다.
도구가 중간에서 데이터를 가져가지 않는다는 점은, 사내 보안 정책이 엄격한 팀에서도 부담 없이 쓸 수 있는 조건이 된다. 이 부분은 확장 프로그램을 선택할 때 꽤 현실적인 기준이다.
화면 어노테이션을 추가해 질문 정밀도를 높이는 방법
캡처한 이미지 위에 화살표, 형광펜, 텍스트를 얹어 문제 지점을 직접 표시할 수 있다. 별도 이미지 편집기 없이 캡처 직후 PromptShot 내 편집 화면에서 처리한다.
어노테이션이 유용한 시나리오는 분명하다. 여러 컴포넌트가 겹쳐 있거나, 스크롤 위치에 따라 요소가 달라지는 페이지라면 "여기"가 어디인지 이미지만으로 불분명할 수 있다. 화살표 하나로 그 애매함이 사라진다.
버그 리포트 용도라면 형광펜으로 문제 영역을 칠하고 LLM에 넘기면, 수정 제안을 받은 뒤 같은 이미지를 GitHub 이슈에 그대로 첨부할 수 있다. 캡처와 리포팅이 한 흐름에서 해결된다.
자주 묻는 질문
PromptShot이 캡처한 이미지는 어디에 저장되나요?
이미지는 서버에 업로드되지 않는다. 캡처 즉시 브라우저 클립보드에만 올라가고, 이후에는 사용자가 붙여넣는 위치로 이동한다. PromptShot 측에는 어떤 데이터도 전달되지 않는다.
전체 페이지 캡처와 영역 캡처 중 어느 쪽이 LLM 답변 품질에 유리한가요?
UI 수정 목적이라면 영역 캡처가 낫다. LLM에 넘어가는 이미지가 작고 명확할수록 관련 없는 요소에서 오는 노이즈가 줄어 답변이 집중된다. 전체 화면은 페이지 전체 구조를 파악해야 할 때 유효하다.
Cursor, ChatGPT, Claude 중 어떤 LLM과 함께 써야 하나요?
이미지를 지원하는 LLM이라면 어디든 동작한다. Cursor 채팅, ChatGPT-4o, Claude 3.5 Sonnet 이상에서 이미지 붙여넣기가 가능하다. 클립보드에서 Ctrl+V로 붙여넣으면 이미지와 프롬프트 텍스트가 함께 입력된다.
단축키를 커스터마이징할 수 있나요?
현재 기본 단축키는 Alt+Shift+S로 캡처 시작, Alt+1은 이미지만, Alt+2는 이미지와 프롬프트 동시 복사다. Chrome 확장 프로그램 단축키 설정 페이지(chrome://extensions/shortcuts)에서 변경할 수 있다.
사내 스테이징 환경처럼 인트라넷 페이지에서도 동작하나요?
동작한다. PromptShot은 브라우저에서 렌더링된 화면을 캡처하는 방식이므로, 공개 URL 여부와 관계없이 현재 탭에 로드된 페이지라면 어느 환경에서든 쓸 수 있다.
영역 드래그로 문제 컴포넌트만 잘라 LLM에 넘기는 방식은, 텍스트로 설명하는 루프를 줄이는 가장 직접적인 방법이다. 캡처부터 붙여넣기까지 모든 처리가 브라우저 로컬에서 완결되므로 민감한 화면도 부담 없이 쓸 수 있다. Chrome에 추가하고 다음 UI 버그 리포트에 바로 적용해 보자.
더 보기: https://chromewebstore.google.com/detail/hoeepglnndmnchkfpndccdjncpenoooc?utm_source=item-share-cb
Top comments (0)