화면 녹화 및 데모
스크립트 기반 녹화는 반복 가능합니다. UI가 변경되면 수동으로 다시 녹화하는 대신 스크립트만 다시 실행하면 됩니다.
방법 선택
| 상황 | 방법 |
|---|---|
| 브라우저에서 열 수 있는 웹 앱 | Playwright 스크립트 녹화 |
| 데스크탑 앱 또는 전체 화면 워크플로우 | OS 레코더 (OBS Studio, Windows Game Bar, macOS 스크린샷) |
| 앱 소스가 있고 깔끔하고 버그 없는 결과를 원할 때 | Remotion에서 정적 컴포넌트로 화면 재구축 (remotion-programmatic-video 참조) |
| CLI | 터미널 레코더 (asciinema, VHS) 또는 애니메이션 터미널 컴포넌트 |
Playwright 녹화 (Python)
pip install playwright && playwright install chromium
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
ctx = browser.new_context(
viewport={"width": 1920, "height": 1080},
record_video_dir="recordings/",
record_video_size={"width": 1920, "height": 1080},
)
page = ctx.new_page()
page.goto("https://example.com")
page.wait_for_load_state("networkidle")
page.wait_for_timeout(800) # 시청자가 읽을 시간
page.get_by_role("button", name="Sign in").click()
page.get_by_label("Email").type("[email protected]", delay=60) # 눈에 보이는 타이핑
page.wait_for_timeout(1200)
ctx.close() # 비디오는 종료 시 최종화됨
browser.close()
출력은 WebM입니다. 변환:
ffmpeg -i recordings/xyz.webm -c:v libx264 -crf 18 -pix_fmt yuv420p -r 30 out/demo.mp4
멋지게 보이게 만들기
- 데모 데이터: 시드(seeded) 데모 계정을 사용하여 실제와 유사하지만 민감하지 않은 데이터를 사용하세요. 실제 고객 데이터, 토큰 또는 이메일을 절대 녹화하지 마십시오.
- 창: 고정된 1920x1080 뷰포트, 북마크 바와 알림 숨기기, 가벼운 확대(110~125%)로 텍스트를 휴대폰에서도 읽을 수 있게 하세요.
- 속도: 각 동작 후 0.5~1초 일시 중지. 지연을 두고 입력하세요. 즉각적인 점프를 피하세요.
- 커서: Playwright는 커서를 그리지 않습니다. 작은 DOM 커서를 주입하거나, 사후 처리(Remotion 또는 오버레이)에서 추가하세요.
- 결정론: 고정된 대기 시간 대신
expect(locator).to_be_visible()을 기다린 후, 시청자를 위해 의도적인 일시 중지를 추가하세요. - 비밀: 페이지 스크립트에서 필드를 흐리게 처리하거나 마스킹하세요 (
page.add_style_tag).
사후 제작
# 불필요한 시간 자르기: 12초에서 41초 유지
ffmpeg -ss 12 -i demo.mp4 -t 29 -c:v libx264 -crf 18 out/trimmed.mp4
# 지루한 대기 시간 가속화 (예: 20초에서 30초 구간을 4배) 분할 필요; 가장 간단한 방법은 자르고, 속도 조절하고, 다시 합치는 것
# 영역 확대: 자른 후 크기 조정 (소스 픽셀 기준 x:y:w:h)
ffmpeg -i demo.mp4 -vf "crop=960:540:480:270,scale=1920:1080" out/zoom.mp4
부드러운 애니메이션 줌/팬을 커서 따라가게 하려면 Remotion을 사용하세요 (scale 및 translate에 interpolate 사용).
내레이션 동기화
- 먼저 스크립트를 작성하고 (
video-planning), 음성 해설을 녹음하세요 (voiceover-tts). - 화면을 녹화한 후, 각 동작이 해당 문장에 맞도록 장면별 속도를 조정하세요.
속도 = 녹화된_초 / 내레이션_초를 계산합니다. ffmpeg-essentials속도 레시피를 사용하거나, 컴포지션 내에서 시간을 다시 조정하세요.
체크리스트
- 개인 데이터, API 키 또는 내부 URL이 보이지 않아야 합니다.
- 텍스트는 1080p에서 휴대폰 화면 크기로 확대했을 때 읽을 수 있어야 합니다.
- 1초 이상 지속되는 로딩 스피너가 남아 있지 않아야 합니다.
- 원하지 않으면 시스템 오디오를 음소거합니다.