코딩 에이전트 활용 시 텍스트 설명 대신 스크린샷 마킹을 사용하는 팁

실용적 조언

스크린샷을 찍을 때 초록색(유지/강조), 빨간색(삭제), 파란색 화살표(이동) 등 자신만의 색상 규칙을 정해 AI에게 미리 알려주세요.
프로젝트 루트에 'screenshots' 폴더를 만들고 에이전트의 시스템 프롬프트나 초기 지시에 해당 폴더를 감시하도록 설정하세요.

섹션별 상세

코딩 에이전트에게 시각적 정보를 제공하기 위해 프로젝트 폴더 내에 드롭박스(공유 폴더)를 생성하여 활용했다. 사용자는 Gemini CLI나 Claude Code에게 해당 폴더의 스크린샷을 참조하도록 지시함으로써 텍스트 입력의 번거로움을 줄였다. 이러한 방식은 에이전트가 현재 UI 상태를 직접 확인하고 사용자의 의도를 파악하게 함으로써 작업 속도를 높였다.

스크린샷 위에 색상별로 의미를 부여하여 지시하는 멀티모달 프롬프팅 기법을 적용했다. 초록색은 강조, 파란색 화살표는 이동 방향, 빨간색은 삭제를 의미하도록 약속하고 AI에게 이를 해석하도록 명령했다. 텍스트로 'A 요소를 B 위치로 옮기고 C를 지워줘'라고 설명하는 것보다 이미지 내 시각적 포인터가 모델의 추론 정확도를 향상시켰다.

복잡한 UI 변경이나 레이아웃 수정 작업에서 텍스트 기반 지시보다 시각적 마킹이 더 높은 정확도를 보였다. 에이전트가 코드 구조와 시각적 결과물을 동시에 매핑하여 이해하기 때문에 오작동 확률이 낮아졌다. 실무적으로는 긴 프롬프트를 작성하는 시간을 절약하고 결과물의 재현성을 높이는 효과가 확인됐다.

용어 해설

코딩 에이전트(Coding Agent): — 사용자의 자연어 지시를 받아 코드를 생성, 수정, 실행하는 자율 AI 도구입니다. Gemini CLI나 Claude Code와 같은 도구는 프로젝트 파일 구조를 이해하고 직접적인 코드 조작을 수행하여 개발 생산성을 높이는 역할을 합니다.
멀티모달 입력(Multimodal Input): — 텍스트뿐만 아니라 이미지, 오디오, 비디오 등 다양한 형태의 데이터를 AI 모델의 입력값으로 사용하는 방식입니다. 이 게시물에서는 스크린샷이라는 시각적 정보를 코딩 에이전트의 지시 수단으로 활용하여 복잡한 텍스트 설명을 대체합니다.
시각적 프롬프팅(Visual Prompting): — 이미지 위에 선, 화살표, 색상 표시 등을 추가하여 AI가 주목해야 할 특정 영역이나 의도를 명확히 전달하는 기법입니다. 텍스트로 설명하기 어려운 UI 변경이나 위치 이동 지시를 직관적으로 수행할 수 있게 돕습니다.

언급된 도구

Gemini CLI추천

구글의 Gemini 모델을 기반으로 한 터미널용 코딩 에이전트

Claude Code추천

Anthropic의 Claude 모델을 활용한 자율 코딩 도구

Codex CLI추천

OpenAI Codex 기반의 명령줄 코딩 보조 도구