스크린샷으로 UI 수정하기

"버튼이 오른쪽으로 삐져나와요"를 말로 설명하는 것보다 화면을 찍어 보여 주는 편이 빠릅니다. Claude Code는 터미널 도구이지만 클립보드의 이미지를 프롬프트에 붙여넣을 수 있고, 이미지 파일 경로를 주면 읽어서 봅니다. 이 글은 스크린샷을 담고 붙여넣는 법부터 UI 버그·디자인 시안·에러 화면에 쓰는 요령, 그리고 컨텍스트와 저작권 주의점까지 다룹니다. 앞 글의 되감기와 짝을 이루어, 화면으로 지시하고 틀리면 되감는 흐름이 완성됩니다.

핵심 요약

• 이미지는 드래그 앤 드롭, 클립보드 붙여넣기, 파일 경로 세 가지 방법으로 넣습니다.
• 붙여넣기 키는 Ctrl+V, macOS iTerm2에서는 Cmd+V도 되고, Windows와 WSL에서는 Alt+V가 준비되어 있습니다.
• 붙여넣으면 [Image #N] 칩이 생겨 "이미지 1의 오른쪽 버튼"처럼 위치를 지정해 말할 수 있습니다.
• 어느 부분인지, 기대 결과가 무엇인지, 기술 스택이 무엇인지 세 가지를 함께 적어야 정확한 수정이 나옵니다.
• 이미지는 토큰을 많이 쓰고, 큰 이미지는 축소되어 들어가며, 다른 사이트 디자인은 참고 범위를 지켜야 합니다.

터미널 도구가 왜 이미지를 읽을 수 있나

Claude 모델 자체가 이미지를 입력으로 받기 때문입니다. Claude Code는 붙여넣은 이미지를 프롬프트의 일부로 모델에 전달하고, Read 도구는 PNG·JPG 같은 파일을 원본 바이트가 아니라 모델이 볼 수 있는 시각 정보로 돌려줍니다. 공식 문서는 시각 작업에서 디자인 스크린샷을 붙여넣고 구현과 비교하도록 요청하라고 권하며, "Claude가 검증할 대상을 주라"는 원칙의 예시로 예상 UI 스크린샷을 듭니다. 우리 정지 규칙인 "증거는 실행 화면과 로그"와 같은 방향입니다. 화면은 지시의 재료이면서 검증의 기준이 됩니다.

스크린샷을 클립보드에 담으려면

• macOS: Cmd+Ctrl+Shift+4를 누르고 영역을 드래그하면 파일로 저장되지 않고 클립보드에만 담깁니다. 창 단위로 찍으려면 같은 조합 뒤에 Space를 누르고 창을 클릭합니다.
• Windows: Win+Shift+S로 캡처 도구를 열어 영역을 고르면 클립보드에 담깁니다.
• 브라우저 개발자 도구에서 특정 요소만 캡처하거나, 파일로 저장한 뒤 경로를 넘기는 방법도 있습니다.

전체 화면보다 문제 영역만 잘라 담는 것이 좋습니다. 이유는 뒤의 주의점에서 설명합니다.

Claude Code에 붙여넣으려면

세 가지 방법이 있습니다.

1. 드래그 앤 드롭: 이미지 파일을 Claude Code 창으로 끌어다 놓습니다.
2. 클립보드 붙여넣기: Ctrl+V를 누릅니다. macOS iTerm2에서는 Cmd+V도 동작합니다. Windows와 WSL에서는 터미널이 Ctrl+V를 가로채는 경우가 있어 Alt+V가 함께 바인딩되어 있습니다.
3. 파일 경로: "이 이미지를 분석해 줘: /Users/me/Desktop/bug.png"처럼 경로를 적으면 Read 도구로 읽습니다.

붙여넣으면 커서 위치에 [Image #N] 칩이 삽입되고, 한 메시지에 여러 장을 넣을 수 있습니다. Claude가 답변에서 [Image #1]을 언급하면 macOS는 Cmd+클릭, Windows와 Linux는 Ctrl+클릭으로 기본 뷰어에서 열어 확인합니다.

어떤 작업에 쓸 수 있나

UI 버그 수정

깨진 레이아웃, 겹친 글자, 잘린 버튼을 찍어 "이미지 1에서 접수 버튼이 카드 밖으로 나갑니다. 390px 폭에서 카드 안에 들어오게 최소 수정해 주세요"처럼 요청합니다. 수정 후에는 다시 찍어 붙여넣고 비교를 요청하면 검증까지 한 루프에 들어갑니다. 다만 모바일 잘림은 눈대중이 틀리기 쉬워, 우리는 Playwright로 뷰포트를 지정해 scrollWidth를 실측하는 것을 최종 판정으로 삼습니다.

디자인 시안 구현

피그마나 이미지 시안을 붙여넣고 "이 시안과 같은 구조의 HTML과 CSS를 만들어 줘"라고 합니다. 공식 문서의 예시 프롬프트도 "이 디자인 목업에 맞는 CSS 생성", "이 컴포넌트를 재현할 HTML 구조"입니다. 시안은 기준이지 정답이 아니므로 간격·색·폰트 수치를 함께 주면 결과가 안정됩니다.

에러 화면 해결

브라우저 콘솔 오류, 빌드 실패 화면, 앱 크래시 화면을 찍어 "이 오류의 원인은 무엇인가요"라고 묻습니다. 단, 텍스트로 복사할 수 있는 오류는 텍스트가 낫습니다. 이미지보다 토큰이 적고 검색이 정확합니다. 우리 5주차 교재의 원칙대로 "수정 전 원인 분석부터"를 붙이면 화면만 보고 성급히 고치는 일을 막습니다.

다른 사이트 UI 참고

"이 사이트의 카드 배치처럼 우리 과정 목록을 정렬해 줘"처럼 구조와 배치를 참고할 수 있습니다. 참고와 복제의 경계는 주의점에서 다룹니다.

더 정확한 수정을 받으려면

1. 어느 부분인지 구체적으로 지정한다

"이미지 1의 상단 오른쪽 신청 버튼"처럼 이미지 번호와 위치, 요소 이름을 적습니다. 가능하면 파일 경로도 함께 줍니다. "@app/(site)/trial/page.tsx의 세션 선택 카드"처럼 쓰면 검색 없이 바로 읽습니다.

2. 기대하는 결과를 명시한다

"카드 안에 들어오게", "세로로 쌓이게", "간격 16px" 같은 목표 상태를 적습니다. 무엇이 잘못됐는지만 말하면 Claude가 정답을 추측합니다. 우리 황금 문장의 "검증 기준" 자리입니다.

3. 기술 스택을 전한다

"Next.js App Router, CSS 파일은 style.css 하나, Tailwind 안 씀"처럼 스택과 제약을 적습니다. CLAUDE.md에 스택이 적혀 있으면 매번 반복할 필요는 없지만, 이미지 작업은 스타일 방식이 결과를 좌우하므로 한 줄이라도 다시 적는 편이 안전합니다.

주의할 점은 무엇인가

큰 이미지는 컨텍스트를 많이 쓴다

이미지 한 장이 텍스트 수천 토큰에 해당할 수 있습니다. Read 도구는 모델의 이미지 크기 제한에 맞춰 큰 이미지를 축소·재압축하고, 축소 후에도 500KB를 넘으면 품질을 낮춘 JPEG로 다시 인코딩합니다(v2.1.196 이상). 그래서 전체 화면을 그대로 넣으면 토큰은 많이 쓰면서 세부는 오히려 흐려집니다. 문제 영역만 잘라 넣고, 세밀한 픽셀이 중요하면 관심 영역을 먼저 잘라 달라고 요청합니다. 같은 세션에서 이미지를 여러 장 쓴 뒤에는 /context로 사용량을 확인하고 필요하면 /compact나 /clear로 정리합니다.

다른 사이트 디자인은 저작권을 배려한다

배치·흐름·정보 구조를 참고하는 것과 로고·일러스트·고유 아이콘·문구를 그대로 옮기는 것은 다릅니다. 참고 시안을 붙여넣을 때는 "구조만 참고하고 시각 자산은 새로 만들어 줘"처럼 범위를 적어 두는 것이 좋습니다. 우리 사이트를 만들 때도 벤치마크 대상의 구조를 참고하되 문장·이미지·데이터는 전부 우리 것으로 새로 썼습니다.

정리

• 이미지 입력은 드래그, Ctrl+V(iTerm2는 Cmd+V, Windows·WSL은 Alt+V), 파일 경로 세 가지입니다.
• [Image #N] 칩으로 위치를 지정해 말하고, 여러 장을 한 번에 넣을 수 있습니다.
• UI 버그, 시안 구현, 에러 화면, 타 사이트 참고에 쓰되 텍스트로 될 일은 텍스트로 합니다.
• 어느 부분, 기대 결과, 기술 스택 세 가지를 함께 적습니다.
• 잘라서 넣고, 세션이 무거워지면 정리하며, 타 사이트 자산은 구조만 참고합니다.

자주 묻는 질문