screen-record: 공개 웹페이지 조작 녹화 (Reel 소재)
Josh 2026-10-11 승인 설치, 용도는 단 하나: 공개 웹페이지의 조작 화면을 녹화하여 IG Reel의 영상 소재로 사용합니다. 발행流程은 전혀 변경되지 않으며 (IG/Threads는 기존 box 브라우저 방식을 그대로 사용), 이 도구는 발행을 건드리지 않습니다.
하드 규칙 (매번 준수)
- 매번 완전히 새롭고, 임시이며, 메모리 내에서만 동작하는 브라우저를 사용합니다 (
chromium.launch()+newContext(),userDataDir사용 금지). - 절대 box에 이미 로그인된 브라우저 프로필을 가리키지 않습니다. 절대
--extension,attach, CDP/wsEndpoint를 사용하여 box 브라우저에 연결하지 않습니다. 절대 쿠키나 storageState를 로드하지 않습니다.--persistent/--profile을 사용하지 않습니다. - 어떤 웹사이트에도 로그인하지 않고, 텍스트를 입력하지 않으며, 양식을 제출하지 않고, 게시물을 작성하지 않으며, 댓글을 달거나 좋아요를 누르지 않습니다.
- 공개 페이지만 녹화합니다 (http/https, localhost/내부 네트워크는 금지). IG, Threads, FB는 '로그인하지 않은' 상태에서 공개 페이지만 볼 수 있으며, 로그인 장벽이 나타나면 소스를 변경하고 로그인을 시도하지 않습니다.
- record.mjs에는 내장 보호 기능이 있습니다: spec에 storageState/cookies/userDataDir/profile/cdp/extension/login/password/fill/type 등 필드가 있으면 직접 거부합니다. 모든 POST/PUT/PATCH/DELETE 요청은 차단됩니다 (로그에
blocked POST ...가 나타나는 것은 정상입니다). 양식 제출 버튼 클릭을 거부합니다. http(s)가 아니거나 내부 네트워크 URL은 거부합니다. - 보호 기능을 우회하기 위해 record.mjs를 수정하지 마십시오. 로그인 후 화면이 정말 필요하다면, 멈추고 Josh에게 문의하십시오.
설치됨
- Playwright (Node 라이브러리) 1.64.0: 이 폴더
node_modules/에 설치됨 (Apache-2.0) - Playwright CLI
@playwright/cli0.1.22: 전역 명령어playwright-cli(~/.local/bin, Apache-2.0). 기본 세션은 메모리 프로필이며, 임시로 수동으로 페이지를 보고 스크린샷을 찍을 수 있습니다. 절대--persistent,--profile,attach --extension을 추가하지 마십시오. - Chromium:
npx playwright install chromium(~/.cache/ms-playwright/chromium-1248, chromium_headless_shell-1248) - @playwright/mcp는 설치되지 않음 (CLI + 이 스크립트로 충분하며, Microsoft도 에이전트에 CLI 사용을 권장합니다).
사용법
cd <SKILLS_DIR>/screen-record
node record.mjs spec.json # spec.out으로 출력
node record.mjs spec.json --out /path/x.mp4
./contact_sheet.sh x.mp4 x_sheet.jpg 4 3 # 4x3 썸네일 조합, Read로 확인
예제: examples/playwright-mcp.json (테스트 영상: <YOUR_WORKSPACE>/media-team/03-drafts/screen-record-test/test.mp4, 19.8초, 4.1 MB).
spec.json
{
"url": "https://github.com/microsoft/playwright-mcp",
"out": "<YOUR_WORKSPACE>/media-team/03-drafts/<주제>/work/screen/clip01.mp4",
"viewport": {"width": 720, "height": 1280},
"outSize": {"width": 1080, "height": 1920},
"hide": [".cookie-banner"],
"steps": [
{"action": "chapter", "title": "Playwright MCP", "description": "github.com/microsoft/playwright-mcp", "ms": 2200},
{"action": "scroll", "by": 500, "ms": 2000},
{"action": "scroll", "role": "heading", "name": "Key Features", "ms": 2000},
{"action": "highlight", "role": "heading", "name": "Key Features", "label": "Key Features", "ms": 2500},
{"action": "hover", "text": "Getting started"},
{"action": "click", "text": "Apache-2.0 license"},
{"action": "goto", "url": "https://playwright.dev"},
{"action": "wait", "ms": 1000}
]
}
- 요소 찾기 세 가지 방법:
selector(CSS),role+name(가장 안정적),text(exact추가 가능). scroll:by픽셀, 또는to/role/text를 사용하여 특정 요소로 스크롤 (offset기본값은 상단에서 25%),ms스크롤 시간 (ease in-out).highlight: 노란색 테두리 + 선택적 레이블,ms후 제거.chapter: Playwright 네이티브 챕터 카드 (흐림 배경 + 제목).click,hover: Playwright 네이티브 showActions: 애니메이션 커서 + 대상 테두리 + 동작 설명 ("showActions": false로 끌 수 있음).- 기타 옵션:
fps(기본값 30),crf(기본값 23),mobile(모바일 시뮬레이션),colorScheme,locale,tail,keepWebm.
화면 크기
Playwright의 screencast는 CSS 픽셀로 녹화합니다 (deviceScaleFactor는 영상에 반영되지 않음). 따라서:
- 기본값 viewport 720x1280으로 녹화한 다음 lanczos로 1080x1920으로 확대: 큰 휴대폰 같은 레이아웃, 글자가 충분히 크며, 화질은 약간 부드럽지만 Reel에 충분합니다.
- 가장 선명하게:
"viewport": {"width":1080,"height":1920}(데스크톱 레이아웃, 글자가 더 작음). - 가로로 녹화한 다음 세로로 자르기:
"viewport": {"width":1280,"height":720}, "cropTo916": true("cropX": 200으로 자르기 시작점 지정 가능). 출력은 여전히 1080x1920이지만 가운데 부분만 유지되며, 일반적으로 세로 viewport를 직접 사용하는 것만 못합니다.
완성 영상에 포함하기
- stock-footage-reel: shots.json의 해당 샷에
"pick": {"source":"file","path":"/abs/clip01.mp4","license":"<사이트>의 스크린 레코딩","author":"<사이트 소유자>"} - OpenMontage (openmontage-house 경유): 로컬 클립으로素材 목록에 추가하거나, screen-demo流程의 실녹화 소스로 사용.
- 본가 규칙 그대로: 세로 1080x1920, Sarah Explains 내레이션, 번체 중문 자막 + 작은 영어 자막, B컷 Vox 표지, IG 완성 영상 45 MB 이하.
- credits.json에 한 줄 추가:
{"source":"screen-record","credit":"<사이트>의 스크린 레코딩","url":"<URL>","recorded":"YYYY-MM-DD"}; 영상末尾 출처를 "<사이트>의 스크린 레코딩"으로 표시. - 녹화 대상은 타사 웹사이트: 소개/리뷰 용도로만 사용하며, 개인정보, 타인 쪽지, 페이월 콘텐츠는 녹화하지 마십시오.