화면 녹화은(는) 무엇을 하나요?
Chrome의 screencast는 브라우저 자체를 녹화하여 60fps H.264 .mp4로 재구성합니다. 자막, 커서, 줌 및 사운드는 이후에 추가되므로 페이지가 어떤 작업을 하든 영상이 부드럽게 유지됩니다.
스크립트는 현재 저장소의 node_modules에서 playwright를 확인하므로 저장소 루트에서 실행하세요. <skill-dir>은 이 스킬의 폴더입니다.
0. 먼저 물어보기
요청에 이미 명시되지 않은 경우, 한 메시지에 다음을 물어보세요:
- 어떤 이야기인가요? 어떤 앱과 URL, 어떤 페이지, 시청자가 봐야 할 3~6개의 장면. 누가 시청하나요 (팀원, 리뷰어, 고객)?
- 음성? 자막만, 아니면 내레이션 (AI 음성 해설)? 고객용 비디오는 항상 내레이션이 있습니다.
- 어디로 보내나요?
.mp4파일만 (기본값), GitHub PR 또는 이슈, Linear 이슈, Slack, 또는 다른 곳. PR/이슈/채널을 물어보세요. 다른 사람을 대신해 티켓을 생성하지 마세요. - 어떤 데이터? 어떤 로컬 DB 또는 계정으로 녹화할지. 절대 프로덕션, 절대 실제 고객 데이터를 사용하지 마세요.
1. 녹화
-
앱을 로컬에서 실행하고 각 페이지를 먼저 한 번씩 열어보세요: 그렇지 않으면 개발 서버의 첫 번째 컴파일이 비디오에 포함됩니다.
-
scripts/record-lib.mjs를 기반으로 흐름 스크립트를 작성하세요 (examples/playwright-site/flow.mjs를 복사하세요. 공개 사이트의 실행 가능한 예제입니다).step(id, caption, action)(또는caption()만)을 사용하여 각 단계마다 하나의 자막 줄을 화면에 표시합니다: 하단 중앙, 플레이어의 재생 막대 위, 반투명 (captionStyle: 'top'은 배너). 약 1분 정도로 유지하세요. 흐름의click(locator)/hover(locator)를 사용하여 클릭하세요.locator.click()를 사용하지 마세요. 그러면 그려진 커서가 먼저 대상으로 이동합니다.locator.click()만 사용해도 작동하지만 커서가 순간이동합니다.zoom(locator, { scale })은 대상으로 부드럽게 확대되고,unzoom()은 다시 축소되며,click(locator, { zoom: true })는 클릭 전에 확대합니다. 확대 상태는 이동할 때까지 유지됩니다. 확대된 보기 외부를 클릭하면 먼저 그쪽으로 이동합니다.확대 예산: 사람이 몸을 숙이는 것처럼 느껴져야 하지, 반사 신경처럼 느껴져서는 안 됩니다.
- 작은 텍스트가 핵심일 때만 확대하세요: diff, 변경된 값, 대화상자의 메시지. 탐색, 메뉴 열기, 누구나 볼 수 있는 버튼 누르기에는 절대 사용하지 마세요.
- 약 15~20초에 한 번 정도 확대하세요. 연속으로 두 번: 그 사이에 이동하세요 (다음 대상에서
zoom호출) 축소 후 다시 확대하지 마세요. - 동일한 영역에서 다음 작업이 발생하는 동안 확대 상태를 유지하고, 이야기가 다른 곳으로 이동할 때
unzoom()하세요. - 배율 1.3~1.5. 단일 아이콘과 같이 아주 작은 경우에만 2로 가세요. 최소 2초 이상 유지하세요.
- 확대보다는 내레이션을 통한 일시 정지를 선호하세요: 전체 크기에서도 줄이 잘 읽히면 확대하지 마세요.
type(locator, text, { clear })로 입력하세요: 사람의 속도로 입력합니다.click과type은 각 클릭과 키 입력을<video>.sfx.json에 기록하고narrate.mjs는sounds/의 녹음된 마우스 클릭 및 기계식 키보드 샘플을 음성 아래에 배치합니다.SFX_VOLUME이 크기를 조정합니다 (기본값 1),SFX=0은 없음.page.keyboard.type과locator.click()은 소리를 내지 않습니다. -
node flow.mjs는.mp4경로를 출력합니다. ffmpeg가 필요합니다 ($FFMPEG또는 PATH에; ffmpeg가 없으면?npm i --prefix <scratch> ffmpeg-static).
품질
record(flow, { scale })은 size (기본값 1280×800 CSS px, UI가 정상적으로 보임)로 페이지를 배치하고 scale× 픽셀 밀도로 렌더링합니다: 2 (기본값)은 2560×1600, 3은 3840×2400입니다. 텍스트는 더 선명해지고 작아지지 않습니다. 2에서 분당 약 15–40 MB, 3에서 2–3배 정도 예상하세요. 크기 제한이 있는 대상 (GitHub 무료 요금제 10 MB, Slack 미리보기)의 경우 scale: 1 또는 CRF=24를 사용하세요.
내레이션 (음성이 요청된 경우)
script.json을 작성하세요: `[{