Claude 컴퓨터 사용으로 브라우저 화면을 캡처해 매뉴얼 완성하기

어떤 문제를 해결하나 link

매뉴얼 글은 다 써 놨는데 캡처가 없어서 못 올리는 경우가 많습니다. 캡처는 단순 작업이지만 손이 많이 갑니다 — 화면마다 ⌘⇧4로 찍고, 탭줄·북마크바를 잘라내고, 이메일 주소를 가리고, 파일명을 본문에 맞춰 바꾸고, 폴더에 넣고, 커밋합니다. 다섯 장이면 15분은 쉽게 갑니다.

이 사례는 그 과정을 Claude Code 데스크톱 앱과의 대화로 대체합니다. 사용자는 화면을 원하는 상태로 맞춰 놓고 “찍어” 라고만 말하고, 캡처·잘라내기·마스킹·저장·커밋은 Claude가 합니다. Gmail 행사 등록 메일을 Ask Gemini로 구글 캘린더에 등록하기 사례의 캡처 5장이 실제로 이 방법으로 만들어졌습니다.

사전 준비 link

• Claude Code 데스크톱 앱(macOS). 터미널 CLI가 아니라 앱이어야 화면 기록 권한을 앱 단위로 줄 수 있습니다
• 대상 화면을 띄운 Chrome. 사이드 패널(Ask Gemini 등)까지 찍으려면 Chrome 확장 캡처로는 안 되고, OS 수준 캡처가 필요합니다
• 화면 기록 권한 — 시스템 설정에서 Claude에 줍니다 (2단계)
• 캡처를 넣을 매뉴얼 본문이 이미 있고, 각 단계가 어떤 파일명을 참조하는지 정해져 있을 것

단계별 사용법 link

1

캡처가 가능한지 먼저 묻는다

Claude Code에 이렇게 요청했습니다.

content_copy 입력 프롬프트

  첫 번째 케이스에 대해서 클로드의 컴퓨터 사용 기능을 이용해서 크롬 브라우저의 내용을 캡쳐해서 매뉴얼을 완료할 수 있을까? 이미 크롬 브라우저에 클로드 사용 가능하게 띄워 놓았어.
  

Claude는 매뉴얼 본문(index.md)과 필요한 이미지 목록(IMAGES.md)을 읽고, 어떤 화면이 몇 장 필요한지 파악한 뒤 캡처 방법을 시험합니다. 여기서 두 가지가 갈립니다.

• Chrome 확장(Claude in Chrome) 캡처 — 웹페이지 영역만 찍힙니다. 브라우저 UI인 사이드 패널은 안 들어갑니다
• macOS screencapture — 창 전체가 찍힙니다. 대신 앱에 화면 기록 권한이 있어야 합니다

사이드 패널이 핵심인 매뉴얼이라 후자로 갑니다. 처음 시도하면 권한이 없어 could not create image from rect 로 실패하고, Claude가 권한을 켜 달라고 요청합니다.

2

Claude에 화면 기록 권한을 준다

이 설정은 Claude가 대신 바꿀 수 없습니다. 직접 켜고 “권한 켰어. 다시 테스트해봐” 라고 알려 주면 됩니다.

권한이 붙으면 Claude는 Chrome 창 좌표를 AppleScript로 읽어 그 영역만 찍는 스크립트를 만들어 둡니다. 이후 캡처는 전부 이 한 줄로 돌아갑니다.

osascript -e 'tell application "Google Chrome" to activate'; sleep 0.8
B=$(osascript -e 'tell application "Google Chrome" to get bounds of front window')
IFS=', ' read x y x2 y2 <<< "$B"
screencapture -x -R$x,$y,$((x2-x)),$((y2-y)) raw/NAME.png

Chrome을 앞으로 올리는 줄이 필요한 이유: “찍어” 라고 입력하는 순간에는 Claude 앱이 맨 앞에 있기 때문입니다. 그대로 찍으면 Claude 앱 화면이 찍힙니다.

3

화면을 맞춰 놓고 ‘찍어’ 라고 한다

원본은 Chrome 창 전체(Retina 기준 3024×1788)입니다. 여기서 매뉴얼 각 단계에 맞는 영역을 잘라냅니다.

이 사례에서는 이미 등록까지 끝난 Gemini 대화 한 화면에 1~5단계 요소가 다 들어 있어서, 한 번 찍은 원본에서 다섯 장을 모두 잘라냈습니다. 단계마다 새로 찍을 필요가 없었습니다.

잘라내기와 가리기는 Pillow 몇 줄입니다. 좌표는 Claude가 원본을 보고 직접 잡습니다.

from PIL import Image
f = 3024/1500                      # 미리보기 좌표 → 원본 좌표 배율

def pixelate(img, box, k=14):      # 가릴 영역을 k배 줄였다 늘려 뭉갠다
    b = tuple(int(v*f) for v in box); r = img.crop(b)
    r = r.resize((r.width//k, r.height//k)).resize(r.size, Image.NEAREST)
    img.paste(r, b)

g = Image.open("raw/check.png")
pixelate(g, (1172, 762, 1342, 782))               # Sharing 줄의 이메일 주소
g.crop(tuple(int(v*f) for v in (843, 748, 1490, 878))).save("02-open-gemini.png")

가린 것: 프로필 아바타, 받은편지함 개수, Sharing "…" 줄의 이메일 주소. 잘라낸 것: 탭줄, 북마크바, 왼쪽 라벨 사이드바.

4

부족한 장면만 다시 찍어 교체한다

한 화면에서 잘라낸 04(확인 카드)는 이미 눌린 뒤라 Cancel / Add Event 버튼이 회색이었습니다. Claude가 이 점을 먼저 알려 주었고, Gemini 패널에서 새 대화로 카드까지만 다시 띄운 뒤 “다시 찍어” 라고 해서 그 한 장만 교체했습니다.

이때 두 번 헛발질이 있었습니다.

1. 같은 대화에 이어서 요청하니 Gemini가 확인 카드 없이 정보 카드만 냈다 → Claude가 “교체할 장면이 아니다” 라고 판단하고 넘어가지 않음
2. 패널이 스크롤되어 옛 카드가 보였다 → Claude가 “이전 대화가 보인다” 고 알려 줌

캡처 결과를 Claude가 매번 눈으로 확인하기 때문에, 엉뚱한 장면이 그대로 들어가는 일은 없습니다.

5

커밋·푸시까지 대화로 끝낸다

잘라낸 PNG는 매뉴얼 본문이 참조하는 파일명 그대로 유스케이스 폴더에 저장되고, Claude가 커밋 메시지에 무엇을 가렸는지를 적어 푸시합니다.

탭줄·북마크바·왼쪽 라벨 사이드바는 잘라냈고, 아바타·메일 개수·Sharing 줄의 이메일 주소는 픽셀화했다.

“완료하고 푸시했어?” 한 마디면 됩니다.

결과 link

캡처 5장 + 마스킹 + 배치 + 커밋에 사람이 한 일은 권한 켜기 한 번, 화면 맞추기 두 번, “찍어” 세 번입니다. 글은 이미 있었으니, 캡처 때문에 미뤄지던 매뉴얼이 15분 안에 배포됐습니다.

한 번 만든 캡처 스크립트는 세션 안에서 계속 살아 있어서, 이후 다른 매뉴얼도 “찍어” 만으로 이어 갈 수 있습니다.

주의사항 link

• Claude 앱에 화면 기록 권한을 주면 화면 전체가 Claude에 보입니다. 캡처 순간 열려 있는 다른 창·알림·탭 제목이 그대로 들어갑니다. 작업 중엔 필요한 창만 띄우고, 끝나면 권한을 끄는 것도 방법입니다.
• 가릴 것은 Claude에게 명시적으로 말하세요. 이 사례에서는 매뉴얼 폴더의 IMAGES.md에 “이메일 주소, 라벨명, 메일 개수, 북마크 바를 가릴 것” 이 적혀 있어서 Claude가 그대로 따랐습니다. 목록이 없으면 빠뜨릴 수 있습니다.
• 올리기 전에 최종 PNG를 직접 한 번 보세요. 픽셀화 영역이 한두 글자 비켜 가면 이메일 끝 글자가 남습니다. 실제로 첫 시도에서 …m - Gmail 처럼 마지막 글자가 남아 좌표를 다시 잡았습니다.
• Chrome 확장 캡처와 OS 캡처는 용도가 다릅니다. 웹페이지만 필요하면 확장 캡처(save_to_disk)가 권한 없이 되고, 탭줄·북마크바가 애초에 안 들어가서 더 안전합니다. 사이드 패널·브라우저 UI가 필요할 때만 OS 캡처를 씁니다.
• Claude는 브라우저 UI(사이드 패널)를 조작하지 못합니다. 캡처만 합니다. 패널을 열고, 새 대화를 만들고, 프롬프트를 보내는 건 사람이 합니다. 그래서 “화면 맞춰 놓고 → 찍어” 순서가 됩니다.
• 접근성 권한(AppleScript System Events)은 없어도 됩니다. Chrome은 자체 AppleScript 사전이 있어 창 좌표를 그냥 읽을 수 있습니다. Electron 앱(Claude 자체 등)은 안 되므로 그럴 땐 전체 화면을 찍고 잘라냅니다.

응용 link

• 사내 시스템 사용 매뉴얼 — 로그인 후 화면을 사람이 맞추고, Claude가 찍고 계정명·사번을 가려서 넣기
• 설정 변경 가이드 — 시스템 설정 창을 열어 두고 단계마다 “찍어”
• 릴리스 노트의 Before / After — 두 창을 나란히 띄우고 한 장에 찍은 뒤 두 영역으로 잘라내기
• 이 사이트의 모든 유스케이스 캡처 — 글을 먼저 쓰고 캡처는 마지막에 이 방법으로 몰아서 처리