스크린샷으로 UI 수정하기

Claude Code의 이미지 입력은 클립보드에 담은 스크린샷을 프롬프트에 붙여넣어 그대로 전달하는 기능입니다. "버튼 위치가 어긋났다", "텍스트가 잘렸다" 같은 시각적 문제는 말로 정확히 설명하기가 의외로 어려운데, 이미지를 보여주면 한 번에 전달됩니다.

핵심 요약

• Claude Code는 스크린샷을 입력으로 받아들여 내용을 해석하고 코드 수정까지 합니다.
• 클립보드의 이미지를 프롬프트에 붙여넣기(Mac 은 Ctrl+V, Windows 는 Alt+V 가 기본)만 하면 됩니다.
• UI 버그 수정, 디자인 시안 구현, 에러 화면 해결, 다른 사이트 UI 참고에 활용할 수 있습니다.
• 구체적인 설명·기대 결과·기술 스택을 함께 적으면 더 정확한 수정을 받습니다.
• 큰 이미지는 컨텍스트를 소비하므로 필요한 부분만 잘라서 보냅니다.

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

Claude Code는 멀티모달 AI인 Claude를 기반으로 하기 때문에 이미지를 이해하는 능력이 있습니다. 터미널에서 동작하는 CLI 도구이면서도 스크린샷을 입력으로 받아 내용을 해석하고, 그 결과를 바탕으로 코드를 고친다는 점이 특징입니다.

일반적인 CLI 도구에서는 "이미지를 보여주는" 조작 자체가 어렵습니다. Claude Code에서는 클립보드에서 직접 붙여넣을 수 있어, 말로 설명하기 힘든 UI 문제도 시각적으로 전달할 수 있습니다. Claude Code의 기본 특징은 Claude Code의 기초에서 다룹니다.

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

파일로 저장하지 않고 클립보드에 바로 복사되는 단축키를 쓰면 곧장 Claude Code에 붙여넣을 수 있습니다.

Mac 에서는 단축키를 누르면 영역 선택 커서가 나타납니다. 수정하고 싶은 UI 부분만 드래그해 선택하세요.

Claude Code에 붙여넣으려면

스크린샷을 찍었으면 Claude Code 프롬프트에서 붙여넣습니다. 터미널마다 단축키가 조금 다릅니다.

붙여넣으면 입력란에 [Image #1] 이 표시됩니다. 이 표시가 보이면 이미지가 입력으로 인식된 것입니다.

──────────────────────────────────────────────
> [Image #1]
──────────────────────────────────────────────

이후 텍스트로 지시를 덧붙이고 Enter 를 누르기만 하면 되니 조작은 아주 단순합니다.

어떤 작업에 쓸 수 있나

UI 버그 수정

가장 흔한 사용법은 UI 버그를 보여주고 수정을 부탁하는 것입니다.

[Image #1]
이 버튼의 텍스트가 잘려 있습니다. 수정해 주세요.

"버튼 텍스트가 잘렸다"는 상태를 이미지로 정확히 전할 수 있어, 말로만 설명할 때보다 훨씬 구체적인 수정을 받기 쉽습니다. 코드 변경의 기본 흐름은 첫 세션 실전을 참고하세요.

디자인 시안 구현

디자이너에게 받은 시안을 보여주고 구현을 부탁할 수 있습니다.

[Image #1]
이 디자인과 같은 레이아웃을 구현해 주세요.
Tailwind CSS를 쓰고 있습니다.

Claude Code는 여백, 배색, 폰트 크기 등을 이미지에서 읽어내 그에 가까운 코드를 생성합니다. 다만 완벽한 재현은 어려운 경우도 있으니, 픽셀 단위 정밀도가 필요하면 수치를 명시적으로 지정하세요.

에러 화면 해결

에러 메시지가 표시된 화면을 그대로 보여주고 해결책을 요청할 수도 있습니다.

[Image #1]
이 에러를 해결해 주세요.

에러 메시지뿐 아니라 에러가 난 화면 전체의 맥락이 함께 전달되므로 더 적절한 해결책을 받기 쉽습니다.

다른 사이트 UI 참고

참고하고 싶은 웹사이트의 UI 를 보여주고 유사한 레이아웃을 구현하게 할 수도 있습니다.

[Image #1]
이런 카드형 레이아웃을 구현해 주세요.

픽셀 단위로 정확히 재현하는 건 어렵지만, 대략적인 레이아웃을 참고하는 용도로는 충분합니다.

더 정확한 수정을 받으려면

스크린샷만 붙여넣어도 동작하지만, 세 가지를 덧붙이면 결과가 눈에 띄게 좋아집니다.

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

여러 요소가 있는 화면에서는 어느 부분을 고치고 싶은지 명확히 전하는 것이 중요합니다.

[Image #1]
빨간 테두리로 감싼 부분의 마진을 20px로 변경해 주세요.

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

현재의 문제점뿐 아니라 원하는 결과까지 적으면 의도한 수정을 받기 쉽습니다.

[Image #1]
현재: 텍스트가 1줄로 표시됨
기대: 3줄로 표시하고, 넘치면 말줄임표(...)를 표시

3. 기술 스택을 전한다

Claude Code는 프로젝트 구조에서 기술 스택을 추측할 수 있지만, 명시하면 그에 맞는 코드가 더 확실하게 나옵니다.

[Image #1]
이 레이아웃을 수정해 주세요.
기술 스택: Next.js, Tailwind CSS

주의할 점은 무엇인가

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

큰 이미지는 컨텍스트 윈도우를 많이 소비합니다. 화면 전체가 아니라 필요한 부분만 잘라내면 소비를 줄일 수 있고, 수정 위치를 특정하기도 쉬워집니다.

사람이 고친다고 해도 큰 이미지를 대충 건네받는 것보다 수정 위치가 찍힌 이미지를 받는 쪽이 정확한 것과 같습니다. 컨텍스트 소비의 전체 그림은 컨텍스트 윈도우 관리를 참고하세요.

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

다른 사이트의 디자인을 참고할 때는 다음을 지키는 것이 좋습니다.

• 로고나 아이콘을 그대로 쓰지 않습니다.
• 레이아웃 패턴을 참고하는 수준에 그칩니다.
• 필요에 따라 오리지널 디자인으로 조정합니다.

정리

• Claude Code는 스크린샷을 입력으로 받아 UI 문제를 시각적으로 전달받을 수 있습니다.
• 클립보드에 담고(Mac Cmd+Ctrl+Shift+4, Windows Win+Shift+S) 프롬프트에 붙여넣으면 [Image #1] 로 인식됩니다.
• 구체적인 위치, 기대 결과, 기술 스택을 덧붙이면 정확도가 올라갑니다.
• 큰 이미지는 컨텍스트를 소비하니 필요한 부분만 잘라서 보내고, 다른 사이트 참고 시 저작권을 배려합니다.
• 브라우저에서 쓰는 Claude Code on the Web에서도 같은 이미지 입력 기능을 쓸 수 있습니다.