[Claude Code 스킬] 이미지 입력(Vision) — 스크린샷·목업·다이어그램을 그대로 읽기 | DAKER 커뮤니티
무엇
Claude Code의 이미지 입력(Vision)은 스크린샷 한 장, 디자인 목업, 아키텍처 다이어그램, 깨진 화면 캡처를 텍스트로 옮겨 적지 않고 그대로 모델에게 건네는 기능입니다. Claude Code는 챗봇 버전과 똑같은 멀티모달 모델을 쓰기 때문에, 터미널 안에서도 사진을 "읽고" 그 의미를 코드로 연결합니다.
비유하자면, 정비공에게 "엔진에서 달그락 소리가 나고 왼쪽 위에서 연기가…"라고 말로 설명하는 대신 그냥 엔진룸을 열어 보여주는 것과 같습니다. 픽셀이 곧 사양서가 됩니다.
언제 쓰나
다음과 같이 "말로 옮기기 번거로운 시각 정보"가 있을 때 진가를 발휘합니다.
UI 버그 재현: 레이아웃이 깨진 화면을 캡처해 보여주면, 어떤 CSS/컴포넌트가 원인인지 추적합니다.
에러 화면 그대로: 스택트레이스 브라우저 콘솔, 빌드 실패 메시지를 캡처로 던지면 타이핑 없이 진단합니다.
디자인 -> 코드: 피그마 목업/와이어프레임을 입력해 HTML/React로 1차 구현을 받습니다.
다이어그램 이해: 아키텍처 그림, ERD, 시퀀스 다이어그램을 읽고 그 구조에 맞춰 코드를 작성합니다.
차트/표 읽기: 그래프나 표 이미지에서 수치를 뽑아 분석에 사용합니다.
사용법
입력 방법은 세 가지이고, 견고함은 정반대 순서입니다(아래 그림).
# 1) 클립보드 붙여넣기 (macOS)
# 스크린샷을 클립보드로 캡처: Cmd+Ctrl+Shift+4
# Claude Code 입력창에서 붙여넣기: Ctrl+V <-- 핵심! Cmd+V 아님
# (Cmd+V는 터미널 앱이 가로채서 파일경로만 붙는 경우가 많음)
# 2) 드래그 앤 드롭
# Finder에서 이미지 파일을 Claude Code 터미널 창으로 끌어다 놓기
# 3) 파일 경로 직접 참조 (가장 견고 - OS/터미널 무관)
이 화면이 왜 깨졌는지 봐줘: /Users/me/Desktop/bug.png
# 여러 장도 가능 (예: 변경 전/후 비교)
@before.png 와 @after.png 를 비교해서 어떤 스타일이 바뀌었는지 알려줘
지원 형식은 PNG.JPEG.GIF.WebP이며, 한 번에 여러 장을 함께 넣을 수 있습니다. 클립보드 붙여넣기는 플랫폼마다 신뢰도가 다릅니다.
팁
막히면 '경로'로: 클립보드 paste가 안 먹으면(특히 Windows.일부 Linux 터미널) 고민 말고 파일 경로 참조로 바꾸세요. 어디서나 똑같이 동작합니다.
Cmd+V 함정: macOS에서 가장 흔한 실수가 Cmd+V입니다. 터미널이 먼저 가로챕니다. Ctrl+V를 쓰세요.
한 장에 한 문제: 화면 전체를 통째로 주기보다, 문제 영역만 잘라 주면 모델이 핵심에 집중해 정확도가 올라갑니다.