AI 코딩 프롬프트에서 텍스트 설명 대신 시각 맥락을 주입하는 법

웹 화면 상태를 말로 설명하다 보면 어느 순간 막힌다. "왼쪽 사이드바의 세 번째 메뉴가 hover 상태일 때 배경색이 이상하게 적용됩니다"라는 문장을 읽은 AI가 정확한 컴포넌트를 파악할 확률은 낮다. PromptShot의 영역 캡처를 쓰면 그 설명 자체가 필요 없어진다. 문제가 있는 영역을 드래그해 캡처하면 PNG 이미지와 LLM용 프롬프트 텍스트가 클립보드에 담기고, 그것을 Claude나 ChatGPT에 붙여넣으면 AI가 화면을 직접 본 상태에서 응답한다.

AI 코딩에서 텍스트 프롬프트가 놓치는 것

텍스트만으로 UI 상태를 전달하는 방식에는 구조적인 한계가 있다. 개발자가 아무리 정밀하게 묘사해도 AI는 그 묘사에서 추론할 뿐이고, 묘사가 조금만 빗나가면 전혀 다른 맥락에서 답변이 나온다.

예를 들어 레이아웃 깨짐 버그를 설명한다고 치자. "flex 컨테이너 안에서 자식 요소가 줄바꿈됩니다"라는 설명은 정확해 보이지만, 실제로 어떤 요소가 어느 위치에서 깨지는지는 텍스트로 전달하기 어렵다. 중첩된 컴포넌트 구조, z-index 충돌, 조건부 렌더링 상태처럼 화면을 봐야 즉시 파악되는 정보들이 텍스트 프롬프트에서는 설명 단계에서 이미 손실된다.

이 문제는 프롬프트를 더 정교하게 쓴다고 해결되지 않는다. 텍스트 설명의 정밀도를 높이는 데 쓰는 시간이 쌓일수록, 오히려 그 시간에 다음 수정 사이클을 돌릴 수 있었다는 사실을 깨닫게 된다.

시각 정보를 프롬프트에 직접 포함하는 방식, 즉 스크린샷을 캡처해서 이미지로 붙여넣는 방식이 이 흐름을 바꾼다. AI는 텍스트 설명을 해석하는 대신 화면을 본다.

프롬프트 방식 비교: 텍스트 설명 대 시각 맥락 주입

항목	텍스트 설명 방식	시각 맥락 주입 방식
맥락 전달 방법	개발자가 직접 묘사	캡처 이미지로 직접 전달
AI 해석 정확도	묘사 품질에 의존	화면 상태 그대로 반영
준비 시간	설명 작성 시간 필요	영역 드래그 한 번
적합한 상황	로직·API 관련 질문	UI 버그, 레이아웃, 디자인 핸드오프
반복 수정 흐름	설명 수정 후 재시도	캡처 교체 후 바로 재시도

모든 프롬프트를 이미지로 대체해야 한다는 말이 아니다. 로직 문제나 API 설계처럼 코드 자체가 맥락인 경우에는 텍스트 프롬프트가 여전히 적합하다. 시각 맥락 주입이 유용한 지점은 UI 상태, 컴포넌트 배치, 렌더링 결과처럼 화면을 봐야 빠르게 파악되는 상황이다.

PromptShot으로 화면 영역을 캡처해 클립보드에 담는 법

PromptShot은 Chrome 확장 프로그램으로 설치된다. 설치 후 전체 흐름은 세 단계다.

1단계: 캡처 모드 시작

Alt+Shift+S를 누르면 현재 탭 위에 캡처 오버레이가 활성화된다. 마우스 커서가 십자선으로 바뀌면서 영역 선택 대기 상태가 된다.

2단계: 문제 영역 드래그

페이지 전체를 캡처할 필요 없다. 버그가 발생한 컴포넌트, 레이아웃이 깨진 섹션, 또는 디자인 검토가 필요한 특정 영역만 드래그해서 선택한다. 선택 영역이 확정되면 PromptShot이 해당 PNG를 생성한다.

3단계: 클립보드 복사 방식 선택

여기서 두 가지 옵션이 나뉜다.

Alt+1: PNG 이미지만 클립보드에 복사
Alt+2: PNG 이미지 + LLM용 프롬프트 텍스트를 함께 클립보드에 복사

버그 리포트나 AI 코딩 도구에 붙여넣는 경우라면 Alt+2가 더 유용하다. 이미지와 함께 "다음 스크린샷은 [현재 URL]의 특정 영역입니다. 이 화면에서 무엇이 문제인지 분석해주세요."와 같은 컨텍스트 텍스트가 자동으로 구성되어 클립보드에 담긴다.

전체 처리는 브라우저 안에서 로컬로 이루어진다. 캡처된 이미지나 페이지 내용이 외부 서버로 전송되지 않는다.

Claude와 ChatGPT에 붙여넣어 프롬프트 흐름을 완성하는 법

캡처가 클립보드에 담긴 상태에서 Claude나 ChatGPT 입력창에 Ctrl+V(Mac은 Cmd+V)로 붙여넣으면 이미지와 텍스트가 함께 입력된다. 여기서부터가 실제 AI 코딩 흐름이다.

첫 번째 프롬프트: 문제 확인

[캡처 이미지 붙여넣기]
이 화면에서 사이드바 메뉴 항목의 hover 상태가 적용되지 않는 영역을 찾아주세요.
관련 CSS 선택자 구조를 추정해서 수정 방향을 제안해주세요.

AI가 이미지를 보고 정확히 어느 요소인지 특정하면, 이후 대화는 그 맥락 위에서 이어진다. 텍스트로 설명했을 때 발생하던 "어떤 요소를 말씀하시는 건가요?" 같은 재확인 루프가 없어진다.

두 번째 프롬프트: 수정 후 재캡처

코드를 수정하고 브라우저를 새로고침한 다음, 같은 영역을 다시 Alt+Shift+S로 캡처한다. 이 새 캡처를 다음 프롬프트에 붙여넣으면 AI가 이전 상태와 현재 상태를 비교해 추가 수정 사항을 짚어줄 수 있다.

[수정 후 캡처 이미지 붙여넣기]
이전에 제안한 수정을 적용했습니다. hover 상태가 개선되었는지 확인하고,
아직 남은 문제가 있다면 지적해주세요.

이 흐름이 AI 코딩에서 시각 맥락 주입의 핵심이다. 텍스트 설명을 반복적으로 고쳐 쓰는 대신, 캡처를 교체하면서 대화가 진행된다. Cursor나 Copilot Chat처럼 인라인 채팅을 지원하는 환경에서도 동일하게 클립보드의 이미지를 붙여넣어 같은 방식으로 적용할 수 있다.

이 흐름이 잘 맞는 상황과 그렇지 않은 상황

UI 작업 전반에 쓸 수 있지만, 특히 효과적인 상황이 있다.

레이아웃 버그 디버깅: 어느 요소가 어떤 상태인지 화면으로 보여주는 것이 설명보다 빠르다.
디자인 핸드오프: 특정 컴포넌트 영역만 캡처해서 "이 컴포넌트를 React로 구현해주세요"라고 요청하면 AI가 시각 구조를 기반으로 코드를 생성한다.
버그 리포트 작성: 캡처에 펜이나 화살표로 표시하는 어노테이션 기능과 함께 쓰면 팀 내 버그 리포트 맥락도 이미지 한 장에 담긴다.

반면 로직 오류, 비동기 처리 문제, 백엔드 API 설계처럼 코드 자체가 맥락인 경우에는 이미지가 큰 역할을 하지 못한다. 이 경우에는 코드 스니펫을 직접 붙여넣는 텍스트 프롬프트가 더 적합하다.

두 방식을 상황에 따라 구분해서 쓰는 것이 실용적인 접근이다. 프롬프트 엔지니어링의 목표는 AI에게 가장 정확한 맥락을 가장 빠르게 전달하는 것이고, UI 관련 문제에서는 이미지가 그 역할을 한다.

자주 묻는 질문

PromptShot은 어떤 브라우저에서 동작하나요?

Chrome 및 Chromium 기반 브라우저(Edge, Brave 등)에서 설치해 사용할 수 있다. 캡처한 이미지와 프롬프트는 브라우저 로컬에서만 처리되며 외부로 전송되지 않는다.

전체 페이지를 캡처하지 않고 특정 영역만 캡처할 수 있나요?

Alt+Shift+S로 캡처 모드를 시작한 뒤 원하는 영역만 드래그해서 선택하면 된다. 페이지 전체 캡처가 아닌 컴포넌트 단위 영역 선택이 기본 동작이다.

Claude와 ChatGPT 외 다른 AI 도구에도 붙여넣을 수 있나요?

클립보드에 PNG로 담기기 때문에 이미지 첨부를 지원하는 AI 도구라면 어디서든 동일하게 붙여넣을 수 있다. Cursor의 인라인 채팅, Copilot Chat 등에서도 같은 방식으로 작동한다.

이미지와 함께 자동으로 생성되는 프롬프트 텍스트는 수정할 수 있나요?

Alt+2로 복사된 텍스트는 클립보드에서 바로 편집 가능하다. AI 입력창에 붙여넣은 뒤 전송 전에 텍스트 부분을 수정하거나 추가 지시를 덧붙이면 된다.

캡처 이미지에 화살표나 강조 표시를 추가할 수 있나요?

캡처 후 어노테이션 기능으로 펜, 형광펜, 화살표를 추가할 수 있다. 버그 리포트에서 특정 위치를 명확히 지정해야 할 때 유용하다.

텍스트 설명으로 UI 문제를 전달하는 데 쓰는 시간은 실제로 꽤 많다. PromptShot의 영역 캡처는 그 설명 단계를 드래그 한 번으로 대체하고, 이미지를 AI에게 직접 건네는 흐름을 만든다. AI 코딩 프롬프트 워크플로우에 대한 추가 내용도 참고할 수 있다. 실제로 써보려면 PromptShot을 방문해서 확장 프로그램을 설치하는 것이 가장 빠르다.