에이전트에게 스크린샷으로 과제 전달하기

이미지가 한 장 있습니다. 마음에 든 사이트의 화면이고, 내 페이지도 그렇게 보였으면 좋겠습니다. 말로는 그런 사이트를 설명하기 어렵습니다. "밝고 시원시원하고, 카드는 3열, 산세리프체, 제목은 크게" - 이미 이미지를 여는 것보다 길고, 그래도 정확하지는 않습니다. 여기서 당연한 질문이 나옵니다. 에이전트는 텍스트로 작업하는데, 이미지를 보긴 볼까요?

봅니다. 스크린샷은 요청에 바로 붙여 넣을 수 있고, 에이전트는 여러분의 설명이 아니라 이미지 자체를 통째로 받습니다. 다만 이미지는 과제의 절반밖에 채우지 못합니다. 어떻게 보여야 하는지는 말해 주지만 나머지에 대해서는 아무 말도 하지 않습니다. 나머지는 여러분이 채워야 하고, 무엇을 채워야 하는지는 아래에서 다룹니다.

1. 이미지를 에이전트에게 전달하는 방법

방법은 두 가지입니다.

• 이미지를 복사해서 입력창에 붙여넣기: Ctrl+V, Windows와 WSL에서는 Alt+V.
• @를 입력하고 제안 목록에서 경로를 선택.

입력창에 붙여넣으면 [Image #1] 표시가 나타납니다. 이후로는 여러분도 에이전트도 이 번호로 이미지를 가리킵니다. 두 번째 이미지는 [Image #2]가 되고, 그다음도 같은 식입니다. 실제로는 이런 모습입니다.

[Image #1] 이 스크린샷과 비슷하게 페이지를 만들어 주세요.

표시는 Claude Code가 붙이는 것이지 여러분이 직접 입력하는 것이 아닙니다. 이미지 하나와 문장 하나로 이루어진 요청은 이런 모습이고, 이것만으로는 부족하지만 그 이야기는 뒤에서 다룹니다. 이미지가 이미 프로젝트 안에 있다면(예를 들어 디자이너가 준 시안이 img/ 폴더에 있다면) 두 번째 방법이 더 편합니다.

@img/reference.png index.html을 이 예시 스타일에 맞춰 조정해 주세요.

@를 입력하고 파일 이름을 치기 시작하면 Claude Code가 경로를 채워 줍니다. 이렇게 넣은 이미지는 다시 참조하기 쉽습니다. 다음 요청에서 다시 붙여넣을 필요 없이 @img/reference.png라고만 쓰면 됩니다. 프로젝트 밖에 있는 파일도 전체 경로로 지정할 수 있습니다.

터미널이 Ctrl+V를 다른 용도로 가로챈다면 Alt+V가 대안입니다. 형식은 흔히 쓰는 것이면 됩니다: PNG, JPEG, WebP, 그리고 GIF도 되는데, 애니메이션이면 에이전트에게는 첫 프레임만 전달됩니다. 휴대폰 스크린샷도 괜찮습니다. 화면을 카메라로 찍은 사진은 그보다 못합니다. 빛 반사와 기울어짐 때문에 잘못 읽히는 부분이 생깁니다.

그리고 순서가 있습니다. 이미지가 먼저, 말은 그다음입니다. 에이전트도 이 순서일 때 더 잘 작동하고, 여러분에게도 먼저 보여 주고 나서 설명하는 편이 자연스럽습니다.

2. 에이전트가 이미지에서 무엇을 보는가

이미지 자체를 봅니다, 설명이 아니라요. 큰 스크린샷은 전송 전에 축소되기 때문에, 여러분 화면에서는 작은 것이 에이전트에게는 뭉개져 보일 수 있습니다. 큰 것은 확실하게 가져갑니다. 어떤 블록이 위에서 아래로 어떤 순서로 있는지, 그 비율, 페이지가 밝은지 어두운지와 강조 색이 무엇인지, 읽을 수 있는 텍스트, 전체적인 느낌(빽빽한지 여백이 많은지, 모서리가 각졌는지 둥근지).

에이전트가 여러분과 같은 곳을 보고 있는지 확인하는 간단한 방법이 있습니다. 수정하기 전에 아무것도 바꾸지 말고 예시를 그대로 설명해 달라고 해 보세요. 1분이면 됩니다. 답변은 대략 이런 모습입니다.

밝은 페이지. 위쪽에 좁은 헤더가 있고, 왼쪽에 사이트 이름, 오른쪽에 링크 세 개.
그 아래 두 줄짜리 큰 제목과 짧은 문단.
그다음 같은 너비의 카드 세 개가 한 줄로, 위에 이미지, 아래에 텍스트.
강조 색은 진한 파란색 하나: 헤더의 버튼과 밑줄.
블록 사이에 여백이 많고, 모서리는 둥글고, 그림자는 거의 없음.

여러분의 예시에는 그 예시만의 설명이 나올 테고, 거기에는 색상 코드나 "여백 약 24픽셀", 폰트 이름 같은 것도 충분히 나올 수 있습니다. 이건 눈대중이지 스포이트나 자로 잰 값이 아닙니다. 이런 숫자는 예시 옆에 놓고 확인하는 것이지, 측정값으로 받아들이면 안 됩니다. 첫 시도는 맞는 방향을 잡아 줄 뿐 완전히 똑같지는 않습니다. 이건 에이전트의 실수가 아니라 이미지 자체의 성질이고, 왜 그런지는 아래에서 보겠습니다.

3. 이미지에 없는 것

24픽셀 여백을 에이전트는 "약 24"라고 하면서 3분의 1 정도 틀릴 수 있고, 색상 코드는 비슷한 것을 내놓고, 폰트는 성격이 가까운 것을 고릅니다. 호버, 클릭, 애니메이션, 다른 페이지, 모바일 화면은 스크린샷에 없으니 말해 주기 전까지는 에이전트도 알 수 없습니다.

모바일 화면은 따로 짚을 부분입니다. 스크린샷은 한 가지 화면 너비에서 찍은 것이고, 에이전트는 그 너비만 봅니다. 모바일 화면이 중요하고 예시가 링크로 열린다면 휴대폰에서도 따로 찍으세요. 스크린샷 두 장, 표시 두 개입니다. 두 번째 스크린샷이 없으면 좁은 화면에 대해서는 말로 설명해야 하고, 결과는 예시가 아니라 그 설명을 따라갑니다.

4. 말로 채워야 할 것

이미지는 "어떻게 보여야 하는지"라는 질문에는 답하지만, 나머지 네 가지 질문에는 답하지 않습니다. 여러분이 할 일은 예시를 주고 그걸로 무엇을 할지 말해 주는 것입니다. 네 줄이면 되고, 나중에 결과를 확인할 때도 이 네 줄을 기준으로 삼습니다.

예시에서 가장 중요한 것. 색깔인가요? 카드 그리드인가요? 헤더인가요? 폰트의 성격인가요? 이걸 말해 주지 않으면 에이전트는 전부 다 조금씩 평균적으로 가져가고, 평균은 대체로 원하는 결과가 아닙니다. 이 줄에 쓸 말은 이미 있습니다. 앞서 에이전트가 예시를 설명했던 내용에서 가져오면 됩니다.

내 쪽에서 지켜야 할 것. 텍스트, 페이지 구조, 링크, 내 이미지. 이걸 말해 주지 않으면 에이전트가 제목을 예시에 맞춰 바꿔 버릴 수도 있습니다. 예시에는 다른 제목이 있었으니까요.

따라 하지 말아야 할 것. 로고, 남의 텍스트, 상품, 사진. 예시는 스타일이지 내용이 아닙니다.

범위. 페이지 하나, 수정은 index.html과 style.css에서만, 라이브러리나 빌드 없이. 그리고 건드리면 안 되는 것.

이미지 옆에 네 줄이나 적는 건 번거로워 보입니다. 이 네 줄이 없으면 결과는 예쁘게 나오되 원하던 것은 아니고, 다시 고치는 데 이 네 줄보다 더 오래 걸립니다.

5. 요청 하나로 전부 담기

이미지가 먼저, 그다음 네 줄입니다.

[Image #1] 내 페이지를 이 예시 스타일에 맞춰 조정해 주세요.
가장 중요한 건: 밝은 색조, 카드 3열, 세리프 없는 큰 제목.
텍스트, 구조, 내 이미지는 그대로 유지해 주세요.
로고, 사진, 예시의 텍스트는 가져오지 마세요.
index.html과 style.css만 수정하고, 라이브러리는 쓰지 마세요.

이미지 뒤의 네 줄이 바로 이미지에 없던 그 네 가지입니다.

답변으로 에이전트는 보통 예시에서 무엇을 가져왔는지 나열하고 파일을 수정합니다. 첫 결과는 방향이지 복사본이 아닙니다. 그다음은 말로 짧게 다듬으면 됩니다. 예시는 이미 대화 안에 있으니 이미지를 다시 붙일 필요는 없습니다.

카드를 예시에 더 가깝게: 그림자는 더 부드럽게, 둥글기는 더 크게, 카드 사이 여백은 더 많이.

에이전트가 "완료했습니다"라고 하면 예시와 여러분의 페이지를 나란히 열어 놓고 네 줄 기준으로 확인하세요. 결과가 예시와 전체적으로 많이 다르다면 같은 이미지로 같은 요청을 반복하지 말고, 가장 어긋난 것 하나만 짚어서 하나씩 고치세요. "이미지대로 만들었습니다"라는 보고는, 아무리 자신 있게 말해도 확인이 아닙니다.

6. 기억할 것

• 이미지는 모습을 정하고, 말은 범위를 정합니다. 둘 중 하나만 있으면 결과가 "이게 아닌데"가 되거나 시간이 오래 걸립니다.
• 에이전트는 이미지에서 큰 것을 가져갑니다. 구조, 비율, 색조, 전체적인 느낌. 세부와 동작은 여러분 몫으로 남습니다.
• 첫 시도는 방향입니다. 이후 다듬기는 짧게 하면 됩니다. 예시가 이미 대화 안에 있으니까요.
• 이미지는 예시로만 쓸모 있는 게 아닙니다. 설명이 이미지보다 더 길어질 것 같은 곳이면 이미지를 넘겨주세요.

"이거랑 똑같이 만들어 줘"는 여전히 좋은 시작입니다. 이게 좋은 과제가 되는 건 네 줄을 더하고 결과를 예시 옆에 놓고 한 번 확인한 다음입니다.

단축키와 이미지 표시 방식은 Claude Code 새 버전에서 달라질 수 있습니다. 전달 방법과 에이전트가 볼 수 있는 범위는 버전과 무관합니다.