Communitygithub.com

Scrawl 캡처 분석

Scrawl 화면 캡처를 읽고 분석합니다. 사용자가 녹화한 화면, 음성, 클릭, 빨간 펜 표시를 상세히 검토하여 버그 리포트나 문제를 시각적으로 이해합니다.

Scrawl 캡처 분석란 무엇인가요?

이 스킬은 Scrawl 앱으로 생성된 `.scrawl` 번들(화면 녹화, 음성, 클릭, 빨간 잉크 표시가 포함된 폴더)을 분석하는 데 사용됩니다. 사용자가 문제를 글로 설명하는 대신 캡처를 보내면, AI는 이 스킬을 통해 캡처를 자세히 읽고 응답합니다. 지원하는 플랫폼은 macOS이며, `scrawl` CLI 도구를 통해 특정 순간 확대, 프레임 추출, 캡처를 세션에 전송하거나 비디오로 내보낼 수 있습니다. 주요 기능으로는 `zoom` 명령어로 키프레임 사이의 동작(애니메이션, 깜빡임)이나 마크가 가리키는 부분을 명확히 볼 수 있으며, `inspect`로 요약 및 JSON 메타데이터 확인, `send`로 OpenCode 세션에 전달, `export`로 MP4로 저장이 가능합니다. 번들 내 `contact-sheet.png`, `frames/` 폴더, `scrawl.json` 파일을 직접 읽을 수도 있습니다.

지원 대상~Claude Code~Codex CLI✓Cursor✓OpenCode
npx skills add https://github.com/huaxel/dotfiles/tree/main/skills/scrawl

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

Scrawl 캡처

Scrawl은 누군가의 화면, 음성, 클릭, 빨간 잉크를 기록한 후 결과를 .scrawl 폴더(번들)로 패키징합니다. 사용자는 문제를 설명하는 대신 이 캡처를 보내며, 캡처 자체가 버그 리포트입니다. 답변하기 전에 캡처를 자세히 읽고, 캡처에 이미 보이는 내용에 대해 다시 설명을 요구하지 마세요. 불명확한 부분이 있으면 먼저 scrawl zoom으로 더 자세히 살펴보세요.

붙여넣기 형태

[scrawl 0:33 · OpenCode "Settings" · /Users/me/Library/Application Support/scrawl/captures/scrawl-1792432139176.scrawl]
Open contact-sheet.png and frames/ in that folder before changing anything: the marks and words only make sense on the images, which can show more than the text does.
Cropped to: the activity in OpenCode (full frames in frames-full/)
- #1 (0:04) [clicked "New tab"] "Command T makes a new session, but here it should make a tab."
- #2 (0:07) "No, it doesn't."
- #3 (0:10) ⚑ "It says command shift B makes a new tab."
- #4 (0:18) clicked (x 0.51, y 0.93)
  • 첫 번째 줄에는 길이, 기록된 앱과 창, 번들 경로가 있습니다.
  • 다음 줄은 먼저 이미지를 열도록 요청합니다. 그렇게 하세요: 텍스트는 말하고 행한 것만을 나타내며, 문제가 표시되거나 언급되지 않은 프레임에 나타날 수 있습니다.
  • 각 #N (M:SS) 줄은 키프레임입니다: 대괄호 안에 그 순간에 수행한 동작, 그 다음 화면에 있는 동안 말한 내용입니다. 인용문이 없는 줄은 동작만 있습니다.
  • ⚑은 그 순간을 의도적으로 표시했음을 의미합니다. ⟨Name⟩은 앱이 새 화면을 보고했음을 의미합니다. ·로 시작하는 줄은 앱이 기록한 이벤트 또는 값입니다.
  • 상단 근처의 선택적 줄: For session: (Scrawl이 보낸 위치), Screen: (앱 컨텍스트 포함), Note:, Cropped to:.
  • 좌표는 캡처된 영역의 분수이며, 왼쪽 상단에서 시작합니다 (x 0.51은 중앙 바로 오른쪽).

답변할 때는 "#3 (0:10)"과 같은 방식으로 순간을 참조하여 상대방이 접촉 시트에서 찾을 수 있도록 하세요.

번들 읽기

  1. 번들에서 contact-sheet.png를 먼저 보세요 (종종 이미 첨부되어 있습니다). 모든 키프레임을 시간 순서대로 왼쪽에서 오른쪽, 위에서 아래로 보여주며, 각 키프레임에는 모서리 상단에 작은 흰색 칩에 번호 N이 있습니다 (summary.md의 #N).
  2. 옆에 있는 대본 줄을 읽으세요. 음성 인식은 이름과 코드 용어를 잘못 알아듣는 경우가 있으므로, 두 정보가 다를 때는 화면을 신뢰하세요.
  3. 필요한 키프레임의 전체 크기 이미지는 frames/frame-NN.png를 여세요 (frame-03.png는 #3). 요약이 Cropped to:라고 하면, 자르지 않은 화면은 frames-full/에 있습니다.

그림의 의미:

  • 빨간 선, 원, 밑줄, 화살표는 사용자의 표시이며, 문제를 가리킵니다. 같은 화면에 그려진 표시는 모두 하나의 키프레임에 나타납니다. 여러 개가 있을 때 텍스트는 그리기 순서대로 번호를 매깁니다 (✎① 0:06 …, ✎② 0:09 …); 이미지는 잉크만 보여주므로, scrawl zoom --mark를 사용하여 각 잉크가 무엇인지 확인하세요.
  • 커서 주변의 잔물결은 클릭 또는 탭을 나타내고, 손가락 자국은 스와이프를 나타냅니다.
  • 점점 가늘어지는 빨간 빛나는 자국은 레이저 포인터로, 표시를 남기지 않고 가리키는 데 사용됩니다.

기타 파일: scrawl.json은 전체 매니페스트입니다 (키프레임, 모양과 상자가 있는 marks, events, 시간이 포함된 transcript.words, 앱 context, autocrop). recording.mp4 또는 recording.mov와 audio.wav는 원본 미디어입니다. .media-pending 파일은 비디오가 다른 Mac에서 아직 복사 중임을 의미합니다.

scrawl CLI

scrawl은 Scrawl 앱 자체의 바이너리입니다. command -v scrawl이 아무것도 찾지 못하면 /Applications/Scrawl.app/Contents/MacOS/scrawl (또는 ~/Applications 아래 동일 경로)를 사용하고, Scrawl의 설정 › 에이전트에서 설치하여 PATH에 추가할 수 있다고 사용자에게 알리세요. Scrawl이 설치된 Mac에서만 실행됩니다. 다른 곳에서는 contact-sheet.png, frames/ 및 scrawl.json을 직접 읽으세요. 모든 명령은 번들 경로를 인수로 받으며, 대부분 기본값으로 최신 캡처인 latest를 사용합니다. 경로를 따옴표로 묶으세요. 일반적으로 Application Support가 포함되어 있기 때문입니다.

특정 순간 자세히 보기

문제가 움직임(애니메이션, 점프, 깜빡임)이거나 키프레임 사이에 발생하거나, 표시가 가리키는 부분을 알 수 없을 때 zoom을 사용하세요:

scrawl zoom <bundle> --at 0:21                 # 시간, M:SS 또는 초
scrawl zoom <bundle> --at "the width changes"  # 또는 그들이 말한 구문
scrawl zoom <bundle> --at 0:21 --span 1 --frames 16 --full
scrawl zoom <bundle> --mark 2                  # 텍스트에 ✎②로 표시된 마크
scrawl zoom <bundle> --mark 1 --frame 4        # 여러 키프레임에 ✎①이 있을 때 키프레임 #4의 ✎①

이 명령은 해당 순간 주변의 프레임 PNG 시트 경로, 각 셀의 시간, 말한 내용을 출력합니다. PNG를 열고 피드백에 따라 행동하기 전에 살펴보세요. --span은 포함되는 초 수(기본값 2, 순간 이전의 1/4), --frames는 셀 수(기본값 12), --full은 자르기 대신 전체 화면을 표시합니다. 셀은 시트 내에서 #1부터 번호가 매겨지므로, 이 번호는 키프레임 번호가 아닙니다.

--mark는 텍스트의 마크 번호 또는 해당 ID (m2)를 받아 마크가 그려진 시간을 중심으로 시트를 배치하고, 해당 마크의 잉크만, 시작 순간부터 전체 그려진 상태로 표시합니다. scrawl inspect <bundle> --marks는 모든 마크를 나열합니다 (#2 ✎② 0:09 marked (2 strokes) · m2: 키프레임, 번호, 시간, 모양, 그려진 대상, ID), --marks --json은 동일한 정보를 JSON으로 제공합니다.

기타 명령

scrawl inspect <bundle>               # summary.md, 위 텍스트
scrawl inspect <bundle> --json        # scrawl.json
scrawl inspect <bundle> --marks       # 마크, 텍스트와 같이 번호가 매겨짐 [--json]
scrawl frames <bundle> --from 0:04 --to 0:06 [--fps 4]   # 범위의 일반 PNG; 경로 출력
scrawl send <bundle> --session ses_…  # 캡처를 OpenCode 세션에 대기열에 추가
scrawl send <bundle> --clipboard      # 요약 텍스트를 클립보드에 복사
scrawl export <bundle> [--out demo.mp4] [--zoom] [--crop auto|full|x,y,w,h] [--size 1920]
  • zoom과 frames는 <bundle>/zoom/에 씁니다. 번들의 나머지 부분은 그대로 두세요. Scrawl이 해당 파일을 관리하고 정리하기 때문입니다.
  • --session 없이 send를 사용하면 캡처가 지정된 세션(For session: 줄)으로 전송되고, 그렇지 않으면 가장 최근 활성 세션으로 전송됩니다. 기록된 대상이 있는 경우 --reroute를 전달하지 않으면 다른 --session을 거부하므로, 다시 라우팅하기 전에 사용자와 확인하세요.
  • export는 잉크와 클릭이 포함되고 오디오가 동기화된 하나의 .mp4를 씁니다 (기본값 ~/Movies/Scrawl/<bundle>.mp4). --zoom은 활동을 향해 부드럽게 확대됩니다. --no-ink, --no-clicks, --hevc 및 --fps도 사용 가능합니다.
  • 비디오와 오디오는 사용자가 설정에서 변경하지 않는 한 캡처 후 7일이 지나면 휴지통으로 이동합니다. 그 이후에는 zoom, frames, export가 비디오를 읽을 수 없지만, frames/, 접촉 시트 및 scrawl.json은 남아 있습니다.
  • scrawl <command> --help는 모든 플래그를 나열하고, scrawl skill은 설치된 버전이 알고 있는 이 가이드를 출력합니다.

관련 스킬