AI Usecases

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

Fri, 11 Sep 2026 00:00:00 +0900

어떤 문제를 해결하나

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

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

GitHub 커밋 활동을 API로 모아 리포트 만들기

Fri, 11 Sep 2026 00:00:00 +0900

어떤 문제를 해결하나

저장소가 40개를 넘어가면 “내가 요즘 뭘 얼마나 하고 있나” 를 GitHub 프로필 잔디만으로는 알 수 없습니다. 잔디는 커밋 수만 보여 주고, 그중 얼마가 매일 도는 자동화 파이프라인이고 얼마가 내 손인지, 어느 저장소에 시간이 쏠렸는지는 안 나옵니다.

Claude Code에 “내 GitHub 커밋 활동을 지난 12개월치 분석해서 리포트로 만들어 줘” 라고 하면, API 호출 → 집계 → 차트 → HTML 리포트까지 한 번에 나옵니다. 중간에 분류 기준이 틀렸던 걸 발견해서 고친 과정이 이 사례의 핵심입니다.

Gmail 행사 등록 메일을 Ask Gemini로 구글 캘린더에 등록하기

Fri, 11 Sep 2026 00:00:00 +0900

어떤 문제를 해결하나

행사 등록 확인 메일에는 늘 같은 정보가 들어 있습니다 — 행사명, 날짜, 시작/종료 시각, 장소(또는 온라인 링크). 그런데 이걸 캘린더에 넣으려면 메일과 캘린더 창을 오가며 제목을 복사하고, 시간대를 환산하고, 링크를 붙여넣어야 합니다. 메일 하나에 1~2분, 한 주에 몇 건씩 쌓이면 무시 못 할 시간입니다.

Chrome의 Ask Gemini는 지금 보고 있는 탭의 내용을 읽을 수 있고, Google Calendar 확장을 호출할 수 있습니다. 그래서 “현재 일정을 구글 캘린더에 추가” 한 줄이면 메일 → 일정 등록이 끝납니다.

공유 카드(OG 이미지) 한글 깨짐을 브랜드 카드로 고치기

Fri, 11 Sep 2026 00:00:00 +0900

어떤 문제를 해결하나

사이트 링크를 카카오톡·슬랙·X에 붙이면 미리보기 카드가 뜹니다. og:image 메타 태그가 가리키는 이미지입니다. 이 사이트의 테마(Lotus Docs)는 페이지마다 제목·설명을 얹은 카드를 자동으로 만들어 주는데, 영문 폰트(Poppins)만 들어 있어서 한글이 전부 □로 깨지고, 제목이 길면 설명과 겹칩니다.

디자이너에게 카드 템플릿을 부탁하고 페이지마다 이미지를 만들어 넣는 대신, Claude Code에 “한글 깨지는 OG 카드 고쳐 줘” 라고 했습니다. 결과는 한글 폰트 + 브랜드 베이스 카드 + 테마 파티셜 오버라이드 — 페이지가 늘어나도 손댈 게 없습니다.

매뉴얼의 사전 준비 항목을 공식 도움말로 검증하기

Fri, 11 Sep 2026 00:00:00 +0900

어떤 문제를 해결하나

사용법 매뉴얼은 대개 써 본 기억으로 씁니다. 그래서 “확장을 켜야 한다” 처럼 대충 맞는 말이 들어가고, 공식 명칭이 아니라 나중에 검색해도 안 나옵니다. “Workspace 확장” 이 정확히 어디서 켜는 무엇인지, 회사 계정에서는 왜 안 되는지, 시크릿 창에서는 되는지 — 한 번은 공식 문서와 대조해야 합니다.

직접 하면 도움말 사이트를 뒤지고, 해당 문단을 찾고, 내 글과 비교해서 고치는 데 20~30분입니다. Claude Code에 “내 매뉴얼의 사전 준비 항목이 공식 도움말과 맞는지 확인해 줘” 라고 하면, 검색 → 페이지 읽기 → 대조 → 수정까지 한 턴에 끝납니다.

모바일 화면을 캡처로 확인하며 CSS 고치기

Fri, 11 Sep 2026 00:00:00 +0900

어떤 문제를 해결하나

문서 사이트는 대개 데스크톱에서 만들고 데스크톱에서만 봅니다. 그런데 링크를 받는 쪽은 절반이 폰입니다. “모바일에서 이상하지 않아?” 를 확인하려면 폰을 꺼내거나 개발자 도구로 폭을 바꿔 가며 스크롤해야 하고, 그러다 보면 안 합니다.

Claude Code는 화면을 볼 수 있습니다. 로컬 서버를 띄우고 브라우저 창을 폰 폭으로 좁힌 뒤 캡처해서 Claude에게 보여 주면, 문제를 찾고 CSS를 고치고 다시 캡처해서 전후를 비교하는 것까지 대화 안에서 돌아갑니다.

사전 준비

로컬에서 띄울 수 있는 사이트 (hugo server, npm run dev 등)
Claude Code 데스크톱 앱 + 화면 기록 권한 (캡처 방법 참고)
Chrome. 창 폭을 AppleScript 로 바꿀 수 있어서 개발자 도구 없이 폰 폭을 만들 수 있습니다

단계별 사용법

폰 폭으로 창을 좁혀 첫 화면을 찍는다

입력 프롬프트

 hugo server 띄우고 Chrome 창을 430px 폭으로 좁혀서 유스케이스 페이지를 찍어 봐. 모바일에서 이상한 데 있으면 고쳐.

Claude는 서버를 백그라운드로 띄우고, Chrome 새 창을 만들어 폭을 지정한 뒤 캡처합니다.

이 저장소 사용법

Mon, 01 Jan 0001 00:00:00 +0000

세 가지 경로로 같은 사례에 닿습니다

사례 하나는 카테고리 · 도구 · 난이도 · 태그 네 축으로 동시에 분류됩니다. “무슨 일을 하려는지"로 찾을 때와 “어떤 도구를 쓰는지"로 찾을 때 접근 경로가 다르기 때문입니다.

이렇게 생각날 때	이리로
“메일에서 일정 뽑는 거 어떻게 했더라”	카테고리 → 업무 자동화
“Ask Gemini로 뭘 할 수 있지”	도구별 → Chrome Ask Gemini
“그때 그 프롬프트”	좌측 상단 검색 (`Ctrl`/`⌘` + `K`)

각 사례 페이지의 구조

모든 유스케이스 페이지는 같은 순서를 따릅니다. 순서가 고정이라 필요한 부분만 건너뛰며 읽을 수 있습니다.

유스케이스 추가하기

Mon, 01 Jan 0001 00:00:00 +0000

한 줄 요약

스크립트로 폴더를 만들고 → 캡처 PNG를 그 폴더에 넣고 → 본문을 채우고 → 푸시합니다.

1. 사례 폴더 만들기

 ./scripts/new-usecase.sh <카테고리> <영문-슬러그> "<한글 제목>"

예를 들어 업무 자동화 카테고리에 슬랙 요약 사례를 만든다면:

 ./scripts/new-usecase.sh automation slack-daily-digest "슬랙 채널 하루치 요약하기"

content/docs/usecases/automation/slack-daily-digest/index.md 가 템플릿과 함께 생성됩니다.

사용 가능한 카테고리 폴더:

폴더	카테고리
`automation`	업무 자동화
`writing`	문서·글쓰기
`coding`	코딩·개발
`data`	데이터·분석
`media`	이미지·영상
`research`	리서치·학습

info

폴더 이름(슬러그)은 **영문 소문자와 하이픈**만 씁니다. URL이 되기 때문입니다. 제목은 한글로 자유롭게 쓰세요.

2. 캡처 이미지를 폴더에 넣기

만들어진 폴더에 PNG를 그대로 복사합니다. 별도 등록 과정이 없습니다 — 같은 폴더에 있으면 참조됩니다.

유스케이스 템플릿

Mon, 01 Jan 0001 00:00:00 +0000

./scripts/new-usecase.sh 가 아래 내용으로 파일을 만들어 줍니다. 손으로 만들 때는 이걸 복사하세요.

 ---
title: "제목 — 무엇을 하는지 한 줄로"
description: "검색 결과와 카드에 보이는 한 문장 설명"
weight: 10
date: 2026-01-01
lastmod: 2026-01-01
icon: "bolt"
usecase: true
categories: ["업무 자동화"]
tools: ["도구 이름"]
difficulty: "초급"
duration: "5분"
tags: ["키워드"]
---

## 어떤 문제를 해결하나

원래 어떻게 하던 일인지, 뭐가 불편했는지 2~3문단.

## 사전 준비

- 필요한 계정 / 권한 / 확장

## 단계별 사용법

{{< step title="첫 단계" image="01-xxx.png" caption="캡처 설명" >}}
무엇을 눌렀는지까지 적습니다.
{{< /step >}}

{{< step title="두 번째 단계" image="02-xxx.png" >}}
{{< prompt title="입력 프롬프트" >}}
실제로 입력한 프롬프트 원문
{{< /prompt >}}
{{< /step >}}

## 결과

뭐가 달라졌는지. 가능하면 시간으로.

## 주의사항

- 어디서 틀렸는지, 무엇을 확인해야 하는지

## 응용

- 같은 패턴이 먹히는 다른 상황

AI Usecases

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

어떤 문제를 해결하나 link

GitHub 커밋 활동을 API로 모아 리포트 만들기

어떤 문제를 해결하나 link

Gmail 행사 등록 메일을 Ask Gemini로 구글 캘린더에 등록하기

어떤 문제를 해결하나 link

공유 카드(OG 이미지) 한글 깨짐을 브랜드 카드로 고치기

어떤 문제를 해결하나 link

매뉴얼의 사전 준비 항목을 공식 도움말로 검증하기

어떤 문제를 해결하나 link

모바일 화면을 캡처로 확인하며 CSS 고치기

어떤 문제를 해결하나 link

사전 준비 link

단계별 사용법 link

폰 폭으로 창을 좁혀 첫 화면을 찍는다

이 저장소 사용법

세 가지 경로로 같은 사례에 닿습니다 link

각 사례 페이지의 구조 link

유스케이스 추가하기

한 줄 요약 link

1. 사례 폴더 만들기 link

2. 캡처 이미지를 폴더에 넣기 link

유스케이스 템플릿

어떤 문제를 해결하나

어떤 문제를 해결하나

어떤 문제를 해결하나

어떤 문제를 해결하나

어떤 문제를 해결하나

어떤 문제를 해결하나

사전 준비

단계별 사용법

세 가지 경로로 같은 사례에 닿습니다

각 사례 페이지의 구조

한 줄 요약

1. 사례 폴더 만들기

2. 캡처 이미지를 폴더에 넣기